/**
 * Marine Innovations — site styles
 *
 * Author:  Colin Bitterfield
 * Email:   colin@bitterfield.com
 * Version: 0.1.0 (2026-07-25)
 *
 * Changelog
 *   0.1.0 (2026-07-25) — Initial stylesheet for the coming-soon site.
 *
 * Palette: deep hull navy and sea blue for structure, a copper accent for
 * anything the visitor should act on. Copper because it is the one warm
 * colour already on every boat — bus bars, lugs, ring terminals — and it
 * reads as a call to action against navy without shouting.
 *
 * No JavaScript anywhere on this site; CSP blocks script outright. Anything
 * interactive here has to be reachable with CSS and native HTML alone.
 */

:root {
  --navy: #0a2a3d;
  --navy-deep: #061c29;
  --sea: #0f6a8b;
  --sea-dark: #0b5470;
  --copper: #c2673a;
  --copper-dark: #a4522b;
  --copper-light: #f0a074;
  --ink: #12212b;
  --muted: #5b6c78;
  --line: #dfe5ea;
  --line-strong: #bcc7d0;
  --wash: #f2f6f8;
  --wash-2: #e7eff3;
  --err: #b3261e;
  --ok: #1f6234;
  --radius: 10px;
  --max: 68rem;
  --max-narrow: 44rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}

main {
  flex: 1;
}

a {
  color: var(--sea-dark);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* ---- header -------------------------------------------------------- */

.announce {
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--navy);
}

.brand__logo {
  width: 2rem;
  height: 2rem;
  flex: none;
  color: var(--sea);
}

.brand__name {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--navy);
  white-space: nowrap;
}

.brand__name strong {
  font-weight: 800;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--sea);
  border-bottom-color: var(--sea);
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--copper);
}

/* ---- shared bits ---------------------------------------------------- */

.eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea);
}

.eyebrow--light {
  color: var(--copper-light);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.actions--center {
  justify-content: center;
}

.chips {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips li {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}

/* ---- photo hero ---------------------------------------------------- */

.hero-photo {
  position: relative;
  isolation: isolate;
  background: var(--navy-deep);
}

.hero-photo picture,
.hero-photo img {
  display: block;
  width: 100%;
  height: clamp(28rem, 66vh, 42rem);
  object-fit: cover;
  object-position: center 55%;
}

/* Scrim so white text stays legible over the lit boats on the right. The
   generated photograph deliberately keeps its left third dark and empty,
   so the gradient only has to deepen what is already there. */
.hero-photo__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(
    100deg,
    rgba(4, 16, 24, 0.9) 0%,
    rgba(4, 16, 24, 0.74) 40%,
    rgba(4, 16, 24, 0.34) 70%,
    rgba(4, 16, 24, 0.14) 100%
  );
}

.hero-photo__inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  color: #fff;
}

.hero-photo__title {
  margin: 0 0 1rem;
  max-width: 18ch;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero-photo__lede {
  margin: 0 0 2rem;
  max-width: 36rem;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  color: rgba(255, 255, 255, 0.9);
}

/* ---- strip --------------------------------------------------------- */

.strip__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}

.strip__item h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}

.strip__item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---- split sections ------------------------------------------------- */

.split {
  border-top: 1px solid var(--line);
}

.split--reverse {
  background: var(--wash);
}

.split__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Media leads on the left by default; on the second section it moves right
   so the two sections do not read as one long column of images. */
.split--reverse .split__media {
  order: 2;
}

.split__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 24rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.split__title {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.split__body p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.split__body .btn {
  margin-top: 0.5rem;
}

/* ---- notify -------------------------------------------------------- */

.notify {
  background: var(--navy);
  color: #fff;
  border-top: 1px solid var(--line);
}

.notify__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: start;
}

.notify .eyebrow {
  color: var(--copper-light);
}

.notify__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.notify__lede {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.82);
}

.notify__alt {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

.notify__alt a {
  color: var(--copper-light);
}

.notify__form {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: 0 18px 40px rgba(3, 12, 20, 0.28);
}

/* ---- buttons ------------------------------------------------------- */

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--copper);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--copper-dark);
  transform: translateY(-1px);
}

.btn--ghost {
  background: #fff;
  color: var(--navy);
  border-color: var(--line-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--sea);
  color: var(--sea);
}

/* Outlined button for use over the dark photo hero. */
.btn--light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.btn--wide {
  width: 100%;
}

.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.notify__form .btn:focus-visible,
.hero-photo .btn:focus-visible {
  outline-color: var(--copper-light);
}

/* ---- page head ----------------------------------------------------- */

.page-head {
  background: linear-gradient(180deg, var(--wash-2) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}

.page-head__inner {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
}

.page-head--center .page-head__inner {
  text-align: center;
}

.page-head__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.page-head__lede {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.benefits {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.benefits li {
  margin-bottom: 0.5rem;
}

.benefits strong {
  color: var(--ink);
}

/* ---- forms --------------------------------------------------------- */

.form-section__inner {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.alert {
  background: #fdecea;
  border: 1px solid var(--err);
  color: var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.alert--ok {
  background: #ecf7ee;
  border-color: var(--ok);
  color: var(--ok);
}

.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 0 0 1.75rem;
}

.fieldset__legend {
  padding: 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea);
}

.field {
  margin-bottom: 1.25rem;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 1px;
  border-color: var(--sea);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--err);
  background: #fffaf9;
}

.field__error {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--err);
}

.field__hint {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-row--three {
  grid-template-columns: 2fr 1fr 1fr;
}

.req {
  color: var(--copper-dark);
}

.form-note {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 1rem 0 0;
}

.form-section .form-note {
  margin: 0 0 1.5rem;
}

/* Honeypot — visually hidden, off-screen, never focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.error-detail {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  text-align: left;
}

/* ---- footer -------------------------------------------------------- */

.site-footer {
  background: var(--wash);
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.site-footer__note {
  margin: 0.6rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 24rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--sea);
  text-decoration: underline;
}

.site-footer__legal {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- responsive ---------------------------------------------------- */

@media (max-width: 56rem) {
  .split__inner,
  .notify__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Stacked, the image always leads — reversing it on the second section
     would put a wall of text directly under the previous one. */
  .split__media,
  .split--reverse .split__media {
    order: -1;
  }
}

@media (max-width: 40rem) {
  .site-header__inner {
    justify-content: center;
    text-align: center;
  }

  .hero-photo picture,
  .hero-photo img {
    height: clamp(26rem, 72vh, 34rem);
  }

  .hero-photo__overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 16, 24, 0.6) 0%,
      rgba(4, 16, 24, 0.85) 100%
    );
  }

  .notify__form {
    padding: 1.25rem;
  }

  .nav {
    width: 100%;
    justify-content: center;
    gap: 1.1rem;
  }

  .field-row,
  .field-row--three {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:focus-visible {
    transform: none;
  }
}