by default. We need that wrapper to disappear from layout so `position: sticky` on .site-header pins relative to , not the (header-tall) wrapper div. */ .wp-block-template-part { display: contents; } /* Main content area gets the page background so it sits cleanly over the dark chosen above (which exists to suppress the white inter-page flash on navigation). */ .site-main { background: var(--color-white); } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover, a:focus { color: var(--color-accent); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ========================================================================= 3. Typography ========================================================================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary); margin-bottom: var(--space-md); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-base); } p { margin-bottom: var(--space-md); color: var(--color-text); } .lead { font-size: var(--font-size-lg); color: var(--color-text-light); } /* ========================================================================= 4. Layout primitives ========================================================================= */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--container-padding); } .section { padding-block: var(--space-2xl); } .section--light { background: var(--color-light); } .section--primary { background: var(--color-primary); color: var(--color-white); } .section--primary h1, .section--primary h2, .section--primary h3, .section--primary h4 { color: var(--color-white); } /* * Decorative shelf band — paints a charcoal band along the bottom of a * light-toned section so it bleeds into the next dark section. Mirrors * the editorial "shelf" pattern from Normandy. Reusable; apply by adding * `section-shelf-bottom` to the section element. */ .section-shelf-bottom { position: relative; overflow: hidden; } .section-shelf-bottom::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: var(--color-primary); z-index: 0; pointer-events: none; } .section-shelf-bottom > * { position: relative; z-index: 1; } @media (max-width: 768px) { .section-shelf-bottom::after { height: 36px; } } /* ========================================================================= 5. Buttons ========================================================================= */ .btn, .btn-primary, .btn-secondary, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem 2rem; font-family: var(--font-heading); font-size: var(--font-size-base); font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn-primary, .wp-block-button__link { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn-primary:hover, .btn-primary:focus, .wp-block-button__link:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn-secondary:hover, .btn-secondary:focus { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn-outline:hover, .btn-outline:focus { background: var(--color-primary); color: var(--color-white); } /* ========================================================================= 6. Forms ========================================================================= */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select { width: 100%; padding: 0.75rem 1rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18); } label { display: block; margin-bottom: var(--space-sm); font-weight: 600; color: var(--color-primary); } /* ========================================================================= 7. Utility classes ========================================================================= */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-primary); } .text-accent { color: var(--color-accent); } .text-light { color: var(--color-text-light); } .text-white { color: var(--color-white); } .bg-white { background: var(--color-white); } .bg-light { background: var(--color-light); } .bg-primary { background: var(--color-primary); color: var(--color-white); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .flex { display: flex; gap: var(--space-md); } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-lg); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-md { margin-top: var(--space-md); } .mb-md { margin-bottom: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-lg { margin-bottom: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-xl { margin-bottom: var(--space-xl); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } /* Accessibility: honor reduced motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= 8. Site chrome (header, nav, footer, skip link) ========================================================================= */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; background: var(--color-white); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); z-index: 999; } .skip-link:focus { left: var(--space-md); top: var(--space-md); width: auto; height: auto; } /* ========================================================================= HEADER Top bar (credentials + phone) + sticky main header with primary nav, dropdown submenus, CTA button, and mobile slide-down panel. ========================================================================= */ /* Top bar --------------------------------------------------------------- */ .top-bar { background: var(--color-primary-dark); color: rgba(255, 255, 255, 0.92); font-size: var(--font-size-sm); padding-block: var(--space-sm); } .top-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } .top-bar__credentials { margin: 0; display: inline-flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; font-weight: 500; letter-spacing: 0.02em; } .top-bar__divider { opacity: 0.45; } .top-bar__phone { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-base); text-decoration: none; transition: color var(--transition); } .top-bar__phone:hover, .top-bar__phone:focus { color: var(--color-accent); } .top-bar__phone-icon { flex-shrink: 0; color: var(--color-accent); transition: transform var(--transition); } .top-bar__phone:hover .top-bar__phone-icon { transform: rotate(-12deg); } /* Main header ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-block: var(--space-sm); box-shadow: var(--shadow-md); transition: padding var(--transition), box-shadow var(--transition), background var(--transition); } .site-header.is-scrolled { padding-block: var(--space-sm); box-shadow: var(--shadow-lg); background: rgba(26, 26, 26, 0.97); backdrop-filter: saturate(140%) blur(6px); } /* Offset sticky header when WP admin bar is present */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* Phone link in header — hidden at top, slides in on scroll */ .site-header__phone { display: none; align-items: center; gap: 0.5rem; color: var(--color-accent); font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-sm); text-decoration: none; white-space: nowrap; transition: color var(--transition); } .site-header__phone:hover, .site-header__phone:focus { color: var(--color-white); } .site-header__phone svg { flex-shrink: 0; } .site-header.is-scrolled .site-header__phone { display: inline-flex; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: nowrap; } .site-branding { display: flex; align-items: center; flex-shrink: 0; } .site-branding .custom-logo-link { display: inline-block; } .site-branding .custom-logo, .site-branding__logo { max-height: 88px; width: auto; height: auto; display: block; transition: max-height var(--transition); } .site-header.is-scrolled .custom-logo, .site-header.is-scrolled .site-branding__logo { max-height: 64px; } .site-branding__logo-link { display: inline-block; line-height: 0; } .site-title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 700; margin: 0; } .site-title a { color: var(--color-primary); } .site-description { margin: 0; color: var(--color-text-light); font-size: var(--font-size-sm); } /* Primary navigation ---------------------------------------------------- */ .main-navigation { display: flex; align-items: center; } .main-navigation__panel { display: flex; align-items: center; gap: var(--space-lg); } .primary-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-lg); } .primary-menu li { position: relative; } .primary-menu a { display: inline-block; font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 600; color: #f5f5f5; padding-block: var(--space-sm); position: relative; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: color var(--transition); } .primary-menu > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--transition); } .primary-menu > li > a:hover, .primary-menu > li > a:focus, .primary-menu .current-menu-item > a, .primary-menu .current_page_item > a, .primary-menu .current-menu-ancestor > a { color: var(--color-accent); } .primary-menu > li > a:hover::after, .primary-menu > li > a:focus::after, .primary-menu .current-menu-item > a::after, .primary-menu .current_page_item > a::after, .primary-menu .current-menu-ancestor > a::after { transform: scaleX(1); } /* Dropdown indicator on parent items */ .primary-menu .menu-item-has-children > a { padding-right: 1.1rem; } .primary-menu .menu-item-has-children > a::before { content: ''; position: absolute; right: 0; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-75%) rotate(45deg); transition: transform var(--transition); } .primary-menu .menu-item-has-children:hover > a::before, .primary-menu .menu-item-has-children:focus-within > a::before { transform: translateY(-25%) rotate(-135deg); } /* Dropdown submenus */ .primary-menu .sub-menu { list-style: none; margin: 0; padding: var(--space-sm) 0; position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--color-white); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 10; } .primary-menu .menu-item-has-children:hover > .sub-menu, .primary-menu .menu-item-has-children:focus-within > .sub-menu, .primary-menu .sub-menu:hover { opacity: 1; visibility: visible; transform: translateY(0); } .primary-menu .sub-menu li { width: 100%; } .primary-menu .sub-menu a { display: block; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-transform: none; letter-spacing: 0; white-space: nowrap; } .primary-menu .sub-menu a:hover, .primary-menu .sub-menu a:focus { background: var(--color-light); color: var(--color-accent-dark); } /* CTA button in header */ .site-header__cta-btn { flex-shrink: 0; padding: 0.75rem 1.5rem; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; } /* Hamburger toggle ------------------------------------------------------- */ .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-sm); background: transparent; transition: background var(--transition), border-color var(--transition); } .menu-toggle:hover, .menu-toggle:focus { background: rgba(255, 255, 255, 0.08); border-color: var(--color-accent); } .menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { display: block; width: 24px; height: 2px; background: #f5f5f5; position: relative; transition: transform var(--transition), top var(--transition), opacity var(--transition); } .menu-toggle__bar::before, .menu-toggle__bar::after { content: ""; position: absolute; left: 0; } .menu-toggle__bar::before { top: -7px; } .menu-toggle__bar::after { top: 7px; } /* Animated X when open */ .menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: transparent; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { top: 0; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar::after { top: 0; transform: rotate(-45deg); } /* Main content */ .site-main { padding-block: var(--space-2xl); } .site-main--full-width { padding-block: 0; } /* Kill WordPress's auto-injected 24px block-gap on top-level site regions and inside the post-content. Sections own their own padding; we don't want white seams between header/main/footer or between adjacent blocks. */ :where(.wp-site-blocks) > *, :where(.wp-site-blocks) > :first-child, :where(.wp-site-blocks) > :last-child, :root :where(.site-main.is-layout-flow) > *, :root :where(.site-main.is-layout-flow) > :first-child, :root :where(.site-main.is-layout-flow) > :last-child, :root :where(.wp-block-post-content.is-layout-flow) > *, :root :where(.wp-block-post-content.is-layout-flow) > :first-child, :root :where(.wp-block-post-content.is-layout-flow) > :last-child { margin-block-start: 0; margin-block-end: 0; } .entry-title { font-size: var(--font-size-4xl); margin-bottom: var(--space-md); } .entry-meta { color: var(--color-text-light); font-size: var(--font-size-sm); margin-bottom: var(--space-lg); } .entry-thumbnail { margin-bottom: var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; } /* Hero */ .hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding-block: var(--space-2xl); text-align: center; } .hero__heading { font-size: var(--font-size-hero); color: var(--color-white); margin-bottom: var(--space-md); } .hero__subheading { font-size: var(--font-size-xl); color: rgba(255, 255, 255, 0.88); max-width: 720px; margin: 0 auto var(--space-xl); } /* Contact page */ .contact-page__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); align-items: start; } .contact-info-list { list-style: none; margin: 0; padding: 0; } .contact-info-list__item { margin-bottom: var(--space-md); } .contact-info-list__label { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-xs); } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { background: var(--color-primary); color: rgba(255, 255, 255, 0.78); } .site-footer a { color: var(--color-white); text-decoration: none; transition: color var(--transition); } .site-footer a:hover, .site-footer a:focus { color: var(--color-accent); } .site-footer__top { padding-block: var(--space-2xl); } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-2xl); align-items: start; } .site-footer__col { min-width: 0; } /* Col 1: brand + tagline + social */ .site-footer__brand .custom-logo-link { display: inline-block; } .site-footer__brand .custom-logo, .site-footer__logo { max-width: 200px; width: 100%; height: auto; display: block; } .site-footer__logo-link { display: inline-block; line-height: 0; margin-bottom: var(--space-md); } .site-footer__title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 800; margin: 0 0 var(--space-md); color: var(--color-white); } .site-footer__title a { color: var(--color-white); } .site-footer__tagline { font-size: var(--font-size-base); line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin: 0 0 var(--space-lg); max-width: 38ch; } .site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-sm); } .site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--color-white); transition: background var(--transition), color var(--transition), transform var(--transition); } .site-footer__social-link:hover, .site-footer__social-link:focus { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); } /* Headings shared by Col 2 and Col 3 */ .site-footer__heading { position: relative; font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-white); margin: 0 0 var(--space-lg); padding-bottom: var(--space-sm); } .site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--color-accent); border-radius: 2px; } /* Col 2: Quick Links */ .footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .footer-menu a { display: inline-block; font-size: var(--font-size-base); color: rgba(255, 255, 255, 0.78); transition: color var(--transition), transform var(--transition), padding-left var(--transition); } .footer-menu a:hover, .footer-menu a:focus { color: var(--color-accent); padding-left: var(--space-sm); } .site-footer__menu-fallback { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.6); margin: 0; } /* Col 3: Contact info */ .site-footer__phone { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; color: var(--color-accent); margin-bottom: var(--space-md); line-height: 1.1; } .site-footer__phone:hover, .site-footer__phone:focus { color: var(--color-accent-dark, #ff8a3d); } .site-footer__phone svg { flex-shrink: 0; } .site-footer__contact-list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .site-footer__contact-list li { font-size: var(--font-size-base); color: rgba(255, 255, 255, 0.78); } .site-footer__contact-list a { color: rgba(255, 255, 255, 0.85); } .site-footer__cta { width: 100%; max-width: 280px; text-align: center; justify-content: center; } /* Bottom bar */ .site-footer__bottom-bar { background: rgba(0, 0, 0, 0.25); padding-block: var(--space-md); font-size: var(--font-size-sm); } .site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); } .site-footer__copyright, .site-footer__credits, .site-footer__legal { margin: 0; color: rgba(255, 255, 255, 0.65); } .site-footer__credits-divider { display: inline-block; margin: 0 0.5rem; color: rgba(255, 255, 255, 0.4); } .site-footer__legal a { color: rgba(255, 255, 255, 0.85); } /* Floating Call Now button (mobile only) */ .floating-call { display: none; position: fixed; right: 1rem; bottom: 1rem; z-index: 90; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.25rem; background: var(--color-accent); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-base); text-decoration: none; border-radius: 999px; box-shadow: var(--shadow-lg); transition: transform var(--transition), background var(--transition); } .floating-call:hover, .floating-call:focus { background: var(--color-accent-dark, #ff8a3d); color: var(--color-white); transform: translateY(-2px); } .floating-call svg { flex-shrink: 0; } /* ========================================================================= 9. Block editor support ========================================================================= */ .alignwide { max-width: 1000px; margin-inline: auto; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } /* ========================================================================= HOMEPAGE — shared section heading ========================================================================= */ .section-heading { max-width: 760px; margin-bottom: var(--space-xl); } .section-heading.text-center { margin-inline: auto; } .section-heading__eyebrow { display: inline-block; font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: var(--space-sm); } .section-heading__title { font-size: var(--font-size-4xl); margin-bottom: var(--space-md); } .section-heading__lead { font-size: var(--font-size-lg); color: var(--color-text-light); margin: 0; } /* ========================================================================= HOMEPAGE — Hero ========================================================================= */ .home-hero { position: relative; isolation: isolate; min-height: min(720px, 90vh); display: flex; align-items: center; color: var(--color-white); overflow: hidden; } .home-hero__bg, .home-hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* The bundled hero MP4 has black side-bars baked into the source frame. `object-fit: cover` can't strip them because they're real video content, so we zoom past them with a center-origin scale. Adjust the factor if we ever swap to a clean source. */ .home-hero__bg-video { transform: scale(1.28); transform-origin: center; } .home-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(26, 26, 26, 0.4) 55%, rgba(232, 119, 34, 0.2) 100%); z-index: -1; } .home-hero__inner { padding-block: var(--space-2xl); max-width: 900px; text-align: center; margin-inline: auto; } .home-hero__heading { font-size: var(--font-size-hero); color: var(--color-white); margin-bottom: var(--space-md); line-height: 1.1; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } .home-hero__subheading { font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255, 255, 255, 0.92); margin: 0 auto var(--space-xl); max-width: 720px; } .home-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-xl); } .home-hero__btn { min-width: 220px; } .btn-outline-white { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); padding: 0.875rem 2rem; font-family: var(--font-heading); font-weight: 600; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition), transform var(--transition); display: inline-flex; align-items: center; justify-content: center; } .btn-outline-white:hover, .btn-outline-white:focus { background: var(--color-white); color: var(--color-primary); transform: translateY(-2px); } .home-hero__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md) var(--space-xl); } .home-hero__badge { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 600; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.02em; } .home-hero__badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } /* ========================================================================= HOMEPAGE — Services grid ========================================================================= */ .services-collage { position: relative; background: var(--color-light); padding-block: 6rem 0; overflow: hidden; } .services-collage__shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--color-primary); z-index: 0; } .services-collage__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-2xl); align-items: center; padding-bottom: 6rem; } .services-collage__media { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--space-md); } .services-collage__tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45); text-decoration: none; transform: translateZ(0); transition: transform var(--transition), box-shadow var(--transition); } .services-collage__tile:hover, .services-collage__tile:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55); } .services-collage__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .services-collage__tile:hover .services-collage__image, .services-collage__tile:focus-visible .services-collage__image { transform: scale(1.05); } .services-collage__label { position: absolute; left: var(--space-md); bottom: var(--space-md); max-width: calc(100% - 2 * var(--space-md)); width: max-content; background: rgba(26, 26, 26, 0.82); color: var(--color-white); padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); backdrop-filter: blur(2px); } .services-collage__label-text { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); letter-spacing: 0.06em; text-transform: uppercase; max-width: 100%; line-height: 1.25; } .services-collage__copy { display: flex; flex-direction: column; gap: var(--space-md); padding-block: var(--space-lg); } .services-collage__eyebrow { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); } .services-collage__heading { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-4xl); line-height: 1.1; color: var(--color-primary); } .services-collage__lead { margin: 0; font-size: var(--font-size-lg); line-height: 1.7; color: var(--color-text); max-width: 38ch; } .services-collage__cta { align-self: flex-start; margin-top: var(--space-sm); } /* ========================================================================= HOMEPAGE — Why Choose Us ========================================================================= */ .why-choose__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } .why-choose__reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); } .why-choose__reason { display: flex; gap: var(--space-md); align-items: flex-start; } .why-choose__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-white); color: var(--color-accent); box-shadow: var(--shadow-sm); } .why-choose__reason-title { font-size: var(--font-size-lg); margin-bottom: var(--space-xs); color: var(--color-primary); } .why-choose__reason-text p { margin: 0; color: var(--color-text-light); } .why-choose__media { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .family-photo { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; } .why-choose__caption { position: absolute; left: var(--space-lg); bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); background: rgba(255, 255, 255, 0.95); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); box-shadow: var(--shadow-md); } /* ========================================================================= HOMEPAGE — Process / How It Works ========================================================================= */ .home-process { background: var(--color-white); } .process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); counter-reset: process; position: relative; } .process-step { position: relative; text-align: center; padding: var(--space-lg); } .process-step__number { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto var(--space-md); border-radius: 50%; background: var(--color-light); border: 2px solid var(--color-accent); color: var(--color-primary); font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 800; } .process-step__title { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); } .process-step__text { color: var(--color-text-light); margin: 0; } /* Connecting line between steps on desktop */ .process-step + .process-step::before { content: ''; position: absolute; top: calc(var(--space-lg) + 36px); left: -50%; width: 100%; height: 2px; background: linear-gradient(to right, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent); z-index: -1; } /* ========================================================================= HOMEPAGE — Testimonials ========================================================================= */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .testimonial-card { margin: 0; padding: var(--space-xl) var(--space-lg); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-md); position: relative; } .testimonial-card::before { content: '\201C'; position: absolute; top: -0.5rem; left: var(--space-lg); font-family: var(--font-heading); font-size: 5rem; line-height: 1; color: var(--color-accent); opacity: 0.25; } .testimonial-card__stars { display: inline-flex; gap: 2px; color: #F5B400; } .testimonial-card__quote { margin: 0; padding: 0; border: 0; font-size: var(--font-size-lg); font-style: italic; color: var(--color-text); line-height: 1.7; flex-grow: 1; } .testimonial-card__quote p { margin: 0; } .testimonial-card__attribution { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .testimonial-card__name { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); } .testimonial-card__location { font-size: var(--font-size-sm); color: var(--color-text-light); } /* Single-slide testimonials carousel ------------------------------------- */ .testimonials-carousel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); } .testimonials-carousel__viewport { overflow: hidden; } .testimonials-carousel__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .testimonials-carousel__track::-webkit-scrollbar { display: none; } .testimonials-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; margin: 0; padding: var(--space-md) var(--space-lg); box-sizing: border-box; display: flex; justify-content: center; } .testimonials-carousel__slide .testimonial-card { max-width: 720px; width: 100%; padding: var(--space-2xl) var(--space-xl); text-align: center; align-items: center; } .testimonials-carousel__slide .testimonial-card__quote { font-size: var(--font-size-xl); line-height: 1.6; max-width: 60ch; } .testimonials-carousel__slide .testimonial-card__attribution { align-items: center; border-top: none; padding-top: var(--space-sm); } .testimonials-carousel__slide .testimonial-card::before { font-size: 6rem; top: -1rem; left: 50%; transform: translateX(-50%); } .testimonials-carousel__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-white); color: var(--color-primary); cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition); padding: 0; } .testimonials-carousel__btn:hover:not(:disabled) { background: var(--color-primary); color: var(--color-white); transform: scale(1.05); } .testimonials-carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; } .testimonials-carousel__dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; margin-top: var(--space-md); } .testimonials-carousel__dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(26, 26, 26, 0.2); cursor: pointer; padding: 0; transition: background var(--transition), transform var(--transition); } .testimonials-carousel__dot:hover { background: rgba(26, 26, 26, 0.4); } .testimonials-carousel__dot.is-active { background: var(--color-accent); transform: scale(1.3); } @media (max-width: 768px) { .testimonials-carousel { grid-template-columns: 1fr; } .testimonials-carousel__btn { display: none; } .testimonials-carousel__slide { padding: var(--space-md); } .testimonials-carousel__slide .testimonial-card { padding: var(--space-xl) var(--space-lg); } .testimonials-carousel__slide .testimonial-card__quote { font-size: var(--font-size-lg); } } /* ========================================================================= HOMEPAGE — CTA Banner ========================================================================= */ .cta-banner { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding-block: var(--space-2xl); position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 119, 34, 0.2) 0%, transparent 70%); pointer-events: none; } .cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; position: relative; } .cta-banner__text { flex: 1 1 400px; } .cta-banner__heading { color: var(--color-white); font-size: var(--font-size-3xl); margin-bottom: var(--space-sm); } .cta-banner__subheading { font-size: var(--font-size-lg); color: rgba(255, 255, 255, 0.9); margin: 0; } .cta-banner__btn { flex-shrink: 0; padding: 1rem 2.5rem; font-size: var(--font-size-base); text-transform: uppercase; letter-spacing: 0.05em; } /* ========================================================================= HOMEPAGE — Service Areas strip ========================================================================= */ .service-areas { background: var(--color-light); padding-block: var(--space-lg); border-top: 1px solid var(--color-border); } .service-areas__inner { text-align: center; } .service-areas__text { margin: 0; color: var(--color-text-light); font-size: var(--font-size-base); } .service-areas__text strong { color: var(--color-primary); font-weight: 700; } /* ========================================================================= HOMEPAGE — Differentiators (Pain Points vs. Evans Experience) Two side-by-side cards: red "Typical Experience" with X icons and green "Evans Experience" with check icons. Sits between hero and services on the homepage. ========================================================================= */ .differentiators { padding-block: var(--space-2xl); background: var(--color-light); position: relative; overflow: hidden; } .differentiators__header { margin-bottom: var(--space-xl); position: relative; z-index: 1; } .differentiators__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .differentiators__card { padding: var(--space-lg) var(--space-lg) var(--space-xl); border-radius: var(--radius-lg); border: 2px solid; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .differentiators__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .differentiators__card--pain { background: #fef2f2; border-color: #dc2626; } .differentiators__card--promise { background: #f0fdf4; border-color: #16a34a; border-top: 5px solid var(--color-accent); } .differentiators__card-title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 800; margin: 0 0 var(--space-md); letter-spacing: 0.01em; } .differentiators__card--pain .differentiators__card-title { color: #b91c1c; } .differentiators__card--promise .differentiators__card-title { color: #15803d; } .differentiators__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); } .differentiators__item { display: flex; align-items: flex-start; gap: var(--space-md); margin: 0; } .differentiators__icon { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-top: 2px; } .differentiators__icon--x { background: #dc2626; color: #fff; } .differentiators__icon--check { background: #16a34a; color: #fff; } .differentiators__text { font-size: var(--font-size-lg); line-height: 1.55; color: var(--color-text); font-weight: 500; } .differentiators__card--promise .differentiators__text { font-weight: 600; } @media (min-width: 768px) { .differentiators__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } } @media (min-width: 1024px) { .differentiators::before { content: ""; position: absolute; top: 50%; left: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); background-image: url("../images/evans-logo.png"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.08; pointer-events: none; z-index: 0; } } /* ========================================================================= HOMEPAGE — Combined CTA + Service Area Map Full-width dark section with a two-column layout: pitch on the left, stylized map card on the right. Replaces the standalone cta-banner and service-areas strip on the homepage. ========================================================================= */ .cta-map { position: relative; background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); color: var(--color-white); padding-block: var(--space-2xl); overflow: hidden; } .cta-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(212, 160, 23, 0.15) 0%, transparent 45%), radial-gradient(circle at 15% 85%, rgba(232, 119, 34, 0.1) 0%, transparent 50%); pointer-events: none; } .cta-map__inner { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-2xl); align-items: center; } /* * Zig-zag rhythm: at desktop, render map-card on the left and pitch on * the right. Markup order stays pitch-first for accessibility / mobile * stacking. Re-set to natural order on tablet/mobile so pitch leads. */ @media (min-width: 1025px) { .cta-map__card { order: 1; } .cta-map__pitch { order: 2; } } .cta-map__pitch { max-width: 560px; } .cta-map__eyebrow { display: inline-block; margin: 0 0 var(--space-sm); padding: 0.4rem 0.9rem; background: rgba(212, 160, 23, 0.15); border: 1px solid rgba(212, 160, 23, 0.4); border-radius: 999px; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .cta-map__heading { color: var(--color-white); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin: 0 0 var(--space-md); } .cta-map__subheading { font-size: var(--font-size-lg); color: rgba(255, 255, 255, 0.82); line-height: 1.65; margin: 0 0 var(--space-lg); } .cta-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg); } .cta-map__btn { padding: 1rem 2.25rem; font-size: var(--font-size-base); text-transform: uppercase; letter-spacing: 0.05em; } .cta-map__btn--phone { display: inline-flex; align-items: center; gap: 0.6rem; } .cta-map__btn--phone svg { flex-shrink: 0; } .cta-map__phone { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color var(--transition); } .cta-map__phone:hover, .cta-map__phone:focus { color: var(--color-accent); } .cta-map__phone-icon { color: var(--color-accent); flex-shrink: 0; } .cta-map__phone-label { font-size: var(--font-size-sm); opacity: 0.75; } .cta-map__phone-number { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.02em; } .cta-map__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); } .cta-map__badge { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.85); font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 600; } .cta-map__badge svg { color: var(--color-accent); flex-shrink: 0; } /* Map card (right column) */ .cta-map__card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 160, 23, 0.15); background: #0f0f0f; min-height: 360px; display: flex; flex-direction: column; } .cta-map__cities { list-style: none; margin: 0; padding: var(--space-md); display: flex; flex-wrap: wrap; gap: 0.5rem; background: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(212, 160, 23, 0.18); } .cta-map__city { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border: 1px solid rgba(212, 160, 23, 0.45); border-radius: 999px; background: rgba(212, 160, 23, 0.08); color: #f7f6f2; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } button.cta-map__city { cursor: pointer; font: inherit; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } button.cta-map__city:hover, button.cta-map__city:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: #0f0f0f; transform: translateY(-1px); outline: none; } .cta-map__leaflet { width: 100%; height: 100%; min-height: 320px; background: #0f0f0f; } .cta-map__leaflet .leaflet-container { background: #0f0f0f; font-family: var(--font-body); } .cta-map__leaflet-pin { display: flex; align-items: center; justify-content: center; } .cta-map__leaflet-pin-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.45), 0 4px 10px rgba(0, 0, 0, 0.45); display: block; } .cta-map__leaflet .leaflet-popup-content-wrapper { border-radius: 8px; background: #1a1a1a; color: #f7f6f2; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .cta-map__leaflet .leaflet-popup-content { margin: 8px 14px; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; } .cta-map__leaflet .leaflet-popup-tip { background: #1a1a1a; } .cta-map__map { position: relative; flex: 1 1 auto; min-height: 260px; } .cta-map__map > iframe { display: block; width: 100%; height: 100%; border: 0; } .cta-map__placeholder { position: absolute; inset: 0; overflow: hidden; } .cta-map__pattern { position: absolute; inset: 0; width: 100%; height: 100%; } .cta-map__pin { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -100%); color: var(--color-accent); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)); } .cta-map__pin svg { position: relative; z-index: 2; animation: cta-map-bob 3.2s ease-in-out infinite; } .cta-map__pin-pulse { position: absolute; left: 50%; bottom: -6px; width: 36px; height: 12px; margin-left: -18px; border-radius: 50%; background: rgba(212, 160, 23, 0.35); filter: blur(2px); animation: cta-map-pulse 3.2s ease-in-out infinite; } @keyframes cta-map-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes cta-map-pulse { 0%, 100% { opacity: 0.45; transform: scaleX(0.85); } 50% { opacity: 0.75; transform: scaleX(1.15); } } .cta-map__label { padding: var(--space-lg); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); border-top: 1px solid rgba(212, 160, 23, 0.25); text-align: center; } .cta-map__label-eyebrow { margin: 0 0 0.25rem; color: rgba(255, 255, 255, 0.6); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; } .cta-map__label-area { margin: 0; color: var(--color-accent); font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: 0.01em; } .cta-map__label-note { margin: 0.25rem 0 0; color: rgba(255, 255, 255, 0.7); font-size: var(--font-size-sm); } @media (max-width: 900px) { .cta-map__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .cta-map__pitch { max-width: none; text-align: center; } .cta-map__actions, .cta-map__badges { justify-content: center; } .cta-map__card { min-height: 320px; } } @media (max-width: 540px) { .cta-map__actions { flex-direction: column; align-items: stretch; } .cta-map__btn { width: 100%; text-align: center; } .cta-map__phone { justify-content: center; } } /* ========================================================================= SERVICE PAGE TEMPLATE Page hero, two-column intro with sticky sidebar, benefits grid, project gallery strip. CTA banner is reused from the homepage. ========================================================================= */ /* Page hero -------------------------------------------------------------- */ .page-hero { position: relative; isolation: isolate; min-height: 520px; display: flex; align-items: center; color: var(--color-white); overflow: hidden; } .page-hero__bg, .page-hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); } .page-hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.20) 45%, rgba(10, 10, 10, 0.65) 100%), linear-gradient(115deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.08) 55%, rgba(10, 10, 10, 0) 100%); } .page-hero--about-us .page-hero__overlay { background: linear-gradient(180deg, rgba(10, 10, 10, 0.32) 0%, rgba(10, 10, 10, 0.18) 45%, rgba(10, 10, 10, 0.7) 100%), linear-gradient(115deg, rgba(10, 10, 10, 0.42) 0%, rgba(10, 10, 10, 0.08) 55%, rgba(10, 10, 10, 0) 100%); } .page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, transparent 0%, var(--color-accent) 35%, var(--color-sunset) 65%, transparent 100%); z-index: 1; pointer-events: none; } .page-hero__inner { padding-block: var(--space-2xl); max-width: 900px; } .page-hero__eyebrow { display: inline-block; margin: 0 0 var(--space-md); padding: 0.4rem 0.9rem; background: rgba(212, 160, 23, 0.15); border: 1px solid rgba(212, 160, 23, 0.45); border-radius: 999px; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .page-hero__heading { font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 800; color: var(--color-white); margin: 0; line-height: 1.05; letter-spacing: -0.01em; text-shadow: 0 4px 32px rgba(0, 0, 0, 0.45); } .page-hero__divider { display: block; width: 72px; height: 4px; margin: var(--space-md) 0 var(--space-lg); background: var(--color-accent); border-radius: 2px; } .page-hero__subheading { font-size: var(--font-size-xl); line-height: 1.55; color: rgba(255, 255, 255, 0.92); max-width: 680px; margin: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); } /* Breadcrumbs */ .breadcrumbs { margin-bottom: var(--space-md); } .breadcrumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); } .breadcrumbs__item a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color var(--transition); } .breadcrumbs__item a:hover, .breadcrumbs__item a:focus { color: var(--color-accent); } .breadcrumbs__item--current { color: var(--color-white); } .breadcrumbs__separator { opacity: 0.55; } /* Intro: content + sticky sidebar --------------------------------------- */ .service-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-2xl); align-items: start; } .service-intro__content { max-width: 720px; } .service-intro__content h2 { font-size: var(--font-size-3xl); margin-top: var(--space-xl); } .service-intro__content h2:first-child { margin-top: 0; } .service-intro__content h3 { font-size: var(--font-size-2xl); margin-top: var(--space-lg); } .service-intro__content p { font-size: var(--font-size-lg); color: var(--color-text); } .service-intro__content ul, .service-intro__content ol { padding-left: 1.25rem; margin-bottom: var(--space-md); } .service-intro__content li { margin-bottom: var(--space-xs); } /* "What's Included" checklist grid --------------------------------------- */ .service-included { margin-top: var(--space-2xl); } .service-included__header { margin-bottom: var(--space-lg); } .service-included__title { font-size: var(--font-size-3xl); margin: 0.25rem 0 0; } .service-included__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } .service-included__item { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md); background: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); margin-bottom: 0; } .service-included__item:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } .service-included__icon { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(212, 160, 23, 0.15); color: var(--color-accent); } .service-included__icon svg { width: 24px; height: 24px; } .service-included__item-title { font-size: var(--font-size-base); font-weight: 700; margin: 0 0 0.25rem; color: var(--color-primary); } .service-included__item-text { font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-light); margin: 0; } /* "Our Process" vertical timeline ---------------------------------------- */ .service-process { margin-top: var(--space-2xl); } .service-process__header { margin-bottom: var(--space-lg); } .service-process__title { font-size: var(--font-size-3xl); margin: 0.25rem 0 0; } .service-process__list { list-style: none; padding: 0; margin: 0; position: relative; } .service-process__list::before { content: ''; position: absolute; top: 0.75rem; bottom: 0.75rem; left: 27px; width: 2px; background: linear-gradient(180deg, var(--color-accent) 0%, rgba(212, 160, 23, 0.15) 100%); } .service-process__step { position: relative; display: flex; gap: var(--space-lg); align-items: flex-start; padding-bottom: var(--space-lg); margin-bottom: 0; } .service-process__step:last-child { padding-bottom: 0; } .service-process__number { flex-shrink: 0; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-accent); font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 800; letter-spacing: 0.02em; border: 3px solid var(--color-accent); box-shadow: 0 0 0 4px var(--color-white); position: relative; z-index: 1; } .service-process__body { padding-top: 0.5rem; flex: 1 1 auto; } .service-process__step-title { font-size: var(--font-size-xl); font-weight: 700; margin: 0 0 0.25rem; color: var(--color-primary); } .service-process__step-text { font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text); margin: 0; } @media (max-width: 640px) { .service-included__grid { grid-template-columns: 1fr; } .service-process__list::before { left: 21px; } .service-process__number { width: 44px; height: 44px; font-size: var(--font-size-base); } } .service-intro__sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--space-lg); } /* Sidebar CTA card (orange) */ .sidebar-cta { background: var(--color-accent); color: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .sidebar-cta__heading { color: var(--color-white); font-size: var(--font-size-xl); margin: 0 0 var(--space-sm); } .sidebar-cta__text { color: rgba(255, 255, 255, 0.92); margin: 0 0 var(--space-md); font-size: var(--font-size-sm); } .sidebar-cta__phone { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-white); font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 800; margin-bottom: var(--space-md); text-decoration: none; transition: transform var(--transition); } .sidebar-cta__phone:hover, .sidebar-cta__phone:focus { color: var(--color-white); transform: translateX(2px); } .sidebar-cta__btn { width: 100%; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .sidebar-cta__btn:hover, .sidebar-cta__btn:focus { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); } /* Sidebar info cards */ .sidebar-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .sidebar-card__heading { font-size: var(--font-size-lg); margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); color: var(--color-primary); } .sidebar-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .sidebar-card__list li { position: relative; padding-left: 1.75rem; color: var(--color-text); font-weight: 500; } .sidebar-card__list li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 1rem; height: 0.55rem; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); } .sidebar-card__text { margin: 0; color: var(--color-text-light); font-size: var(--font-size-sm); line-height: 1.6; } .sidebar-card__text strong { color: var(--color-primary); } /* Benefits grid --------------------------------------------------------- */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .benefit-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .benefit-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--space-md); border-radius: 50%; background: rgba(232, 119, 34, 0.12); color: var(--color-accent); } .benefit-card__title { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); color: var(--color-primary); } .benefit-card__text { margin: 0; color: var(--color-text-light); } /* Photo gallery strip --------------------------------------------------- */ .service-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .service-gallery-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-light); transition: transform var(--transition), box-shadow var(--transition); } .service-gallery-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .service-gallery-photo:hover, .service-gallery-photo:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .service-gallery-photo:hover img { transform: scale(1.06); } .service-gallery-photo__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md); background: linear-gradient(to top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 100%); transition: background var(--transition); pointer-events: none; } .service-gallery-photo:hover .service-gallery-photo__overlay, .service-gallery-photo:focus-visible .service-gallery-photo__overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.0) 100%); } .service-gallery-photo__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; line-height: 1; opacity: 0; transition: opacity var(--transition), transform var(--transition); } .service-gallery-photo:hover .service-gallery-photo__icon, .service-gallery-photo:focus-visible .service-gallery-photo__icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } .service-gallery-photo__caption { color: var(--color-white); font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-base); line-height: 1.3; letter-spacing: 0.02em; text-align: center; max-width: 90%; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; } .service-gallery-photo--has-caption:hover .service-gallery-photo__caption, .service-gallery-photo--has-caption:focus-visible .service-gallery-photo__caption { opacity: 1; transform: translateY(0); } /* When caption exists, push the lightbox icon up so it sits above the * caption text rather than overlapping it. */ .service-gallery-photo--has-caption .service-gallery-photo__icon { top: 42%; } /* ========================================================================= SERVICE PAGE — Related services cross-link grid Compact 3-up tiles linking to the OTHER services. Mirrors the homepage services-collage label pattern but smaller and without the editorial shelf, since this sits between the design gallery and the CTA banner. ========================================================================= */ .related-services__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-xl); } .related-services__grid--4 { grid-template-columns: repeat(4, 1fr); } .related-services__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; } .related-services__grid--1 { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .related-services__tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.4); background: var(--color-primary); text-decoration: none; color: var(--color-white); transition: transform var(--transition), box-shadow var(--transition); } .related-services__tile:hover, .related-services__tile:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.5); } .related-services__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .related-services__tile:hover .related-services__image, .related-services__tile:focus-visible .related-services__image { transform: scale(1.05); } .related-services__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.0) 100%); pointer-events: none; } .related-services__label { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--color-white); } .related-services__label-text { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-base); letter-spacing: 0.06em; text-transform: uppercase; } .related-services__arrow { flex-shrink: 0; color: var(--color-accent); transition: transform var(--transition); } .related-services__tile:hover .related-services__arrow, .related-services__tile:focus-visible .related-services__arrow { transform: translateX(4px); } @media (max-width: 768px) { .related-services__grid, .related-services__grid--4, .related-services__grid--2 { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } } /* ========================================================================= ABOUT PAGE TEMPLATE Our Story two-column, navy stats bar, team grid, values grid. Page hero + CTA banner are shared with the service template. ========================================================================= */ /* Our Story -------------------------------------------------------------- */ .about-story__grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-2xl); align-items: center; } /* Zig-zag flip — copy on left, image on right. Markup order is preserved * for accessibility/mobile stacking; we just swap visual columns at desktop. */ @media (min-width: 1025px) { .about-story--flip .about-story__grid { grid-template-columns: 6fr 5fr; } .about-story--flip .about-story__media { order: 2; } .about-story--flip .about-story__content { order: 1; } } /* Tighten vertical rhythm for stacked panels (subsequent panels under the * first heading-bearing panel get less top padding to read as a series). */ .about-story + .about-story { padding-top: 0; } .about-story__media { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: visible; } .about-story__media .about-family-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .about-story__media::after { content: ''; position: absolute; left: -12px; bottom: -12px; width: 60%; height: 60%; border-left: 6px solid var(--color-accent); border-bottom: 6px solid var(--color-accent); border-radius: 0 0 0 var(--radius-lg); z-index: -1; pointer-events: none; } /* Asymmetric collage — secondary landscape image overlaps the bottom-right * (or bottom-left when flipped) of the primary tall portrait. Mirrors the * Normandy "team / what we do" image pairings. */ .about-story--collage .about-story__inset { position: absolute; right: -8%; bottom: -8%; width: 55%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 6px solid var(--color-white); z-index: 2; } @media (min-width: 1025px) { .about-story--flip.about-story--collage .about-story__inset { right: auto; left: -8%; } } @media (max-width: 768px) { .about-story--collage .about-story__inset { right: -4%; bottom: -4%; width: 50%; border-width: 4px; } } .about-family-photo { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; } .about-story__content .entry-content p { font-size: var(--font-size-lg); color: var(--color-text); line-height: 1.7; } .about-story__content .entry-content p:last-child { margin-bottom: 0; } /* Stats bar -------------------------------------------------------------- */ .about-stats { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding-block: var(--space-xl); position: relative; overflow: hidden; } .about-stats::before { content: ''; position: absolute; top: -60px; left: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 119, 34, 0.18) 0%, transparent 70%); pointer-events: none; } .about-stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); text-align: center; position: relative; } .about-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); position: relative; } .about-stat + .about-stat::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: rgba(255, 255, 255, 0.18); } .about-stat__value { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--color-accent); line-height: 1; } .about-stat__label { font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.92); } /* Team grid -------------------------------------------------------------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); max-width: 960px; margin-inline: auto; } .team-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); text-align: center; } .team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .team-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-light); } .team-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .team-card:hover .team-card__media img { transform: scale(1.05); } .team-card__body { padding: var(--space-lg); } .team-card__name { font-size: var(--font-size-xl); margin: 0 0 var(--space-xs); color: var(--color-primary); } .team-card__title { margin: 0; color: var(--color-accent); font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; } /* Values grid ------------------------------------------------------------ */ .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .value-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .value-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: var(--space-md); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); color: var(--color-white); box-shadow: var(--shadow-sm); } .value-card__title { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); color: var(--color-primary); } .value-card__text { margin: 0; color: var(--color-text-light); line-height: 1.7; } /* ========================================================================= CONTACT PAGE TEMPLATE 60/40 split with static contact form and info card, plus a full-width Google Maps embed placeholder. ========================================================================= */ /* Compact page hero variant used on contact */ .page-hero--compact { min-height: 340px; } .page-hero--compact .page-hero__heading { font-size: clamp(2.25rem, 4vw, 3rem); } /* Contact split --------------------------------------------------------- */ .contact-split__grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-2xl); align-items: start; } .contact-split__intro { margin-bottom: var(--space-lg); color: var(--color-text-light); } /* Contact form ---------------------------------------------------------- */ .contact-form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-md); } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .contact-form__field { display: flex; flex-direction: column; gap: var(--space-xs); } .contact-form__field label { font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .contact-form__required { color: var(--color-accent); } .contact-form textarea { min-height: 140px; resize: vertical; font-family: var(--font-body); } .contact-form__actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); } .contact-form__submit { align-self: flex-start; padding: 1rem 2.5rem; font-size: var(--font-size-base); text-transform: uppercase; letter-spacing: 0.05em; } .contact-form__disclaimer { margin: 0; color: var(--color-text-light); font-size: var(--font-size-sm); } /* Contact info card ----------------------------------------------------- */ .contact-info-card { position: sticky; top: 120px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate; } .contact-info-card::before { content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 119, 34, 0.25) 0%, transparent 70%); pointer-events: none; z-index: -1; } .contact-info-card__heading { color: var(--color-white); font-size: var(--font-size-xl); margin: 0 0 var(--space-md); } .contact-info-card__phone { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-white); font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 800; margin-bottom: var(--space-lg); text-decoration: none; transition: color var(--transition); } .contact-info-card__phone:hover, .contact-info-card__phone:focus { color: var(--color-accent); } .contact-info-card__phone svg { color: var(--color-accent); flex-shrink: 0; } .contact-info-card__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-md); } .contact-info-card__item { display: flex; flex-direction: column; gap: 2px; } .contact-info-card__label { font-family: var(--font-heading); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); } .contact-info-card__item a { color: var(--color-white); } .contact-info-card__item a:hover, .contact-info-card__item a:focus { color: var(--color-accent); } .contact-info-card__hours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; color: rgba(255, 255, 255, 0.9); font-size: var(--font-size-sm); } .contact-info-card__badges { list-style: none; margin: 0; padding: var(--space-md) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; flex-wrap: wrap; gap: var(--space-md); } .contact-info-card__badges li { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 600; color: rgba(255, 255, 255, 0.95); } .contact-info-card__badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); font-size: 0.7rem; font-weight: 700; } /* Map placeholder ------------------------------------------------------- */ .map-section { padding: 0; } .map-embed { position: relative; width: 100%; height: 420px; background: var(--color-light); overflow: hidden; } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .map-embed__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient( 45deg, var(--color-light) 0, var(--color-light) 20px, #ECEFF4 20px, #ECEFF4 40px ); } .map-embed__placeholder-text { padding: var(--space-sm) var(--space-lg); background: var(--color-white); border: 1px dashed var(--color-border); border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 600; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--font-size-sm); } /* ========================================================================= 10. Responsive breakpoints ========================================================================= */ /* Tablet and below */ @media (max-width: 1024px) { :root { --space-2xl: 4.5rem; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .contact-page__grid { grid-template-columns: 1fr; } /* Homepage */ .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .services-collage__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .services-collage__copy { order: -1; padding-block: 0; } .why-choose__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .why-choose__media { max-width: 520px; margin-inline: auto; } .process-steps { grid-template-columns: 1fr; gap: var(--space-lg); } .process-step + .process-step::before { display: none; } /* Service page */ .service-intro__grid { grid-template-columns: 1fr; gap: var(--space-xl); } .service-intro__sidebar { position: static; max-width: 520px; } .benefits-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .service-gallery__grid { grid-template-columns: repeat(2, 1fr); } /* Contact page */ .contact-split__grid { grid-template-columns: 1fr; gap: var(--space-xl); } .contact-info-card { position: static; max-width: 520px; margin-inline: auto; } /* About page */ .about-story__grid { grid-template-columns: 1fr; gap: var(--space-xl); } .about-story__media { max-width: 520px; margin-inline: auto; } .team-grid, .values-grid { grid-template-columns: repeat(2, 1fr); } .about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .about-stat:nth-child(3)::before { display: none; } /* Footer */ .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } .site-footer__col--brand { grid-column: 1 / -1; } } /* Small tablet / large mobile */ @media (max-width: 1024px) { .menu-toggle { display: inline-flex; order: 2; } .site-branding { order: 1; } .site-header__inner { flex-wrap: nowrap; } /* Mobile slide-down panel */ .main-navigation__panel { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-md) var(--container-padding) var(--space-lg); background: var(--color-primary); border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg); max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: max-height 0.4s ease, opacity var(--transition), transform var(--transition), visibility var(--transition), padding var(--transition); } .main-navigation.is-open .main-navigation__panel { max-height: calc(100vh - 100%); overflow-y: auto; opacity: 1; visibility: visible; transform: translateY(0); } .primary-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .primary-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .primary-menu a { padding-block: var(--space-md); width: 100%; } .primary-menu > li > a::after { display: none; } /* Inline submenu on mobile — collapsed until parent is tapped */ .primary-menu .sub-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-top: 0; border-radius: 0; padding: 0 0 var(--space-sm); background: rgba(0, 0, 0, 0.25); min-width: 0; } .primary-menu .sub-menu a { color: #e5e5e5; } .primary-menu .sub-menu a:hover, .primary-menu .sub-menu a:focus { background: rgba(255, 255, 255, 0.05); color: var(--color-accent); } .primary-menu .menu-item-has-children.is-submenu-open > .sub-menu { display: block; } .primary-menu .sub-menu a { padding: var(--space-sm) var(--space-lg); white-space: normal; } /* Chevron rotates when submenu is expanded on mobile */ .primary-menu .menu-item-has-children > a::before { right: var(--space-md); } .primary-menu .menu-item-has-children.is-submenu-open > a::before { transform: translateY(-25%) rotate(-135deg); } .site-header__phone { display: none !important; } .site-header__cta-btn { width: 100%; margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); } } @media (max-width: 768px) { :root { --font-size-4xl: 2rem; --font-size-3xl: 1.625rem; --space-2xl: 4rem; } /* Homepage */ .testimonials-grid { grid-template-columns: 1fr; } .services-collage { padding-block: 4rem 0; } .services-collage__inner { padding-bottom: 4rem; } .services-collage__heading { font-size: var(--font-size-3xl); } .home-hero { min-height: 560px; text-align: center; } .home-hero__actions { flex-direction: column; align-items: stretch; } .home-hero__btn { width: 100%; } .home-hero__badges { gap: var(--space-sm) var(--space-md); justify-content: center; } .cta-banner__inner { flex-direction: column; text-align: center; } .cta-banner__btn { width: 100%; } /* Service page */ .page-hero { min-height: 360px; } .service-gallery__grid { grid-template-columns: 1fr; } /* Contact page */ .contact-form { padding: var(--space-lg); } .contact-form__row { grid-template-columns: 1fr; } .contact-form__submit { width: 100%; } .map-embed { height: 320px; } /* About page */ .team-grid, .values-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .about-stats__grid { grid-template-columns: 1fr; gap: var(--space-md); } .about-stat + .about-stat::before { display: none; } .about-stat + .about-stat { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: var(--space-md); } .top-bar { text-align: center; } .top-bar__inner { justify-content: center; flex-direction: column; gap: var(--space-xs); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Footer */ .site-footer { padding-bottom: 88px; /* room for floating Call Now */ } .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; } .site-footer__tagline { margin-inline: auto; } .site-footer__social { justify-content: center; } .site-footer__heading { display: inline-block; } .site-footer__heading::after { left: 50%; transform: translateX(-50%); } .footer-menu { align-items: center; } .footer-menu a:hover, .footer-menu a:focus { padding-left: 0; } .site-footer__phone { justify-content: center; } .site-footer__cta { margin-inline: auto; } .site-footer__bottom-inner { flex-direction: column; text-align: center; gap: var(--space-sm); } /* Floating Call Now visible only on mobile */ .floating-call { display: inline-flex; } } /* Large desktop */ @media (min-width: 1280px) { :root { --container-padding: 2rem; } } /* ======================================================================== Scroll-triggered reveal animations ======================================================================== */ .ehr-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } .ehr-reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ehr-reveal { opacity: 1; transform: none; transition: none; } } /* ======================================================================== Ken Burns slow zoom on hero backgrounds ======================================================================== */ @keyframes ehr-ken-burns { from { transform: scale(1); } to { transform: scale(1.06); } } .home-hero__bg, .home-hero__bg-video, .page-hero__bg, .page-hero__bg-video { animation: ehr-ken-burns 14s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .home-hero__bg, .home-hero__bg-video, .page-hero__bg, .page-hero__bg-video { animation: none; } }