.why{background:var(--paper);padding:0 3%;border-bottom:1px solid var(--line)}.why-intro{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:38px 0 31px;border-bottom:1px solid var(--line);align-items:end}.why-intro p,.process span{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--blue);margin:0 0 4px}.why h2{font:500 clamp(31px,3.6vw,54px)/.95 var(--serif);letter-spacing:-.06em;margin:0}.why h2 em{font-style:normal;color:var(--blue)}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0}.benefits article{padding:27px 30px 31px;border-right:1px solid var(--line);min-height:170px}.benefits article:first-child{padding-left:0}.benefits article:last-child{border:0}.benefits b{font:500 42px/.8 var(--serif);color:var(--ink)}.benefits h3{font-size:14px;margin:21px 0 8px}.benefits p{max-width:255px;font-size:12px;line-height:1.5;margin:0}.process{border-top:1px solid var(--line);padding:14px 0;display:grid;grid-template-columns:1.4fr 1fr auto 1fr auto 1fr;align-items:center;gap:21px}.process strong{font-size:12px}.process i{font-size:20px;color:var(--blue);font-style:normal}@media(max-width:800px){.why{padding:0 5%}.why-intro{display:block;padding:30px 0 23px}.why-intro p{margin-bottom:18px}.benefits{grid-template-columns:1fr}.benefits article,.benefits article:first-child{min-height:0;padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}.benefits article:last-child{border-bottom:0}.benefits b{font-size:34px}.benefits h3{margin:11px 0 7px}.process{grid-template-columns:1fr auto;gap:12px}.process span{grid-column:1/-1;margin-bottom:9px}.process i{transform:rotate(90deg)}}
.services{grid-template-columns:repeat(4,1fr);gap:34px}.services p{max-width:230px}@media(max-width:800px){.services{grid-template-columns:1fr 1fr;gap:24px}}
.hero{min-height:390px;padding:22px 4% 16px;grid-template-columns:1fr .92fr;align-items:center;gap:28px}.hero h1{font-size:clamp(58px,6.2vw,98px);line-height:.9}.hero-art{height:350px;background:url('/assets/home-hero-topology-v1.png') center right/92% auto no-repeat}.hero-art .blue-block,.hero-art .disc,.hero-art .spring,.hero-art .cross,.hero-art small{display:none}.services{padding-top:10px;padding-bottom:30px}@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:0;padding:30px 5% 10px;gap:18px}.hero h1{font-size:58px}.hero-art{height:270px;background-position:center;background-size:contain}.services{padding-top:38px}}
.header nav a,.nav-services button{font-size:14px}.services h2{font-size:16px}.services p{font-size:14px;line-height:1.55}.benefits h3{font-size:16px}.benefits p{font-size:14px;line-height:1.6}.contact p,.contact a{font-size:15px;line-height:1.55}.services-menu a{font-size:13px}.scope b{font-size:13px}.scope h3{font-size:17px}.scope p{font-size:15px;line-height:1.6}.service-hero p{font-size:18px}.service-cta a{font-size:15px}.about-story p,.about-principles p,.contact-grid p,.contact-note p{font-size:16px;line-height:1.65}.contact-grid h2{font-size:17px}.mail-card span{font-size:13px}@media(max-width:800px){.services p,.benefits p,.scope p,.about-story p,.about-principles p,.contact-grid p,.contact-note p{font-size:15px}.header nav a,.nav-services button{font-size:14px}}
.hero h1,.why h2{letter-spacing:-.045em}
@media(min-width:1200px){body{max-width:1600px;margin:0 auto}.hero{grid-template-columns:1fr .82fr;gap:10px}.hero-art{background-size:88% auto}.services{gap:24px;padding-left:4.5%;padding-right:4.5%}.services p{max-width:205px}}

/* Reliable CSS-drawn service icons. Avoids missing glyphs on hosting/browser fonts. */
.services .icon{position:relative;display:grid;place-items:center;width:58px;height:53px;margin:0 auto;font-size:0;color:var(--ink)}
.services .icon:before,.services .icon:after{content:"";position:absolute;box-sizing:border-box}
.services .icon.globe:before{width:34px;height:34px;border:2.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
.services .icon.globe:after{width:15px;height:34px;border-left:2px solid currentColor;border-right:2px solid currentColor;border-radius:50%}
.services .icon.code:before{content:"</>";position:static;font:700 34px/1 var(--sans);letter-spacing:-5px}
.services .icon.server:before{width:32px;height:32px;border:2.5px solid currentColor;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 8px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 8px)}
.services .icon.pencil:before{width:35px;height:9px;border:2.5px solid currentColor;border-right:0;border-radius:3px;transform:rotate(-45deg)}
.services .icon.pencil:after{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid currentColor;transform:translate(15px,-15px) rotate(-45deg)}