/* Self-hosted fonts (no requests to Google servers) */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/fredoka-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fredoka-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/nunito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/nunito-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/nunito-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/nunito-latin-800-normal.woff2') format('woff2')}

body{margin:0;background:#FBF7F0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:80px}
a{color:#1F2A44}a:hover{color:#B4560F}
*{box-sizing:border-box}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.scene{position:relative;height:680px;border-radius:32px;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;box-shadow:0 30px 60px -30px rgba(31,42,68,.45)}
.layer{position:absolute;inset:0}
.dim{filter:grayscale(1) brightness(.92) contrast(.86)}
.dim *{animation-play-state:paused !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.range:focus-visible ~ .divider .knob{outline:4px solid #F2913A;outline-offset:4px}
.input:focus-visible{outline:3px solid #F2913A;outline-offset:2px}
.btn:focus-visible{outline:3px solid #F2913A;outline-offset:3px}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 48s linear infinite}
.drift{animation:drift 26s ease-in-out infinite alternate}
.drift2{animation:drift 34s ease-in-out infinite alternate-reverse}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.5s ease-in-out infinite alternate}
.flow{animation:flow 1.4s linear infinite}
.bob{animation:bob 3.2s ease-in-out infinite}
.jog{animation:jog .45s ease-in-out infinite alternate}
.stretchy{transform-box:fill-box;transform-origin:50% 100%;animation:stretchy 1.8s ease-in-out infinite}
.sip{transform-box:fill-box;transform-origin:50% 100%;animation:sip 2.6s ease-in-out infinite}
.twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.bloom{transform-box:fill-box;transform-origin:50% 100%;animation:bloom 3s ease-in-out infinite alternate}
.drip{animation:drip 1.2s ease-in infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@keyframes flow{to{stroke-dashoffset:-44}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes jog{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes stretchy{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.07)}}
@keyframes sip{0%,60%,100%{transform:rotate(0)}75%{transform:rotate(-6deg)}}
@keyframes twinkle{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.15);opacity:1}}
@keyframes bloom{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(16px);opacity:0}}
@media (prefers-reduced-motion: reduce){.scene *{animation:none !important}html{scroll-behavior:auto}}
@media (max-width: 960px){.grid4,.grid5{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:1fr}.navlinks{display:none !important}}
@media (max-width: 600px){.wrap{padding:0 20px}.grid4,.grid2{grid-template-columns:1fr}.scene{height:520px;border-radius:24px}.sect{padding-top:64px !important;padding-bottom:64px !important}.knob{width:84px !important;height:84px !important}.knob svg{width:60px;height:60px}}

/* Static-site additions */
[hidden]{display:none !important}
.layer.dim{clip-path:inset(0 0 0 var(--pos))}
.dim-overlay{position:absolute;inset:0;background:rgba(46,56,76,0.18)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
