.dna-hero{position:relative;min-height:1050px;overflow:hidden;text-align:center;padding-top:65px}.dna-intro{position:relative;z-index:2;animation:dnaAppear .8s both}.dna-hero h1{font-size:clamp(38px,4vw,70px);font-weight:500;letter-spacing:-.045em;line-height:1.1;margin:0 auto 22px;max-width:900px}.dna-intro p{color:#bcb2cc;font-size:18px;line-height:1.55;max-width:560px;margin:0 auto 25px}.dna-cta{display:inline-block;background:#fd0084;color:white;padding:13px 24px;border-radius:30px;font-size:15px;text-decoration:none}.dna-spiral{position:absolute;left:50%;top:330px;width:400px;height:960px;transform:translateX(-50%)}.dna-hero svg{width:100%;height:100%;overflow:visible}.dna-strand{stroke-dasharray:1800;stroke-dashoffset:1800;animation:dnaDraw 2s .3s cubic-bezier(.3,.1,.25,1) forwards}.dna-flow{stroke-dasharray:18 270;opacity:0;animation:dnaFlow 7s 2.3s linear infinite,dnaAppear 1s 2.3s forwards}.dna-label{position:absolute;top:440px;text-align:left;width:250px;animation:dnaAppear 1s .6s both}.dna-label.care{right:calc(50% + 160px)}.dna-label.impact{left:calc(50% + 160px)}.dna-label:before{content:'';display:block;width:28px;height:4px;background:#fd0084;border-radius:3px;margin-bottom:18px}.dna-label.impact:before{background:#01e6a1}.dna-label h2{font-size:36px;letter-spacing:-.035em;margin:0 0 12px}.dna-label p{font-size:18px;color:#bcb2cc;line-height:1.5;margin:0}
@keyframes dnaDraw{to{stroke-dashoffset:0}}@keyframes dnaAppear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@keyframes dnaFlow{to{stroke-dashoffset:-576}}
@media(max-width:750px){.dna-hero{padding:45px 22px 0;min-height:1050px}.dna-intro p{font-size:16px;max-width:340px}.dna-hero h1{max-width:360px}.dna-spiral{top:520px;width:330px}.dna-label{top:365px;width:42%;text-align:left}.dna-label.care{left:6%;right:auto}.dna-label.impact{left:54%}.dna-label h2{font-size:27px}.dna-label p{font-size:15px}.dna-label:before{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.dna-hero *{animation:none!important}.dna-strand{stroke-dashoffset:0}.dna-flow{display:none}}
.dna-hero{padding-top:0;min-height:1080px}.dna-spiral{top:70px}.dna-label{top:70px;text-align:left}.dna-label.care{text-align:left}
@media(max-width:750px){.dna-hero{min-height:1150px;padding-top:0}.dna-label{top:45px;width:27%}.dna-spiral{top:45px;width:200px}.dna-label.care{left:4%;text-align:left}.dna-label.impact{left:69%}.dna-label h2{font-size:21px}.dna-label p{font-size:13px}}
/* Extended private concept with a scroll-directed finish. */
.dna-hero{min-height:1490px}.dna-spiral{height:1380px;will-change:transform;transform-origin:50% 0}

.dna-outro-halo{transform-origin:200px 1340px;scale:var(--outro,0);filter:blur(6px)}
.dna-outro-point{opacity:var(--outro,1)}
.dna-hero .dna-strand{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.dna-hero .dna-flow{animation:dnaFlow 7s linear infinite,dnaAppear 1s 1s forwards}
.dna-scroll-cue{position:absolute;top:700px;left:calc(50% + 150px);font-size:11px;color:#9a8ba9;letter-spacing:.13em;text-transform:uppercase;transition:opacity .3s}
@media(max-width:750px){.dna-hero{min-height:1450px}.dna-spiral{width:240px;height:1380px}.dna-scroll-cue{left:auto;right:15px;top:720px}.dna-label{width:26%}.dna-label h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.dna-outro-point{opacity:1}.dna-outro-halo{scale:1}}

.dna-rung-labels{position:absolute;top:516px;left:calc(50% + 125px);z-index:2;display:grid;grid-auto-rows:42px;align-items:center;text-align:left;font-size:23px;color:#a99db8;opacity:var(--rungs,1);transform:translateY(calc(8px * (1 - var(--rungs,1))));pointer-events:none}
.dna-rung-labels span:nth-child(2){color:#d3c9df}
@media(max-width:750px){.dna-rung-labels{top:491px;left:calc(50% + 106px);font-size:clamp(11px,2.7vw,15px);grid-auto-rows:42px}}
@media(prefers-reduced-motion:reduce){.dna-rung-labels{opacity:1;transform:none}}

/* Align the care label toward its strand, as in the reference. */
.dna-label.care{text-align:right}
.dna-label.care:before{margin-left:auto}
@media(max-width:750px){.dna-label.care{text-align:right}}

/* The two strands meet inside the CTA at the last crossing. */
.dna-hero{min-height:1170px}
.dna-spiral{height:1040px}
.dna-attached-demo{position:absolute;top:934px;left:50%;transform:translateX(-50%);width:204px;height:60px;border:0;border-radius:40px;background:linear-gradient(105deg,#fd0084 0%,#bd5fa1 35%,#57c4a2 70%,#01e6a1 100%);color:#fffafc;font-size:21px;letter-spacing:-.02em;box-shadow:0 -8px 32px #01e6a10c,0 8px 32px #fd008412;z-index:3;opacity:var(--outro,1);transition:opacity .2s}
.dna-attached-demo:hover{filter:brightness(1.08)}
@media(max-width:750px){.dna-hero{min-height:1140px}.dna-spiral{height:1040px;width:240px}.dna-attached-demo{top:934px;width:194px;height:58px;font-size:20px}}

.dna-label:before{display:none}

.dna-hero{background:#01001a;color:#fffafc;text-align:center;position:relative;overflow:hidden}.dna-label h1{font:inherit;font-size:36px;font-weight:700;letter-spacing:-.035em;margin:0 0 12px;line-height:1.12}.dna-attached-demo{display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:inherit}.dna-label p{margin:0}
@media(max-width:750px){.dna-label h1{font-size:20px}}


/* Keep header clearance inside the continuous dark hero surface. */
html,body.site-landlord{background:#01001a}
body:has(.dna-hero){background:#01001a}
.dna-hero{margin-top:0;min-height:1290px;padding-top:0}
.dna-hero .dna-spiral{top:190px}
.dna-hero .dna-label{top:190px}
.dna-hero .dna-rung-labels{top:636px}
body:has(.dna-hero) .site-header{background:rgba(1,0,26,.96)}
@media(max-width:750px){
 .dna-hero{margin-top:0;min-height:1240px}
 .dna-hero .dna-spiral,.dna-hero .dna-label{top:145px}
 .dna-hero .dna-rung-labels{top:591px}
}

@media(min-width:1100px){
 .dna-hero .dna-label{width:320px}
 .dna-hero .dna-label :is(h1,h2){font-size:clamp(44px,3.4vw,56px);line-height:1.1;font-weight:700;white-space:nowrap}
}

@media(max-width:750px){
 .dna-hero{min-height:1470px}
 .dna-hero .dna-label{top:140px;width:43%;z-index:2}
 .dna-hero .dna-label.care{left:4%;right:auto;text-align:right}
 .dna-hero .dna-label.impact{left:53%;text-align:left}
 .dna-hero .dna-label :is(h1,h2){font-size:clamp(23px,6vw,30px);line-height:1.15;white-space:normal}
 .dna-hero .dna-label p{font-size:15px;line-height:1.45}
 .dna-hero .dna-spiral{top:360px;width:min(100%,400px)}
 .dna-hero .dna-rung-labels{top:806px;left:calc(50% + 104px);font-size:12px;width:90px}
}

@media(max-width:750px){
 .dna-hero{min-height:1330px}
 .dna-hero .dna-label :is(h1,h2){font-size:clamp(26px,7.1vw,32px)}
 .dna-hero .dna-spiral{top:270px;height:959px}
 .dna-hero .dna-rung-labels{top:635px}
 .dna-hero .dna-attached-demo{top:853px}
}

/* Start hidden until the scroll controller draws the paths, avoiding a full-line flash. */
.dna-hero .dna-strand{stroke-dasharray:1800;stroke-dashoffset:1800}
@media(prefers-reduced-motion:reduce){.dna-hero .dna-strand{stroke-dasharray:none;stroke-dashoffset:0}}

@media(min-width:1100px){
 .dna-hero .dna-label{width:clamp(330px,28vw,440px)}
 .dna-hero .dna-label :is(h1,h2){font-size:clamp(52px,4.2vw,72px)}
}

.dna-hero svg>path,.dna-rung-labels span{opacity:0}
@media(prefers-reduced-motion:reduce){.dna-hero svg>path,.dna-rung-labels span{opacity:1}}

.dna-attached-demo{font-weight:700}
@keyframes dnaButtonPulse{
 0%,100%{transform:translateX(-50%) scale(1)}
 45%{transform:translateX(-50%) scale(1.035);filter:brightness(1.1)}
}
.dna-attached-demo.is-pulsing{animation:dnaButtonPulse .48s ease-out}
@media(prefers-reduced-motion:reduce){.dna-attached-demo.is-pulsing{animation:none}}

.dna-community{position:relative;background:#01001a;overflow:hidden}
.dna-community .dna-hero{min-height:1210px}
.dna-community-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.dna-community-outline path{opacity:.85}
.dna-community-proof{position:relative;z-index:2;padding:40px 80px 90px;max-width:1100px}
.dna-community-proof .customer-logo-cluster{max-width:860px;margin:0 auto;gap:28px}
.dna-community-proof .customer-logo-row{gap:clamp(22px,3vw,42px)}
.dna-community-proof .customer-logo{width:calc(var(--logo-width)*.75)}
.dna-community-proof .customer-logo img{width:100%;height:auto}
.dna-community .dna-attached-demo{z-index:3}
@media(max-width:750px){
 .dna-community .dna-hero{min-height:1230px}
 .dna-community-proof{padding:30px 48px 80px;width:100%}
 .dna-community-proof .customer-logo-cluster{gap:26px 24px}
 .dna-community-proof .customer-logo{width:min(100%,calc(var(--logo-width)*.65));margin:auto}
}

.dna-hero .dna-attached-demo{background:linear-gradient(90deg,#db2289 0%,#fd0084 36%,#a980ae 50%,#01e6a1 64%,#16caa0 100%)}
.dna-community-outline{opacity:.85}
.dna-community-outline path{opacity:1}

@media(max-width:750px){
 .dna-hero .dna-label{width:42%}
 .dna-hero .dna-label.impact{left:54%}
 .dna-hero .dna-label :is(h1,h2){font-size:clamp(28px,8vw,36px)}
}

/* Real mission imagery sits behind the DNA, fading away toward its centre. */
.dna-mission-atmosphere{position:absolute;inset:100px 0 0;pointer-events:none;z-index:0;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 65%,transparent)}
.dna-mission-photo{position:absolute;width:clamp(180px,23vw,380px);height:340px;object-fit:cover;border-radius:38px;opacity:.34;filter:saturate(.8);mask-image:linear-gradient(to right,#000,transparent)}
.dna-mission-photo-1{left:-40px;top:20px;transform:rotate(-6deg)}
.dna-mission-photo-2{right:-40px;top:70px;transform:rotate(6deg);mask-image:linear-gradient(to left,#000,transparent)}
.dna-mission-photo-3{left:-70px;top:430px;transform:rotate(5deg)}
.dna-mission-photo-4{right:-70px;top:490px;transform:rotate(-5deg);mask-image:linear-gradient(to left,#000,transparent)}
.dna-hero .dna-label,.dna-hero .dna-rung-labels{z-index:2}
.dna-hero .dna-spiral{z-index:1}
@media(max-width:750px){
 .dna-mission-atmosphere{inset:240px 0 0}
 .dna-mission-photo{width:180px;height:280px;opacity:.28;border-radius:28px}
 .dna-mission-photo-1{left:-70px;top:0}
 .dna-mission-photo-2{right:-70px;top:190px}
 .dna-mission-photo-3,.dna-mission-photo-4{display:none}
}

/* Highlight motion starts after the entry draw and stays behind the drawn tip. */
.dna-hero .dna-flow{animation:dnaFlow 7s linear infinite}
@media(max-width:750px){
 .dna-hero .dna-label{width:42%}
 .dna-hero .dna-label.care{left:2%}
 .dna-hero .dna-label.impact{left:56%}
 .dna-hero .dna-label :is(h1,h2){font-size:clamp(30px,8.6vw,36px);letter-spacing:-.06em}
}
