.ds-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    min-height: var(--ds-hero-h, 430px);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background-color: var(--ds-hero-bg-color, transparent);
    background-image: var(--ds-hero-bg, none);
    background-size: cover;
    background-position: var(--ds-hero-bg-position, center center);
    background-repeat: no-repeat;
    isolation: isolate;
}

.ds-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ds-overlay, #08182f);
    opacity: var(--ds-overlay-opacity, .35);
}

.ds-hero__canvas {
    position: relative;
    z-index: 1;
    width: min(1400px, calc(100% - 64px));
    height: var(--ds-hero-h, 430px);
    margin: 0 auto;
}

.ds-hero__layer {
    position: absolute;
    left: var(--ds-left);
    top: var(--ds-top);
    transform:
        translate(var(--ds-tx), var(--ds-ty))
        translate(var(--ds-x), var(--ds-y));
    z-index: 2;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
}

.ds-hero__logo img {
    display: block;
    width: var(--ds-logo-width, 190px);
    max-width: min(90vw, 100%);
    height: auto;
}

.ds-hero__heading h1 {
    margin: 0;
    color: var(--ds-heading-color, #fff);
    font-size: var(--ds-heading-size, 44px);
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.ds-hero__text {
    width: min(var(--ds-text-width, 560px), calc(100vw - 64px));
}

.ds-hero__text p {
    margin: 0;
    color: var(--ds-text-color, #fff);
    font-size: var(--ds-text-size, 20px);
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

.ds-hero__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ds-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform .16s ease, opacity .16s ease;
}

.ds-hero__button:hover {
    transform: translateY(-1px);
    opacity: .94;
}

.ds-hero__button--primary {
    color: #fff !important;
    background: #0b67d1;
}

.ds-hero__button--secondary {
    color: #fff !important;
    border-color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.2);
}

@media (max-width: 1024px) {
    .ds-hero {
        min-height: var(--ds-hero-h-tablet, 360px);
    }

    .ds-hero__canvas {
        width: min(100% - 40px, 1200px);
        height: var(--ds-hero-h-tablet, 360px);
    }
}

@media (max-width: 767px) {
    .ds-hero {
        min-height: var(--ds-hero-h-mobile, 300px);
    }

    .ds-hero__canvas {
        width: calc(100% - 30px);
        height: var(--ds-hero-h-mobile, 300px);
    }

    .ds-hero__heading h1 {
        font-size: clamp(28px, 9vw, var(--ds-heading-size, 44px));
        text-align: center;
    }

    .ds-hero__text p {
        font-size: clamp(15px, 4.5vw, var(--ds-text-size, 20px));
    }

    .ds-hero__buttons {
        justify-content: center;
    }

    .ds-hero__layer[class*="ds-mobile-"] {
        --ds-x: 0px !important;
        --ds-y: 0px !important;
    }

    .ds-mobile-top-left { --ds-left:0%; --ds-top:0%; --ds-tx:0%; --ds-ty:0%; }
    .ds-mobile-top-center { --ds-left:50%; --ds-top:0%; --ds-tx:-50%; --ds-ty:0%; }
    .ds-mobile-top-right { --ds-left:100%; --ds-top:0%; --ds-tx:-100%; --ds-ty:0%; }
    .ds-mobile-middle-left { --ds-left:0%; --ds-top:50%; --ds-tx:0%; --ds-ty:-50%; }
    .ds-mobile-middle-center { --ds-left:50%; --ds-top:50%; --ds-tx:-50%; --ds-ty:-50%; }
    .ds-mobile-middle-right { --ds-left:100%; --ds-top:50%; --ds-tx:-100%; --ds-ty:-50%; }
    .ds-mobile-bottom-left { --ds-left:0%; --ds-top:100%; --ds-tx:0%; --ds-ty:-100%; }
    .ds-mobile-bottom-center { --ds-left:50%; --ds-top:100%; --ds-tx:-50%; --ds-ty:-100%; }
    .ds-mobile-bottom-right { --ds-left:100%; --ds-top:100%; --ds-tx:-100%; --ds-ty:-100%; }

    .ds-mobile-top-center,
    .ds-mobile-middle-center,
    .ds-mobile-bottom-center {
        text-align: center;
    }
}


/* DS Universal 1.10.4+ native overlay integration */
.ds-page-header--ds-hero {
    position: relative;
    overflow: hidden;
}

.ds-page-header--ds-hero .ds-page-header__inner {
    position: relative;
    width: min(1400px, calc(100% - 64px));
    max-width: none;
    min-height: inherit;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.ds-page-header--ds-hero .ds-hero__canvas--integrated {
    position: relative;
    width: 100%;
    height: var(--ds-hero-h, 430px);
    min-height: inherit;
    margin: 0;
}

@media (max-width: 1024px) {
    .ds-page-header--ds-hero .ds-page-header__inner {
        width: min(100% - 40px, 1200px);
    }

    .ds-page-header--ds-hero .ds-hero__canvas--integrated {
        height: var(--ds-hero-h-tablet, 360px);
    }
}

@media (max-width: 767px) {
    .ds-page-header--ds-hero .ds-page-header__inner {
        width: calc(100% - 30px);
    }

    .ds-page-header--ds-hero .ds-hero__canvas--integrated {
        height: var(--ds-hero-h-mobile, 300px);
    }
}

.ds-hero-extra-layer{position:absolute;z-index:4;box-sizing:border-box}
.ds-hero-extra-layer--text{height:auto}
.ds-hero-extra-layer--text>div{width:100%;overflow-wrap:normal;word-break:normal}
.ds-hero-extra-layer--image img{display:block;width:100%;height:auto;max-width:none}
@media(max-width:767px){
.ds-hero-extra-layer{left:var(--ds-extra-mobile-x)!important;top:var(--ds-extra-mobile-y)!important;width:var(--ds-extra-mobile-w)!important;min-height:var(--ds-extra-mobile-h)!important}
.ds-hero-extra-layer--hide-mobile{display:none!important}
}


/* DS Hero 0.9.0 full-width responsive layer canvas */
.ds-page-header--ds-hero .ds-page-header__inner{
    width:100%!important;
    max-width:none!important;
    padding-left:0!important;
    padding-right:0!important;
}
.ds-page-header--ds-hero .ds-hero__responsive-canvas{
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    overflow:hidden;
    height:var(--ds-hero-h-desktop,450px);
}
.ds-page-header--ds-hero{
    min-height:var(--ds-hero-h-desktop,450px);
}
.ds-hero-extra-layer{
    left:var(--d-x,0px);
    top:var(--d-y,0px);
    width:var(--d-w,300px);
    min-height:var(--d-h,60px);
}

/* Wide screen: 1600px and up */
@media(min-width:1600px){
    .ds-page-header--ds-hero .ds-hero__responsive-canvas{height:var(--ds-hero-h-widescreen,450px)}
    .ds-hero-extra-layer{left:var(--ws-x,0px);top:var(--ws-y,0px);width:var(--ws-w,300px);min-height:var(--ws-h,60px)}
    .ds-hide-widescreen{display:none!important}
}

/* Desktop: 1200–1599 */
@media(min-width:1200px) and (max-width:1599px){
    .ds-page-header--ds-hero .ds-hero__responsive-canvas{height:var(--ds-hero-h-desktop,450px)}
    .ds-hero-extra-layer{left:var(--d-x,0px);top:var(--d-y,0px);width:var(--d-w,300px);min-height:var(--d-h,60px)}
    .ds-hide-desktop{display:none!important}
}

/* Notebook / landscape tablet: 900–1199 */
@media(min-width:900px) and (max-width:1199px){
    .ds-page-header--ds-hero .ds-hero__responsive-canvas{height:var(--ds-hero-h-notebook,500px)}
    .ds-hero-extra-layer{left:var(--n-x,0px);top:var(--n-y,0px);width:var(--n-w,300px);min-height:var(--n-h,60px)}
    .ds-hide-notebook{display:none!important}
}

/* Tablet: 600–899 */
@media(min-width:600px) and (max-width:899px){
    .ds-page-header--ds-hero .ds-hero__responsive-canvas{height:var(--ds-hero-h-tablet,500px)}
    .ds-hero-extra-layer{left:var(--t-x,0px);top:var(--t-y,0px);width:var(--t-w,280px);min-height:var(--t-h,60px)}
    .ds-hide-tablet{display:none!important}
}

/* Mobile: below 600 */
@media(max-width:599px){
    .ds-page-header--ds-hero .ds-hero__responsive-canvas{height:var(--ds-hero-h-mobile,400px)}
    .ds-hero-extra-layer{left:var(--m-x,0px)!important;top:var(--m-y,0px)!important;width:var(--m-w,280px)!important;min-height:var(--m-h,60px)!important}
    .ds-hide-mobile{display:none!important}
}


/* DS Hero 0.9.2 proportional design-canvas translation */
.ds-page-header--ds-hero .ds-hero__responsive-canvas{
    container-type:inline-size;
}

/*
 * Each breakpoint stores positions in its own design-canvas coordinate system.
 * Convert stored pixels to percentages of that design width so live placement
 * stays proportional at any actual browser width.
 */

@media(min-width:1600px){
    .ds-hero-extra-layer{
        left:calc(var(--ws-x,0) / var(--ds-hero-w-widescreen,1900) * 100%)!important;
        top:var(--ws-y,0px)!important;
        width:calc(var(--ws-w,300) / var(--ds-hero-w-widescreen,1900) * 100%)!important;
        min-height:var(--ws-h,60px)!important;
    }
}

@media(min-width:1200px) and (max-width:1599px){
    .ds-hero-extra-layer{
        left:calc(var(--d-x,0) / var(--ds-hero-w-desktop,1440) * 100%)!important;
        top:var(--d-y,0px)!important;
        width:calc(var(--d-w,300) / var(--ds-hero-w-desktop,1440) * 100%)!important;
        min-height:var(--d-h,60px)!important;
    }
}

@media(min-width:900px) and (max-width:1199px){
    .ds-hero-extra-layer{
        left:calc(var(--n-x,0) / var(--ds-hero-w-notebook,1024) * 100%)!important;
        top:var(--n-y,0px)!important;
        width:calc(var(--n-w,300) / var(--ds-hero-w-notebook,1024) * 100%)!important;
        min-height:var(--n-h,60px)!important;
    }
}

@media(min-width:600px) and (max-width:899px){
    .ds-hero-extra-layer{
        left:calc(var(--t-x,0) / var(--ds-hero-w-tablet,768) * 100%)!important;
        top:var(--t-y,0px)!important;
        width:calc(var(--t-w,280) / var(--ds-hero-w-tablet,768) * 100%)!important;
        min-height:var(--t-h,60px)!important;
    }
}

@media(max-width:599px){
    .ds-hero-extra-layer{
        left:calc(var(--m-x,0) / var(--ds-hero-w-mobile,480) * 100%)!important;
        top:var(--m-y,0px)!important;
        width:calc(var(--m-w,280) / var(--ds-hero-w-mobile,480) * 100%)!important;
        min-height:var(--m-h,60px)!important;
    }
}

/*
 * Text remains legible and scales mildly with the actual hero width.
 * The layer box scales proportionally; font-size is still user-controlled.
 */


/* DS Hero 0.9.3 authoritative coordinate mapping.
 * All geometry is precomputed server-side as percentages of the selected
 * design canvas. No CSS division is used.
 */
@media(min-width:1600px){
    .ds-hero-extra-layer{
        left:var(--ws-x-p,0%)!important;
        top:var(--ws-y-p,0%)!important;
        width:var(--ws-w-p,10%)!important;
        min-height:var(--ws-h-p,10%)!important;
    }
}
@media(min-width:1200px) and (max-width:1599px){
    .ds-hero-extra-layer{
        left:var(--d-x-p,0%)!important;
        top:var(--d-y-p,0%)!important;
        width:var(--d-w-p,10%)!important;
        min-height:var(--d-h-p,10%)!important;
    }
}
@media(min-width:900px) and (max-width:1199px){
    .ds-hero-extra-layer{
        left:var(--n-x-p,0%)!important;
        top:var(--n-y-p,0%)!important;
        width:var(--n-w-p,10%)!important;
        min-height:var(--n-h-p,10%)!important;
    }
}
@media(min-width:600px) and (max-width:899px){
    .ds-hero-extra-layer{
        left:var(--t-x-p,0%)!important;
        top:var(--t-y-p,0%)!important;
        width:var(--t-w-p,10%)!important;
        min-height:var(--t-h-p,10%)!important;
    }
}
@media(max-width:599px){
    .ds-hero-extra-layer{
        left:var(--m-x-p,0%)!important;
        top:var(--m-y-p,0%)!important;
        width:var(--m-w-p,10%)!important;
        min-height:var(--m-h-p,10%)!important;
    }
}