/* Built to Withstand: desktop is locked to the photo's proportions (3626x1080) so everything lands where the design puts it. */
.zwith{--zw-line:color-mix(in srgb,var(--zip-blue,#0a6cc4) 65%,#fff);
position:relative;z-index:1;width:100%;aspect-ratio:3626/1080;background:#0e2740 var(--zw-bg) center/cover no-repeat;overflow:hidden;color:#fff}
.zwith *,.zwith *::before,.zwith *::after{box-sizing:border-box}
:where(.zwith ul,.zwith li){margin:0;padding:0;list-style:none}

.zwith__top{position:absolute;left:5.6%;top:17%}
.zwith .zwith__eyebrow{margin:0;font-size:clamp(10px,1vw,18px);font-weight:500;letter-spacing:.3em;line-height:1.3;text-transform:uppercase;color:#fff}
.zwith .zwith__title{margin:.45vw 0 1.4vw;font-size:var(--zip-h3-size);font-weight:700;line-height:1.15;letter-spacing:0;text-transform:uppercase;color:#fff}
.zwith__rule{display:block;width:6.3vw;height:max(2px,.16vw);background:#fff;transform-origin:0 50%}

.zwith__bottom{position:absolute;left:3.5vw;right:5.4%;top:45%;bottom:9%;z-index:2;display:flex;align-items:center;justify-content:space-between}
.zwith__icons{display:grid;grid-template-columns:repeat(4,11.7vw)}
.zwith::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(6,20,40,var(--zw-ov,.7)) 0,rgba(6,20,40,calc(var(--zw-ov,.7)*.8)) 38%,rgba(6,20,40,calc(var(--zw-ov,.7)*.6)) 100%);pointer-events:none}
.zwith__top{z-index:2}
.zwith__box{display:flex;flex-direction:column;align-items:center;gap:.7vw;text-align:center}
.zwith__icon{display:block;width:3.7vw;height:3.7vw;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.zwith .zwith__box h4{margin:0;font-size:clamp(10px,1vw,19px);font-weight:600;line-height:1.25;letter-spacing:0;text-transform:none;color:#fff}

.zwith__right{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.zwith__q{font-size:clamp(9px,1vw,19px);font-weight:500;letter-spacing:.3em;margin-right:-.3em;line-height:1.4;text-transform:uppercase}
.zwith__big{font-size:clamp(12px,1.4vw,26px);font-weight:600;letter-spacing:.25em;margin-right:-.25em;line-height:1.5;text-transform:uppercase}
.zwith__bigs{display:contents}
.zwith__big+.zwith__big{margin-top:.1vw}
.zwith__lines{display:flex;flex-direction:column;align-items:flex-end;gap:max(4px,.4vw);width:100%;margin-top:1.4vw}
.zwith__lines i{display:block;height:max(2px,.16vw);background:rgba(255,255,255,.9);transform-origin:100% 50%}
.zwith__lines i:first-child{width:100%}
.zwith__lines i:last-child{width:50%;background:var(--zw-line)}

.zwith.zw-pre [data-zw],.zwith.zw-pre [data-zw-line]{opacity:0}

/* tablet: heading on top; icons and the quote share one centred row below */
@media (max-width:1024px){
.zwith{aspect-ratio:auto;background-position:80% center;padding:56px 0 52px;display:flex;flex-direction:column}
.zwith::before{background:linear-gradient(90deg,rgba(6,20,40,calc(var(--zw-ov,.7)*1.25)) 0,rgba(6,20,40,calc(var(--zw-ov,.7)*1)) 55%,rgba(6,20,40,calc(var(--zw-ov,.7)*.7)) 100%)}
.zwith__top{position:relative;left:auto;top:auto;padding:0 36px}
.zwith .zwith__eyebrow{font-size:12px}
.zwith .zwith__title{font-size:var(--zip-h3-size);margin:8px 0 18px}
.zwith__rule{width:72px;height:2px}
.zwith__bottom{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:34px 36px 0;gap:20px}
.zwith__icons{grid-template-columns:repeat(4,minmax(0,92px));gap:12px}
.zwith__icon{width:44px;height:44px}
.zwith__box{gap:10px}
.zwith .zwith__box h4{font-size:13px}
.zwith__q{font-size:13px}
.zwith__big{font-size:20px}
.zwith__lines{margin-top:18px;width:100%}
.zwith__lines i{height:2px}
}
/* mobile: stacked, the quote block centred */
@media (max-width:767px){
.zwith{padding:44px 0 40px}
.zwith::before{background:linear-gradient(180deg,rgba(6,20,40,calc(var(--zw-ov,.7)*1.15)) 0,rgba(6,20,40,calc(var(--zw-ov,.7)*.9)) 100%)}
.zwith__top{padding:0 15px;text-align:center}
.zwith__rule{margin-left:auto;margin-right:auto;transform-origin:50% 50%}
.zwith .zwith__eyebrow{font-size:12px}
.zwith .zwith__title{font-size:var(--zip-h3-size)}
.zwith__bottom{flex-direction:column;align-items:stretch;gap:34px;margin:30px 15px 0}
.zwith__icons{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
.zwith__icon{width:42px;height:42px}
.zwith__right{align-self:center;align-items:center;text-align:center;width:max-content;max-width:100%}
.zwith__bigs{display:flex;justify-content:center;gap:.7em}
.zwith__big+.zwith__big{margin-top:0}
.zwith__q,.zwith__big{margin-right:0;padding-left:.25em}
.zwith__lines{align-items:center}
.zwith__big{font-size:18px}
}
@media (min-width:1025px){
.zwith.is-bgfixed{background-attachment:fixed;background-position:62% center}
}
/* fixed background on tablet / mobile (see the Contact section for why this is a clipped fixed layer) */
@media (max-width:1024px){
.zwith.is-bgfixed{background-image:none;clip-path:inset(0);isolation:isolate}
.zwith.is-bgfixed::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--zw-bg) 80% center/cover no-repeat;pointer-events:none}
}