/* UI/UX: header, nav, footer, section layout. Mobile first. */
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{overflow-x:hidden;overflow-x:clip}
.skip{position:absolute;left:-999px;top:0;z-index:30;padding:.75rem 1rem;background:var(--fg);color:var(--bg)}
.skip:focus{left:1rem;top:1rem}

.site-header{position:sticky;top:0;z-index:20;display:flex;flex-direction:column;gap:.25rem;padding:.6rem 1rem;background:var(--bg);border-bottom:1px solid rgba(0,0,0,.12)}
.brand{font-weight:800;color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.site-header nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
.site-header ul{display:flex;gap:.25rem 1rem;list-style:none;margin:0;padding:0;white-space:nowrap}
.site-header nav a{display:inline-block;padding:.5rem .25rem;min-height:24px;color:var(--fg);text-decoration:none;border-bottom:3px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--fg)}
.site-header nav a[aria-current]{font-weight:700;color:var(--accent);border-bottom-color:var(--accent)}
.brand:focus-visible,.site-header nav a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.progress{position:fixed;left:0;top:0;z-index:40;height:4px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

main>section{box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:5rem 1.25rem;max-width:72rem;margin:0 auto}
main>section.hero{max-width:none;padding-left:1.25rem;padding-right:1.25rem}
main h2{font-size:clamp(2.25rem,9vw,5.5rem);line-height:1;margin:0 0 1.5rem;letter-spacing:-.02em}
main p,main li,main dd{font-size:clamp(1.05rem,2.2vw,1.35rem);max-width:42rem}
.statement{font-size:clamp(2rem,7vw,4.5rem)!important;line-height:1.05;font-weight:800;max-width:none!important;margin:0 0 1.5rem}
.scroll-cue{margin-top:3rem;text-transform:uppercase;letter-spacing:.3em;font-size:.9rem!important}
.principles,.steps{padding-left:1.5rem;display:grid;gap:1.25rem}
.services{display:grid;gap:1.5rem;margin:1.5rem 0}
.services dt{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800}
.services dd{margin:.25rem 0 0}
.site-footer{padding:2rem 1.25rem;border-top:1px solid rgba(0,0,0,.12)}
.site-footer p{margin:0}

@media (min-width:48rem){
  .site-header{flex-direction:row;justify-content:space-between;align-items:center;padding:.75rem 2rem}
  main>section{padding:6rem 2rem}
  .services{grid-template-columns:repeat(2,1fr);gap:2rem 3rem}
}
@media (min-width:75rem){main>section{padding-left:0;padding-right:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.progress{display:none}}