:root { --background: #f5f4ef; --foreground: #103b4a; --card: #fff; --primary: #103b4a; --primary-foreground: #f5f4ef; --border: #dfe3dd; --ring: #28c7c8; --ink: #103b4a; --muted: #67757a; --lime: #28c7c8; --ivory: #f5f4ef; --blue2: #0b2a35; --ease: cubic-bezier(.23,1,.32,1); }
 * { @apply border-border; box-sizing: border-box; } html { scroll-behavior: smooth; } body { @apply bg-background text-foreground; margin: 0; font-family: "DM Sans", sans-serif; } a { color: inherit; text-decoration: none; } button { font: inherit; } }
.site-shell { overflow: hidden; background: var(--ivory); color: var(--ink); } .topbar { height: 84px; padding: 0 5vw; display:flex; align-items:center; justify-content:space-between; background:var(--ivory); position:relative; z-index:20; } .brand { display:flex; align-items:center; gap:11px; font-size:13px; line-height:.83; letter-spacing:-.03em; } .brand-mark { width:200px; height:100px; object-fit:contain; } .brand span { display:grid; gap:4px; } .brand strong { font-weight:400; } .brand b { font-size:19px; font-weight:700; } .brand small { font:10px "IBM Plex Mono", monospace; letter-spacing:.12em; justify-self:end; }
.nav { display:flex; align-items:center; gap:36px; font:12px "IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.07em; } .nav a { transition:color .2s var(--ease); } .nav a:hover { color:#159ea6; } .nav-cta { display:flex; gap:9px; align-items:center; background:var(--ink); color:var(--ivory); padding:12px 17px; } .menu-toggle { display:none; border:0; background:none; color:var(--ink); }
.hero { min-height:calc(100vh - 84px); position:relative; display:flex; align-items:center; color:#fff; } .hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-overlay { background:linear-gradient(90deg,rgba(8,35,43,.88) 0%,rgba(8,35,43,.48) 53%,rgba(8,35,43,.13)); } .hero-content { position:relative; z-index:2; width:min(680px,80vw); margin-left:12vw; padding:80px 0; animation:rise .8s var(--ease) both; } .eyebrow { font:11px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.14em; color:#75868a; margin:0 0 24px; } .eyebrow.light { color:var(--lime); } .eyebrow-line { display:inline-block; width:35px; height:1px; background:currentColor; vertical-align:middle; margin-right:9px; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Space Grotesk",sans-serif; } h1 { font-size:clamp(58px,8.1vw,126px); line-height:.87; letter-spacing:-.085em; margin:0 0 31px; font-weight:600; } h1 em,h2 em { font-family:"DM Sans",sans-serif; font-style:italic; font-weight:300; letter-spacing:-.07em; } .hero-lede { max-width:410px; font-size:17px; line-height:1.55; color:rgba(255,255,255,.78); margin-bottom:38px; } .button { display:inline-flex; align-items:center; gap:15px; padding:16px 21px; font:12px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.05em; transition:transform .16s var(--ease),background .2s; } .button:active { transform:scale(.97); } .button-lime { background:var(--lime); color:var(--ink); } .button-lime:hover { background:#72e4e0; } .hero-foot { position:absolute; z-index:2; bottom:30px; left:5vw; right:5vw; display:flex; gap:17px; align-items:center; font:10px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.62); } .hero-rule { height:1px; background:rgba(255,255,255,.4); flex:1; }
.section-pad { padding:125px 12vw; position:relative; } .section-index { position:absolute; left:5vw; top:132px; font:11px "IBM Plex Mono",monospace; letter-spacing:.1em; color:#96a3a4; writing-mode:vertical-rl; transform:rotate(180deg); } .section-index span { color:var(--lime); padding:7px 0; } .intro { display:grid; grid-template-columns:1.3fr 1fr .7fr; gap:9vw; min-height:450px; align-items:start; } h2 { font-size:clamp(44px,5.4vw,79px); line-height:.94; letter-spacing:-.08em; margin:0 0 30px; font-weight:600; } h2 span { color:#159ea6; } .body-lede { font-size:19px; line-height:1.55; color:#5f7074; max-width:455px; margin-bottom:30px; } .text-link { display:inline-flex; gap:10px; align-items:center; font:12px "IBM Plex Mono",monospace; border-bottom:1px solid var(--ink); padding-bottom:7px; } .intro-aside { border-left:1px solid #ced7d0; padding-left:30px; margin-top:30px; } .metric { display:flex; align-items:baseline; gap:12px; margin-bottom:38px; } .metric strong { font:500 50px "Space Grotesk",sans-serif; letter-spacing:-.08em; } .metric span { font:10px "IBM Plex Mono",monospace; color:#728185; text-transform:uppercase; line-height:1.35; }
.service-band { background:#e6ebe4; border-top:1px solid #cfd9d0; padding:0 5vw; display:grid; grid-template-columns:1fr 1fr 1.45fr; min-height:350px; } .service-card { padding:53px 4vw 45px 7vw; position:relative; border-left:1px solid #cfd9d0; } .service-card:first-child { padding-left:7vw; } .station-no { position:absolute; top:18px; left:7vw; font:9px "IBM Plex Mono",monospace; letter-spacing:.1em; color:#159ea6; } .service-card svg { color:#159ea6; margin-bottom:40px; } .service-card .eyebrow { margin-bottom:14px; } .service-card h3 { font-size:32px; line-height:.96; letter-spacing:-.06em; margin-bottom:18px; } .service-card p:last-child { color:#607075; font-size:14px; line-height:1.5; max-width:210px; } .accent-card { background:var(--blue2); color:#fff; } .accent-card .station-no,.accent-card .eyebrow { color:var(--lime); } .accent-card p:last-child { color:#afc1bd; } .accent-card svg { color:var(--lime); } .image-card { position:relative; padding:0; overflow:hidden; color:#fff; } .image-card img { position:absolute; width:100%; height:100%; object-fit:cover; filter:saturate(.72); } .image-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,35,43,.9),transparent 70%); } .image-card > .station-no { z-index:2; left:42px; color:var(--lime); } .image-card > div { position:absolute; z-index:1; bottom:39px; left:42px; } .image-card .eyebrow { color:var(--lime); } .image-card h3 { margin:0; font-size:31px; line-height:.96; }
.barrier { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:6vw; padding-bottom:145px; } .barrier-heading h2 { margin-top:35px; } .barrier-visual { grid-column:2 / 4; position:relative; margin-top:35px; } .barrier-visual img { width:100%; height:320px; object-fit:cover; filter:saturate(.75); } .area-tag { position:absolute; top:18px; padding:9px 13px; font:10px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.1em; } .dirty { left:18px; background:var(--ink); color:#fff; } .clean { right:18px; background:var(--lime); color:var(--ink); } .barrier-copy { grid-column:2 / 4; max-width:690px; margin-top:-25px; font-size:18px; line-height:1.55; color:#5f7074; display:grid; grid-template-columns:1fr 1fr; gap:22px; } .barrier-copy p { margin:0; } .callout { grid-column:1 / -1; border-top:1px solid #cbd6cd; padding-top:18px; display:flex; gap:14px; font:12px "IBM Plex Mono",monospace; color:var(--ink); line-height:1.5; }
.process-section { background:var(--blue2); color:#fff; padding:115px 12vw 130px; } .process-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:90px; } .process-head h2 { margin:0; } .process-head > p { max-width:250px; color:#aebdb7; line-height:1.5; font-size:14px; } .process-line { display:grid; grid-template-columns:repeat(6,1fr); position:relative; gap:12px; } .process-line:before { content:""; position:absolute; top:20px; left:10px; right:10px; height:1px; background:#41606a; } .process-step { position:relative; } .node { width:41px; height:41px; border:1px solid var(--lime); background:var(--blue2); color:var(--lime); display:grid; place-items:center; font:11px "IBM Plex Mono",monospace; margin-bottom:30px; } .process-step:nth-child(4) .node,.process-step:nth-child(5) .node,.process-step:nth-child(6) .node { border-color:#84afb2; color:#84afb2; } .mono { font:10px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--lime); margin-bottom:11px; } .process-step:nth-child(n+4) .mono { color:#84afb2; } .process-step h3 { font-size:24px; margin-bottom:11px; } .process-step > p:last-child { color:#98acac; font-size:12px; line-height:1.45; max-width:155px; } .split-line { position:absolute; top:-49px; right:-26px; display:flex; align-items:center; gap:5px; color:var(--lime); font:10px "IBM Plex Mono",monospace; } .split-line i { width:16px; height:1px; background:var(--lime); }
.quality { padding-top:130px; padding-bottom:130px; } .quality-top { display:flex; justify-content:space-between; align-items:start; margin:25px 0 75px; } .iso-seal { display:flex; gap:20px; align-items:center; margin-right:3vw; } .iso-ring { width:50px; height:50px; border:1px solid #ffffff; border-radius:50%; display:grid; place-content:center; text-align:center; font:11px "IBM Plex Mono",monospace; line-height:1.02; position:relative; } .iso-ring strong { font:700 21px "Space Grotesk",sans-serif; z-index:1; } .iso-ring small { font-size:8px; z-index:1; } .iso-seal p { font:10px "IBM Plex Mono",monospace; line-height:1.5; color:#728185; } .iso-seal p strong { color:var(--ink); } .quality-body { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; } blockquote { font:italic 28px/1.18 "DM Sans",sans-serif; letter-spacing:-.04em; margin:0; max-width:300px; } .quality-list { border-top:1px solid #ced7d0; } .quality-item { display:grid; grid-template-columns:42px 18px 1fr; gap:12px; align-items:start; padding:18px 0; border-bottom:1px solid #ced7d0; font-size:14px; line-height:1.45; color:#53676e; } .quality-item > span { font:11px "IBM Plex Mono",monospace; color:#159ea6; } .quality-item svg { color:#159ea6; margin-top:2px; } .quality-item p { margin:0; } .quality-signature { margin:55px 0 0 auto; max-width:520px; display:flex; align-items:center; gap:10px; font:10px "IBM Plex Mono",monospace; color:#7b8b8b; } .quality-signature i { width:40px; height:1px; background:#159ea6; } .quality-signature strong { color:var(--ink); } .quality-signature small { display:block; } .quality-note { margin:18px 0 0 auto; max-width:520px; font:11px/1.55 "IBM Plex Mono",monospace; color:#7b8b8b; }
.contact { background:var(--ivory); border-top:1px solid #cbd6cd; padding:90px 12vw 95px; } .contact-inner { display:grid; grid-template-columns:.8fr 1.2fr; gap:28px 8vw; align-items:start; } .contact h2 { color:var(--ink); margin:0; } .contact .eyebrow { color:#159ea6; } .contact-intro { padding-top:8px; } .contact-intro .contact-data { margin-top:48px; display:block; } .contact-intro .contact-data p { margin-bottom:15px; } .contact-form { border-left:1px solid #cbd6cd; padding-left:5vw; display:grid; gap:18px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .contact-form label { display:grid; gap:8px; font:10px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.08em; color:#708080; } .contact-form input,.contact-form textarea { border:0; border-bottom:1px solid #aebdb5; border-radius:0; background:transparent; padding:11px 0; color:var(--ink); font:15px "DM Sans",sans-serif; outline:0; resize:vertical; } .contact-form input::placeholder,.contact-form textarea::placeholder { color:#9aa8a4; } .contact-form input:focus,.contact-form textarea:focus { border-color:var(--ink); box-shadow:0 2px 0 var(--lime); } .contact-form .button { border:0; justify-self:start; margin-top:4px; } .form-note { font:10px/1.45 "IBM Plex Mono",monospace; color:#7b8b8b; margin:0; max-width:490px; } .form-feedback { margin:0; padding:12px 15px; font:11px/1.45 "IBM Plex Mono",monospace; } .form-feedback.error { background:#f5ded6; color:#7b3027; } .form-feedback.success { background:#e1ebd8; color:#3f672d; } .contact-mail { font:clamp(18px,2vw,28px) "Space Grotesk",sans-serif; letter-spacing:-.05em; border-bottom:1px solid var(--ink); padding-bottom:10px; display:flex; justify-content:space-between; align-items:center; } .contact-data { grid-column:2; display:flex; flex-wrap:wrap; gap:20px; font:10px "IBM Plex Mono",monospace; text-transform:uppercase; } .contact-data p { display:flex; gap:7px; align-items:center; margin:0; }
.whatsapp-float { position:fixed; z-index:30; right:24px; bottom:24px; display:flex; align-items:center; gap:10px; background:#25D366; color:#073b24; padding:13px 16px; border-radius:999px; box-shadow:0 10px 26px rgba(7,59,36,.2); font:11px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.05em; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s; } .whatsapp-float:hover { transform:translateY(-3px); background:#43e27c; box-shadow:0 14px 30px rgba(7,59,36,.28); } .whatsapp-float:active { transform:scale(.97); } .whatsapp-float:focus-visible { outline:3px solid var(--lime); outline-offset:4px; } footer { min-height:100px; padding:30px 5vw; display:flex; align-items:center; gap:36px; background:var(--blue2); color:#a9bbba; font:10px "IBM Plex Mono",monospace; } footer .footer-brand { color:#fff; } footer > p { flex:1; margin:0; } footer > a:not(.brand) { display:flex; gap:7px; align-items:center; color:var(--lime); }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } 
@media (max-width:900px) { .topbar { height:74px; } .menu-toggle { display:block; z-index:2; } .nav { display:none; position:absolute; inset:74px 0 auto; background:var(--ivory); padding:25px 5vw 30px; flex-direction:column; align-items:flex-start; gap:22px; box-shadow:0 12px 20px #0b2a3512; } .nav.open { display:flex; } .hero { min-height:680px; } .hero-content { margin-left:8vw; } .intro,.barrier { grid-template-columns:1fr 1fr; gap:40px; } .intro-copy { grid-column:1 / -1; } .intro-aside { grid-column:2; grid-row:1; } .barrier-heading { grid-column:1 / -1; } .barrier-visual { grid-column:1 / -1; } .barrier-copy { grid-column:1 / -1; } .service-band { grid-template-columns:1fr 1fr; } .image-card { grid-column:1 / -1; min-height:300px; } .process-line { grid-template-columns:repeat(3,1fr); gap:50px 20px; } .process-line:before { display:none; } .process-head { align-items:start; flex-direction:column; gap:22px; } .quality-body { gap:50px; } 
@media (max-width:600px) { .station-no { left:10vw; } .image-card > .station-no { left:10vw; } .section-pad { padding:80px 8vw; } .section-index { position:static; writing-mode:initial; transform:none; margin-bottom:50px; } h1 { font-size:61px; } h2 { font-size:50px; } .hero-content { margin-left:8vw; width:82vw; } .hero-lede { font-size:15px; } .hero-foot { left:8vw; right:8vw; } .hero-foot span:first-child,.hero-rule { display:none; } .service-band { display:block; padding:0; } .service-card,.service-card:first-child { padding:45px 10vw; border-bottom:1px solid #cfd9d0; border-left:0; } .image-card { min-height:300px; padding:0; } .image-card > div { left:10vw; } .barrier-copy { display:block; } .barrier-copy p { margin-bottom:20px; } .barrier-visual img { height:260px; } .process-section { padding:80px 8vw; } .process-line { grid-template-columns:1fr 1fr; } .process-step > p:last-child { max-width:145px; } .quality-top { display:block; } .iso-seal { margin-top:50px; } .quality-body { display:block; } blockquote { margin-bottom:50px; } .contact { padding:75px 8vw; } .contact-inner { display:block; } .contact-form { border-left:0; border-top:1px solid #cbd6cd; padding:38px 0 0; margin-top:55px; } .form-row { grid-template-columns:1fr; gap:18px; } .contact-mail { margin-top:42px; } .contact-data { margin-top:30px; display:block; } .contact-data p { margin-bottom:14px; } footer { display:block; padding:32px 8vw; } .whatsapp-float { right:16px; bottom:16px; padding:13px; } .whatsapp-float span { display:none; } footer > p { margin:25px 0; } footer > span { display:block; margin-top:25px; } 
}
}
}
/*.material-symbols-outlined {font-size: 24px;color: #159ea6; }*/
.grafico{display:flex;justify-content:center;align-items:center;padding:32px;width:100%;box-sizing:border-box}.grafico img{display:block;width:100%;max-width:1040px;height:auto;object-fit:contain}@media(max-width:600px){.grafico{padding:20px 12px}.grafico img{max-width:100%}}
.service-icon { color:#159ea6; font:26px 'Space Grotesk',sans-serif; margin-bottom:40px; }
.image-card-copy { position:absolute; z-index:1; bottom:39px; left:42px; }
.quality-item b { color:#159ea6; font-weight:500; }
.process-line { font:16px 'IBM Plex Mono',monospace; color:#28c7c8; border-top:1px solid #41606a; padding-top:24px; line-height:2; word-spacing:14px; } .process-step > p:last-of-type { color:#98acac; font:12px/1.45 'DM Sans',sans-serif; max-width:155px; margin:0; word-spacing:0; }
@media (max-width:600px) { .image-card-copy { left:10vw; } }