/* Home — full-screen snapping frames */
html.frames{scroll-padding-top:72px}
@media (min-width:900px) and (min-height:640px){html.frames{scroll-snap-type:y mandatory}}
.frame{min-height:calc(100svh - 72px);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;position:relative}
.frame>.wrap{width:100%}
.frame.hero .hero__inner{padding-block:clamp(40px,8vh,96px)}
.hero__mission{margin-top:clamp(2rem,5vh,3.2rem);padding-top:1.6rem;border-top:1px solid var(--line-dark-2);max-width:60ch;display:flex;flex-direction:column;gap:.8rem}
.hero__mission p{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:var(--on-dark);text-wrap:pretty}
.frame__next{min-height:32px;padding-inline:8px;position:absolute;left:50%;bottom:clamp(16px,3vh,32px);transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.6em;font-family:var(--font-display);font-size:.78rem;letter-spacing:.04em;color:var(--on-dark-mute)}
.frame__next:hover{color:var(--teal-bright)}
.frame__next svg{width:16px;height:16px}

/* dots */
.fdots{position:fixed;right:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:14px}
.fdots a{display:flex;align-items:center;justify-content:flex-end;gap:.7em;font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:transparent;transition:color .25s}
.fdots a::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .25s,transform .25s}
.fdots a:hover{color:var(--ink-mute)}
.fdots a.on::after{background:var(--teal);transform:scale(1.4)}
.fdots[data-dark] a::after{background:rgba(255,255,255,.3)}
.fdots[data-dark] a.on::after{background:var(--teal-bright)}
.fdots[data-dark] a:hover{color:var(--on-dark-soft)}
@media (max-width:760px){.fdots{display:none}}

/* what we build */
.areas__head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,4vh,2.8rem)}
.areas__head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.025em}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
@media (max-width:900px){.areas{grid-template-columns:1fr}}
.area{display:flex;flex-direction:column;gap:1rem;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);min-height:clamp(300px,46vh,440px);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.area:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-3px)}
.area__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.area__n{font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.12em;color:var(--ink-mute)}
.area__logo{height:40px;width:auto}
.area__ico{width:44px;height:44px;border-radius:12px;background:var(--mist);color:var(--teal);display:flex;align-items:center;justify-content:center}
.area__ico svg{width:22px;height:22px}
.area__label{font-family:var(--font-display);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-top:auto}
.area h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.015em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.area p{color:var(--ink-soft);line-height:1.6;text-wrap:pretty}
.area .tlink{margin-top:.4rem}
.area--dark{background:var(--navy-900);border-color:var(--navy-900)}
.area--dark h3{color:#fff}
.area--dark p{color:var(--on-dark-soft)}
.area--dark .area__label{color:var(--teal-bright)}
.area--dark .area__n{color:var(--on-dark-mute)}
.area--dark .tlink{color:var(--teal-bright)}

/* contact */
.frame--contact{background:var(--paper-2);border-top:1px solid var(--line);justify-content:space-between}
.frame--contact>.wrap:first-child{flex:1;display:flex;align-items:center;padding-block:clamp(24px,4.5vh,64px)}
.frame--contact .contact__grid{width:100%}
.frame--contact h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.025em}
.frame--contact .field{margin-bottom:14px}
.frame--contact textarea{min-height:96px;height:96px}
.mini-foot{border-top:1px solid var(--line);padding-block:18px}
.mini-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink-mute)}
.mini-foot nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.mini-foot a{color:var(--ink-soft);display:inline-flex;align-items:center;min-height:28px}
.mini-foot a:hover{color:var(--teal)}

/* contact form states */
.field__ctl{position:relative}
.field label{transition:color .2s}
.field:focus-within label{color:var(--teal-strong)}
.field input:hover:not(:focus),.field select:hover:not(:focus),.field textarea:hover:not(:focus){border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(19,135,126,.14)}
.field.valid input,.field.valid select,.field.valid textarea{border-color:rgba(19,135,126,.55)}
.field__ok{position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease-out);pointer-events:none}
.field.valid .field__ok{opacity:1;transform:scale(1)}
.field.valid input{padding-right:2.6em}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#C9433F;background:#FEF6F6}
.field.invalid input:focus,.field.invalid select:focus,.field.invalid textarea:focus{box-shadow:0 0 0 4px rgba(201,67,63,.14)}
.field.invalid label{color:#B2382F}
.field__err{align-items:center;gap:.4em}
.field.invalid .field__err{display:flex;animation:errIn .25s var(--ease-out)}
.field__err svg{width:15px;height:15px;flex:none}
@keyframes errIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.field__labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.field__count{font-size:.76rem;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.field__count.near{color:#B2382F}
.form__summary{display:none;align-items:center;gap:.6em;margin-bottom:16px;padding:.75em 1em;border-radius:11px;background:#FEF2F1;border:1px solid #F4CFCC;color:#A3322A;font-size:.9rem;font-weight:500}
.form__summary.show{display:flex;animation:errIn .25s var(--ease-out)}
.form__summary svg{width:18px;height:18px;flex:none}
.form.shake{animation:shake .4s var(--ease)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.form__submit{position:relative}
.form__submit:disabled{cursor:progress;opacity:.92}
.form__spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.form__submit.loading .form__spin{display:inline-block}
.form__submit.loading svg{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.form__success{padding:clamp(28px,5vh,48px) 8px}
.form__success:focus{outline:none}
.form__success .check{width:72px;height:72px;background:rgba(19,135,126,.1)}
.form__success .check svg{width:52px;height:52px}
.check__ring{stroke-dasharray:145;stroke-dashoffset:145;opacity:.35}
.check__tick{stroke-dasharray:36;stroke-dashoffset:36}
.form__success.show .check__ring{animation:draw .6s var(--ease-out) forwards}
.form__success.show .check__tick{animation:draw .4s .35s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form__success h3{text-wrap:balance}
.form__success p b{color:var(--ink);font-weight:600}
.form__receipt{display:grid;grid-template-columns:1fr 1fr;margin:1.6rem auto 0;max-width:360px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);text-align:left}
.form__receipt div{padding:.8rem 1rem}
.form__receipt div+div{border-left:1px solid var(--line)}
.form__receipt dt{font-family:var(--font-display);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.form__receipt dd{margin-top:.25rem;font-weight:600;color:var(--ink);font-size:.95rem}
.form__success-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){.form.shake,.form__success.show .check__ring,.form__success.show .check__tick{animation:none;stroke-dashoffset:0}}

/* hero: brand identity first */
.hx{display:flex;flex-direction:column;align-items:flex-start}
.hx__id{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.hx__mark{width:clamp(64px,8vw,112px);height:auto;flex:none;filter:drop-shadow(0 0 28px rgba(34,194,181,.35))}
.hx__name{display:flex;flex-direction:column;gap:.35rem;max-width:none;margin:0}
.hx__word{font-family:var(--font-brand);font-weight:600;font-size:clamp(3rem,8.4vw,6.6rem);line-height:.92;letter-spacing:-.035em;color:#fff}
.hx__entity{font-family:var(--font-display);font-weight:600;font-size:clamp(.9rem,1.5vw,1.25rem);letter-spacing:.32em;text-transform:uppercase;color:var(--teal-bright);padding-left:.2em}
.hx__value{margin-top:clamp(1.4rem,3.4vh,2.2rem);font-family:var(--font-display);font-weight:500;font-size:clamp(1.25rem,2.3vw,1.85rem);line-height:1.35;letter-spacing:-.01em;color:var(--on-dark);max-width:34ch;text-wrap:balance}
.hx__value a{color:#fff;text-decoration:underline;text-decoration-color:var(--teal-bright);text-decoration-thickness:2px;text-underline-offset:.2em}
.hx__value a:hover{color:var(--teal-glow)}
.hx__proof{margin-top:1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.92rem;color:var(--on-dark-soft)}
.hx__proof a{display:block}.hx__proof img{height:26px;width:auto;display:block;background:#fff;border-radius:6px;padding:3px 7px}
.hx__cta{margin-top:clamp(1.6rem,4vh,2.4rem);display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:12px;width:100%}
@media (max-width:640px){.hx__cta{grid-template-columns:1fr}}
.hx__path{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1rem 3rem 1rem 1.2rem;border-radius:var(--radius);border:1px solid var(--line-dark-2);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.hx__path:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.hx__path svg{position:absolute;right:1.1rem;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--teal-bright);transition:transform .25s var(--ease)}
.hx__path:hover svg{transform:translateX(3px)}
.hx__who{font-family:var(--font-display);font-weight:600;font-size:1rem;color:#fff}
.hx__what{font-size:.86rem;color:var(--on-dark-soft);line-height:1.4}
.hx__path--primary{background:var(--teal);border-color:var(--teal)}
.hx__path--primary:hover{background:var(--teal-strong);border-color:var(--teal-strong)}
.hx__path--primary .hx__what{color:rgba(255,255,255,.85)}
.hx__path--primary svg{color:#fff}
.hx__mv{margin-top:clamp(1.8rem,5vh,3rem);padding-top:1.3rem;border-top:1px solid var(--line-dark);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,4vw,3.5rem);width:100%;max-width:880px}
@media (max-width:640px){.hx__mv{grid-template-columns:1fr}}
.hx__mv p{margin-top:.6rem;font-size:.98rem;line-height:1.55;color:var(--on-dark-soft);text-wrap:pretty}