/* Generated by tools/build_frontend_css.py. Do not edit directly. */ /* Ownership output: v2-hero-common */ /* Source 1: assets/src/hero/hero-responsive.css | media: all */ /* ------------------------------------------------------------ Responsive Hero component Scope: desktop/tablet/mobile hero variants and hero-card ratios. ------------------------------------------------------------- */ .vh-responsive-hero{ display: none !important; } @media (min-width: 992px){ .vh-responsive-hero--desktop{ display: block !important; } } @media (min-width: 600px) and (max-width: 991.98px){ .vh-responsive-hero--tablet{ display: block !important; } } @media (max-width: 599.98px){ .vh-responsive-hero--mobile{ display: block !important; } } .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-collage-main, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-feature-card, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-floating-card{ aspect-ratio: var(--vh-hero-card-aspect-ratio, auto); min-height: 0; overflow: hidden; } .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > img, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > picture, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > picture > img, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-placeholder, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-collage-main img{ width: 100%; height: 100%; min-height: 0; object-fit: cover; } /* Text callouts should not stretch into image-ratio cards. */ .vh-layout-hero .vh-hero-inline-detail, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-inline-detail{ aspect-ratio: auto; min-height: 0; overflow: visible; } .single-vh_portfolio .vh-hero-context-portfolio{ padding-top: var(--vh-single-portfolio-hero-padding-top, clamp(5.5rem, 8vw, 7.5rem)); padding-bottom: var(--vh-single-portfolio-hero-padding-bottom, clamp(5.5rem, 8vw, 7.5rem)); overflow: visible; } @media (min-width: 600px) and (max-width: 991.98px){ .single-vh_portfolio .vh-hero-context-portfolio{ padding-top: var(--vh-single-portfolio-hero-padding-top-tablet, clamp(4.75rem, 7vw, 6.5rem)); padding-bottom: var(--vh-single-portfolio-hero-padding-bottom-tablet, clamp(4.75rem, 7vw, 6.5rem)); } } @media (max-width: 599.98px){ .single-vh_portfolio .vh-hero-context-portfolio{ padding-top: var(--vh-single-portfolio-hero-padding-top-mobile, 4.5rem); padding-bottom: var(--vh-single-portfolio-hero-padding-bottom-mobile, 4.5rem); } } /* ------------------------------------------------------------ Hero proof strip variants - no enclosing box; compact media + rating/quote content. ------------------------------------------------------------- */ .vh-layout-hero .vh-hero-proof--rating, .vh-layout-hero .vh-hero-proof--quote{ display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; width: fit-content; max-width: min(100%, 30rem); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .vh-layout-hero .vh-proof-media{ position: relative; width: clamp(3.25rem, 7vw, 5.25rem); aspect-ratio: 16 / 9; overflow: hidden; border-radius: .55rem; background: rgba(255,255,255,.12); box-shadow: 0 .45rem 1.25rem rgba(0,0,0,.22); } .vh-layout-hero .vh-proof-media img{ display: block; width: 100%; height: 100%; object-fit: cover; } .vh-layout-hero .vh-proof-rating-row{ display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; line-height: 1.15; } .vh-layout-hero .vh-proof-stars{ position: relative; display: inline-block; font-size: clamp(.95rem, 1.35vw, 1.1rem); font-weight: 900; line-height: 1; letter-spacing: .075em; white-space: nowrap; } .vh-layout-hero .vh-proof-stars__base{ color: rgba(255,255,255,.22); } .vh-layout-hero .vh-proof-stars__fill{ position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #5b6cff; white-space: nowrap; } .vh-layout-hero .vh-hero-proof--rating .vh-proof-line, .vh-layout-hero .vh-hero-proof--quote .vh-proof-author{ color: rgba(255,255,255,.88); font-size: clamp(.86rem, 1.2vw, .98rem); font-weight: 850; line-height: 1.25; } .vh-layout-hero .vh-proof-quote{ margin: 0; color: rgba(255,255,255,.92); font-size: clamp(.88rem, 1.25vw, 1rem); font-weight: 800; line-height: 1.3; } .vh-layout-hero .vh-proof-author{ margin-top: .15rem; opacity: .85; } @media (max-width: 575.98px){ .vh-layout-hero .vh-hero-proof--rating, .vh-layout-hero .vh-hero-proof--quote{ grid-template-columns: 1fr; justify-items: center; text-align: center; } .vh-layout-hero .vh-proof-media{ width: min(8rem, 48vw); } .vh-layout-hero .vh-proof-rating-row{ justify-content: center; } } /* ------------------------------------------------------------ Additional universal hero layouts v1.1.6 - Bottom-Aligned Image Hero: portrait/cutout media touches the bottom. - Three Column Center Image Hero: copy / media / details. - Right Edge Image Hero: right media column reaches the viewport edge. ------------------------------------------------------------- */ .vh-hero-layout-bottom_image{ align-items: flex-end; padding-bottom: 0; overflow: hidden; } .vh-hero-layout-bottom_image > .vh-hero-container{ width: 100%; } .vh-hero-bottom-image-wrap{ min-height: clamp(28rem, 68vh, 46rem); } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ align-self: flex-end; width: min(100%, 34rem); margin-inline: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ display: block; width: 100%; height: auto; max-height: clamp(26rem, 68vh, 46rem); object-fit: contain; object-position: bottom center; } .vh-hero-layout-bottom_image[class*="vh-hero-card-ratio-"] .vh-hero-media--bottom-touch{ aspect-ratio: var(--vh-hero-card-aspect-ratio, auto); } .vh-hero-layout-bottom_image[class*="vh-hero-card-ratio-"] .vh-hero-media--bottom-touch img{ height: 100%; object-fit: contain; object-position: bottom center; } .vh-hero-layout-center_image_three .vh-hero-title{ max-width: 12ch; } .vh-hero-layout-center_image_three .vh-hero-lead{ max-width: 32rem; } .vh-hero-layout-center_image_three .vh-hero-media--center-column{ max-width: min(100%, 24rem); margin-inline: auto; } .vh-hero-three-col-info{ display: grid; gap: .75rem; } .vh-hero-three-col-info-row{ display: grid; gap: .25rem; padding: .85rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--vh-hero-text, #fff); } .vh-hero-three-col-info-row strong{ font-weight: 900; line-height: 1.2; } .vh-hero-three-col-info-row span{ color: var(--vh-hero-muted, rgba(255,255,255,.76)); font-size: .92rem; line-height: 1.45; } .vh-hero-layout-right_edge_image{ overflow: hidden; } .vh-hero-layout-right_edge_image > .vh-hero-container{ max-width: none; padding-right: 0; padding-left: 0; } .vh-hero-right-edge-wrap{ --vh-layout-gutter-x: 0; margin-left: 0; margin-right: 0; } .vh-hero-right-edge-copy{ padding-left: max(1.5rem, calc((100vw - 1140px) / 2 + 1.5rem)); padding-right: clamp(1.5rem, 4vw, 4rem); } .vh-hero-right-edge-media-col{ padding-right: 0; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; width: 100%; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ width: 100%; min-height: clamp(26rem, 64vh, 44rem); object-fit: cover; } @media (min-width: 1400px){ .vh-hero-right-edge-copy{ padding-left: max(1.5rem, calc((100vw - 1320px) / 2 + 1.5rem)); } } @media (max-width: 991.98px){ .vh-hero-layout-bottom_image{ padding-bottom: clamp(2.5rem, 8vw, 5rem); } .vh-hero-bottom-image-wrap{ min-height: auto; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ width: min(100%, 28rem); } .vh-hero-layout-center_image_three .vh-hero-title, .vh-hero-layout-center_image_three .vh-hero-lead{ max-width: none; margin-left: auto; margin-right: auto; } .vh-hero-right-edge-copy{ padding-left: 1.5rem; padding-right: 1.5rem; } .vh-hero-right-edge-media-col{ padding-left: 1.5rem; padding-right: 1.5rem; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ border-radius: 1.15rem; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ min-height: 0; } } @media (max-width: 599.98px){ .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch, .vh-hero-layout-center_image_three .vh-hero-media--center-column{ width: min(100%, 22rem); } .vh-hero-three-col-info-row{ text-align: center; } } /* Context-specific hero padding set from Portfolio / Services / FAQ / Archive Customizer sections. */ .vh-layout-hero[style*="--vh-context-hero-padding-top"] { padding-top: var(--vh-context-hero-padding-top); } .vh-layout-hero[style*="--vh-context-hero-padding-bottom"] { padding-bottom: var(--vh-context-hero-padding-bottom); } @media (min-width: 600px) and (max-width: 991.98px) { .vh-layout-hero[style*="--vh-context-hero-padding-top-tablet"] { padding-top: var(--vh-context-hero-padding-top-tablet); } .vh-layout-hero[style*="--vh-context-hero-padding-bottom-tablet"] { padding-bottom: var(--vh-context-hero-padding-bottom-tablet); } } @media (max-width: 599.98px) { .vh-layout-hero[style*="--vh-context-hero-padding-top-mobile"] { padding-top: var(--vh-context-hero-padding-top-mobile); } .vh-layout-hero[style*="--vh-context-hero-padding-bottom-mobile"] { padding-bottom: var(--vh-context-hero-padding-bottom-mobile); } } /* Centered contact template cleanup. */ .vh-contact-page-section { min-height: 70vh; } .vh-contact-page-content, .vh-contact-page-content .entry-content, .vh-contact-page-content .vh-page-content { text-align: center; } .vh-contact-page-content form, .vh-contact-page-content .wpcf7, .vh-contact-page-content .wpforms-container { max-width: 42rem; margin-left: auto; margin-right: auto; text-align: left; } .vh-contact-page-content input:not([type="submit"]):not([type="button"]), .vh-contact-page-content textarea, .vh-contact-page-content select { max-width: 100%; } .vh-contact-page-content input[type="submit"], .vh-contact-page-content button[type="submit"] { display: inline-flex; justify-content: center; } /* ------------------------------------------------------------ Single portfolio horizontal overflow guard The decorative masthead pseudo-elements intentionally bleed outside the hero. Single portfolio heroes also need vertical overflow for tall card/grid layouts, so clip only the horizontal axis. ------------------------------------------------------------- */ .single-vh_portfolio .vh-layout-hero, .single-vh_portfolio .vh-hero-context-portfolio{ max-width: 100%; overflow-x: clip; overflow-y: visible; } .single-vh_portfolio .vh-layout-hero::before, .single-vh_portfolio .vh-hero-context-portfolio::before{ left: 0; right: 0; } .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{ max-width: 100%; } .single-vh_portfolio .vh-layout-hero .vh-row, .single-vh_portfolio .vh-hero-context-portfolio .vh-row{ max-width: 100%; } @supports not (overflow: clip){ .single-vh_portfolio .vh-layout-hero, .single-vh_portfolio .vh-hero-context-portfolio{ overflow-x: hidden; } } /* -------------------------------------------------------------------------- Portfolio Grid Hero — single source of truth Ratio controls shape. Card-size controls scale the complete grid. Column controls determine the actual row count. These rules apply only to the Universal Portfolio Grid Hero, never to normal homepage/archive grids. -------------------------------------------------------------------------- */ .vh-layout-hero.vh-hero-layout-portfolio_grid .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-auto, .vh-layout-hero .vh-hero-portfolio-grid--ratio-square, .vh-layout-hero .vh-hero-portfolio-grid--ratio-portrait, .vh-layout-hero .vh-hero-portfolio-grid--ratio-landscape, .vh-layout-hero .vh-hero-portfolio-grid--ratio-wide, .vh-layout-hero .vh-hero-portfolio-grid--ratio-vertical{ --vh-portfolio-grid-columns: 2; --vh-portfolio-grid-max-width: 46rem; --vh-portfolio-card-ratio: var(--vh-hero-card-aspect-ratio, 1 / 1); display:grid; grid-template-columns:repeat(var(--vh-portfolio-grid-columns), minmax(0, 1fr)); width:min(100%, var(--vh-portfolio-grid-max-width)); max-width:var(--vh-portfolio-grid-max-width); margin-inline:auto; gap:1rem; min-width:0; } .vh-layout-hero .vh-hero-portfolio-card{ min-width:0; min-height:0; aspect-ratio:var(--vh-portfolio-card-ratio); } .vh-layout-hero .vh-hero-portfolio-card img, .vh-layout-hero .vh-hero-portfolio-placeholder{ width:100%; height:100%; min-height:0; object-fit:cover; } /* Shape */ .vh-layout-hero.vh-hero-portfolio-grid-ratio-auto .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-auto{ --vh-portfolio-card-ratio:var(--vh-hero-card-aspect-ratio, 1 / 1); } .vh-layout-hero.vh-hero-portfolio-grid-ratio-square .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-square{ --vh-portfolio-card-ratio:1 / 1; } .vh-layout-hero.vh-hero-portfolio-grid-ratio-portrait .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-portrait{ --vh-portfolio-card-ratio:9 / 16; } .vh-layout-hero.vh-hero-portfolio-grid-ratio-landscape .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-landscape{ --vh-portfolio-card-ratio:16 / 9; } .vh-layout-hero.vh-hero-portfolio-grid-ratio-wide .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-wide{ --vh-portfolio-card-ratio:16 / 10; } .vh-layout-hero.vh-hero-portfolio-grid-ratio-vertical .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-vertical{ --vh-portfolio-card-ratio:4 / 5; } /* Columns */ .vh-layout-hero.vh-hero-portfolio-grid-cols-1 .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--cols-1{ --vh-portfolio-grid-columns:1; } .vh-layout-hero.vh-hero-portfolio-grid-cols-2 .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--cols-2{ --vh-portfolio-grid-columns:2; } .vh-layout-hero.vh-hero-portfolio-grid-cols-3 .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--cols-3{ --vh-portfolio-grid-columns:3; } .vh-layout-hero.vh-hero-portfolio-grid-cols-4 .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--cols-4{ --vh-portfolio-grid-columns:4; } /* Scale — one predictable cap per chosen size. */ .vh-layout-hero.vh-hero-portfolio-grid-size-compact .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-compact{ --vh-portfolio-grid-max-width:32rem; } .vh-layout-hero.vh-hero-portfolio-grid-size-medium .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-medium{ --vh-portfolio-grid-max-width:42rem; } .vh-layout-hero.vh-hero-portfolio-grid-size-large .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-large{ --vh-portfolio-grid-max-width:52rem; } .vh-layout-hero.vh-hero-portfolio-grid-size-full .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-full{ --vh-portfolio-grid-max-width:100%; } /* Auto balances portrait cards without narrowing them into towers. */ .vh-layout-hero.vh-hero-portfolio-grid-ratio-portrait.vh-hero-portfolio-grid-size-auto .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-portrait.vh-hero-portfolio-grid--size-auto{ --vh-portfolio-grid-max-width:42rem; } .vh-layout-hero.vh-hero-portfolio-grid-ratio-square.vh-hero-portfolio-grid-size-auto .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-square.vh-hero-portfolio-grid--size-auto{ --vh-portfolio-grid-max-width:44rem; } .vh-layout-hero.vh-hero-portfolio-grid-ratio-vertical.vh-hero-portfolio-grid-size-auto .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--ratio-vertical.vh-hero-portfolio-grid--size-auto{ --vh-portfolio-grid-max-width:46rem; } @media (min-width:600px) and (max-width:991.98px){ .vh-layout-hero.vh-hero-layout-portfolio_grid .vh-hero-portfolio-grid{ --vh-portfolio-grid-max-width:100%; } .vh-layout-hero.vh-hero-portfolio-grid-size-compact .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-compact{ --vh-portfolio-grid-max-width:30rem; } .vh-layout-hero.vh-hero-portfolio-grid-size-medium .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-medium{ --vh-portfolio-grid-max-width:40rem; } .vh-layout-hero.vh-hero-portfolio-grid-size-large .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-large{ --vh-portfolio-grid-max-width:48rem; } } @media (max-width:599.98px){ .vh-layout-hero.vh-hero-layout-portfolio_grid .vh-hero-portfolio-grid{ --vh-portfolio-grid-max-width:100%; gap:.75rem; } .vh-layout-hero.vh-hero-portfolio-grid-cols-3 .vh-hero-portfolio-grid, .vh-layout-hero.vh-hero-portfolio-grid-cols-4 .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--cols-3, .vh-layout-hero .vh-hero-portfolio-grid--cols-4{ --vh-portfolio-grid-columns:2; } .vh-layout-hero.vh-hero-portfolio-grid-size-compact .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-compact{ --vh-portfolio-grid-max-width:20rem; } .vh-layout-hero.vh-hero-portfolio-grid-size-medium .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-portfolio-grid--size-medium{ --vh-portfolio-grid-max-width:26rem; } } /* Hero media/card radius controls. Invalid unset CSS vars are ignored, so defaults remain untouched until a control is set. */ .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media, .vh-layout-hero .vh-hero-collage-main, .vh-layout-hero .vh-hero-feature-card, .vh-layout-hero .vh-hero-floating-card, .vh-layout-hero .vh-hero-before-after-card, .vh-layout-hero .vh-hero-portfolio-card{ border-top-left-radius: var(--vh-hero-media-radius-top); border-top-right-radius: var(--vh-hero-media-radius-top); border-bottom-left-radius: var(--vh-hero-media-radius-bottom); border-bottom-right-radius: var(--vh-hero-media-radius-bottom); } .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-media, .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-wide-media, .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-collage-main, .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-feature-card, .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-floating-card, .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-before-after-card, .vh-layout-hero.vh-hero-custom-media-radius .vh-hero-portfolio-card{ overflow: hidden; } .vh-layout-hero .vh-hero-media > img, .vh-layout-hero .vh-hero-wide-media > img, .vh-layout-hero .vh-hero-wide-media img, .vh-layout-hero .vh-hero-media > picture, .vh-layout-hero .vh-hero-media > picture > img, .vh-layout-hero .vh-hero-collage-main img, .vh-layout-hero .vh-hero-before-after-image, .vh-layout-hero .vh-hero-portfolio-card img{ border-top-left-radius: var(--vh-hero-media-radius-top); border-top-right-radius: var(--vh-hero-media-radius-top); border-bottom-left-radius: var(--vh-hero-media-radius-bottom); border-bottom-right-radius: var(--vh-hero-media-radius-bottom); } /* WO80: Single portfolio hero alignment contract. Keep horizontal overflow clipping on the hero shell, but never expand the inner Bootstrap container to full viewport width. */ .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{ width:100%; margin-left:auto; margin-right:auto; } @media (min-width:576px){ .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{max-width:540px;} } @media (min-width:768px){ .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{max-width:720px;} } @media (min-width:992px){ .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{max-width:960px;} } @media (min-width:1200px){ .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{max-width:1140px;} } @media (min-width:1400px){ .single-vh_portfolio .vh-layout-hero > .vh-hero-container, .single-vh_portfolio .vh-hero-context-portfolio > .vh-hero-container{max-width:1320px;} } /* WO80: Replace Bootstrap's fixed SVG accordion icon with a current-color chevron so per-template icon controls work without reducing keyboard/focus UX. */ #front-faq .vh-c-accordion__button::after, #results-faq .vh-c-accordion__button::after, .vh-related-faq-section .vh-c-accordion__button::after{ width:.72rem; height:.72rem; margin-left:auto; background:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; } #front-faq .vh-c-accordion__button:not(.is-collapsed)::after, #results-faq .vh-c-accordion__button:not(.is-collapsed)::after, .vh-related-faq-section .vh-c-accordion__button:not(.is-collapsed)::after{ transform:rotate(225deg); } /* WO80: The seamless-overlap contract also applies to single templates. Earlier cleanup was scoped to body.home, leaving a residual border/shadow on portfolio, service, and event heroes even when the feather was active. */ .vh-layout-hero.vh-hero-has-seamless-overlap{ border-bottom-color:transparent; box-shadow:none; } .vh-layout-hero.vh-hero-has-seamless-overlap > .vh-section-transition-overlay{ z-index:90; } /* WO105A: Universal hero overlap is centered evenly on the section boundary. Keep the following section/main content above the decorative transition while its background remains available for the visual blend. */ .vh-layout-hero.vh-hero-has-seamless-overlap + section > *:not(.vh-section-transition-overlay), .vh-layout-hero.vh-hero-has-seamless-overlap + main > *:not(.vh-section-transition-overlay){ position:relative; z-index:130; } /* Source 2: assets/src/hero/hero-layout-base.css | media: all */ /* ------------------------------------------------------------ Hero Layout Base Contract Scope: shared universal hero shell across home, pages, archives, and CPTs. Purpose: isolate hero layout stability from legacy style.css/front-page.css. ------------------------------------------------------------- */ .vh-layout-hero{ --vh-hero-shell-pad-x: clamp(1rem, 3.5vw, 2rem); --vh-hero-row-gap: clamp(1.75rem, 4vw, 3.5rem); --vh-hero-copy-max: 48rem; --vh-hero-media-max: 46rem; --vh-hero-title-gap: clamp(.65rem, 1.2vw, 1rem); --vh-hero-lead-gap: clamp(1rem, 2vw, 1.55rem); --vh-hero-action-gap: clamp(.65rem, 1.4vw, .95rem); --vh-hero-copy-media-gap: clamp(1.65rem, 3.5vw, 3rem); --vh-hero-block-gap: clamp(1.3rem, 3vw, 2.5rem); box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: clip; } @supports not (overflow: clip){ .vh-layout-hero{ overflow-x: hidden; } } .vh-layout-hero *, .vh-layout-hero *::before, .vh-layout-hero *::after{ box-sizing: border-box; } .vh-layout-hero > .vh-hero-container, .vh-layout-hero .vh-row, .vh-layout-hero [class*="col-"]{ min-width: 0; } .vh-layout-hero > .vh-hero-container{ width: 100%; max-width: min(100%, 1140px); padding-left: var(--vh-hero-shell-pad-x); padding-right: var(--vh-hero-shell-pad-x); } @media (min-width: 1400px){ .vh-layout-hero > .vh-hero-container{ max-width: min(100%, 1320px); } } .vh-layout-hero .vh-row{ row-gap: var(--vh-hero-row-gap); } .vh-layout-hero .vh-hero-copy, .vh-layout-hero .vh-hero-copy--overlay, .vh-layout-hero .vh-hero-copy--minimal, .vh-layout-hero .vh-hero-copy--center{ max-width: min(100%, var(--vh-hero-copy-max)); } .vh-layout-hero .vh-hero-title{ max-width: min(100%, 22ch); margin-bottom: var(--vh-hero-title-gap); overflow-wrap: anywhere; word-break: normal; hyphens: auto; text-wrap: balance; } .vh-layout-hero .vh-hero-lead{ max-width: min(100%, 42rem); margin-bottom: var(--vh-hero-lead-gap); text-wrap: pretty; } .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media, .vh-layout-hero .vh-hero-collage, .vh-layout-hero .vh-hero-collage-main, .vh-layout-hero .vh-hero-before-after, .vh-layout-hero .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-finder, .vh-layout-hero .vh-hero-extra{ max-width: 100%; min-width: 0; } .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media{ width: min(100%, var(--vh-hero-media-max)); } .vh-layout-hero .vh-hero-media img, .vh-layout-hero .vh-hero-wide-media img, .vh-layout-hero .vh-hero-collage-main img, .vh-layout-hero .vh-hero-portfolio-card img, .vh-layout-hero .vh-hero-before-after-image{ max-width: 100%; } .vh-layout-hero .vh-hero-media iframe, .vh-layout-hero .vh-hero-media video, .vh-layout-hero .vh-hero-media embed, .vh-layout-hero .vh-hero-media object{ max-width: 100%; } .vh-layout-hero .vh-hero-actions{ max-width: 100%; gap: var(--vh-hero-action-gap); } .vh-layout-hero .vh-hero-proof, .vh-layout-hero .vh-hero-proof--rating, .vh-layout-hero .vh-hero-proof--quote, .vh-layout-hero .vh-hero-inline-detail-stack{ max-width: min(100%, 42rem); } .vh-layout-hero .vh-hero-finder-form{ max-width: 100%; } .vh-layout-hero .vh-hero-finder-form input[type="search"], .vh-layout-hero .vh-hero-finder-form button{ max-width: 100%; } .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ max-width: none; } /* ------------------------------------------------------------ Hero Video Modal Contract Scope: interactive video poster, play trigger, and footer modal. ------------------------------------------------------------- */ .vh-layout-hero .vh-hero-video--modal{ position: relative; overflow: hidden; border-radius: inherit; background: #05070d; } .vh-layout-hero .vh-hero-video-trigger{ appearance: none; position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; } .vh-layout-hero .vh-hero-video-trigger > img, .vh-layout-hero .vh-hero-video-trigger > .vh-hero-placeholder{ width: 100%; height: 100%; object-fit: cover; } .vh-layout-hero .vh-hero-video-trigger::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.02), rgba(5,7,13,.18)); pointer-events: none; transition: background-color .2s ease; } .vh-layout-hero .vh-hero-video-trigger .vh-hero-play{ z-index: 2; pointer-events: none; transition: transform .2s ease, box-shadow .2s ease; } .vh-layout-hero .vh-hero-video-trigger:hover .vh-hero-play, .vh-layout-hero .vh-hero-video-trigger:focus-visible .vh-hero-play{ transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.38); } .vh-layout-hero .vh-hero-video-trigger:focus-visible{ outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px rgba(17,24,39,.75); } .vh-hero-video-modal{ z-index: 100100; } body.vh-hero-video-modal-open .modal-backdrop{ z-index: 100090; } .vh-hero-video-modal .vh-c-modal__dialog{ width: calc(100% - 2rem); max-width: min(92vw, 1120px); margin-right: auto; margin-left: auto; } .vh-hero-video-modal .vh-c-modal__content{ position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: #05070d; color: #fff; box-shadow: 0 2rem 5rem rgba(0,0,0,.55); } .vh-hero-video-modal .vh-hero-video-modal__toolbar{ display: flex; align-items: center; justify-content: flex-end; min-height: 3.5rem; padding: .375rem .5rem; background: #05070d; } .vh-hero-video-modal .vh-hero-video-modal__close{ flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: .75rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background-color: rgba(255,255,255,.08); opacity: 1; } .vh-hero-video-modal .vh-hero-video-modal__close:hover{ background-color: #05070d; opacity: 1; } .vh-hero-video-modal .vh-hero-video-modal__close:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(37,99,235,.72); } .vh-hero-video-modal .vh-c-modal__body{ padding: 0; background: #000; } .vh-hero-video-modal iframe{ width: 100%; height: 100%; border: 0; background: #000; } @media (max-width: 599.98px){ .vh-hero-video-modal .vh-c-modal__dialog{ width: calc(100% - 1rem); max-width: none; margin: .5rem auto; } .vh-hero-video-modal .vh-hero-video-modal__toolbar{ min-height: 3.25rem; padding: .25rem .375rem; } } /* ------------------------------------------------------------ WO107 — Universal hero supporting data / proof controls ------------------------------------------------------------- */ .vh-layout-hero .vh-hero-proof{ padding: var(--vh-hero-supporting-padding-y, .75rem) var(--vh-hero-supporting-padding-x, 1rem); background: var(--vh-hero-supporting-bg, rgba(255,255,255,.07)); border-color: var(--vh-hero-supporting-border, rgba(255,255,255,.12)); border-radius: var(--vh-hero-supporting-radius, 1rem); max-width: min(100%, var(--vh-hero-supporting-max-width, 42rem)); } .vh-layout-hero .vh-hero-proof .vh-proof-line, .vh-layout-hero .vh-hero-proof .vh-rating, .vh-layout-hero .vh-hero-proof .vh-proof-quote, .vh-layout-hero .vh-hero-proof .vh-proof-author, .vh-layout-hero .vh-hero-proof .vh-rating-summary, .vh-layout-hero .vh-hero-proof .vh-rating-summary__score, .vh-layout-hero .vh-hero-proof .vh-rating-summary__count{ color: var(--vh-hero-supporting-text, rgba(255,255,255,.78)); } .vh-layout-hero.vh-hero-supporting-boxless .vh-hero-proof{ padding: 0; background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; } .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-feature-card, .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-three-col-info-row{ background: var(--vh-hero-supporting-bg, rgba(255,255,255,.07)); border-color: var(--vh-hero-supporting-border, rgba(255,255,255,.12)); border-radius: var(--vh-hero-supporting-radius, 1rem); color: var(--vh-hero-supporting-text, rgba(255,255,255,.78)); } .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-feature-card p, .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-three-col-info-row span, .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-inline-detail, .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-inline-detail strong, .vh-layout-hero.vh-hero-supporting-enabled .vh-hero-inline-detail span{ color: var(--vh-hero-supporting-text, rgba(255,255,255,.78)); } /* Source 3: assets/src/hero/hero-media-performance-contract.css | media: all */ /* ------------------------------------------------------------ Hero media performance contract Scope: native request gating, LCP priority, and stable geometry. ------------------------------------------------------------- */ .vh-layout-hero .vh-hero-performance-picture{ display:block; width:100%; max-width:100%; min-width:0; } .vh-layout-hero .vh-hero-performance-picture > img{ display:block; width:100%; max-width:100%; height:auto; } /* Main hero media keeps the same sizing behavior as the former direct img. */ .vh-layout-hero .vh-hero-media > .vh-hero-performance-picture, .vh-layout-hero .vh-hero-wide-media .vh-hero-performance-picture, .vh-layout-hero .vh-hero-collage-main .vh-hero-performance-picture{ width:100%; height:100%; } .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > .vh-hero-performance-picture, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-media > .vh-hero-performance-picture > img, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-wide-media .vh-hero-performance-picture, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-wide-media .vh-hero-performance-picture > img, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-collage-main .vh-hero-performance-picture, .vh-layout-hero[class*="vh-hero-card-ratio-"] .vh-hero-collage-main .vh-hero-performance-picture > img{ width:100%; height:100%; min-height:0; object-fit:cover; } /* Video posters remain an edge-to-edge button target inside the 16:9 shell. */ .vh-layout-hero .vh-hero-video-trigger > .vh-hero-video-poster-picture{ position:absolute; inset:0; width:100%; height:100%; } .vh-layout-hero .vh-hero-video-trigger > .vh-hero-video-poster-picture > img{ width:100%; height:100%; object-fit:cover; } /* Portfolio cards previously expected a direct absolutely filling image. */ .vh-layout-hero .vh-hero-portfolio-card > .vh-hero-performance-picture{ position:absolute; inset:0; width:100%; height:100%; } .vh-layout-hero .vh-hero-portfolio-card > .vh-hero-performance-picture > img{ width:100%; height:100%; min-height:0; object-fit:cover; transition:transform .2s ease; } .vh-layout-hero .vh-hero-portfolio-card:hover > .vh-hero-performance-picture > img, .vh-layout-hero .vh-hero-portfolio-card:focus > .vh-hero-performance-picture > img{ transform:scale(1.035); } /* Before/after images can be either normal-flow or full-card ratio media. */ .vh-layout-hero .vh-hero-before-after-card > .vh-hero-performance-picture{ display:block; width:100%; flex:0 0 auto; } .vh-layout-hero .vh-hero-before-after-card > .vh-hero-performance-picture > .vh-hero-before-after-image{ width:100%; } .vh-layout-hero[class*="vh-hero-before-after-ratio-"] .vh-hero-before-after-card--has-image > .vh-hero-performance-picture{ position:absolute; inset:0; z-index:0; width:100%; height:100%; } .vh-layout-hero[class*="vh-hero-before-after-ratio-"] .vh-hero-before-after-card--has-image > .vh-hero-performance-picture > .vh-hero-before-after-image{ position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; aspect-ratio:auto; object-fit:cover; border-radius:inherit; margin:0; } /* Decorative hero-shell images are now native responsive images unless the operator explicitly enables fixed-background parallax. */ .vh-layout-hero > .vh-hero-shell-bg-media > .vh-hero-shell-bg-picture, .vh-layout-hero > .vh-hero-shell-bg-media > .vh-hero-shell-bg-picture > img{ width:100%; height:100%; } .vh-layout-hero > .vh-hero-shell-bg-media > .vh-hero-shell-bg-picture > img{ object-fit:cover; object-position:center center; } /* Full-bleed background heroes use an image layer instead of CSS background discovery so the active viewport receives the only real request. */ .vh-layout-hero.vh-hero-has-full-bleed-image{ position:relative; overflow:hidden; } .vh-layout-hero > .vh-hero-full-bleed-media, .vh-layout-hero > .vh-hero-full-bleed-overlay{ position:absolute; inset:0; pointer-events:none; } .vh-layout-hero > .vh-hero-full-bleed-media{ z-index:0; overflow:hidden; } .vh-layout-hero > .vh-hero-full-bleed-media > .vh-hero-full-bleed-picture, .vh-layout-hero > .vh-hero-full-bleed-media > .vh-hero-full-bleed-picture > img{ width:100%; height:100%; } .vh-layout-hero > .vh-hero-full-bleed-media > .vh-hero-full-bleed-picture > img{ object-fit:cover; object-position:center center; } .vh-layout-hero > .vh-hero-full-bleed-overlay{ z-index:1; background:linear-gradient( 90deg, var(--vh-hero-full-bleed-overlay-strong, rgba(7,11,21,.82)), var(--vh-hero-full-bleed-overlay-soft, rgba(7,11,21,.58)) ); } .vh-layout-hero.vh-hero-has-full-bleed-image.masthead::before, .vh-layout-hero.vh-hero-has-full-bleed-image.masthead::after{ z-index:2; } .vh-layout-hero.vh-hero-has-full-bleed-image > .vh-hero-container{ position:relative; z-index:3; } .vh-layout-hero.vh-hero-has-full-bleed-image > .vh-section-transition-overlay{ z-index:8; } /* Source 4: assets/src/hero/hero-layout-tablet.css | media: (min-width: 600px) and (max-width: 991.98px) */ @media (min-width: 600px) and (max-width: 991.98px) { /* ------------------------------------------------------------ Tablet Hero Layout Overrides Loaded only for 600px–991.98px. ------------------------------------------------------------- */ .vh-layout-hero{ --vh-hero-shell-pad-x: clamp(1.25rem, 4vw, 2rem); --vh-hero-row-gap: clamp(1.75rem, 5vw, 3rem); min-height: auto; padding-top: var(--vh-context-hero-padding-top-tablet, clamp(4.75rem, 8vw, 6.5rem)); padding-bottom: var(--vh-context-hero-padding-bottom-tablet, clamp(4.75rem, 8vw, 6.5rem)); text-align: center; } body.home .vh-hero-context-home{ padding-top: clamp(5rem, 9vw, 7rem); padding-bottom: clamp(5rem, 9vw, 7rem); } .vh-layout-hero .vh-hero-copy, .vh-layout-hero .vh-hero-copy--overlay, .vh-layout-hero .vh-hero-copy--minimal, .vh-layout-hero .vh-hero-copy--center{ margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-title{ font-size: min(var(--vh-hero-title-size, 56px), 46px); line-height: 1.08; max-width: min(100%, 22ch); margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-lead{ font-size: min(var(--vh-hero-subtitle-size, 18px), 19px); margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-actions{ justify-content: center; } .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media, .vh-layout-hero .vh-hero-collage, .vh-layout-hero .vh-hero-before-after, .vh-layout-hero .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-finder{ margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media{ width: min(100%, 42rem); } .vh-layout-hero .vh-hero-media img, .vh-layout-hero .vh-hero-wide-media img{ max-height: 34rem; object-fit: cover; } .vh-hero-layout-default_split .vh-row, .vh-hero-layout-lifestyle_collage .vh-row, .vh-hero-layout-video_hero .vh-row, .vh-hero-layout-asymmetric_magazine .vh-row, .vh-hero-layout-right_edge_image .vh-row, .vh-hero-layout-center_image_three .vh-row{ align-items: center; } .vh-hero-layout-right_edge_image > .vh-hero-container{ padding-left: var(--vh-hero-shell-pad-x); padding-right: var(--vh-hero-shell-pad-x); } .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy, .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ padding-left: 0; padding-right: 0; } .vh-layout-hero .vh-hero-proof, .vh-layout-hero .vh-hero-proof--rating, .vh-layout-hero .vh-hero-proof--quote, .vh-layout-hero .vh-hero-inline-detail-stack{ margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-portfolio-grid{ gap: .85rem; } .vh-layout-hero.vh-hero-portfolio-grid-cols-3 .vh-hero-portfolio-grid, .vh-layout-hero.vh-hero-portfolio-grid-cols-4 .vh-hero-portfolio-grid{ --vh-portfolio-grid-columns: 2; } } /* Source 5: assets/src/hero/hero-layout-mobile.css | media: (max-width: 599.98px) */ @media (max-width: 599.98px) { /* ------------------------------------------------------------ Mobile Hero Layout Overrides Loaded only below 600px. ------------------------------------------------------------- */ .vh-layout-hero{ --vh-hero-shell-pad-x: 1rem; --vh-hero-row-gap: 1.6rem; min-height: auto; padding-top: var(--vh-context-hero-padding-top-mobile, clamp(3.75rem, 12vw, 5rem)); padding-bottom: var(--vh-context-hero-padding-bottom-mobile, clamp(3.75rem, 12vw, 5rem)); text-align: center; } body.home .vh-hero-context-home{ padding-top: clamp(4.25rem, 13vw, 5.5rem); padding-bottom: clamp(4.25rem, 13vw, 5.5rem); } .vh-layout-hero > .vh-hero-container{ padding-left: var(--vh-hero-shell-pad-x); padding-right: var(--vh-hero-shell-pad-x); } .vh-layout-hero .vh-row{ margin-left: 0; margin-right: 0; } .vh-layout-hero .vh-row > [class*="col-"]{ padding-left: 0; padding-right: 0; } .vh-layout-hero .vh-hero-copy, .vh-layout-hero .vh-hero-copy--overlay, .vh-layout-hero .vh-hero-copy--minimal, .vh-layout-hero .vh-hero-copy--center{ width: 100%; margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-title{ font-size: min(var(--vh-hero-title-size, 56px), 38px); line-height: 1.08; letter-spacing: -.025em; max-width: min(100%, 18ch); margin-left: auto; margin-right: auto; } body.home .vh-hero-context-home .vh-hero-title{ max-width: min(100%, 19ch); } .vh-layout-hero .vh-hero-lead{ font-size: min(var(--vh-hero-subtitle-size, 18px), 17px); line-height: 1.55; max-width: min(100%, 32rem); margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-eyebrow{ max-width: 100%; white-space: normal; justify-content: center; } .vh-layout-hero .vh-hero-actions{ display: grid; grid-template-columns: 1fr; width: 100%; max-width: 24rem; margin-left: auto; margin-right: auto; justify-content: stretch; } .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media, .vh-layout-hero .vh-hero-collage, .vh-layout-hero .vh-hero-before-after, .vh-layout-hero .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-finder, .vh-layout-hero .vh-hero-proof, .vh-layout-hero .vh-hero-proof--rating, .vh-layout-hero .vh-hero-proof--quote, .vh-layout-hero .vh-hero-inline-detail-stack{ width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-media, .vh-layout-hero .vh-hero-wide-media{ border-radius: var(--vh-hero-media-radius-top, 1rem); } .vh-layout-hero .vh-hero-media img, .vh-layout-hero .vh-hero-wide-media img{ width: 100%; max-height: 24rem; object-fit: cover; } .vh-layout-hero .vh-hero-placeholder{ min-height: 14rem; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img, .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge img{ max-height: 24rem; object-fit: contain; object-position: bottom center; } .vh-hero-layout-right_edge_image > .vh-hero-container{ padding-left: var(--vh-hero-shell-pad-x); padding-right: var(--vh-hero-shell-pad-x); } .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy, .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ padding-left: 0; padding-right: 0; } .vh-layout-hero .vh-hero-before-after{ grid-template-columns: 1fr; } .vh-layout-hero .vh-hero-before-after::before{ display: none; } .vh-layout-hero .vh-hero-portfolio-grid{ --vh-portfolio-grid-columns: 2; gap: .7rem; } .vh-layout-hero.vh-hero-portfolio-grid-cols-1 .vh-hero-portfolio-grid{ --vh-portfolio-grid-columns: 1; } .vh-layout-hero .vh-hero-portfolio-caption{ left: .55rem; right: .55rem; bottom: .55rem; padding: .42rem .5rem; } .vh-layout-hero .vh-hero-portfolio-excerpt{ display: none; } .vh-layout-hero .vh-hero-finder{ padding: 0; background: transparent; border: 0; } .vh-layout-hero .vh-hero-finder-form{ display: grid; grid-template-columns: 1fr; gap: .75rem; } .vh-layout-hero .vh-hero-finder-form input[type="search"], .vh-layout-hero .vh-hero-finder-form button{ width: 100%; border-radius: .9rem; } .vh-layout-hero .vh-hero-proof, .vh-layout-hero .vh-hero-proof--rating, .vh-layout-hero .vh-hero-proof--quote{ justify-content: center; text-align: center; } .vh-layout-hero .vh-hero-inline-detail{ text-align: left; } .vh-layout-hero .vh-hero-extra .vh-container, .vh-layout-hero .vh-hero-extra .vh-row{ max-width: 100%; } } /* Source 6: assets/src/hero/hero-layout-top-stack.css | media: all */ /* ------------------------------------------------------------ Hero Top-Stack Safe Zone Scope: first/home hero + responsive bottom-image hero. Purpose: keep hero title, subtitle, CTAs, and media clear of the announcement bar, fixed presentation nav, floating menu toggle, and WordPress Customizer/mobile preview chrome. ------------------------------------------------------------- */ :root{ --vh-hero-top-stack-gap: clamp(.85rem, 2.25vw, 1.35rem); --vh-hero-top-stack-reserve: 0px; --vh-hero-mobile-menu-reserve: 0px; } .vh-layout-hero:first-of-type, body.home .vh-hero-context-home{ scroll-margin-top: calc( var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + var(--vh-navbar-height, 56px) + 1.5rem ); } /* Fixed/above-nav announcement states need a hard minimum so title text cannot slide under the black preorder/announcement strip or fixed navbar. */ body.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type{ padding-top: max( var(--vh-context-hero-padding-top, clamp(5.75rem, 9vw, 8rem)), calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap)) ); } body.home.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home{ padding-top: max( clamp(6.25rem, 10vw, 8.5rem), calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap)) ); } /* Bottom-image heroes were built around desktop theater framing. On tablet/mobile the copy must own the top of the section so it remains visible and predictable. */ .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ position: relative; z-index: 4; overflow: visible; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-title, .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead, .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{ position: relative; z-index: 5; } @media (min-width: 600px) and (max-width: 991.98px){ :root{ --vh-hero-top-stack-gap: clamp(1rem, 2.6vw, 1.5rem); } body.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type{ padding-top: max( var(--vh-context-hero-padding-top-tablet, clamp(5.75rem, 9vw, 7.5rem)), calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap)) ); } body.home.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home{ padding-top: max( clamp(6rem, 10vw, 7.75rem), calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap)) ); } .vh-hero-layout-editorial_center_bottom_image.masthead > .vh-hero-container{ justify-content: flex-start; min-height: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ width: min(100%, 44rem); max-width: min(100%, 44rem); margin-top: 0; margin-bottom: clamp(1.35rem, 3vw, 2rem); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: min(100%, 44rem); max-width: min(100%, 44rem); margin-top: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ max-height: min(48vh, 30rem); object-fit: cover; object-position: center center; } } @media (max-width: 599.98px){ :root{ --vh-hero-top-stack-gap: .95rem; } body.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type, body.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type{ padding-top: max( var(--vh-context-hero-padding-top-mobile, clamp(4.75rem, 15vw, 6.25rem)), calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap)) ); } body.home.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home, body.home.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home{ padding-top: max( clamp(5.25rem, 17vw, 6.75rem), calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap)) ); } .vh-hero-layout-editorial_center_bottom_image.masthead{ padding-bottom: clamp(2rem, 9vw, 3.25rem); } .vh-hero-layout-editorial_center_bottom_image.masthead > .vh-hero-container{ display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ width: 100%; max-width: 100%; margin-top: 0; margin-bottom: 1.25rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{ font-size: min(var(--vh-hero-title-size, 56px), 34px); line-height: 1.06; max-width: min(100%, 16ch); margin-bottom: .7rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{ font-size: min(var(--vh-hero-subtitle-size, 18px), 16.5px); line-height: 1.48; max-width: min(100%, 31ch); margin-bottom: 1.2rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{ width: min(100%, 21rem); max-width: min(100%, 21rem); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge, .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ width: 100%; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ max-height: min(42vh, 21rem); object-fit: cover; object-position: center center; } /* Give the floating menu an obvious lane without letting it sit on top of hero copy. */ body.home.vh-nav-scrolled .vh-hero-context-home .vh-hero-copy, body.home.customize-preview .vh-hero-context-home .vh-hero-copy{ padding-right: clamp(0rem, 7vw, 2.75rem); padding-left: clamp(0rem, 7vw, 2.75rem); } } @media (max-width: 380px){ .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{ font-size: min(var(--vh-hero-title-size, 56px), 31px); max-width: min(100%, 15ch); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{ max-width: min(100%, 29ch); } } /* Source 7: assets/src/hero/hero-layout-bottom-image-recovery.css | media: all */ /* ------------------------------------------------------------ Hero Bottom-Image Overflow Recovery Scope: universal hero layout "Centered Text Hero — Bottom Image". Purpose: stop the text stack from being pushed/clipped above the visible viewport when copy + CTAs + bottom media are taller than the hero's old fixed theater frame. Root cause: legacy bottom-image CSS bottom-aligned the full stack inside a constrained/hidden masthead. On short desktop windows, tablet preview, and Customizer mobile preview, the H1/subtitle could overflow upward under the announcement/nav/menu stack. ------------------------------------------------------------- */ :root{ --vh-hero-bottom-image-safe-top: max( var(--vh-context-hero-padding-top, clamp(5.5rem, 8vw, 7.5rem)), calc(var(--vh-hero-top-stack-reserve, 0px) + .75rem), calc(var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + var(--vh-navbar-height, 56px) + 1rem) ); } /* Turn the bottom-image layout back into a normal readable stack. The image may still sit visually at the bottom of the section, but the text no longer gets sacrificed to preserve a fixed hero height. */ .vh-hero-layout-editorial_center_bottom_image.masthead{ height: auto; min-height: auto; align-items: stretch; overflow: visible; padding-top: var(--vh-hero-bottom-image-safe-top); padding-bottom: 0; } .vh-hero-layout-editorial_center_bottom_image.masthead > .vh-hero-container{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 0; height: auto; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ width: min(100%, 960px); max-width: min(100%, 960px); margin-top: 0; margin-bottom: clamp(1.25rem, 3vw, 2.75rem); overflow: visible; flex: 0 0 auto; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-title, .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead, .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{ transform: none; opacity: 1; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{ max-width: min(100%, 22ch); margin-left: auto; margin-right: auto; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{ max-width: min(100%, 48rem); margin-left: auto; margin-right: auto; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{ justify-content: center; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: min(100%, 1120px); max-width: min(100%, 1120px); margin-top: 0; margin-bottom: 0; flex: 0 0 auto; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge, .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ width: 100%; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ display: block; height: auto; max-height: min(52vh, 34rem); object-fit: cover; object-position: center center; } @media (min-width: 600px) and (max-width: 991.98px){ :root{ --vh-hero-bottom-image-safe-top: max( var(--vh-context-hero-padding-top-tablet, clamp(5.75rem, 10vw, 7.25rem)), calc(var(--vh-hero-top-stack-reserve, 0px) + .75rem), calc(var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + var(--vh-navbar-height, 56px) + 1rem) ); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ width: min(100%, 44rem); max-width: min(100%, 44rem); margin-bottom: clamp(1.15rem, 3vw, 2rem); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{ max-width: min(100%, 18ch); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{ max-width: min(100%, 40rem); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: min(100%, 44rem); max-width: min(100%, 44rem); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ max-height: min(46vh, 29rem); } } @media (max-width: 599.98px){ :root{ --vh-hero-bottom-image-safe-top: max( var(--vh-context-hero-padding-top-mobile, clamp(5.25rem, 18vw, 6.75rem)), calc(var(--vh-hero-top-stack-reserve, 0px) + .75rem), calc(var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + 4.75rem) ); } .vh-hero-layout-editorial_center_bottom_image.masthead{ padding-top: var(--vh-hero-bottom-image-safe-top); padding-bottom: 0; } .vh-hero-layout-editorial_center_bottom_image.masthead > .vh-hero-container{ padding-left: 1rem; padding-right: 1rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ width: 100%; max-width: 100%; margin-bottom: 1.15rem; padding-left: 0; padding-right: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{ max-width: min(100%, 15ch); margin-bottom: .65rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{ max-width: min(100%, 31ch); margin-bottom: 1rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{ width: min(100%, 21rem); max-width: min(100%, 21rem); margin-left: auto; margin-right: auto; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: 100%; max-width: 100%; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ max-height: min(38vh, 20rem); } } @media (max-width: 380px){ .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{ max-width: min(100%, 14ch); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{ max-width: min(100%, 29ch); } } /* Source 8: assets/src/hero/hero-layout-responsive-contracts.css | media: all */ /* ------------------------------------------------------------ Hero Layout Responsive Contracts Version: 1.5.58-wo55 Scope: all hero layout choices across home, pages, archives, and CPTs. Purpose: give every hero layout a predictable desktop/tablet/mobile contract without editing legacy broad styles. ------------------------------------------------------------- */ /* WO126A ownership migration: Base rhythm variables, title/lead spacing, and action gap are now owned by hero-layout-base.css. This compatibility file retains only responsive and layout-specific overrides until their selector families are migrated. */ .vh-layout-hero .vh-mt-5, .vh-layout-hero .vh-hero-extra.vh-mt-5, .vh-layout-hero .vh-hero-media-slot--below, .vh-layout-hero .vh-hero-wide-media.vh-mt-5{ margin-top: var(--vh-hero-copy-media-gap); } .vh-layout-hero .vh-mb-5{ margin-bottom: var(--vh-hero-copy-media-gap); } /* Ensure repeated row-based layouts have the same gap vocabulary. */ .vh-hero-layout-default_split .vh-row, .vh-hero-layout-lifestyle_collage .vh-row, .vh-hero-layout-video_hero .vh-row, .vh-hero-layout-problem_solution .vh-row, .vh-hero-layout-portfolio_grid .vh-row, .vh-hero-layout-asymmetric_magazine .vh-row, .vh-hero-layout-bottom_image .vh-row, .vh-hero-layout-center_image_three .vh-row, .vh-hero-layout-right_edge_image .vh-row{ row-gap: var(--vh-hero-copy-media-gap); } /* Desktop: media layouts should show their media clearly instead of being capped by the generic mobile/tablet recovery rules. */ @media (min-width: 992px){ .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: min(100%, 1160px); max-width: min(100%, 1160px); } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center bottom; } .vh-hero-layout-bottom_image{ padding-bottom: 0; } .vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{ min-height: clamp(30rem, 70vh, 48rem); align-items: stretch; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ align-self: flex-end; margin-bottom: 0; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ display: block; height: auto; max-height: clamp(28rem, 70vh, 48rem); object-fit: contain; object-position: bottom center; } .vh-hero-layout-right_edge_image{ padding-right: 0; padding-bottom: 0; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ min-height: clamp(30rem, 70vh, 48rem); align-items: stretch; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ display: flex; flex-direction: column; justify-content: center; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ display: flex; align-items: stretch; padding-right: 0; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge, .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ width: 100%; height: 100%; min-height: clamp(30rem, 70vh, 48rem); object-fit: cover; object-position: center center; } } /* Right edge means right edge. Custom radius controls may round the other corners, but never the top-right/bottom-right edge of this layout. */ .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img, .vh-layout-hero.vh-hero-layout-right_edge_image.vh-hero-custom-media-radius .vh-hero-media--right-edge, .vh-layout-hero.vh-hero-layout-right_edge_image.vh-hero-custom-media-radius .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image.vh-hero-custom-media-radius .vh-hero-media--right-edge img{ border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Finder layout: keep search input + search button in one crisp row on tablet and mobile. CTAs below it may still stack on mobile. */ .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder{ width: min(100%, 900px); max-width: min(100%, 900px); } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form, body.home .vh-hero-layout-search_finder .vh-hero-finder-form{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; max-width: 900px; } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"], body.home .vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"]{ flex: 1 1 auto; width: auto; min-width: 0; min-height: 3.75rem; border-radius: .95rem 0 0 .95rem; border-right: 0; } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form button, body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{ flex: 0 0 clamp(7rem, 24vw, 9.5rem); width: auto; min-width: 0; min-height: 3.75rem; padding-left: .9rem; padding-right: .9rem; white-space: nowrap; border-radius: 0 .95rem .95rem 0; justify-self: auto; } /* Tablet contract: all layouts retain hierarchy, reduce utility spacing, and give media a deliberate size/edge behavior. */ @media (min-width: 600px) and (max-width: 991.98px){ .vh-layout-hero{ --vh-hero-title-gap: .7rem; --vh-hero-lead-gap: 1.15rem; --vh-hero-action-gap: .75rem; --vh-hero-copy-media-gap: clamp(1.5rem, 4vw, 2.25rem); --vh-hero-block-gap: clamp(1.25rem, 3vw, 2rem); } .vh-layout-hero .vh-hero-actions{ max-width: min(100%, 42rem); } .vh-hero-layout-default_split .vh-row, .vh-hero-layout-lifestyle_collage .vh-row, .vh-hero-layout-video_hero .vh-row, .vh-hero-layout-problem_solution .vh-row, .vh-hero-layout-portfolio_grid .vh-row, .vh-hero-layout-asymmetric_magazine .vh-row, .vh-hero-layout-bottom_image .vh-row, .vh-hero-layout-center_image_three .vh-row, .vh-hero-layout-right_edge_image .vh-row{ align-items: center; } .vh-hero-layout-editorial_center .vh-hero-wide-media, .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: min(100%, 46rem); max-width: min(100%, 46rem); } .vh-hero-layout-editorial_center_bottom_image, .vh-hero-layout-bottom_image, .vh-hero-layout-right_edge_image{ padding-bottom: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ display: block; width: 100%; height: auto; max-height: none; object-fit: contain; object-position: bottom center; } .vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{ min-height: auto; align-items: flex-end; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ width: min(100%, 32rem); margin-bottom: 0; align-self: flex-end; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ max-height: clamp(22rem, 46vh, 34rem); object-fit: contain; object-position: bottom center; } .vh-hero-layout-right_edge_image > .vh-hero-container{ padding-left: var(--vh-hero-shell-pad-x); padding-right: 0; max-width: none; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ padding-left: 0; padding-right: var(--vh-hero-shell-pad-x); text-align: center; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ padding-left: 0; padding-right: 0; display: flex; justify-content: flex-end; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ width: min(100%, 46rem); max-width: none; margin-left: auto; margin-right: 0; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ display: block; width: 100%; min-height: 0; max-height: 34rem; object-fit: cover; object-position: center center; } .vh-hero-layout-search_finder .vh-hero-finder{ margin-top: 0; } .vh-hero-layout-portfolio_grid .vh-hero-portfolio-grid, .vh-hero-layout-problem_solution .vh-hero-before-after, .vh-hero-layout-center_image_three .vh-hero-three-col-info{ margin-top: 0; } } /* Mobile contract: compressed, structured spacing. Search stays one row; normal CTAs stay stacked for tap comfort. */ @media (max-width: 599.98px){ .vh-layout-hero{ --vh-hero-title-gap: .55rem; --vh-hero-lead-gap: .9rem; --vh-hero-action-gap: .65rem; --vh-hero-copy-media-gap: 1.15rem; --vh-hero-block-gap: 1rem; } .vh-layout-hero .vh-hero-eyebrow{ margin-bottom: .55rem; } .vh-layout-hero .vh-hero-actions{ gap: .65rem; } .vh-layout-hero .vh-hero-proof, .vh-layout-hero .vh-hero-inline-detail-stack, .vh-layout-hero .vh-hero-before-after, .vh-layout-hero .vh-hero-portfolio-grid, .vh-layout-hero .vh-hero-three-col-info{ margin-top: var(--vh-hero-block-gap); } .vh-hero-layout-editorial_center_bottom_image, .vh-hero-layout-bottom_image, .vh-hero-layout-right_edge_image{ padding-bottom: 0; } .vh-hero-layout-editorial_center_bottom_image > .vh-hero-container{ padding-bottom: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ margin-bottom: 1rem; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: 100%; max-width: 100%; margin-bottom: 0; } .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ display: block; width: 100%; height: auto; max-height: none; object-fit: contain; object-position: bottom center; } .vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{ min-height: auto; align-items: flex-end; row-gap: 1.15rem; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ width: min(100%, 24rem); max-width: 100%; margin-bottom: 0; align-self: flex-end; } .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ display: block; height: auto; max-height: clamp(17rem, 44vh, 26rem); object-fit: contain; object-position: bottom center; } .vh-hero-layout-right_edge_image > .vh-hero-container{ padding-left: var(--vh-hero-shell-pad-x); padding-right: 0; max-width: none; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ padding-left: 0; padding-right: var(--vh-hero-shell-pad-x); text-align: center; } .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ padding-left: 0; padding-right: 0; margin-bottom: 0; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ width: 100%; max-width: none; margin-left: auto; margin-right: 0; margin-bottom: 0; } .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ display: block; width: 100%; min-height: 0; max-height: 24rem; object-fit: cover; object-position: center center; } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder{ width: 100%; max-width: 100%; } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form, body.home .vh-hero-layout-search_finder .vh-hero-finder-form{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"], body.home .vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"]{ min-height: 3.45rem; border-radius: .85rem 0 0 .85rem; font-size: .95rem; } .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form button, body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{ flex-basis: clamp(5.85rem, 30vw, 7.5rem); min-height: 3.45rem; padding-left: .65rem; padding-right: .65rem; border-radius: 0 .85rem .85rem 0; font-size: .95rem; } } @media (max-width: 360px){ .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form button, body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{ flex-basis: 5.6rem; padding-left: .5rem; padding-right: .5rem; } } /* Source 9: assets/src/hero/hero-layout-media-edge-corrections.css | media: all */ /* ------------------------------------------------------------ Hero Layout Media Edge Corrections Version: 1.5.59-wo56 Scope: before/after arrow + bottom/right-edge image behavior. Purpose: override legacy image caps/cropping after all prior hero CSS. ------------------------------------------------------------- */ /* Make the Before/After relationship visible. Desktop gets a right arrow; stacked tablet/mobile gets the same affordance pointing downward. */ .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after{ position: relative; gap: clamp(1.75rem, 3vw, 2.5rem); } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after::before{ content: "→"; display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--vh-btn-primary-bg, #a3b312); color: var(--vh-btn-primary-text, #ffffff); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 .75rem 2rem rgba(0,0,0,.28); font-size: 1.35rem; font-weight: 900; line-height: 1; z-index: 7; pointer-events: none; } /* Image reset for layouts where the full image must remain visible. Older global rules force 16:10 + object-fit:cover; this explicitly opts bottom-image patterns back into natural image rendering. */ .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-media--center-column, .vh-layout-hero.vh-hero-layout-asymmetric_magazine .vh-hero-media--offset{ overflow: hidden; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > img, .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-media--center-column > img, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-media--center-column img, .vh-layout-hero.vh-hero-layout-asymmetric_magazine .vh-hero-media--offset > img, .vh-layout-hero.vh-hero-layout-asymmetric_magazine .vh-hero-media--offset img{ display: block; width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: center bottom; } /* Centered Text — Bottom Image: the media is the bottom anchor. */ .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image{ overflow: hidden; padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .vh-hero-container{ display: flex; flex-direction: column; min-height: inherit; padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ margin-top: 0; margin-bottom: clamp(1rem, 2.4vw, 1.75rem); } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ display: block; width: min(100%, 1200px); max-width: min(100%, 1200px); margin-top: auto; margin-bottom: 0; align-self: center; transform: translateY(1px); } /* Bottom-Aligned Image Hero: do not cap the media at 22–34rem. Use the column/viewport width, then pin it to the section bottom. */ .vh-layout-hero.vh-hero-layout-bottom_image{ overflow: hidden; padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-bottom_image > .vh-hero-container{ padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{ align-items: stretch; margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ display: block; width: 100%; max-width: none; margin-inline: auto; margin-bottom: 0; align-self: flex-end; transform: translateY(1px); background: transparent; border: 0; box-shadow: none; } /* Right Edge Image Hero: right side stays square and flush. */ .vh-layout-hero.vh-hero-layout-right_edge_image{ overflow: hidden; padding-right: 0; padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ margin-right: 0; margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ padding-right: 0; margin-bottom: 0; display: flex; align-items: stretch; justify-content: flex-end; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ display: block; width: 100%; max-width: none; height: 100%; margin-right: 0; margin-bottom: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; transform: translateY(1px); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ display: block; width: 100%; height: 100%; min-height: clamp(24rem, 58vh, 44rem); max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center center; border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 992px){ .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ min-height: clamp(32rem, 70vh, 50rem); } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ max-height: clamp(30rem, 70vh, 50rem); } } @media (min-width: 600px) and (max-width: 991.98px){ .vh-layout-hero{ --vh-hero-copy-media-gap: 1.5rem; --vh-hero-lead-gap: 1rem; --vh-hero-action-gap: .7rem; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after{ display: flex; flex-direction: column; gap: .85rem; align-items: stretch; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after::before{ content: "↓"; position: static; transform: none; order: 2; margin: -.2rem auto; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after-card:first-child{ order: 1; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after-card:last-child{ order: 3; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: min(100%, 48rem); max-width: min(100%, 48rem); } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-media--center-column, .vh-layout-hero.vh-hero-layout-asymmetric_magazine .vh-hero-media--offset{ width: min(100%, 44rem); max-width: none; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ max-height: clamp(22rem, 50vh, 36rem); } .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ padding-right: 0; max-width: none; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ padding-right: var(--vh-hero-shell-pad-x, 1.5rem); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ min-height: clamp(22rem, 44vh, 34rem); } } @media (max-width: 599.98px){ .vh-layout-hero{ --vh-hero-title-gap: .5rem; --vh-hero-lead-gap: .75rem; --vh-hero-action-gap: .55rem; --vh-hero-copy-media-gap: .95rem; --vh-hero-block-gap: .9rem; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after{ display: flex; flex-direction: column; gap: .75rem; align-items: stretch; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after::before{ content: "↓"; position: static; transform: none; order: 2; width: 2.5rem; height: 2.5rem; margin: -.15rem auto; font-size: 1.2rem; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after-card:first-child{ order: 1; } .vh-layout-hero.vh-hero-layout-problem_solution .vh-hero-before-after-card:last-child{ order: 3; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-copy, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-copy{ margin-bottom: .85rem; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ width: 100%; max-width: 100%; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-media--center-column, .vh-layout-hero.vh-hero-layout-asymmetric_magazine .vh-hero-media--offset{ width: 100%; max-width: none; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{ max-height: clamp(17rem, 42vh, 26rem); } .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ padding-left: var(--vh-hero-shell-pad-x, 1rem); padding-right: 0; max-width: none; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ padding-right: var(--vh-hero-shell-pad-x, 1rem); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ min-height: clamp(16rem, 38vh, 24rem); } } /* Source 10: assets/src/hero/hero-layout-tablet-media-radius-contract.css | media: all */ /* ------------------------------------------------------------ Hero Layout Tablet + Media Radius Contract Version: 1.5.60-wo57 Scope: hero tablet CTA rows, uniform stacked widths, per-corner media radius. Purpose: make tablet/mobile hero sections look structured instead of mixed-width. ------------------------------------------------------------- */ .vh-layout-hero{ --vh-hero-media-radius-tl: var(--vh-hero-media-radius-top-left, var(--vh-hero-media-radius-top, 1.35rem)); --vh-hero-media-radius-tr: var(--vh-hero-media-radius-top-right, var(--vh-hero-media-radius-top, 1.35rem)); --vh-hero-media-radius-br: var(--vh-hero-media-radius-bottom-right, var(--vh-hero-media-radius-bottom, 1.35rem)); --vh-hero-media-radius-bl: var(--vh-hero-media-radius-bottom-left, var(--vh-hero-media-radius-bottom, 1.35rem)); } .vh-layout-hero :is(.vh-hero-media,.vh-hero-wide-media,.vh-hero-collage-main,.vh-hero-before-after-card,.vh-hero-portfolio-card,.vh-hero-portfolio-card--empty){ border-top-left-radius: var(--vh-hero-media-radius-tl); border-top-right-radius: var(--vh-hero-media-radius-tr); border-bottom-right-radius: var(--vh-hero-media-radius-br); border-bottom-left-radius: var(--vh-hero-media-radius-bl); overflow: hidden; } .vh-layout-hero :is(.vh-hero-media,.vh-hero-wide-media,.vh-hero-collage-main) > :is(img,picture,video,iframe,.vh-hero-video,.vh-hero-placeholder), .vh-layout-hero :is(.vh-hero-media,.vh-hero-wide-media,.vh-hero-collage-main) picture > img, .vh-layout-hero .vh-hero-portfolio-card > :is(img,.vh-hero-portfolio-placeholder){ border-radius: inherit; } /* Right Edge Image is an edge layout: the right side must stay square even when global or front-page per-corner image radius values are set. */ .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 600px) and (max-width: 991.98px){ .vh-layout-hero{ --vh-hero-stack-width: min(100%, 42rem); --vh-hero-copy-media-gap: clamp(1.15rem, 2.8vw, 1.75rem); --vh-hero-block-gap: clamp(1rem, 2.4vw, 1.5rem); --vh-hero-action-gap: .8rem; } /* Tablet CTAs should read like one action row, not a mobile stack. */ body.home .vh-layout-hero .vh-hero-actions, .vh-layout-hero .vh-hero-actions{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; justify-content: center; justify-items: stretch; gap: var(--vh-hero-action-gap); width: var(--vh-hero-stack-width); max-width: var(--vh-hero-stack-width); margin-left: auto; margin-right: auto; } body.home .vh-layout-hero .vh-hero-actions .vh-c-button, .vh-layout-hero .vh-hero-actions .vh-c-button{ width: 100%; min-width: 0; min-height: 3.1rem; white-space: normal; } /* Make stacked hero sections share one visual measure on tablet. */ .vh-layout-hero :is(.vh-hero-copy,.vh-hero-lead,.vh-hero-proof,.vh-hero-finder,.vh-hero-before-after,.vh-hero-portfolio-grid,.vh-hero-three-col-info,.vh-hero-wide-media,.vh-hero-wide-media--bottom-edge,.vh-hero-media--bottom-touch,.vh-hero-media--center-column,.vh-hero-media--offset,.vh-hero-media--right-edge){ width: var(--vh-hero-stack-width); max-width: var(--vh-hero-stack-width); margin-left: auto; margin-right: auto; } .vh-layout-hero .vh-hero-lead{ max-width: min(100%, 58ch); } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap > [class*="col"], .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > [class*="col"], .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-three-col-wrap > [class*="col"]{ flex: 0 0 100%; width: 100%; max-width: 100%; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-proof, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-proof, .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-three-col-info{ margin-top: var(--vh-hero-block-gap); } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ margin-top: var(--vh-hero-copy-media-gap); margin-bottom: 0; align-self: center; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img, .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > img, .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{ width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center bottom; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ margin-right: 0; margin-left: auto; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; object-position: center bottom; } } @media (max-width: 599.98px){ .vh-layout-hero{ --vh-hero-stack-width: 100%; --vh-hero-copy-media-gap: 1rem; --vh-hero-block-gap: .9rem; } body.home .vh-layout-hero .vh-hero-actions, .vh-layout-hero .vh-hero-actions, .vh-layout-hero :is(.vh-hero-copy,.vh-hero-lead,.vh-hero-proof,.vh-hero-finder,.vh-hero-before-after,.vh-hero-portfolio-grid,.vh-hero-three-col-info,.vh-hero-wide-media,.vh-hero-wide-media--bottom-edge,.vh-hero-media--bottom-touch,.vh-hero-media--center-column,.vh-hero-media--offset,.vh-hero-media--right-edge){ width: var(--vh-hero-stack-width); max-width: var(--vh-hero-stack-width); margin-left: auto; margin-right: auto; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap > [class*="col"], .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > [class*="col"], .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-three-col-wrap > [class*="col"]{ flex: 0 0 100%; width: 100%; max-width: 100%; } .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{ margin-top: var(--vh-hero-copy-media-gap); margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img, .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img, .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > img, .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; object-position: center bottom; } } /* Source 11: assets/src/hero/hero-right-edge-faq-contract.css | media: all */ /* ------------------------------------------------------------ Hero Right Edge + Related FAQ Responsive Contract Version: 1.5.61-wo58 Scope: right-edge hero media alignment + non-home related FAQ accordions. Purpose: remove remaining gutters from edge media layouts and make related FAQ sections on service/portfolio pages match the homepage FAQ experience. ------------------------------------------------------------- */ /* ============================================================ 1. Right Edge Image Hero: edge media must actually reach the edge. The old Bootstrap container/row gutters were still creating a visual inset. ============================================================ */ .vh-layout-hero.vh-hero-layout-right_edge_image{ overflow: hidden; padding-right: 0; padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ margin-right: 0; margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 992px){ .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ --vh-layout-gutter-x: 0; width: 100%; max-width: 100%; min-height: clamp(34rem, 72vh, 54rem); margin-left: 0; margin-right: 0; align-items: stretch; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: max(1.5rem, calc((100vw - 1140px) / 2 + 3rem)); padding-right: clamp(1.5rem, 4vw, 4.5rem); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ display: flex; align-items: stretch; justify-content: flex-end; padding-left: 0; padding-right: 0; margin-top: 0; margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > .vh-hero-right-edge-media-col:last-child .vh-hero-media--right-edge{ width: 100%; max-width: none; height: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; transform: none; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > .vh-hero-right-edge-media-col:last-child .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > .vh-hero-right-edge-media-col:last-child .vh-hero-media--right-edge img{ display: block; width: 100%; height: 100%; min-height: clamp(34rem, 72vh, 54rem); max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center center; } } @media (max-width: 991.98px){ .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ --vh-layout-gutter-x: 0; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; row-gap: clamp(1rem, 3vw, 1.5rem); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ width: min(100%, 42rem); max-width: min(100%, 42rem); margin-left: auto; margin-right: auto; padding-left: var(--vh-hero-shell-pad-x, 1.25rem); padding-right: var(--vh-hero-shell-pad-x, 1.25rem); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ display: flex; justify-content: flex-end; width: 100%; max-width: 100%; padding-left: var(--vh-hero-shell-pad-x, 1.25rem); padding-right: 0; margin-top: 0; margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ width: min(100%, 42rem); max-width: min(100%, 42rem); margin-left: auto; margin-right: 0; margin-bottom: 0; transform: none; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ display: block; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; object-fit: contain; object-position: right bottom; } } /* ============================================================ 2. Related FAQ accordions on single Service/Portfolio pages. These sections use #front-faq markup but do not load front-page.css, so they need the same component contract globally. ============================================================ */ body.single-vh_service #front-faq, body.single-vh_portfolio #front-faq{ background: var(--vh-faq-section-bg, #f6f7f3); color: var(--vh-faq-section-text, #0f172a); overflow: visible; } body.single-vh_service #front-faq .vh-container, body.single-vh_portfolio #front-faq .vh-container{ width: min(100%, 1060px); max-width: min(100%, 1060px); margin-left: auto; margin-right: auto; } body.single-vh_service #front-faq .content-section-heading, body.single-vh_portfolio #front-faq .content-section-heading{ color: var(--vh-faq-section-text, #0f172a); margin-bottom: clamp(1.25rem, 3vw, 2.5rem); } body.single-vh_service #front-faq .content-section-heading .vh-text-secondary, body.single-vh_portfolio #front-faq .content-section-heading .vh-text-secondary{ color: var(--vh-accent, #9fb30f); letter-spacing: .08em; text-transform: uppercase; } body.single-vh_service #front-faq .content-section-heading h2, body.single-vh_portfolio #front-faq .content-section-heading h2{ color: var(--vh-faq-section-text, #0f172a); margin-bottom: 0; } body.single-vh_service #front-faq .vh-c-accordion, body.single-vh_portfolio #front-faq .vh-c-accordion{ width: min(100%, 920px); max-width: min(100%, 920px); margin-left: auto; margin-right: auto; } body.single-vh_service #front-faq .vh-c-accordion__item, body.single-vh_portfolio #front-faq .vh-c-accordion__item{ border-radius: .75rem; overflow: hidden; border: 1px solid rgba(17, 24, 39, .08); background: #fff; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06); } body.single-vh_service #front-faq .vh-c-accordion__item + .vh-c-accordion__item, body.single-vh_portfolio #front-faq .vh-c-accordion__item + .vh-c-accordion__item{ margin-top: .75rem; } body.single-vh_service #front-faq .vh-c-accordion__button, body.single-vh_portfolio #front-faq .vh-c-accordion__button{ display: grid; grid-template-columns: minmax(0, 1fr) auto 1.25rem; gap: .65rem; align-items: center; width: 100%; padding: 1rem 1.25rem; color: #111827; background: #fff; font-weight: 600; text-align: left; box-shadow: none; } body.single-vh_service #front-faq .vh-c-accordion__button:not(.is-collapsed), body.single-vh_portfolio #front-faq .vh-c-accordion__button:not(.is-collapsed){ color: #0f172a; background: #eaf2ff; } body.single-vh_service #front-faq .vh-c-accordion__button::after, body.single-vh_portfolio #front-faq .vh-c-accordion__button::after{ grid-column: 3; margin-left: 0; justify-self: end; } body.single-vh_service #front-faq .vh-faq-accordion-title, body.single-vh_portfolio #front-faq .vh-faq-accordion-title{ min-width: 0; overflow-wrap: anywhere; } body.single-vh_service #front-faq .vh-c-accordion__button .vh-c-badge, body.single-vh_portfolio #front-faq .vh-c-accordion__button .vh-c-badge{ justify-self: end; max-width: min(100%, 18rem); margin-left: 0; border: 1px solid rgba(17, 24, 39, .08); color: #111827; background: #f8fafc; white-space: normal; text-align: center; } body.single-vh_service #front-faq .vh-c-accordion__body, body.single-vh_portfolio #front-faq .vh-c-accordion__body{ color: #374151; background: #fff; padding: 1rem 1.25rem 1.25rem; } body.single-vh_service #front-faq .vh-c-accordion__body a, body.single-vh_portfolio #front-faq .vh-c-accordion__body a{ color: var(--vh-accent, #9fb30f); font-weight: 600; text-decoration: none; } body.single-vh_service #front-faq .vh-c-accordion__body a:hover, body.single-vh_portfolio #front-faq .vh-c-accordion__body a:hover{ text-decoration: underline; } @media (min-width: 600px) and (max-width: 991.98px){ body.single-vh_service #front-faq, body.single-vh_portfolio #front-faq{ padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); } body.single-vh_service #front-faq .vh-container, body.single-vh_portfolio #front-faq .vh-container{ padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); } } @media (max-width: 599.98px){ body.single-vh_service #front-faq, body.single-vh_portfolio #front-faq{ padding-top: 3rem; padding-bottom: 3rem; } body.single-vh_service #front-faq .vh-container, body.single-vh_portfolio #front-faq .vh-container{ padding-left: 1rem; padding-right: 1rem; } body.single-vh_service #front-faq .content-section-heading h2, body.single-vh_portfolio #front-faq .content-section-heading h2{ font-size: clamp(2rem, 10vw, 2.75rem); line-height: 1.05; } body.single-vh_service #front-faq .vh-c-accordion__button, body.single-vh_portfolio #front-faq .vh-c-accordion__button{ grid-template-columns: minmax(0, 1fr) 1.25rem; grid-auto-rows: auto; gap: .4rem .75rem; padding: 1rem; } body.single-vh_service #front-faq .vh-c-accordion__button::after, body.single-vh_portfolio #front-faq .vh-c-accordion__button::after{ grid-column: 2; grid-row: 1 / span 2; align-self: center; } body.single-vh_service #front-faq .vh-c-accordion__button .vh-c-badge, body.single-vh_portfolio #front-faq .vh-c-accordion__button .vh-c-badge{ grid-column: 1; grid-row: 2; justify-self: start; max-width: 100%; font-size: .72rem; line-height: 1.2; padding: .35rem .55rem; } body.single-vh_service #front-faq .vh-c-accordion__body, body.single-vh_portfolio #front-faq .vh-c-accordion__body{ padding: 1rem; } } /* Source 12: assets/src/hero/hero-right-edge-faq-polish.css | media: all */ /* ------------------------------------------------------------ Hero Right Edge + FAQ Polish Contract Version: 1.5.62-wo59 Scope: final visual polish for right-edge hero vertical alignment and FAQ badges. Purpose: keep edge-media horizontal contact while centering the image vertically, and make FAQ category labels compact instead of distracting full-width bars. ------------------------------------------------------------- */ /* ============================================================ 1. Right Edge Image Hero Keep the image flush to the right edge, but stop stretching it to the bottom. ============================================================ */ @media (min-width: 992px){ .vh-layout-hero.vh-hero-layout-right_edge_image{ padding-right: 0; overflow: hidden; } .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ --vh-layout-gutter-x: 0; width: 100%; max-width: 100%; min-height: clamp(34rem, 70vh, 50rem); margin: 0; align-items: center; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: max(1.5rem, calc((100vw - 1140px) / 2 + 3rem)); padding-right: clamp(1.5rem, 4vw, 4.5rem); } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ display: flex; align-items: center; justify-content: flex-end; align-self: stretch; padding-left: 0; padding-right: 0; margin-top: 0; margin-bottom: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ display: block; width: 100%; max-width: none; height: auto; min-height: 0; max-height: none; margin: 0 0 0 auto; transform: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ display: block; width: 100%; height: auto; min-height: 0; max-height: clamp(28rem, 58vh, 42rem); aspect-ratio: auto; object-fit: cover; object-position: center center; border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media (min-width: 1400px){ .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ padding-left: max(1.5rem, calc((100vw - 1320px) / 2 + 3rem)); } } @media (max-width: 991.98px){ .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ align-items: center; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ align-items: center; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ object-position: center center; } } /* ============================================================ 2. FAQ Category Label The category should read as a small tag, not a full-width input/bar. ============================================================ */ body.single-vh_service #front-faq .vh-c-accordion__button .vh-c-badge, body.single-vh_portfolio #front-faq .vh-c-accordion__button .vh-c-badge{ display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: min(16rem, 42vw); min-width: 0; padding: .32rem .55rem; border-radius: .45rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } body.single-vh_service #front-faq .vh-c-accordion__button, body.single-vh_portfolio #front-faq .vh-c-accordion__button{ grid-template-columns: minmax(0, 1fr) auto 1.25rem; } body.single-vh_service #front-faq .vh-c-accordion__button .vh-c-badge, body.single-vh_portfolio #front-faq .vh-c-accordion__button .vh-c-badge{ justify-self: end; } @media (max-width: 599.98px){ body.single-vh_service #front-faq .vh-c-accordion__button .vh-c-badge, body.single-vh_portfolio #front-faq .vh-c-accordion__button .vh-c-badge{ max-width: min(14rem, 72vw); font-size: .7rem; padding: .3rem .5rem; } body.single-vh_service #front-faq .vh-c-accordion__button, body.single-vh_portfolio #front-faq .vh-c-accordion__button{ grid-template-columns: minmax(0, 1fr) 1.25rem; } body.single-vh_service #front-faq .vh-c-accordion__button .vh-c-badge, body.single-vh_portfolio #front-faq .vh-c-accordion__button .vh-c-badge{ grid-column: 1; grid-row: 2; justify-self: start; } } /* Source 13: assets/src/hero/hero-right-edge-center-lock.css | media: all */ /* ------------------------------------------------------------ Hero Right Edge Center Lock Version: 1.5.63-wo60 Scope: Right Edge Image Hero only. Purpose: keep the image touching the true right edge horizontally while preventing the media from behaving like a bottom-aligned edge panel. ------------------------------------------------------------- */ /* Right Edge Image Hero is a horizontal edge layout, not a bottom-edge layout. Previous recovery files removed the right gutter but also forced bottom padding to 0 and stretched the media lane, which made the image read as bottom-aligned. This final lock restores vertical padding and centers the media beside the copy. */ @media (min-width: 992px){ body .vh-layout-hero.vh-hero-layout-right_edge_image{ display: flex; align-items: center; padding-right: 0; padding-top: var(--vh-context-hero-padding-top, var(--vh-section-pad-top, clamp(5rem, 7vw, 7rem))); padding-bottom: var(--vh-context-hero-padding-bottom, var(--vh-section-pad-bottom, clamp(5rem, 7vw, 7rem))); min-height: auto; overflow: hidden; } body .vh-layout-hero.vh-hero-layout-right_edge_image > .vh-hero-container{ flex: 1 1 auto; width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{ --vh-layout-gutter-x: 0; width: 100%; max-width: 100%; min-height: 0; height: auto; margin: 0; align-items: center; } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: max(1.5rem, calc((100vw - 1140px) / 2 + 3rem)); padding-right: clamp(1.5rem, 4vw, 4.5rem); } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ display: flex; align-self: center; align-items: center; justify-content: flex-end; min-height: 0; height: auto; padding-left: 0; padding-right: 0; margin-top: 0; margin-bottom: 0; } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ display: block; width: 100%; max-width: none; height: auto; min-height: 0; max-height: none; margin: 0 0 0 auto; transform: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ display: block; width: 100%; height: clamp(28rem, 58vh, 42rem); min-height: 0; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center center; border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media (min-width: 1400px){ body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{ padding-left: max(1.5rem, calc((100vw - 1320px) / 2 + 3rem)); } } @media (min-width: 600px) and (max-width: 991.98px){ body .vh-layout-hero.vh-hero-layout-right_edge_image{ padding-top: var(--vh-context-hero-padding-top-tablet, var(--vh-section-pad-top, clamp(4.5rem, 8vw, 6rem))); padding-bottom: var(--vh-context-hero-padding-bottom-tablet, var(--vh-section-pad-bottom, clamp(4.5rem, 8vw, 6rem))); } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap, body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ align-items: center; } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ height: auto; max-height: none; object-position: center center; } } @media (max-width: 599.98px){ body .vh-layout-hero.vh-hero-layout-right_edge_image{ padding-top: var(--vh-context-hero-padding-top-mobile, var(--vh-section-pad-top, clamp(4rem, 12vw, 5.5rem))); padding-bottom: var(--vh-context-hero-padding-bottom-mobile, var(--vh-section-pad-bottom, clamp(4rem, 12vw, 5.5rem))); } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap, body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{ align-items: center; } body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img, body .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{ height: auto; max-height: none; object-position: center center; } } /* Source 14: assets/src/hero/hero-eyebrow-compact-contract.css | media: all */ /* ------------------------------------------------------------ Hero Eyebrow Compact Contract Version: 1.5.141-wo108a Scope: all hero layouts, with explicit left/center alignment rules. Purpose: size the eyebrow to its content without arbitrary desktop, tablet, or mobile width caps. The containing copy lane is the only width boundary. ------------------------------------------------------------- */ .vh-layout-hero .vh-hero-eyebrow{ width: fit-content; max-width: 100%; min-width: 0; flex: 0 0 auto; align-self: flex-start; justify-content: center; text-align: left; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; } /* Centered hero variants keep the content-sized eyebrow centered. */ .vh-layout-hero .vh-hero-copy--center .vh-hero-eyebrow, .vh-layout-hero .vh-hero-copy--minimal .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-editorial_center .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-background_image .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-portfolio_grid .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-minimal_page .vh-hero-eyebrow{ align-self: center; margin-left: auto; margin-right: auto; text-align: center; } /* Split/right/offset layouts keep the eyebrow aligned with the copy start. */ .vh-layout-hero.vh-hero-layout-default_split .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-image_card .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-video_hero .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-before_after .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-offset_media .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-bottom_aligned_image .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-three_column_center_image .vh-hero-eyebrow, .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-eyebrow{ align-self: flex-start; margin-left: 0; margin-right: 0; } .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy > .vh-hero-eyebrow{ width: fit-content; max-width: 100%; align-self: flex-start; } @media (max-width: 599.98px){ .vh-layout-hero .vh-hero-eyebrow{ padding-inline: .72rem; line-height: 1.18; } } /* Source 15: assets/src/hero/hero-eyebrow-controls.css | media: all */ /* ------------------------------------------------------------ WO108A — Universal non-home hero eyebrow width and border controls Front Page eyebrow controls remain owned by the Front Page Customizer. ------------------------------------------------------------- */ .vh-layout-hero:not(.vh-hero-context-home) .vh-hero-eyebrow{ color: var(--vh-hero-eyebrow-text, var(--vh-hero-text, #ffffff)); background: var( --vh-hero-eyebrow-bg, color-mix(in srgb, var(--vh-hero-text, #ffffff) 11%, transparent) ); border-color: var( --vh-hero-eyebrow-border, color-mix(in srgb, var(--vh-hero-text, #ffffff) 18%, transparent) ); border-style: solid; border-width: 1px; border-radius: var(--vh-hero-eyebrow-radius, 999px); padding: var(--vh-hero-eyebrow-padding-y, .45rem) var(--vh-hero-eyebrow-padding-x, .8rem); } .vh-layout-hero:not(.vh-hero-context-home).vh-hero-eyebrow-borderless .vh-hero-eyebrow{ border-width: 0; border-color: transparent; } .vh-layout-hero:not(.vh-hero-context-home).vh-hero-eyebrow-boxless .vh-hero-eyebrow{ padding: 0; border-color: transparent; border-width: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Source 16: assets/src/hero/hero-layout-ratio-radius-contract.css | media: all */ /* ------------------------------------------------------------ Hero Layout Ratio + Radius Contract Version: 1.5.115-wo105b1 Scope: universal hero media shells only. Purpose: - Apply the generic ratio only to supported media layouts. - Keep portrait ratios from creating unbounded full-width hero heights. - Give one element ownership of aspect ratio, clipping, and corner radius. - Prevent image-ratio settings from resizing unrelated text cards. ------------------------------------------------------------- */ /* The generic ratio never owns proof, feature, floating, or inline text cards. */ .vh-layout-hero.vh-hero-ratio-contract .vh-hero-feature-card, .vh-layout-hero.vh-hero-ratio-contract .vh-hero-floating-card, .vh-layout-hero.vh-hero-ratio-contract .vh-hero-inline-detail{ aspect-ratio: auto; height: auto; min-height: 0; overflow: visible; } /* Wide media wrappers are layout/position containers, not crop boxes. The nested .vh-hero-media shell is the single clipping and radius owner. */ .vh-layout-hero.vh-hero-ratio-contract .vh-hero-wide-media{ border-radius: 0; overflow: visible; } .vh-layout-hero.vh-hero-ratio-contract .vh-hero-media{ border-top-left-radius: var(--vh-hero-media-radius-tl); border-top-right-radius: var(--vh-hero-media-radius-tr); border-bottom-right-radius: var(--vh-hero-media-radius-br); border-bottom-left-radius: var(--vh-hero-media-radius-bl); overflow: hidden; } .vh-layout-hero.vh-hero-ratio-contract .vh-hero-media > :is(img,picture,video,iframe,embed,object,.vh-hero-video,.vh-hero-placeholder), .vh-layout-hero.vh-hero-ratio-contract .vh-hero-media > picture > img, .vh-layout-hero.vh-hero-ratio-contract .vh-hero-media .vh-hero-video-trigger, .vh-layout-hero.vh-hero-ratio-contract .vh-hero-media .vh-hero-video-trigger > img{ border-radius: inherit; } /* Auto preserves each layout's established default media behavior. */ /* Explicit ratios belong to the media shell. Child media fills that one crop box; nested wrappers do not receive a second ratio or second clipping edge. */ .vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media{ aspect-ratio: var(--vh-hero-card-aspect-ratio); height: auto; min-height: 0; max-height: none; } .vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media > :is(img,picture,video,iframe,embed,object,.vh-hero-video,.vh-hero-placeholder), .vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media > picture > img, .vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media .vh-hero-video-trigger, .vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media .vh-hero-video-trigger > img{ display: block; width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center center; } /* Wide layouts use an outer positioning wrapper. Once a ratio is explicit, the nested crop shell fills that bounded wrapper instead of retaining the older generic 46rem media maximum. */ .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-ratio-enabled .vh-hero-wide-media > .vh-hero-media{ width: 100%; max-width: 100%; margin-inline: auto; } /* Width guardrails keep portrait selections proportionate. The media shell still uses the selected ratio, but the wrapper stops a 9:16 crop from using the full 1120–1200px hero width and creating a near-2000px hero. */ .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-square .vh-hero-wide-media{ width: min(100%, 42rem); max-width: min(100%, 42rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-portrait .vh-hero-wide-media{ width: min(100%, 25rem); max-width: min(100%, 25rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-vertical .vh-hero-wide-media{ width: min(100%, 34rem); max-width: min(100%, 34rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-landscape .vh-hero-wide-media{ width: min(100%, 72rem); max-width: min(100%, 72rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-wide .vh-hero-wide-media{ width: min(100%, 70rem); max-width: min(100%, 70rem); } /* Media-card layouts have narrower portrait crop boxes while wide ratios can continue to fill their normal column. */ .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-square .vh-hero-media{ width: min(100%, 38rem); max-width: min(100%, 38rem); margin-inline: auto; } .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-portrait .vh-hero-media{ width: min(100%, 24rem); max-width: min(100%, 24rem); margin-inline: auto; } .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-vertical .vh-hero-media{ width: min(100%, 32rem); max-width: min(100%, 32rem); margin-inline: auto; } /* Right Edge Image is governed by its edge-height contract rather than the generic crop-ratio control. Keep its two edge corners square. */ .vh-layout-hero.vh-hero-ratio-contract.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{ border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 600px) and (max-width: 991.98px){ .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-square .vh-hero-wide-media{ width:min(100%,36rem); max-width:min(100%,36rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-portrait .vh-hero-wide-media{ width:min(100%,22rem); max-width:min(100%,22rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-vertical .vh-hero-wide-media{ width:min(100%,30rem); max-width:min(100%,30rem); } .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-portrait .vh-hero-media{ width:min(100%,22rem); max-width:min(100%,22rem); } .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-vertical .vh-hero-media{ width:min(100%,29rem); max-width:min(100%,29rem); } } @media (max-width: 599.98px){ .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-portrait .vh-hero-wide-media, .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-portrait .vh-hero-media{ width: min(100%, 19rem); max-width: min(100%, 19rem); } .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-vertical .vh-hero-wide-media, .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-vertical .vh-hero-media{ width: min(100%, 23rem); max-width: min(100%, 23rem); } } /* Source 17: assets/src/hero/hero-layout-bottom-boundary-contract.css | media: all */ /* ------------------------------------------------------------ Responsive Bottom-Image Hero Geometry Contract Version: 1.5.118-wo105b3-1 Scope: tablet/mobile variants of Centered Text Hero — Bottom Image. Contract: - The hero shell owns the section boundary. - The bottom media shell ends on that same boundary. - The transition seam is anchored to that same coordinate. - Announcement/admin/navigation height changes only the top safe zone. - Configured extra height is absorbed above media, never below it. ------------------------------------------------------------- */ @media (max-width: 991.98px){ /* These selectors intentionally outrank the generic responsive home-hero padding and the section-shell alignment CSS. Bottom-image heroes cannot honor bottom padding or vertical centering without violating their edge contract. Top padding remains controlled by the measured safe zone. */ html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image, html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image, html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image{ /* Visibility remains owned by hero-responsive.css. Never force every responsive variant to display from a geometry contract. Active variants already receive display:flex at their own breakpoint; non-responsive heroes receive it from the established bottom-image layout rule. */ flex-direction:column; align-items:stretch; justify-content:flex-start; padding-bottom:0; margin-bottom:0; --vh-bottom-image-boundary-gap:0px; } /* The container stretches through any configured min/exact height. Its flex child may grow with content, while margin-top:auto on the media absorbs only genuine spare space above the image. */ html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .vh-hero-container, html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .vh-hero-container, html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .vh-hero-container{ display:flex; flex:1 1 auto; flex-direction:column; align-items:center; justify-content:flex-start; width:100%; min-height:0; height:auto; padding-bottom:0; margin-bottom:0; } html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image, html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{ flex:0 0 auto; } /* The wrapper and media shell form one bottom anchor. No transform or negative margin is used; browser geometry can therefore verify a true shared edge instead of a visually simulated one. */ html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge, html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge, html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{ display:flex; flex:0 0 auto; align-self:center; align-items:flex-end; justify-content:center; margin-top:auto; margin-bottom:0; padding-bottom:0; line-height:0; transform:none; } html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge, html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge, html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge{ display:block; width:100%; margin:0; padding:0; line-height:0; vertical-align:bottom; transform:none; border-bottom-right-radius:0; border-bottom-left-radius:0; } html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > :is(img,picture,video,iframe,embed,object,.vh-hero-video,.vh-hero-placeholder), html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > picture > img, html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge .vh-hero-video-trigger, html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge .vh-hero-video-trigger > img{ display:block; margin:0; vertical-align:bottom; border-bottom-right-radius:0; border-bottom-left-radius:0; } /* The existing transition layer order remains authoritative. This contract only guarantees that the transition's boundary is the image boundary. */ html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image.vh-hero-has-seamless-overlap{ overflow:visible; clip-path:none; } html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image:not(.vh-hero-has-seamless-overlap){ overflow:hidden; } } /* Source 18: assets/src/v2/hero-contract.css | media: all */ /* WO210 canonical Hero layout contract. Bootstrap-free structural primitives. */ :root{ --vh-hero-content-max:var(--wp--custom--velocity-hub--layout--wide,1200px); --vh-hero-gap:clamp(1.5rem,4vw,3rem); --vh-hero-pad-inline:clamp(1rem,3vw,1.5rem); } .vh-hero-container{width:min(100% - (2 * var(--vh-hero-pad-inline)),var(--vh-hero-content-max));margin-inline:auto;position:relative;z-index:3} .vh-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--vh-hero-gap);align-items:center} .vh-hero-grid--half{grid-template-columns:repeat(12,minmax(0,1fr))} .vh-hero-grid--stretch{align-items:stretch}.vh-hero-grid--end{align-items:end}.vh-hero-grid--row-gap{row-gap:var(--vh-hero-gap)} .vh-hero-col{min-width:0}.vh-hero-col--12{grid-column:1/-1} .vh-hero-col--4{grid-column:span 4}.vh-hero-col--5{grid-column:span 5}.vh-hero-col--6{grid-column:span 6}.vh-hero-col--7{grid-column:span 7} .vh-hero-copy-align{text-align:center}.vh-u-text-center{text-align:center}.vh-hero-flex{display:flex}.vh-hero-flex--align-center{align-items:center}.vh-hero-flex--align-end{align-items:flex-end}.vh-u-mx-auto{margin-inline:auto} .vh-u-mt-4{margin-top:1.5rem}.vh-u-mt-5{margin-top:3rem}.vh-u-mb-3{margin-bottom:1rem}.vh-u-mb-4{margin-bottom:1.5rem}.vh-u-mb-5{margin-bottom:3rem} .vh-hero-actions{display:flex;gap:.5rem;flex-wrap:wrap}.vh-hero-actions--center{justify-content:center}.vh-hero-actions--responsive-start{justify-content:center} .vh-hero-media-image{display:block;width:100%;height:auto;max-width:100%} .vh-hero-aspect-video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}.vh-hero-aspect-video>iframe,.vh-hero-aspect-video>img,.vh-hero-aspect-video>picture,.vh-hero-aspect-video>.vh-hero-video-trigger{width:100%;height:100%} .vh-hero-video-dialog[hidden]{display:none}.vh-hero-video-dialog{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:clamp(1rem,3vw,2rem)} .vh-hero-video-dialog__backdrop{position:absolute;inset:0;background:rgba(5,8,18,.86)} .vh-hero-video-dialog__panel{position:relative;z-index:1;width:min(96vw,1200px);background:#070b16;border-radius:1rem;overflow:hidden;box-shadow:0 1.5rem 4rem rgba(0,0,0,.45)} .vh-hero-video-dialog__toolbar{display:flex;justify-content:flex-end;padding:.75rem}.vh-hero-video-dialog__close{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer} .vh-hero-video-dialog__close:focus-visible{outline:3px solid #fff;outline-offset:3px}.vh-hero-video-dialog__body{padding:0 .75rem .75rem}.vh-hero-video-dialog__frame{position:relative;width:100%;aspect-ratio:16/9}.vh-hero-video-dialog__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} body.vh-hero-video-modal-open{overflow:hidden} @media (min-width:992px){.vh-hero-copy-align{text-align:left}.vh-hero-actions--responsive-start{justify-content:flex-start}.vh-u-mb-lg-0{margin-bottom:0}.vh-u-mt-lg-0{margin-top:0}} @media (max-width:991.98px){.vh-hero-grid,.vh-hero-grid--half{grid-template-columns:1fr}.vh-hero-col--4,.vh-hero-col--5,.vh-hero-col--6,.vh-hero-col--7,.vh-hero-col--12{grid-column:1/-1}}