/* Small custom layer — everything else is Tailwind utilities. */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #234f28; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid #5f7f47; outline-offset: 2px; }
html { scroll-padding-top: 96px; }

/* Hero: SVG port illustration + dark-green overlay. Replace hero-port.svg with a photo (hero.jpg) any time. */
.hero-bg {
  background-color: #0f2a14;
  background-image: linear-gradient(100deg, rgba(15,42,20,.92) 0%, rgba(15,42,20,.72) 48%, rgba(15,42,20,.25) 100%), url('../img/hero-port.svg');
  background-size: cover;
  background-position: center;
}
.page-hero {
  background-color: #17361d;
  background-image: linear-gradient(100deg, rgba(15,42,20,.94) 0%, rgba(23,54,29,.82) 60%, rgba(35,79,40,.6) 100%), url('../img/hero-port.svg');
  background-size: cover;
  background-position: center 70%;
}

/* Scroll reveal (disabled for reduced-motion users and when JS is off) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto !important; }
}

/* Tracking timeline */
.tl-line::before { content: ""; position: absolute; left: 15px; top: 28px; bottom: -8px; width: 2px; background: #d3e4c4; }
.tl-item:last-child .tl-line::before { display: none; }
.tl-item.done .tl-line::before { background: #5f7f47; }

/* Form states */
.field-error { border-color: #dc2626 !important; }