:root{--bg:#F6F7F3;--surface:#FFFFFF;--border:#DCE5DF;--fg:#17211D;--muted:#61716A;--pine:#164A3A;--turq:#28A98A;--leaf:#78C850;--lav:#9B8ACB;--gold:#EBB84A;--teal:#167D6A;--purple:#3F3661;--purple-ink:var(--purple);--palelav:#E7E3F2;--on-lav:#17211D;--on-lav-muted:#3F4A44;--lav-ink:var(--purple);--lav-rule:rgba(63,54,97,.24);--icon:#164A3A;--accent:#167D6A;--btn-bg:#164A3A;--btn-fg:#F6F7F3;--head-bg:rgba(246,247,243,.88);--rule:#DCE5DF;--grid:#E6EBE7;--svc-cols:repeat(2,1fr)}
[data-theme="dark"]{--bg:#17211D;--surface:#1D2723;--border:#2E3A34;--fg:#F6F7F3;--muted:#A9B9B1;--icon:#78C850;--accent:#78C850;--btn-bg:#78C850;--btn-fg:#17211D;--head-bg:rgba(23,33,29,.88);--palelav:#262336;--purple-ink:#B7A9DC;--on-lav:#F6F7F3;--on-lav-muted:#C2CBC6;--lav-ink:#B7A9DC;--lav-rule:rgba(246,247,243,.18);--rule:#2E3A34;--grid:#2A3730}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Public Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--turq)}
h1,h2,h3,h4{margin:0;font-family:Satoshi,'Public Sans',sans-serif;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--palelav);color:var(--fg)}
@keyframes uthRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes uthDraw{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}

/* --- header / footer link states --- */
.nav-link:hover{color:var(--purple-ink)}
.foot-link:hover{color:#B7A9DC}
#themeToggle:hover{border-color:var(--purple);color:var(--purple-ink)}
/* --- hover states lifted from the design --- */
.h1:hover{background:var(--purple) !important;color:#FFFFFF !important}
.h2:hover{border-color:#9B8ACB !important;color:#B7A9DC !important}
.h3:hover{border-color:#9B8ACB !important}
.h4:hover{background:#164A3A !important;color:#FFFFFF !important}
.h5:hover{color:#FFFFFF !important}

/* --- responsive ---
   The design is authored at a 1180px content column with inline grid styles.
   These overrides collapse those grids on narrow viewports. If you refactor the
   inline styles into classes, replace this block with proper per-component rules. */
@media (max-width:1040px){
  header > div, main > section, footer > div{padding-left:28px !important;padding-right:28px !important}
  main section[style*="grid-template-columns:repeat(3,1fr)"],
  main div[style*="grid-template-columns:repeat(3,1fr)"],
  main div[style*="grid-template-columns:repeat(4,1fr)"],
  main div[style*="grid-template-columns:var(--svc-cols)"],
  main section[style*="grid-template-columns:var(--svc-cols)"]{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:820px){
  h1{font-size:38px !important;line-height:46px !important}
  h2{font-size:30px !important;line-height:38px !important}
  header nav{display:none !important}
  main > section:first-child{padding-top:72px !important;padding-bottom:72px !important}
  main section[style*="grid-template-columns"],
  main div[style*="grid-template-columns"],
  footer > div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  main div[style*="grid-template-columns:200px"],
  main div[style*="grid-template-columns:190px"]{grid-template-columns:1fr !important;gap:4px !important}
  main div[style*="padding:64px 60px"]{padding:40px 28px !important}
}