
:root{
  --navy:#192230;
  --yellow:#FFCD00;
  --white:#FFFFFF;
  --ease:cubic-bezier(.2,.8,.2,1);
  --page:min(1380px,calc(100% - 44px));
  --line:rgba(25,34,48,.10);
  --shadow:0 20px 60px rgba(25,34,48,.10);
  --shadow2:0 32px 90px rgba(25,34,48,.18)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--navy);font-family:"Montserrat",system-ui,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:var(--page);margin:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:99px;background:var(--yellow)}
.display{margin:16px 0 0;max-width:980px;font-size:clamp(40px,4.8vw,66px);line-height:.98;letter-spacing:-.05em;font-weight:800}
.title{margin:14px 0 0;max-width:860px;font-size:clamp(32px,3.7vw,52px);line-height:1;letter-spacing:-.04em;font-weight:800}
.lead{margin:20px 0 0;max-width:740px;font-size:14px;line-height:1.8;opacity:.68}
.reveal{opacity:0;transform:translateY(22px);transition:.65s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* HERO */
.hero{padding:86px 0 48px;background:linear-gradient(rgba(25,34,48,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(25,34,48,.025) 1px,transparent 1px),var(--white);background-size:56px 56px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:end}
.hero-side{padding:25px;border-radius:24px;background:var(--navy);color:var(--white);box-shadow:var(--shadow2);position:relative;overflow:hidden}
.hero-side:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--yellow)}
.hero-side small{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--yellow)}
.hero-side h2{margin:14px 0 10px;font-size:25px;line-height:1.08}
.hero-side p{margin:0;font-size:10px;line-height:1.75;color:rgba(255,255,255,.62)}
.hero-tape{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.hero-tape span{padding:8px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:8px;font-weight:800;color:rgba(255,255,255,.72)}

/* STATEMENT */
.statement{padding:22px 0 64px}
.statement-line{border-top:1px solid var(--line);padding-top:36px;display:grid;grid-template-columns:.55fr 1.45fr;gap:40px}
.statement-copy{font-size:clamp(24px,3vw,40px);line-height:1.35;letter-spacing:-.035em;font-weight:700}
.statement-copy mark{background:none;color:inherit;box-shadow:inset 0 -.22em 0 var(--yellow)}

/* DNA */
.dna{padding:72px 0;background:var(--navy);color:var(--white)}
.dna-head{display:grid;grid-template-columns:1fr .55fr;gap:35px;align-items:end;margin-bottom:28px}
.dna .lead{opacity:1;color:rgba(255,255,255,.60)}
.dna-note{justify-self:end;max-width:330px;color:var(--yellow);font-size:9px;font-weight:800;line-height:1.65}
.dna-stage{position:relative;height:600px;border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.02)}
.dna-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px}
.dna-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:42px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;text-align:center;font-size:16px;font-weight:800;line-height:1.15;z-index:4}
.dna-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:430px;height:430px;border:1px dashed rgba(255,255,255,.18);border-radius:50%}
.dna-ring.r2{width:300px;height:300px;border-style:solid;border-color:rgba(255,255,255,.08)}
.dna-node{position:absolute;z-index:5}
.dna-btn{min-width:120px;min-height:48px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:var(--navy);color:var(--white);cursor:pointer;font-size:9px;font-weight:800;transition:.25s var(--ease);box-shadow:0 10px 25px rgba(0,0,0,.14)}
.dna-btn:hover,.dna-btn:focus-visible,.dna-node.active .dna-btn{background:var(--white);color:var(--navy);border-color:var(--white);transform:translateY(-3px);outline:none}
.n1{left:12%;top:18%}.n2{right:12%;top:20%}.n3{left:8%;bottom:20%}.n4{right:8%;bottom:18%}.n5{left:50%;top:8%;transform:translateX(-50%)}.n6{left:50%;bottom:8%;transform:translateX(-50%)}
.dna-pop{position:absolute;z-index:10;width:330px;padding:18px;border-radius:18px;background:var(--white);color:var(--navy);box-shadow:0 24px 70px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s var(--ease);pointer-events:none}
.dna-pop.show{opacity:1;visibility:visible;transform:none}
.dna-pop small{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);opacity:.45}
.dna-pop h3{margin:8px 0 7px;font-size:19px;line-height:1.05}
.dna-pop p{margin:0;font-size:9px;line-height:1.65;opacity:.62}

/* STORY PATH */
.story{padding:74px 0}
.story-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start}
.story-intro{position:sticky;top:34px}
.story-path{position:relative;padding-left:56px}
.story-path:before{content:"";position:absolute;left:20px;top:8px;bottom:8px;border-left:3px dotted rgba(25,34,48,.18)}
.story-item{position:relative;padding:0 0 34px}
.story-item:last-child{padding-bottom:0}
.story-dot{position:absolute;left:-56px;top:0;width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;font-size:9px;font-weight:800;border:4px solid var(--white);box-shadow:0 6px 18px rgba(25,34,48,.13)}
.story-item h3{margin:0;font-size:21px;letter-spacing:-.025em}
.story-item p{margin:7px 0 0;font-size:10px;line-height:1.7;opacity:.60;max-width:700px}
.story-caption{display:inline-block;margin-top:10px;padding:7px 9px;border-radius:999px;background:rgba(25,34,48,.055);font-size:8px;font-weight:800}

/* HOW WE SHOW UP */
.behavior{padding:72px 0;background:var(--navy);color:var(--white)}
.behavior-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}
.behavior .lead{opacity:1;color:rgba(255,255,255,.60)}
.behavior-list{border-top:1px solid rgba(255,255,255,.10)}
.behavior-row{display:grid;grid-template-columns:80px 1fr 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.10);transition:.25s}
.behavior-row:hover{padding-left:10px}
.behavior-index{font-size:9px;font-weight:800;color:var(--yellow)}
.behavior-row h3{margin:0;font-size:18px}
.behavior-row p{margin:0;font-size:9px;line-height:1.6;color:rgba(255,255,255,.56)}
.behavior-tag{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,205,0,.22);color:var(--yellow);font-size:8px;font-weight:800}

/* FIT SECTION */
.fit{padding:72px 0}
.fit-head{text-align:center;max-width:760px;margin:0 auto 28px}
.fit-head .eyebrow{justify-content:center}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fit-card{padding:26px;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow)}
.fit-card.dark{background:var(--navy);color:var(--white);border-color:var(--navy)}
.fit-card h3{margin:0 0 16px;font-size:20px}
.fit-list{display:grid;gap:9px}
.fit-row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid rgba(25,34,48,.08)}
.fit-card.dark .fit-row{border-bottom-color:rgba(255,255,255,.08)}
.fit-row:last-child{border-bottom:0}
.fit-icon{width:26px;height:26px;border-radius:8px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-size:9px;font-weight:800}
.fit-row strong{font-size:9px}.fit-row small{display:block;margin-top:3px;font-size:8px;line-height:1.5;opacity:.55}

/* HUMAN */
.human{padding:70px 0;border-top:1px solid var(--line)}
.human-head{display:grid;grid-template-columns:1fr .6fr;gap:36px;align-items:end;margin-bottom:26px}
.human-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.media-card{position:relative;min-height:340px;border-radius:22px;background:var(--navy);color:var(--white);overflow:hidden}
.media-card.small{min-height:164px}
.media-stack{display:grid;gap:12px}
.media-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.media-placeholder strong{display:block;color:var(--yellow);font-size:9px}
.media-placeholder span{display:block;margin-top:5px;font-size:8px;line-height:1.5;color:rgba(255,255,255,.52)}

/* CTA */
.cta{padding:0 0 80px}
.cta-shell{position:relative;overflow:hidden;padding:38px 42px;border-radius:24px;background:var(--navy);color:var(--white);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.cta-shell:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--yellow)}
.cta-shell h2{margin:0;max-width:760px;font-size:clamp(29px,3.4vw,46px);line-height:1;letter-spacing:-.04em}
.cta-shell p{margin:9px 0 0;max-width:620px;font-size:9px;line-height:1.65;color:rgba(255,255,255,.60)}
.cta-btn{min-height:48px;padding:0 17px;border-radius:14px;background:var(--yellow);color:var(--navy);display:inline-flex;align-items:center;font-size:10px;font-weight:800;transition:.25s}
.cta-btn:hover{transform:translateY(-3px)}

/* MOBILE */
.mobile-dna{display:none}
@media(max-width:980px){
  :root{--page:min(100% - 28px,1380px)}
  .hero-grid,.statement-line,.story-grid,.human-head{grid-template-columns:1fr}
  .story-intro{position:relative;top:auto}
  .behavior-row{grid-template-columns:60px 1fr auto}
  .behavior-row p{grid-column:2/4}
}
@media(max-width:760px){
  .hero{padding:66px 0 42px}.display{font-size:clamp(38px,11vw,52px)}.title{font-size:clamp(30px,9vw,44px)}
  .statement{padding-bottom:54px}.statement-copy{font-size:23px}
  .dna{padding:58px 0}.dna-head{grid-template-columns:1fr}.dna-note{justify-self:start}
  .dna-stage{display:none}.mobile-dna{display:grid;gap:8px}
  .mobile-dna-item{border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden}
  .mobile-dna-trigger{width:100%;border:0;background:rgba(255,255,255,.035);color:var(--white);padding:15px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;text-align:left}
  .mobile-dna-trigger b{width:32px;height:32px;border-radius:10px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-size:8px}
  .mobile-dna-trigger strong{font-size:10px}.mobile-dna-trigger i{font-style:normal;color:var(--yellow);font-size:18px;transition:.25s}
  .mobile-dna-item.open .mobile-dna-trigger i{transform:rotate(45deg)}
  .mobile-dna-content{max-height:0;opacity:0;overflow:hidden;padding:0 15px;transition:.3s var(--ease)}
  .mobile-dna-item.open .mobile-dna-content{max-height:180px;opacity:1;padding:0 15px 15px}
  .mobile-dna-content p{margin:0;font-size:9px;line-height:1.65;color:rgba(255,255,255,.60)}
  .behavior{padding:58px 0}.behavior-head{align-items:start;flex-direction:column}.behavior-row{grid-template-columns:50px 1fr}.behavior-row p{grid-column:2}.behavior-tag{grid-column:2;justify-self:start}
  .fit-grid,.human-grid{grid-template-columns:1fr}.media-stack{grid-template-columns:1fr 1fr}.cta-shell{grid-template-columns:1fr;padding:30px 23px}
}
@media(max-width:480px){
  :root{--page:calc(100% - 20px)}
  .hero-side{padding:21px}.media-stack{grid-template-columns:1fr}.fit{padding:58px 0}.human{padding:58px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.reveal{opacity:1;transform:none}}
