.mask-circle { border-radius: 9999px; overflow: hidden; }
.square { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
@supports not (aspect-ratio: 1 / 1) {
  .square { position: relative; padding-top: 100%; }
  .square > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
html:focus-within { scroll-behavior: smooth; }
img { height: auto; }

        body {
            
            background-color: #003848;
            color: #ecf0f1;
        }

/* Countdown bar - pronounced */
#countdown-bar { position: sticky; top: 4rem; }
#countdown-bar .cd-wrap { display: grid; grid-auto-flow: column; gap: .5rem; align-items: center; }
.cd-chip { display:inline-flex; align-items:center; justify-content:center; min-width:2.5rem; padding:.35rem .55rem; border-radius:9999px; background: #0e3b26; color:#fff; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.cd-label { opacity:.9; margin-right:.35rem; }
@media (min-width: 640px){ .cd-chip { min-width:3rem; padding:.45rem .75rem; font-size:1.05rem; } }

/* Toasts */
#toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 200; display: grid; gap: .5rem; }
.toast { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius: .75rem; background: #111827; color:#fff; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.toast.success { background:#065f46; }
.toast.error { background:#991b1b; }
.toast.info { background:#1f2937; }
.toast .close { margin-left:.5rem; cursor:pointer; opacity:.8; }
@media (max-width: 480px){ #toast-root{ left:.5rem; right:.5rem; } }

#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#7BAA52,#9BC873);z-index:100}

[data-parallax]{will-change:transform}

:where(section)[id]{ scroll-margin-top: 92px; }