.hero-builder{
    position:relative;
    min-height:700px;
    overflow:hidden;
    background:#111;
}

.hero-builder-slide{
    position:absolute;
    inset:0;
    min-height:700px;
    height:100%;
    display:flex;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .7s ease, visibility .7s ease;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-builder-slide.active{
    position:relative;
    opacity:1;
    visibility:visible;
    z-index:2;
}

.hero-builder-overlay{
    position:absolute;
    inset:0;
    background:var(--hero-overlay);
    z-index:1;
}

.hero-builder-slide > .container{
    position:relative;
    z-index:3;
    width:100%;
    min-height:700px;
    display:flex;
    align-items:center;
}

/* Vertical content placement selected in the Hero Builder */
.hero-builder-slide > .container.hero-vertical-top{ align-items:flex-start; }
.hero-builder-slide > .container.hero-vertical-middle{ align-items:center; }
.hero-builder-slide > .container.hero-vertical-bottom{ align-items:flex-end; }

.hero-builder-inner{
    position:relative;
    z-index:3;
    width:100%;
    display:grid;
    gap:48px;
    align-items:center;
    padding:70px 0;
    color:var(--hero-text);
    font-family:var(--hero-font);
}

.hero-builder-copy{
    max-width:780px;
    width:100%;
    min-width:0;
    text-shadow:var(--hero-shadow);
}

.hero-builder-copy h1,
.hero-builder-copy h3,
.hero-builder-copy p{
    color:var(--hero-text);
}

.hero-builder-copy h1{
    font-size:clamp(2.5rem,5vw,5rem);
    font-weight:700;
    line-height:1.05;
    margin:0 0 20px;
}

.hero-builder-copy h3{
    font-size:clamp(1.2rem,2vw,2rem);
    font-weight:500;
    margin:0 0 20px;
}

.hero-builder-copy p{
    font-size:1.1rem;
    line-height:1.7;
    margin:0 0 18px;
}

.hero-builder-side{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.hero-side-image{
    max-width:100%;
    max-height:480px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 15px 25px rgba(0,0,0,.25));
}

.hero-builder-ctas{
    position:absolute;
    z-index:4;
    left:12px;
    right:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    pointer-events:none;
}
.hero-builder-ctas .hero-cta{ pointer-events:auto; }
.hero-buttons-left{ justify-content:flex-start !important; }
.hero-buttons-center{ justify-content:center !important; }
.hero-buttons-right{ justify-content:flex-end !important; }
.hero-buttons-vertical-top{ top:70px; bottom:auto; transform:none; }
.hero-buttons-vertical-middle{ top:50%; bottom:auto; transform:translateY(-50%); }
.hero-buttons-vertical-bottom{ top:auto; bottom:70px; transform:none; }

.hero-cta{
    display:inline-block;
    padding:13px 25px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    text-shadow:none;
    transition:.2s ease;
    margin:0;
}

.hero-cta:hover{ transform:translateY(-2px); }

.hero-cta-primary{ background:#22c55e; color:#fff; }
.hero-cta-primary:hover{ color:#fff; background:#16a34a; }

.hero-cta-secondary{ background:#fff; color:#111; }
.hero-cta-secondary:hover{ color:#111; background:#f3f4f6; }

/* ---------- NO SIDE IMAGE: text only ---------- */
.hero-builder-inner.no-side{
    grid-template-columns:1fr;
}
.hero-text-left.no-side .hero-builder-copy{
    text-align:left;
    justify-self:start;
    margin-right:auto;
}
.hero-text-left.no-side .hero-builder-ctas{ justify-content:flex-start; }

.hero-text-center.no-side .hero-builder-copy{
    text-align:center;
    justify-self:center;
    margin:0 auto;
    max-width:900px;
}
.hero-text-center.no-side .hero-builder-ctas{ justify-content:center; }

.hero-text-right.no-side .hero-builder-copy{
    text-align:right;
    justify-self:end;
    margin-left:auto;
}
.hero-text-right.no-side .hero-builder-ctas{ justify-content:flex-end; }

/* ---------- SAME POSITION: stack image under text ---------- */
.hero-builder-inner.stack-same{
    grid-template-columns:1fr;
    justify-items:stretch;
}
.hero-builder-inner.stack-same .hero-builder-copy{ order:1; }
.hero-builder-inner.stack-same .hero-builder-side{ order:2; margin-top:8px; }

.hero-text-left.stack-same .hero-builder-copy{
    text-align:left;
    justify-self:start;
    max-width:780px;
}
.hero-text-left.stack-same .hero-builder-side{
    justify-self:start;
    justify-content:flex-start;
}
.hero-text-left.stack-same .hero-builder-ctas{ justify-content:flex-start; }
.hero-text-left.stack-same .hero-side-image{ max-height:360px; }

.hero-text-center.stack-same .hero-builder-copy{
    text-align:center;
    justify-self:center;
    max-width:900px;
    margin:0 auto;
}
.hero-text-center.stack-same .hero-builder-side{
    justify-self:center;
}
.hero-text-center.stack-same .hero-builder-ctas{ justify-content:center; }
.hero-text-center.stack-same .hero-side-image{ max-height:360px; }

.hero-text-right.stack-same .hero-builder-copy{
    text-align:right;
    justify-self:end;
    max-width:780px;
    margin-left:auto;
}
.hero-text-right.stack-same .hero-builder-side{
    justify-self:end;
    justify-content:flex-end;
}
.hero-text-right.stack-same .hero-builder-ctas{ justify-content:flex-end; }
.hero-text-right.stack-same .hero-side-image{ max-height:360px; }

/* ---------- DIFFERENT POSITIONS: side-by-side ---------- */
/* Text left + side right */
.hero-text-left.hero-side-right.has-side:not(.stack-same){
    grid-template-columns:minmax(0,1.2fr) minmax(220px,400px);
}
.hero-text-left.hero-side-right.has-side:not(.stack-same) .hero-builder-copy{
    text-align:left;
    justify-self:start;
    order:1;
}
.hero-text-left.hero-side-right.has-side:not(.stack-same) .hero-builder-side{
    justify-self:end;
    order:2;
}
.hero-text-left.hero-side-right.has-side:not(.stack-same) .hero-builder-ctas{ justify-content:flex-start; }

/* Text left + side center (side sits in the second column, centred) */
.hero-text-left.hero-side-center.has-side:not(.stack-same){
    grid-template-columns:minmax(0,1fr) minmax(220px,420px);
}
.hero-text-left.hero-side-center.has-side:not(.stack-same) .hero-builder-copy{
    text-align:left;
    justify-self:start;
    order:1;
}
.hero-text-left.hero-side-center.has-side:not(.stack-same) .hero-builder-side{
    justify-self:center;
    order:2;
}
.hero-text-left.hero-side-center.has-side:not(.stack-same) .hero-builder-ctas{ justify-content:flex-start; }

/* Text right + side left */
.hero-text-right.hero-side-left.has-side:not(.stack-same){
    grid-template-columns:minmax(220px,400px) minmax(0,1.2fr);
}
.hero-text-right.hero-side-left.has-side:not(.stack-same) .hero-builder-side{
    order:1;
    justify-self:start;
}
.hero-text-right.hero-side-left.has-side:not(.stack-same) .hero-builder-copy{
    order:2;
    text-align:right;
    justify-self:end;
}
.hero-text-right.hero-side-left.has-side:not(.stack-same) .hero-builder-ctas{ justify-content:flex-end; }

/* Text right + side center */
.hero-text-right.hero-side-center.has-side:not(.stack-same){
    grid-template-columns:minmax(220px,420px) minmax(0,1fr);
}
.hero-text-right.hero-side-center.has-side:not(.stack-same) .hero-builder-side{
    order:1;
    justify-self:center;
}
.hero-text-right.hero-side-center.has-side:not(.stack-same) .hero-builder-copy{
    order:2;
    text-align:right;
    justify-self:end;
}
.hero-text-right.hero-side-center.has-side:not(.stack-same) .hero-builder-ctas{ justify-content:flex-end; }

/* Text center + side left */
.hero-text-center.hero-side-left.has-side:not(.stack-same){
    grid-template-columns:minmax(220px,400px) minmax(0,1.2fr);
}
.hero-text-center.hero-side-left.has-side:not(.stack-same) .hero-builder-side{
    order:1;
    justify-self:start;
}
.hero-text-center.hero-side-left.has-side:not(.stack-same) .hero-builder-copy{
    order:2;
    text-align:center;
    justify-self:center;
    max-width:780px;
}
.hero-text-center.hero-side-left.has-side:not(.stack-same) .hero-builder-ctas{ justify-content:center; }

/* Text center + side right */
.hero-text-center.hero-side-right.has-side:not(.stack-same){
    grid-template-columns:minmax(0,1.2fr) minmax(220px,400px);
}
.hero-text-center.hero-side-right.has-side:not(.stack-same) .hero-builder-copy{
    order:1;
    text-align:center;
    justify-self:center;
    max-width:780px;
}
.hero-text-center.hero-side-right.has-side:not(.stack-same) .hero-builder-side{
    order:2;
    justify-self:end;
}
.hero-text-center.hero-side-right.has-side:not(.stack-same) .hero-builder-ctas{ justify-content:center; }

/* Fallback if somehow left+left without stack class, etc. */
.hero-builder-inner.has-side:not(.stack-same){
    /* default two-col already covered above */
}

.hero-builder-controls{
    position:absolute;
    z-index:10;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:15px;
}

.hero-control{
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    background:rgba(0,0,0,.25);
    color:#fff;
    cursor:pointer;
}

.hero-control:hover{ background:rgba(0,0,0,.5); }

.hero-dots{ display:flex; gap:8px; }

.hero-dot{
    width:10px;
    height:10px;
    border:0;
    padding:0;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}

.hero-dot.active{ background:#fff; transform:scale(1.2); }

@media (max-width:991px){
    .hero-builder,
    .hero-builder-slide,
    .hero-builder-slide > .container{ min-height:650px; }

    .hero-builder-inner,
    .hero-builder-inner.has-side,
    .hero-builder-inner.stack-same,
    .hero-text-left.hero-side-right.has-side:not(.stack-same),
    .hero-text-left.hero-side-center.has-side:not(.stack-same),
    .hero-text-right.hero-side-left.has-side:not(.stack-same),
    .hero-text-right.hero-side-center.has-side:not(.stack-same),
    .hero-text-center.hero-side-left.has-side:not(.stack-same),
    .hero-text-center.hero-side-right.has-side:not(.stack-same){
        grid-template-columns:1fr !important;
        gap:28px;
        padding:60px 12px 90px;
        justify-items:center;
    }

    .hero-builder-copy,
    .hero-builder-inner .hero-builder-copy{
        order:1 !important;
        text-align:center !important;
        justify-self:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
        max-width:100%;
    }

    .hero-builder-side,
    .hero-builder-inner .hero-builder-side{
        order:2 !important;
        justify-self:center !important;
        justify-content:center !important;
    }

    .hero-side-image{ max-height:240px; }

    .hero-builder-ctas,
    .hero-builder-inner .hero-builder-ctas{
        justify-content:center !important;
    }
}

@media (max-width:576px){
    .hero-builder,
    .hero-builder-slide,
    .hero-builder-slide > .container{ min-height:580px; }
    .hero-builder-copy h1{ font-size:2.4rem; }
    .hero-builder-copy p{ font-size:1rem; }
    .hero-builder-controls{ bottom:15px; }
}

/* Fixed background while page scrolls (parallax-style) */
.hero-builder-slide.hero-bg-fixed{
    background-attachment: fixed;
    background-size: cover;
}

/* iOS / mobile often ignore fixed attachment — fall back to scroll */
@media (max-width: 991.98px){
    .hero-builder-slide.hero-bg-fixed{
        background-attachment: scroll;
    }
}

@media (max-width: 767.98px){
  .hero-builder-ctas{ left:18px; right:18px; }
  .hero-buttons-vertical-top{ top:38px; }
  .hero-buttons-vertical-bottom{ bottom:72px; }
}