:root{--navy:#122c40;--teal:#007f7a;--mint:#a6f0dd;--paper:#fff;--muted:#5c6a72;--line:#dce4e5;--soft:#f4f7f6}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--navy);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.6}
button,input,textarea{font:inherit}
button,a,input,summary{ -webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
::selection{background:var(--mint);color:var(--navy)}
[hidden]{display:none!important}
.wrap{width:min(1280px,calc(100% - 104px));margin-inline:auto}
.header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}
.wordmark{font-family:'Manrope',Arial,sans-serif;font-size:42px;font-weight:800;letter-spacing:-3px;line-height:.9;display:block}
.brand-dot{color:var(--teal)}
.wordmark small{display:block;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:3px;margin-top:10px;margin-left:3px}
.brand img{width:145px;height:64px;object-fit:contain}
.header nav{display:flex;gap:34px;font-size:14px}
.header nav a:hover,.text-link:hover{color:var(--teal)}
.nav-cta{font-size:14px;border:1px solid var(--line);padding:11px 18px;border-radius:100px}
.nav-cta span{margin-left:25px}
.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:50px;padding-block:65px 58px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;display:flex;align-items:center;gap:9px;margin:0 0 30px}
.live-dot{width:7px;height:7px;background:var(--teal);border-radius:50%;display:inline-block;flex-shrink:0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif}
h1{font-size:clamp(80px,7.8vw,112px);font-weight:600;line-height:1.01;letter-spacing:-6px;margin-bottom:26px}
h1>span{display:block;animation:line-in .65s both}
h1>span:nth-child(2){animation-delay:.08s}
h1>span:nth-child(3){animation-delay:.16s}
h1 .last-line{font-size:.59em;line-height:1.18;margin-top:15px;letter-spacing:-3.5px}
em{font-style:normal;color:var(--teal)}
.teal{color:var(--teal)}
.intro{max-width:440px;font-size:16px;color:var(--muted);line-height:1.75}
.actions{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:14px 20px;border:0;border-radius:6px;font-size:13px;font-weight:600;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-3px)}
.primary{background:var(--navy);color:#fff}
.primary:hover{background:var(--teal)}
.text-link{font-size:13px;border-bottom:1px solid var(--navy);padding-block:8px}
.text-link span{margin-left:10px}
.hero-foot{display:flex;gap:20px;font-size:9px;letter-spacing:1px;margin:42px 0 0}
.hero-foot span{color:var(--muted);font-size:11px;letter-spacing:0}
.hero-visual{padding-top:20px;min-width:0}
.orbit-label{text-align:right;font-size:9px;letter-spacing:1.5px;margin:0 12px 16px}
.orbit-label span{display:inline-block;font-size:30px;margin-left:12px;transform:rotate(-15deg)}
.organizer{background:#eef5f3;border:1px solid #dfe8e4;border-radius:12px;box-shadow:0 18px 45px #122c400a;overflow:hidden}
.scene-top{background:#fff;padding:14px 19px;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:10px;border-bottom:1px solid var(--line)}
.scene-dots{font-size:7px;color:#a5b4b5;letter-spacing:3px}
.scene-heading{padding:25px 25px 0}
.scene-heading>span{font-family:'Manrope',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.5px;display:block}
.scene-heading small{font-size:11px;color:var(--muted)}
.scene-board{position:relative;height:290px;padding:18px 22px}
.task{position:absolute;display:flex;align-items:center;gap:10px;background:white;padding:16px 14px;box-shadow:0 7px 22px #122c4010;border:1px solid #dce5e2;border-radius:8px;transition:all .65s cubic-bezier(.22,.7,.2,1);width:79%;left:9%}
.task-one{top:25px;transform:rotate(-7deg);z-index:3}
.task-two{top:112px;left:16%;transform:rotate(6deg);z-index:2}
.task-three{top:191px;left:4%;transform:rotate(-4deg);z-index:1}
.task-icon{color:var(--teal);background:#e6f5ef;font-size:21px;width:33px;height:35px;display:grid;place-items:center;border-radius:5px;flex-shrink:0}
.task small{font-size:8px;color:var(--muted);letter-spacing:.5px;display:block}
.task strong{font-size:12px;display:block}
.task-next{font-size:9px;color:var(--muted);display:none}
.task-status{display:none;font-size:8px;color:var(--teal);margin-left:auto;background:#e4f6ef;padding:4px 6px;border-radius:4px;white-space:nowrap}
.loose-note{position:absolute;bottom:8px;right:20px;font-size:13px;font-style:italic;transform:rotate(-8deg);background:#e5eaba;padding:7px 13px;z-index:4}
.loose-file{position:absolute;top:91px;left:6px;font-size:8px;transform:rotate(-14deg);color:var(--muted);background:#fff;padding:4px 8px}
.organized .task{left:4%;width:92%;transform:rotate(0);padding:12px}
.organized .task-one{top:17px}
.organized .task-two{top:105px}
.organized .task-three{top:193px}
.organized .task-next,.organized .task-status{display:block}
.organized .loose-note,.organized .loose-file{opacity:0;transform:scale(.8);transition:.3s}
.scene-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;background:#ffffff80;border-top:1px solid #dce6e1}
.scene-bottom>span{font-size:10px;max-width:190px}
.scene-bottom .button{padding:10px 16px;min-height:40px;background:var(--teal)}
.visual-caption{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin:25px 0 0 30px}
.caption-line{width:32px;height:1px;background:var(--teal)}
.fiction{font-size:10px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.hero-visual>.fiction{margin-left:74px}
.strip{border-block:1px solid var(--line);padding:20px 0;font-size:11px}
.strip .wrap{display:flex;justify-content:space-between;gap:25px}
.strip i{color:var(--teal);font-style:normal;margin:0 15px}
.strip .wrap>span:first-child{color:var(--muted)}
.section{padding-block:108px}
h2{font-size:clamp(38px,4.2vw,60px);line-height:1.13;letter-spacing:-2.8px;font-weight:600;margin-bottom:28px}
.section-intro>p:last-child,.section-copy{color:var(--muted);max-width:360px;font-size:15px}
.solutions{display:grid;grid-template-columns:1fr 1.12fr;gap:80px}


.tiny-mark{color:var(--teal);font-size:20px;margin-right:5px;vertical-align:middle}
.calculator{display:grid;grid-template-columns:1.15fr 1fr;gap:110px;align-items:center}
.calculator-controls{max-width:440px;margin-top:30px}
.calculator-controls>label{font-size:13px;display:flex;justify-content:space-between;gap:15px}
.calculator-controls output{color:var(--teal);font-weight:700}
input[type=range]{width:100%;accent-color:var(--teal);margin:20px 0 7px;cursor:pointer;min-height:25px}
.range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
fieldset{border:0;padding:0;margin:28px 0 0;min-width:0}
legend{font-size:12px;margin-bottom:13px}
.percentages{display:flex;gap:10px}
.percentages label{position:relative;flex:1;cursor:pointer}
.percentages input{position:absolute;opacity:0}
.percentages span{display:block;text-align:center;border:1px solid var(--line);padding:10px;border-radius:5px;font-size:13px}
.percentages input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.percentages input:focus-visible+span{outline:3px solid var(--teal);outline-offset:3px}
.calculator-result{position:relative;min-height:405px;background:#dff5ec;border-radius:8px;padding:35px;overflow:hidden}
.calculator-result>p:first-of-type{font-size:9px;letter-spacing:1px}
.big-result{font-family:'Manrope',sans-serif;font-size:125px;letter-spacing:-8px;line-height:1.2;margin:32px 0 6px;font-weight:500}
.big-result span{font-size:55px;letter-spacing:-4px;margin-left:10px}
.calculator-result h3{font-size:22px;font-weight:500;line-height:1.4;letter-spacing:-.5px;margin-bottom:26px}
.calculator-result #formula{font-size:11px;color:var(--teal);border-top:1px solid #bcded3;padding-top:15px;margin-bottom:10px}
.calculator-result small{font-size:10px;max-width:310px;display:block;color:#466c61}
.result-star{position:absolute;top:65px;right:28px;color:#81c9b5;font-size:100px;line-height:1}
.process-section{background:var(--soft)}
.process-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.process-heading>p{color:var(--muted);font-size:13px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:34px}
.process article{border-top:1px solid #b9d2ce;padding-top:20px}
.process article>span{font-family:'Manrope',sans-serif;font-size:38px;letter-spacing:-2px;color:var(--teal)}
.process h3{font-size:21px;line-height:1.35;margin:23px 0 15px;letter-spacing:-.7px}
.process p{color:var(--muted);font-size:12px;max-width:235px}
.team{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:center}
.founders{display:flex;flex-wrap:wrap;gap:12px 25px;margin-top:32px;font-size:13px}
.founders span{border-bottom:1px solid var(--line);padding-bottom:6px}
.identity{padding:10px 25px}
.pieces{display:flex;justify-content:center;gap:9px;height:160px;align-items:center;margin-bottom:25px}
.pieces span{background:var(--teal);width:74px;height:103px;transform:skewY(-24deg);animation:assemble .8s both}
.pieces span:nth-child(2){height:126px;background:var(--navy);animation-delay:.1s}
.pieces span:nth-child(3){height:103px;background:#a6e4d7;animation-delay:.2s}
.identity details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.identity summary{display:flex;justify-content:space-between;cursor:pointer;font-size:13px;list-style:none}
.identity summary::-webkit-details-marker{display:none}
.identity summary span{font-size:20px;color:var(--teal)}
.identity details[open] summary span{transform:rotate(45deg)}
.identity details p{font-size:12px;color:var(--muted);margin:15px 0 0}
.identity b{color:var(--teal)}
.contact{background:#edf6f2}
.contact h2{position:relative;font-size:clamp(48px,6.7vw,92px);letter-spacing:-4.5px;margin-bottom:36px}
.contact h2>span{position:absolute;right:10px;top:0;color:var(--teal);font-size:110px;font-weight:400}
.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px}
.contact-bottom p{font-size:14px;color:var(--muted);margin-bottom:0}
.message-box{margin-top:35px;max-width:670px}
.message-box label{font-size:11px;display:block;margin-bottom:8px}
textarea{width:100%;resize:vertical;min-height:92px;max-height:300px;background:#ffffff9c;border:1px solid #cfdfd8;border-radius:5px;padding:14px;color:var(--navy);font-size:12px}
.message-box p{font-size:11px;color:var(--muted);margin:10px 0 0}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:32px;font-size:10px;color:var(--muted)}
footer p{margin:0}
.footer-brand{font-size:30px;font-weight:700;letter-spacing:-2px;color:var(--navy)}
.footer-brand span{color:var(--teal)}
.skip{position:absolute;top:-100px;left:10px;z-index:100;background:white;padding:12px}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes line-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes assemble{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@media(min-width:1550px){.hero{gap:80px;padding-block:90px}
}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}
.hero{gap:28px}
h1{font-size:85px;letter-spacing:-5px}
.hero-foot{gap:10px}
.hero-foot span{font-size:10px}
.scene-heading>span{font-size:17px}
.task-status{font-size:7px}
.solutions{gap:45px}
.calculator{gap:55px}
.big-result{font-size:110px}
.team{gap:40px}
.process{gap:25px}
.contact h2>span{font-size:85px}
}
@media(max-width:800px){.header{height:88px}
.header nav{gap:18px;font-size:12px}
.hero{grid-template-columns:1fr;gap:40px;padding-block:50px}
.hero-copy{max-width:650px}
h1{font-size:100px}
.hero-visual{max-width:610px;width:100%;margin:0 auto;padding-top:0}
.scene-board{height:285px}
.task{width:73%}
.task strong{font-size:14px}
.task small{font-size:9px}
.task-next{font-size:10px}
.task-status{font-size:10px}
.scene-heading>span{font-size:21px}
.strip .wrap{flex-direction:column;gap:7px}
.strip i{margin:0 8px}
.section{padding-block:72px}
.solutions{grid-template-columns:1fr;gap:25px}
.section-intro>p:last-child{max-width:480px}
.calculator{grid-template-columns:1fr;gap:30px}
.calculator-controls{max-width:none}
.calculator-result{min-height:360px}
.big-result{margin-top:20px}
.calculator-result small{max-width:440px}
.process{grid-template-columns:repeat(2,1fr);gap:30px}
.team{grid-template-columns:1fr;gap:30px}
.identity{max-width:460px;width:100%;justify-self:center}
.contact h2>span{font-size:65px}
.contact-bottom{align-items:start;flex-direction:column;gap:22px}
.contact h2{font-size:65px;letter-spacing:-3.5px}
}
@media(max-width:520px){.wrap{width:calc(100% - 40px)}
.header nav{display:none}
.wordmark{font-size:35px}
.wordmark small{font-size:8px}
.nav-cta{font-size:12px;padding:9px 14px}
.eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:24px}
.hero{padding-block:40px;gap:25px}
h1{font-size:79px;letter-spacing:-4.7px}
h1 .last-line{font-size:.54em;letter-spacing:-2.5px;line-height:1.3}
.intro{font-size:14px;max-width:330px}
.actions{gap:16px;margin-top:24px}
.button{font-size:12px;padding:13px 16px;gap:18px}
.text-link{font-size:12px}
.hero-foot{margin-top:27px;flex-wrap:wrap;gap:4px 16px}
.orbit-label{font-size:8px}
.orbit-label span{font-size:25px}
.scene-top{padding:12px}
.scene-heading{padding:20px 16px 0}
.scene-heading>span{font-size:17px}
.scene-board{height:265px}
.task{padding:12px 9px;width:84%}
.task strong{font-size:11px}
.task small{font-size:7px}
.task-icon{width:28px;height:30px;font-size:18px}
.task-two{left:12%;top:100px}
.task-three{top:180px}
.task-next{font-size:8px}
.task-status{font-size:7px;padding:4px}
.organized .task{padding:11px 8px;gap:7px}
.organized .task-one{top:14px}
.organized .task-two{top:96px}
.organized .task-three{top:178px}
.scene-bottom{padding:12px;gap:8px}
.scene-bottom>span{font-size:9px;max-width:160px}
.scene-bottom .button{padding:10px;gap:10px;font-size:11px}
.visual-caption{margin-left:8px;font-size:10px}
.hero-visual>.fiction{margin-left:52px}
.strip{font-size:9px}
.strip i{margin:0 4px}
.section{padding-block:60px}
h2{font-size:39px;letter-spacing:-1.9px}

.calculator-result{padding:26px;min-height:360px}
.result-star{right:22px;font-size:75px;top:60px}
.calculator-result>p:first-of-type{font-size:8px}
.big-result{font-size:110px;letter-spacing:-6px}
.calculator-result h3{font-size:20px}
.process-heading{display:block}
.process-heading>p{font-size:12px}
.process{gap:26px 20px}
.process h3{font-size:18px;margin-top:16px}
.process p{font-size:11px}
.process article>span{font-size:32px}
.founders{gap:10px 18px;font-size:12px}
.identity{padding-inline:5px}
.pieces{height:140px}
.pieces span{width:63px;height:87px}
.pieces span:nth-child(2){height:110px}
.contact h2{font-size:47px;letter-spacing:-2.5px}
.contact h2>span{font-size:42px;right:0;top:-7px}
.contact-bottom p{font-size:12px}
.message-box{margin-top:24px}
footer{flex-wrap:wrap;gap:10px 20px}
footer>span{width:100%}
}
@media(max-width:520px){h1{font-size:clamp(64px,18vw,79px)}
.big-result{font-size:clamp(90px,24vw,110px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.button:hover{transform:none}
}

