/* =========================================================
   O.I.M. — Ocean in Motion — shared stylesheet
   Design tokens live at the top. Everything else derives
   from them — change the palette/type here, not per-page.
   ========================================================= */

:root{
  /* --- color: deep-sea instrument panel --- */
  --abyss:#060A10;        /* page background */
  --panel:#0D151E;        /* card / raised surface */
  --panel-2:#111B26;      /* secondary raised surface */
  --ink:#F4F6F5;          /* primary text */
  --dim:rgba(244,246,245,.62);
  --dim2:rgba(244,246,245,.38);
  --line:rgba(244,246,245,.12);
  --line-strong:rgba(244,246,245,.22);

  --sonar:#3DBCCA;        /* signature accent — sonar ping */
  --sonar-dim:rgba(61,188,202,.35);
  --sonar-glow:rgba(61,188,202,.18);

  --depth:#2FB4A8;        /* secondary accent — depth teal */
  --depth-dim:rgba(47,180,168,.28);

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --maxw:1180px;
  --pad:clamp(20px, 5vw, 64px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--abyss);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* faint contour-line chart texture behind everything, evokes bathymetric charts */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(47,180,168,.07), transparent 60%),
    repeating-radial-gradient(circle at 20% 30%, transparent 0 90px, rgba(244,246,245,.02) 90px 91px),
    repeating-radial-gradient(circle at 85% 70%, transparent 0 130px, rgba(244,246,245,.02) 130px 131px);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }

.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sonar); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--sonar);
  box-shadow:0 0 0 0 var(--sonar-glow); animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 var(--sonar-glow); }
  70%{ box-shadow:0 0 0 10px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ---------- layout shell ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1; }

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:56;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  backdrop-filter:blur(10px);
  background:linear-gradient(rgba(6,10,16,.75), rgba(6,10,16,0));
}
.brand-mark{
  font-family:var(--font-mono); font-weight:600; font-size:15px; letter-spacing:.24em;
  display:flex; align-items:center; gap:10px;
}
.brand-mark .dot{ width:6px; height:6px; border-radius:50%; background:var(--sonar); }
.brand-mark img{ height:26px; width:auto; display:block; }
.brand-mark .brand-text{ color:var(--sonar); font-family:var(--font-mono); font-weight:600; letter-spacing:.2em; }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); position:relative; padding:4px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--sonar);
  transition:width .3s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.current{ color:var(--ink); }
.nav-links a.current::after{ width:100%; }

.nav-cta{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sonar); background:var(--ink); border-radius:999px;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.nav-cta:hover{ background:var(--sonar); color:#04181B; transform:translateY(-2px); }
/* higher-specificity overrides: .nav-links a sets padding:4px 0 and
   .nav-links a.current sets color for the underline-link style, both of
   which would otherwise beat .nav-cta and squash the pill flat / turn its
   text white-on-white when Contact is the active page */
.nav-links a.nav-cta{ padding:12px 22px; color:var(--sonar); }
.nav-links a.nav-cta.current{ color:var(--sonar); }
.nav-links a.nav-cta:hover{ color:#04181B; }
.nav-links a.nav-cta::after{ display:none; }

.nav-toggle{ display:none; background:none; border:none; color:var(--ink); padding:11px; margin:-11px; }
.nav-backdrop{
  position:fixed; inset:0; z-index:54; background:rgba(6,10,16,.55);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-backdrop.show{ opacity:1; pointer-events:auto; }
@media (max-width:820px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(76vw,320px); height:100vh; z-index:55;
    background:var(--panel); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:6px; padding:120px 40px 40px; transform:translateX(100%); transition:transform .4s cubic-bezier(.6,-.05,.2,1);
    border-left:1px solid var(--line);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ padding:14px 0; width:100%; }
  .nav-cta{ text-align:center; }
  .nav-cta{ margin-top:8px; }
  .nav-toggle{ display:block; z-index:60; }
}

/* ---------- depth rail (scroll progress in "feet") ---------- */
.depth-rail{
  position:fixed; right:18px; top:0; bottom:0; z-index:40; width:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
@media (max-width:820px){ .depth-rail{ display:none; } }
.depth-rail .track{
  position:relative; width:1px; height:44vh; background:var(--line);
}
.depth-rail .fill{
  position:absolute; left:0; top:0; width:100%; height:0%; background:var(--sonar);
  transition:height .08s linear;
}
.depth-rail .readout{
  position:absolute; left:-52px; top:0; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--dim2);
  white-space:nowrap;
}

/* ---------- hero shell (per-page) ---------- */
.hero{ position:relative; padding:180px var(--pad) 100px; overflow:hidden; }
.hero-inner{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }

/* ---------- generic section ---------- */
section{ position:relative; padding:88px var(--pad); }
.section-inner{ max-width:var(--maxw); margin:0 auto; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size:clamp(28px,3.4vw,42px); margin-bottom:14px; }
.section-head p{ color:var(--dim); font-size:16px; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:15px 26px; border-radius:999px; transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--sonar); color:#04181B; }
.btn-primary:hover{ transform:translateY(-3px); background:#5ccdd9; }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--sonar); color:var(--sonar); transform:translateY(-3px); }

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover{ border-color:var(--sonar-dim); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.35); }

/* ---------- footer ---------- */
footer{
  padding:64px var(--pad) 40px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
footer .foot-brand{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--dim2); }
footer .foot-links{ display:flex; gap:28px; }
footer .foot-links a{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
footer .foot-links a:hover{ color:var(--sonar); }

/* ---------- utility ---------- */
.mono{ font-family:var(--font-mono); }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; }
.gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; } .gap-32{ gap:32px; }