:root{--paper:#F3F5F8;--ink:#13203A;--muted:#55627A;--line:#D5DCE6;--cobalt:#2F5BEA;--sky:#C9D6F5;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--cobalt)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}
header.top{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0}
.logo{font:700 1.35rem/1 "Bricolage Grotesque",sans-serif;color:var(--ink);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem}
.logo svg{width:28px;height:28px}
nav a{color:var(--ink);text-decoration:none;margin-left:1.6rem;font-weight:500}
nav a:hover{color:var(--cobalt)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;padding:4.5rem 0 5.5rem}
h1{font:700 clamp(2.6rem,6vw,4.6rem)/1.02 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em;max-width:14ch}
.lead{margin-top:1.5rem;font-size:1.2rem;color:var(--muted);max-width:46ch}
.btn{display:inline-block;margin-top:2rem;background:var(--ink);color:var(--white);padding:.9rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--cobalt)}
.flow{width:100%;height:auto}
section{padding:4.5rem 0;border-top:1px solid var(--line)}
h2{font:700 clamp(1.8rem,3.5vw,2.5rem)/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.025em;margin-bottom:2.5rem;max-width:22ch}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem 3rem}
.services h3{font:600 1.2rem/1.3 "Bricolage Grotesque",sans-serif;margin-bottom:.5rem;padding-top:1rem;border-top:3px solid var(--cobalt);width:fit-content}
.services p{color:var(--muted);max-width:38ch}
.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.about p{max-width:60ch;margin-bottom:1rem}
.facts{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:2rem}
.facts dt{color:var(--muted);font-size:.95rem}
.facts dd{font-weight:600;margin-bottom:1.1rem}
.facts dd:last-child{margin-bottom:0}
.contact{background:var(--ink);color:var(--white);border-radius:24px;padding:3.5rem;margin:4.5rem 0}
.contact h2{margin-bottom:1rem}
.contact p{color:var(--sky);max-width:50ch}
.contact a.mail{display:inline-block;margin-top:1.5rem;font:600 clamp(1.3rem,3vw,2rem)/1.2 "Bricolage Grotesque",sans-serif;color:var(--white);text-underline-offset:6px}
footer{padding:2rem 0 3rem;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer a{color:var(--muted)}
.doc{max-width:720px;padding:3rem 0 5rem}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1rem}
.doc h2{font-size:1.4rem;margin:2.2rem 0 .6rem}
.doc p,.doc li{margin-bottom:.8rem;max-width:65ch}
.doc ul{padding-left:1.2rem}
@media (max-width:820px){.hero,.about{grid-template-columns:1fr}.hero{padding:2.5rem 0 3.5rem}nav a{margin-left:1rem}.contact{padding:2.2rem}}
@media (max-width:480px){nav a:not(:last-child){display:none}}
@media (prefers-reduced-motion:no-preference){.flow .pulse{animation:pulse 3.2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}}