/* V5.4.5 — independent carousel background + foreground media and reliable editor */
.hero-slide.has-full-bg.has-side-image{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
}
.hero-slide.has-full-bg.has-side-image .hero-visual{
  position:relative;z-index:2;min-width:0;
}
.hero-slide.has-full-bg.has-side-image .hero-visual img{
  width:min(100%,480px);height:min(310px,29vw);
  object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,18,42,.24));
}
.hero-slide.has-full-bg:not(.has-side-image){grid-template-columns:minmax(0,1fr)}
.hero-slide.has-full-bg:not(.has-side-image) .hero-copy{max-width:min(70px,100%)}
.hero-slide.has-full-bg .hero-copy h1,.hero-slide.has-full-bg .hero-copy p{
  text-shadow:0 2px 16px rgba(3,27,55,.38);
}
/* Reserve a dedicated footer lane for controls so the CTA cannot overlap. */
.hero-slide{padding-bottom:max(108px,8.5vw)!important}
.hero-copy .btn{margin-bottom:12px}
.carousel-controls{z-index:8}
@media(max-width:900px){
  .hero-slide.has-full-bg.has-side-image{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero-slide.has-full-bg.has-side-image .hero-visual img{max-height:255px;height:26vw}
}
@media(max-width:600px){
  .hero-slide.has-full-bg.has-side-image{grid-template-columns:1fr;gap:10px;align-content:start;min-height:590px}
  .hero-slide.has-full-bg.has-side-image .hero-visual img{height:210px;max-height:210px;width:100%}
  .hero-slide.has-full-bg:not(.has-side-image){min-height:455px;align-content:center}
  .hero-slide{padding-bottom:92px!important}
  .carousel-controls{bottom:17px!important}
}
.carousel-image-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;margin:16px 0}
.carousel-image-field{min-width:0;background:#f7fbff;border:1px solid #cfe5f5;border-radius:18px;padding:19px}
.carousel-image-field h3{font-size:17px;margin:0 0 6px}
.carousel-image-field h3 i{color:#0b87d8;margin-right:6px}
.carousel-image-field p{font-size:12px;min-height:46px;line-height:1.65}
.carousel-image-preview{display:flex;align-items:center;justify-content:center;min-height:165px;height:165px;margin:10px 0 14px;overflow:hidden;border:1px dashed #b5d7ef;border-radius:12px;background:linear-gradient(135deg,#e7f3ff,#fff)}
.carousel-image-preview.foreground-preview{background:linear-gradient(135deg,#e1f7ff,#f5fbff)}
.carousel-image-preview img{display:block;width:100%;height:100%;object-fit:contain}
.carousel-image-preview img[hidden]{display:none!important}
.carousel-image-preview .carousel-no-image{color:#678da7;font-size:13px;font-weight:600;text-align:center;padding:12px}
.carousel-editor .carousel-image-field>label{margin:10px 0 5px}
.carousel-editor .carousel-image-field input[type=file]{padding:10px 8px;font-size:12px;background:#fff}
.carousel-editor .carousel-remove-choice{display:flex!important;align-items:center;gap:9px;font-size:13px;margin:13px 0 7px}
.carousel-remove-choice input[type=checkbox]{width:auto!important;flex:0 0 auto;margin:0}
.carousel-image-field.is-removing .carousel-image-preview{opacity:.35}
.carousel-save-row{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin:21px 0 0}
@media(max-width:780px){.carousel-image-fields{grid-template-columns:1fr}.carousel-image-field p{min-height:0}}

/* V5.4.6: reliable full-width image element (not a CSS custom-property URL).
   Image is behind both columns; gradient remains only a translucent overlay. */
.hero-slide.has-full-bg{position:relative;isolation:isolate;overflow:hidden;background:none!important}
.hero-slide.has-full-bg>.hero-background-photo{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  display:block;object-fit:cover;object-position:center;z-index:0;
  filter:none!important;transform:none!important;animation:none!important;
}
.hero-slide.has-full-bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,33,70,.75) 0%,rgba(2,36,75,.40) 48%,rgba(2,36,75,.10) 100%);
}
.hero-slide.has-full-bg>.hero-copy{position:relative;z-index:3}
.hero-slide.has-full-bg>.hero-visual{position:relative;z-index:2}
.hero-slide.has-full-bg.has-side-image{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero-slide.has-full-bg:not(.has-side-image){grid-template-columns:minmax(0,1fr)}
.carousel-file-status{padding:9px 11px;margin:8px 0 12px!important;border-radius:9px;font-size:12px!important;min-height:0!important}
.carousel-file-ok{background:#e5f7ee;color:#186343}
.carousel-file-error{background:#ffefee;color:#a62020}
.carousel-file-status a{text-decoration:underline}
@media(max-width:600px){
  .hero-slide.has-full-bg::before{background:linear-gradient(180deg,rgba(0,31,68,.78),rgba(0,37,80,.55) 72%,rgba(0,38,80,.15))}
  .hero-slide.has-full-bg.has-side-image{grid-template-columns:1fr}
}

/* V5.4.7 — right-side full-height foreground artwork.
   Background, left text, CTA and carousel navigation remain unchanged.
   For an ideal result upload a tightly cropped transparent PNG/WebP subject,
   not a screenshot containing its own title and blue background. */
@media (min-width: 601px) {
  .hero-slide.has-full-bg.has-side-image {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-copy {
    width: min(58%, 620px);
    max-width: min(58%, 620px);
    align-self: center;
    position: relative;
    z-index: 4;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual {
    position: absolute !important;
    inset: auto 0 0 auto;
    height: 100%;
    width: 53%;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 3;
    filter: none;
    pointer-events: none;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual > img {
    position: absolute;
    inset: auto 0 0 auto;
    display: block;
    height: 100% !important;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    object-position: right bottom;
    border-radius: 0;
    margin: 0;
    padding: 0;
    animation: none !important;
    transform: none !important;
    transition: none;
    filter: drop-shadow(0 14px 22px rgba(0, 30, 67, .12));
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero-slide.has-full-bg.has-side-image > .hero-copy {
    width: 59%;
    max-width: 59%;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual {
    width: 49%;
  }
}
/* On narrow phones, keep text/CTA at the top and place the portrait below it. */
@media (max-width: 600px) {
  .hero-slide.has-full-bg.has-side-image {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start;
    min-height: 610px;
    padding-bottom: 90px !important;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-copy {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 4;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual {
    position: absolute !important;
    inset: auto 0 0 auto;
    height: 44%;
    width: 82%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
    filter: none;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual > img {
    position: absolute;
    inset: auto 0 0 auto;
    height: 100% !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain;
    object-position: bottom right;
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 9px 12px rgba(0, 30, 67, .15));
  }
}

/* V5.4.8 — desktop foreground containment fix
   Keeps the existing background, headings, CTA, controls and mobile layout.
   Foreground artwork is never stretched or allowed to overflow its image box. */
@media (min-width: 901px) {
  .hero-slide.has-full-bg.has-side-image > .hero-visual {
    right: 1.5% !important;
    bottom: 1% !important;
    width: 49% !important;
    height: 95% !important;
    inset-block-start: auto !important;
    inset-inline-start: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual > img {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    transform: none !important;
    animation: none !important;
  }
}
/* Tablets also keep the entire asset inside the right-side viewport. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-slide.has-full-bg.has-side-image > .hero-visual {
    right: 1% !important;
    bottom: 1% !important;
    width: 47% !important;
    height: 90% !important;
    overflow: visible !important;
  }
  .hero-slide.has-full-bg.has-side-image > .hero-visual > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
  }
}