html { scroll-behavior: smooth; }
.hero-bg {
  background: linear-gradient(135deg, rgba(15,23,42,.88), rgba(13,148,136,.82)), url('https://images.unsplash.com/photo-1576765608535-5f04d1e3f289?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}
.banner-gradient { background: linear-gradient(90deg, #0d9488, #2563eb); }
.gallery-card { position: relative; height: 14rem; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 12px rgba(15,23,42,.12); }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card figcaption { position: absolute; inset: 0; display: flex; align-items: end; padding: .75rem; color: white; font-size: .75rem; font-weight: 700; background: linear-gradient(to top, rgba(2,6,23,.8), transparent 70%); }
.resource-card { background: white; border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 1rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 3px rgba(15,23,42,.06); transition: box-shadow .2s ease, transform .2s ease; }
.resource-card:hover { box-shadow: 0 10px 25px rgba(15,23,42,.08); transform: translateY(-2px); }
.resource-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.resource-meta .category { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #0d9488; background: #f0fdfa; padding: .25rem .625rem; border-radius: .375rem; }
.resource-meta .badge { font-size: .75rem; font-weight: 600; color: #92400e; background: #fef3c7; padding: .125rem .5rem; border-radius: 999px; }
.resource-card h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.resource-card p { color: #475569; font-size: .875rem; line-height: 1.625; margin-bottom: 1.5rem; }
.resource-card a { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: #0f766e; }
.job-panel { background: rgba(30,41,59,.8); border: 1px solid #334155; padding: 1.5rem; border-radius: 1rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: .75rem; margin-bottom: 1rem; }
.panel-heading h3 { display: flex; gap: .5rem; align-items: center; font-size: 1.125rem; font-weight: 700; }
.panel-heading span { font-size: .75rem; color: #94a3b8; }
.job-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-radius: .75rem; background: rgba(15,23,42,.6); border: 1px solid rgba(51,65,85,.6); }
.job-row h4 { font-weight: 700; color: white; }
.job-row p { font-size: .75rem; color: #94a3b8; }
.tag { font-size: .75rem; font-weight: 600; padding: .25rem .625rem; border-radius: .375rem; white-space: nowrap; }
.tag.teal { color: #5eead4; background: rgba(20,184,166,.2); }
.tag.purple { color: #d8b4fe; background: rgba(168,85,247,.2); }
.tag.amber { color: #fcd34d; background: rgba(245,158,11,.2); }
.contact-btn { font-size: .75rem; font-weight: 700; color: white; background: #0d9488; padding: .375rem .75rem; border-radius: .5rem; white-space: nowrap; }
.skill-row { background: white; padding: 1rem; border-radius: .75rem; border: 1px solid #ccfbf1; box-shadow: 0 1px 3px rgba(15,23,42,.05); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.skill-row h4 { font-weight: 700; color: #0f172a; }
.skill-row p { font-size: .75rem; color: #64748b; }
.skill-row > span { font-size: .75rem; font-weight: 600; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; padding: .25rem .75rem; border-radius: 999px; text-align: center; }
.pod-row { background: rgba(30,41,59,.8); padding: .875rem; border-radius: .75rem; border: 1px solid #334155; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pod-row > div { display: flex; align-items: center; gap: .75rem; }
.pod-row span { color: #fbbf24; font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 700; }
.pod-row p { font-size: .875rem; font-weight: 600; color: #f1f5f9; }
.pod-row small { font-size: .75rem; color: #94a3b8; white-space: nowrap; }
.agency-card { background: white; padding: 1.25rem; border-radius: .75rem; border: 1px solid #e2e8f0; text-align: center; font-weight: 700; color: #334155; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.agency-card i { display: block; color: #0d9488; font-size: 1.5rem; margin-bottom: .5rem; }
.form-label { display: block; font-size: .75rem; font-weight: 700; color: #334155; text-transform: uppercase; margin-bottom: .25rem; }
.form-input { width: 100%; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid #cbd5e1; font-size: .875rem; outline: none; background: white; }
.form-input:focus { box-shadow: 0 0 0 2px #0d9488; border-color: transparent; }
.footer-heading { color: white; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; }
.footer-list { display: grid; gap: .5rem; font-size: .75rem; }
.footer-list a:hover { color: white; }
@media (max-width: 640px) {
  .gallery-card { height: 12rem; }
  .job-row, .skill-row, .pod-row, .pod-row > div { align-items: flex-start; }
  .job-row, .skill-row { flex-direction: column; }
  .pod-row { gap: .5rem; }
}