:root{--navy:#0F3D78;--green:#3E9B3A;--lime:#8FD27E;--amber:#F4A51C;--ink:#0E1B2C;--mute:#5A6472;--bg:#F6F7F3;--line:#D9DDD4;--ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}a:hover{color:var(--green)}
input,select,textarea,button{font-family:inherit}
h1,h2,h3{font-family:Outfit,sans-serif;font-weight:600;margin:0}
h2{font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.wrap{max-width:1264px;margin:0 auto;padding:0 40px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--green);margin-bottom:20px}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.card{background:#fff;border-radius:24px}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:600;font-size:16px;transition:background .3s,color .3s}
.btn i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.btn-navy{background:var(--navy);color:#fff;padding:15px 16px 15px 26px}.btn-navy i{background:#fff;color:var(--navy)}.btn-navy:hover{background:var(--green);color:#fff}
.btn-green{background:var(--green);color:#fff;padding:14px 16px 14px 24px}.btn-green i{background:rgba(255,255,255,.2)}.btn-green:hover{background:#fff;color:var(--navy)}
.btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:14px 24px;font-weight:500}.btn-ghost:hover{background:rgba(255,255,255,.24);color:#fff}
.btn-white{background:#fff;color:var(--navy);padding:15px 16px 15px 26px}.btn-white i{background:var(--green);color:#fff}.btn-white:hover{background:var(--navy);color:#fff}
.field{padding:15px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:15px;outline:none;width:100%;min-width:0;color:var(--ink)}
.field:focus{border-color:var(--green);background:#fff}
.grid-fit{display:grid;gap:12px}
/* nav */
header{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 16px;transition:transform .5s var(--ease)}
header.hide{transform:translateY(-140%)}
nav{width:100%;max-width:1240px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;padding:10px 10px 10px 22px;box-shadow:0 10px 30px -12px rgba(14,27,44,.25)}
nav .links{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);font-size:15px;font-weight:500;white-space:nowrap}
nav .links a{color:var(--ink)}nav .links a:hover{color:var(--green)}
@media(max-width:860px){nav .links{display:none}}
/* hero */
#hero{padding:12px}
.hero-box{position:relative;border-radius:28px;overflow:hidden;min-height:max(680px,calc(100vh - 24px));display:flex;align-items:flex-end;background:#16345A}
.hero-bg{position:absolute;inset:0;background:url(assets/slot-hero-photo.webp) center/cover;transform:scale(1.15);transition:transform 2.8s cubic-bezier(.16,1,.3,1)}
.loaded .hero-bg{transform:scale(1)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,20,36,.8),rgba(8,20,36,.5) 50%,rgba(8,20,36,.25)),linear-gradient(180deg,rgba(8,20,36,0) 50%,rgba(8,20,36,.5))}
.hero-in{position:relative;width:100%;max-width:1264px;margin:0 auto;padding:140px 40px 56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:end}
h1{font-size:clamp(46px,6vw,96px);line-height:.98;letter-spacing:-.035em;color:#fff}
h1 .m{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.08em}
h1 .m span{display:block;transform:translateY(110%);transition:transform 1.2s cubic-bezier(.16,1,.3,1) .15s}
h1 .m:nth-child(2) span{color:var(--lime);transition-delay:.3s}
.loaded h1 .m span{transform:none}
.pill{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1)}
.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(48px);transition:opacity 1s var(--ease) calc(var(--d,0)*1s),transform 1s var(--ease) calc(var(--d,0)*1s)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}.hero-bg,h1 .m span{transition:none}}
/* rolling digits */
.roll{display:flex;align-items:flex-start;font-family:Outfit,sans-serif;font-weight:600;letter-spacing:-.04em}
.roll .w{display:inline-flex;height:1em;line-height:1em;overflow:hidden}
.roll .c{position:relative;display:inline-block;height:1em}
.roll .c b{visibility:hidden;font-weight:inherit}
.roll .c span{position:absolute;left:50%;top:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.roll .c span em{font-style:normal;height:1em;display:block}
.roll .c.d span{transition:transform 2.2s cubic-bezier(.16,1,.3,1) calc(var(--i)*.14s)}
.on .roll .c.d span{transform:translateX(-50%) translateY(calc(-1em*(10 + var(--n))))}
/* about */
#about{padding:140px 0 120px}
.about-grid{margin-top:88px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.about-grid>*{min-height:340px;border-radius:24px}
.photo{background-size:cover;background-position:center}
/* accreds */
.logo-tile{background:#fff;border-radius:20px;height:132px;padding:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-tile img{max-width:100%;max-height:100%;object-fit:contain}
/* services */
.svc{display:grid;grid-template-columns:64px minmax(0,1fr) 48px;align-items:center;gap:16px;padding:30px 20px;border-bottom:1px solid var(--line);color:var(--ink);border-radius:16px;transition:background .35s,color .35s,padding .35s}
.svc:hover{background:var(--navy);color:#fff;padding-left:32px}
.svc .n{font-family:'JetBrains Mono',monospace;font-size:14px;opacity:.6}
.svc .t{font-family:Outfit,sans-serif;font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:-.02em}
.svc .b{font-size:15px;opacity:.7}
.svc .a{width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:18px}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start}
.svc-pic{position:sticky;top:110px;border-radius:24px;overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:#E6E9E2}
.svc-pic>div.im{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.svc-pic>div.im.on{opacity:1;transform:none}
.svc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}.svc-pic{display:none}}
/* manufacturers */
.mf{background:#fff;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:16px;transition:transform .4s var(--ease),box-shadow .4s}
.mf:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(14,27,44,.3)}
.mf .l{height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mf .l img{max-width:100%;max-height:100%;object-fit:contain}
.mf p{margin:0;border-top:1px solid #E6E9E2;padding-top:14px;font-size:14px;color:var(--mute)}
/* why */
.why-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:340px;transition:background .35s,opacity 1s var(--ease),transform 1s var(--ease)}
.why-card:hover{background:rgba(255,255,255,.12)}
/* testimonials */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:20px;width:max-content;will-change:transform}
figure{margin:0;width:400px;flex:none;background:#fff;border-radius:22px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}
@media(max-width:480px){figure{width:300px}}
/* faq */
.faq{background:#fff;border-radius:18px;overflow:hidden}
.faq button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;font-family:Outfit,sans-serif;font-size:20px;font-weight:500;letter-spacing:-.01em}
.faq .x{flex:none;width:34px;height:34px;border-radius:50%;background:#EEF1EA;display:grid;place-items:center;font-size:20px;transition:transform .4s,background .3s,color .3s}
.faq.open .x{transform:rotate(45deg);background:var(--green);color:#fff}
.faq .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq.open .body{grid-template-rows:1fr}
.faq .body>div{overflow:hidden}
.faq p{margin:0;padding:0 26px 26px;color:var(--mute);font-size:16px;line-height:1.65;max-width:620px}
/* chips */
.chip{all:unset;cursor:pointer;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--ink);transition:all .25s}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.thanks{min-height:420px;display:none;flex-direction:column;justify-content:center;gap:14px}
.thanks span{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:26px}
.thanks p{margin:0;color:var(--mute);line-height:1.6}
.sent form{display:none!important}.sent .thanks{display:flex}
footer a{color:rgba(255,255,255,.8)}footer a:hover{color:#fff}