/* ------------------------------------------------------------
   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) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.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% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

/* 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 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.single-vh_portfolio .vh-hero-context-portfolio{
  padding-top: var(--vh-single-portfolio-hero-padding-top, clamp(5.5rem, 8vw, 7.5rem)) !important;
  padding-bottom: var(--vh-single-portfolio-hero-padding-bottom, clamp(5.5rem, 8vw, 7.5rem)) !important;
  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)) !important;
    padding-bottom: var(--vh-single-portfolio-hero-padding-bottom-tablet, clamp(4.75rem, 7vw, 6.5rem)) !important;
  }
}

@media (max-width: 599.98px){
  .single-vh_portfolio .vh-hero-context-portfolio{
    padding-top: var(--vh-single-portfolio-hero-padding-top-mobile, 4.5rem) !important;
    padding-bottom: var(--vh-single-portfolio-hero-padding-bottom-mobile, 4.5rem) !important;
  }
}

/* ------------------------------------------------------------
   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 !important;
  overflow: hidden;
}

.vh-hero-layout-bottom_image > .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) !important;
}

.vh-hero-layout-bottom_image[class*="vh-hero-card-ratio-"] .vh-hero-media--bottom-touch img{
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
}

.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 > .container{
  max-width: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.vh-hero-right-edge-wrap{
  --bs-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 !important;
}

.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) !important;
  }

  .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 !important;
  }

  .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) !important;
}
.vh-layout-hero[style*="--vh-context-hero-padding-bottom"] {
  padding-bottom: var(--vh-context-hero-padding-bottom) !important;
}
@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) !important;
  }
  .vh-layout-hero[style*="--vh-context-hero-padding-bottom-tablet"] {
    padding-bottom: var(--vh-context-hero-padding-bottom-tablet) !important;
  }
}
@media (max-width: 599.98px) {
  .vh-layout-hero[style*="--vh-context-hero-padding-top-mobile"] {
    padding-top: var(--vh-context-hero-padding-top-mobile) !important;
  }
  .vh-layout-hero[style*="--vh-context-hero-padding-bottom-mobile"] {
    padding-bottom: var(--vh-context-hero-padding-bottom-mobile) !important;
  }
}

/* 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% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.single-vh_portfolio .vh-layout-hero::before,
.single-vh_portfolio .vh-hero-context-portfolio::before{
  left: 0 !important;
  right: 0 !important;
}

.single-vh_portfolio .vh-layout-hero > .container,
.single-vh_portfolio .vh-hero-context-portfolio > .container{
  max-width: 100% !important;
}

.single-vh_portfolio .vh-layout-hero .row,
.single-vh_portfolio .vh-hero-context-portfolio .row{
  max-width: 100% !important;
}

@supports not (overflow: clip){
  .single-vh_portfolio .vh-layout-hero,
  .single-vh_portfolio .vh-hero-context-portfolio{
    overflow-x: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   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 !important;
  grid-template-columns:repeat(var(--vh-portfolio-grid-columns), minmax(0, 1fr)) !important;
  width:min(100%, var(--vh-portfolio-grid-max-width)) !important;
  max-width:var(--vh-portfolio-grid-max-width) !important;
  margin-inline:auto !important;
  gap:1rem;
  min-width:0;
}

.vh-layout-hero .vh-hero-portfolio-card{
  min-width:0;
  min-height:0 !important;
  aspect-ratio:var(--vh-portfolio-card-ratio) !important;
}
.vh-layout-hero .vh-hero-portfolio-card img,
.vh-layout-hero .vh-hero-portfolio-placeholder{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
}

/* 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) !important;
  border-top-right-radius: var(--vh-hero-media-radius-top) !important;
  border-bottom-left-radius: var(--vh-hero-media-radius-bottom) !important;
  border-bottom-right-radius: var(--vh-hero-media-radius-bottom) !important;
}

.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 !important;
}

.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) !important;
  border-top-right-radius: var(--vh-hero-media-radius-top) !important;
  border-bottom-left-radius: var(--vh-hero-media-radius-bottom) !important;
  border-bottom-right-radius: var(--vh-hero-media-radius-bottom) !important;
}