/* ============================================================
   Marine Horizon — palette overlay
   Ported from 21st.dev/serafimcloud/marine-horizon (GradientBackground).
   The source, verbatim:
     background-color: #EBF6F7;
     background-image: conic-gradient(from 90deg at 50% 50%,
       #EBF6F7 0%, #A2D7DD 33%, #00A3AF 67%, #274A78 100%);
   No grain, no blur — the whole component is that one conic sweep.

   Load AFTER styles.css. Swap the <link> back to theme-marine-foam.css
   for the previous palette, or drop both to return to navy.
   ============================================================ */

:root {
  /* the four source stops, kept addressable */
  --mh-spray: #EBF6F7;
  --mh-aqua:  #A2D7DD;
  --mh-cyan:  #00A3AF;
  --mh-deep:  #274A78;

  /* the site's tokens, remapped onto the ramp */
  --ink:      #1B3454;
  --navy:     #274A78;
  --deep:     #1F3C62;
  --darkest:  #172D4A;
  --body:     #5A6E8C;
  --muted:    #8496AE;
  --quote:    #44597A;
  --line:     #DDE9EF;
  --placeholder: #D3E4EA;
  --accent:   #00A3AF;
}

/* ---------- the aqua highlight, replacing #7FD0E6 ---------- */

.nav-desktop a:hover,
.menu__panel > a:hover,
.btn-ghost-light:hover,
.menu__panel > a[aria-current="page"] { color: var(--mh-aqua); }

.lang__opt:focus-visible,
.hero__arrow:focus-visible,
.hero__dot:focus-visible { outline-color: var(--mh-aqua); }

.nav-desktop a[aria-current="page"] {
  color: var(--mh-aqua);
  border-bottom-color: var(--mh-aqua);
}
.nav-desktop a[aria-current="page"]:hover { color: var(--mh-aqua) !important; }

.btn-ghost-light[aria-current="page"],
.btn-outline[aria-current="page"] {
  border-color: rgba(162, 215, 221, 0.7);
  color: var(--mh-aqua) !important;
}

/* ---------- the pale surfaces, replacing #F2F6F9 / #E8F0F5 ---------- */

.gg,
.gg__filter:hover { background: var(--mh-spray); }

.lead button:hover,
.chip:hover { background: #DCEDF0; }

.field input,
.field textarea,
.chip { border-color: #C2DAE2; }

/* ---------- the dark solids, replacing #103A4C ---------- */

.fab:hover,
.cform__submit:hover { background: #335F97; }

/* ---------- the dark bands ----------
   The source's conic sweep needs a square-ish canvas: on a full-width
   band its vertex lands mid-section and puts #EBF6F7 hard against
   #274A78, which kills the white type. These carry the ramp's dark
   end as a linear sweep instead — same colours, no vertex.        */

.about {
  background-color: var(--mh-deep);
  background-image: linear-gradient(145deg, #1F3C62 0%, #2F5A90 55%, #274A78 100%);
}

.process,
.cta-strip {
  background-color: var(--mh-deep);
  background-image: linear-gradient(145deg, #274A78 0%, #1F3C62 100%);
}

/* ---------- the navy tints ---------- */

.btn-outline { border-color: rgba(39, 74, 120, 0.35); }
.btn-outline:hover { background: rgba(39, 74, 120, 0.06); }
.service:hover { box-shadow: 0 16px 40px rgba(39, 74, 120, 0.1); }

/* ---------- the photo scrims, retinted onto the ramp ---------- */

.hero__scrim {
  background: linear-gradient(180deg,
    rgba(20, 38, 62, 0.55) 0%,
    rgba(20, 38, 62, 0.20) 45%,
    rgba(20, 38, 62, 0.60) 100%);
}

.lang { background: rgba(16, 30, 50, 0.28); }
.hero__arrow { background: rgba(16, 30, 50, 0.35); }
.hero__arrow:hover { background: rgba(39, 74, 120, 0.85); }
.menu { background: rgba(18, 34, 56, 0.55); }
.band__scrim { background: rgba(20, 38, 62, 0.45); }

.included__scrim {
  background: linear-gradient(105deg,
    rgba(18, 34, 56, 0.93) 0%,
    rgba(18, 34, 56, 0.72) 55%,
    rgba(18, 34, 56, 0.35) 100%);
}

.cta__scrim { background: rgba(18, 34, 56, 0.68); }
.footer__scrim { background: rgba(13, 24, 40, 0.78); }

.project figcaption,
.cinfo__map span { background: rgba(20, 38, 62, 0.85); }