:root{ --header-height:96px; }

.container-slim{ max-width:72rem; margin-inline:auto; padding-inline:1rem; }
.section{ padding-block:3rem; }
@media (min-width:768px){ .section{ padding-block:5rem; } }

.btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:.375rem; padding:.75rem 1.25rem; font-weight:500; transition:color .15s, background .15s, border-color .15s; outline: none; }
.btn-primary{ background:#0b5b50; color:#fff; }
.btn-primary:hover{ background:#147a6c; }
.btn-outline{ border:1px solid #0b5b50; color:#0b5b50; }
.btn-outline:hover{ background:rgba(11,91,80,.1); }

.card{ border:1px solid rgba(11,91,80,.3); border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04); background:#fff; transition: box-shadow .15s; }
.card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }

.hero-gradient{ background: radial-gradient(1200px 500px at -10% -10%, rgba(20, 122, 108, 0.15), transparent 60%), linear-gradient(180deg, #0b5b50 0%, #07463e 100%); }

.video{ position:relative; width:100%; overflow:hidden; border-radius:.75rem; }
.video::before{ content:""; display:block; padding-bottom:56.25%; }
.video>*{ position:absolute; inset:0; width:100%; height:100%; }

.placeholder-img{ background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center; border-radius:.375rem; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 10px, transparent 10px, transparent 20px); }

/* simple active nav state */
.nav-link{ transition: color .15s; text-decoration: none; }
.nav-link:hover{ color:#0b5b50; }

/* utilities used in this site when tailwind CDN is present */
/* We rely on TailwindCDN for utility classes like grid, text-gray, etc. */