:root { --bg:#f5f8f6; --ink:#10292d; --muted:#5e7273; --line:#d6e2df; --teal:#0c7f8d; --green:#218d68; --amber:#b66a24; --grey:#9aacab; }
:focus-visible { outline:3px solid #e86c53; outline-offset:3px; }
.hero { position:relative; animation:status-enter .45s cubic-bezier(.2,.8,.2,1) both; }
.hero::after { content:""; position:absolute; bottom:-1px; left:0; width:110px; height:3px; background:#e86c53; }
.service-row { transition:background .18s ease,padding .18s ease; }
.service-row:hover { background:#edf6f4; padding-left:22px; }
.history-point { transition:transform .16s ease; }
.history-point:hover { transform:scaleY(1.18); }
@keyframes status-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:760px) { nav { width:100%; overflow-x:auto; padding-bottom:3px; } nav a { white-space:nowrap; } }
@media (max-width:620px) {
    body { overflow-x:hidden; }
    header,main,footer,section,.section-heading,.service-row { min-width:0; max-width:100%; }
    h1,h2,h3,p { overflow-wrap:anywhere; }
    .service-row:hover { padding-left:18px; }
    .history-grid { gap:3px; }
    .history-point { height:28px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }