/* ============================================================
   Fonts, self-hosted. Archivo carries a width axis (62-125%),
   which is what separates the display face from the body face.
   ============================================================ */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/public-sans-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   Solitons — the operating system of the ocean
   Palette sampled from the vehicle photography: dusk surface
   down to abyssal dark, with the horizon's amber as the accent.
   ============================================================ */

:root{
  --abyss:#01060A;
  --hull:#0A1620;
  --column:#12252F;
  --surface:#12303C;
  --beacon:#D9A05B;   /* horizon amber — surface mode */
  --sonar:#7FD4E8;    /* pale cyan — underwater mode only */
  --foam:#EEF4F5;
  --haze:#93A9B3;
  --line:rgba(147,169,179,.18);

  --display:"Archivo",system-ui,sans-serif;
  --body:"Public Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --rail:clamp(0rem,6vw,6.5rem);
  --max:76rem;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--foam);
  background:var(--abyss);
  /* The descent: the page itself travels down the water column. */
  background-image:linear-gradient(180deg,
    #12303C 0%,
    #0E2734 7%,
    #0B1F2B 18%,
    #081925 32%,
    #06131D 48%,
    #040E16 64%,
    #030A11 80%,
    #01060A 100%);
  background-attachment:scroll;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}
:focus-visible{outline:2px solid var(--beacon);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--beacon);color:#0B1620;padding:.7rem 1.1rem;
  font-family:var(--mono);font-size:.8rem;text-decoration:none;
}
.skip:focus{left:.5rem;top:.5rem}

/* ---------------------------------------------- type */

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0 0 .6em;
  text-wrap:balance;
}

h1{
  font-size:clamp(2.15rem,1.1rem + 4.4vw,4.6rem);
  font-weight:800;
  font-variation-settings:"wdth" 118;
  letter-spacing:-.028em;
}

h2{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.15rem)}
h3{font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);font-variation-settings:"wdth" 105;letter-spacing:-.005em}

p{margin:0 0 1.1em}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--haze);
  margin:0 0 1.4rem;
}
.eyebrow--beacon{color:var(--beacon)}

.lede{
  font-size:clamp(1.05rem,.98rem + .6vw,1.4rem);
  line-height:1.5;
  color:#D3E0E5;
  max-width:38ch;
  font-weight:300;
}

.intro{
  max-width:56ch;
  color:#C0D0D7;
  font-size:clamp(1rem,.97rem + .35vw,1.19rem);
  line-height:1.6;
}

.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-left:calc(var(--gutter) + var(--rail));
}

/* ---------------------------------------------- depth gauge (signature) */

.gauge{
  position:fixed;
  left:clamp(.75rem,2vw,1.9rem);
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  font-family:var(--mono);
  color:var(--haze);
  pointer-events:none;
}
@media (min-width:1080px){.gauge{display:flex}}

.gauge__label{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
.gauge__read{display:flex;align-items:baseline;gap:.12rem;color:var(--foam)}
.gauge__read b{font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums}
.gauge__read i{font-style:normal;font-size:.65rem;color:var(--haze)}

.gauge__track{
  width:1px;height:min(38vh,20rem);
  background:linear-gradient(180deg,rgba(217,160,91,.45),rgba(147,169,179,.12));
  position:relative;
}
.gauge__fill{
  position:absolute;left:-1px;top:0;width:3px;height:0;
  background:var(--beacon);
  transition:height .12s linear;
}
.gauge__zone{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  writing-mode:vertical-rl;
  color:var(--beacon);
  transition:color .5s ease;
}
.gauge__zone.is-deep{color:var(--sonar)}

/* ---------------------------------------------- nav */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:2rem;
  padding:1.1rem var(--gutter);
  transition:background-color .35s ease,backdrop-filter .35s ease,border-color .35s ease,padding .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(4,14,21,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:.7rem;
}
.nav__brand{margin-right:auto;display:block}
.nav__brand img{width:clamp(6.5rem,10vw,8.75rem);height:auto}

.nav__links{display:none;gap:1.9rem}
@media (min-width:940px){.nav__links{display:flex}}
.nav__links a{
  font-family:var(--mono);
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--haze);text-decoration:none;
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--foam)}

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

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.5rem;
  background:var(--beacon);
  color:#0B1620;
  border:1px solid var(--beacon);
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{background:#E8B571;border-color:#E8B571;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--foam);border-color:rgba(238,244,245,.35)}
.btn--ghost:hover{background:rgba(238,244,245,.09);border-color:var(--foam);color:var(--foam)}
.btn--sm{padding:.6rem 1.05rem;font-size:.7rem}
.btn--lg{padding:1.05rem 2.2rem;font-size:.85rem}

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

.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:8rem 0 5.5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(2,9,14,.72) 0%,rgba(2,9,14,.25) 35%,rgba(2,9,14,.82) 78%,#0E2734 100%);
}
.hero__wave{
  position:absolute;left:0;right:0;bottom:0;z-index:-1;
  width:100%;height:30vh;
  pointer-events:none;
}
.hero__inner{
  max-width:var(--max);
  margin-inline:auto;
  width:100%;
  padding-inline:var(--gutter);
  padding-left:calc(var(--gutter) + var(--rail));
}
.hero h1{margin-bottom:1.4rem;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.hero__scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--haze);margin:0;
  animation:sink 2.8s ease-in-out infinite;
}
@keyframes sink{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,7px);opacity:1}}

/* ---------------------------------------------- bands */

.band{padding-block:clamp(4.5rem,10vw,9rem)}
.band--flush{padding-block:clamp(4.5rem,10vw,9rem) 0}
.band--flush + .band{padding-top:clamp(4.5rem,10vw,9rem)}

.figure{margin:clamp(2.5rem,6vw,4.5rem) 0 0}
.figure--wide img{width:100%}
.figure--bleed{position:relative;margin:0}
.figure--bleed img{width:100%;height:auto}
.figure--bleed + .figure--bleed{margin-top:clamp(3.5rem,8vw,6rem)}
.figure--bleed figcaption{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(2rem,5vw,3.5rem) var(--gutter) 0;
  padding-left:calc(var(--gutter) + var(--rail));
}
.figure--bleed figcaption p:last-child{max-width:58ch;color:#C0D0D7}

.pullquote{
  font-family:var(--display);
  font-variation-settings:"wdth" 100;
  font-weight:500;
  font-size:clamp(1.15rem,.95rem + 1.1vw,1.85rem);
  line-height:1.35;
  color:var(--beacon);
  max-width:34ch;
  margin:clamp(2.5rem,6vw,4rem) 0 0;
  text-wrap:balance;
}

/* ---------------------------------------------- comparison */

.compare{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;
  display:grid;gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:600px){.compare{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.compare{grid-template-columns:repeat(5,1fr)}}

.compare__item{
  background:rgba(10,22,32,.55);
  padding:1.35rem 1.35rem 1.6rem;
  transition:background-color .3s ease;
}
.compare__item:hover{background:rgba(18,37,47,.75)}
.compare__item img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  margin-bottom:1.1rem;
  filter:saturate(.55) brightness(.78);
  transition:filter .4s ease;
}
.compare__item:hover img{filter:saturate(.9) brightness(.95)}
.compare__item h3{margin-bottom:.45rem}
.compare__item p{font-size:.92rem;color:var(--haze);margin:0;line-height:1.55}

.compare__item--us{background:rgba(217,160,91,.09)}
.compare__item--us:hover{background:rgba(217,160,91,.15)}
.compare__item--us img{filter:none}
.compare__item--us h3{color:var(--beacon)}
.compare__item--us p{color:#DCC4A2}

/* ---------------------------------------------- modes */

.modes{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(2rem,5vw,3.5rem);
}
@media (min-width:760px){.modes{grid-template-columns:1fr 1fr}}
.mode{background:rgba(8,20,29,.7);padding:clamp(1.5rem,3vw,2.4rem)}
.mode__tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 1rem;
}
.mode--surface .mode__tag{color:var(--beacon)}
.mode--sub .mode__tag{color:var(--sonar)}
.mode p:last-child{margin:0;color:#B8CAD2;font-size:.98rem}

/* ---------------------------------------------- technology */

.tech{
  display:grid;gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(2.5rem,6vw,4rem);
  align-items:start;
}
@media (min-width:900px){.tech{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.tech__art{margin:0;position:sticky;top:6.5rem}
@media (max-width:899px){.tech__art{position:static}}

.tech__list{list-style:none;margin:0;padding:0;counter-reset:t}
.tech__list li{
  padding:1.7rem 0;
  border-top:1px solid var(--line);
}
.tech__list li:last-child{border-bottom:1px solid var(--line)}
.tech__list h3{margin-bottom:.3rem}
.tech__claim{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--beacon);margin:0 0 .7rem;
}
.tech__list li p:last-child{margin:0;color:var(--haze);font-size:.96rem}

/* ---------------------------------------------- applications */

.apps{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.app img{
  width:100%;aspect-ratio:3/1;object-fit:cover;
  margin-bottom:1rem;
  filter:saturate(.7);
  transition:filter .4s ease,transform .4s ease;
}
.app:hover img{filter:saturate(1);transform:translateY(-3px)}
.app h3{margin-bottom:.25rem}
.app p{margin:0;color:var(--haze);font-size:.92rem}

/* ---------------------------------------------- fleet extension */

.extend{
  display:grid;gap:clamp(1.8rem,4vw,3rem);
  align-items:center;
  margin-top:clamp(3rem,7vw,5rem);
  padding-top:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--line);
}
@media (min-width:860px){.extend{grid-template-columns:1.1fr 1fr}}
.extend__art{margin:0}
.extend__body p:last-of-type{margin-bottom:0}
.extend__body > p{color:#C0D0D7}
.note{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--haze);
  border-left:2px solid var(--line);
  padding-left:.9rem;
  margin-top:1.2rem!important;
}

/* ---------------------------------------------- patent */

.patent{max-width:46rem}
.patent__number{
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-weight:800;
  font-size:clamp(2.4rem,1.3rem + 4.6vw,5.2rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--beacon);
  margin:1.6rem 0 .6rem;
}
.patent__number span{
  display:block;
  font-family:var(--mono);font-weight:400;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--haze);margin-bottom:.7rem;
}
.patent__title{
  font-size:1.08rem;color:var(--foam);max-width:34ch;margin-bottom:2rem;
}

.facts{
  list-style:none;margin:0 0 2rem;padding:1.4rem 0;
  display:flex;flex-wrap:wrap;gap:2.4rem;
  border-block:1px solid var(--line);
}
.facts b{
  display:block;
  font-family:var(--display);font-variation-settings:"wdth" 110;
  font-size:1.7rem;font-weight:700;line-height:1;color:var(--foam);
}
.facts span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);display:block;margin-top:.45rem;
}

/* ---------------------------------------------- roadmap */

.road{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:680px){.road{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.road{grid-template-columns:repeat(4,1fr)}}

.road__step{background:rgba(6,17,25,.72);padding:1.6rem 1.4rem 1.7rem}
/* Seven milestones in a four-up grid leaves a hole; the destination
   takes the remaining width, which reads as arrival rather than filler. */
@media (min-width:680px){.road__step:last-child{grid-column:span 2}}
.road__num{
  display:block;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  color:var(--haze);margin-bottom:1.6rem;
}
.road__step h3{margin-bottom:.35rem;font-size:1.05rem}
.road__step p{margin:0;color:var(--haze);font-size:.88rem;line-height:1.5}

.road__step--done{background:rgba(217,160,91,.1)}
.road__step--done .road__num{color:var(--beacon);font-size:1rem}
.road__step--done h3{color:var(--beacon)}
.road__step--done p{color:#DCC4A2}

/* ---------------------------------------------- partners + founder */

.partners{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;
  display:grid;gap:1.5rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.partners li{border-top:1px solid var(--line);padding-top:1.1rem}
.partners h3{margin-bottom:.3rem;font-size:1rem}
.partners p{margin:0;color:var(--haze);font-size:.9rem}

.founder{
  display:grid;gap:clamp(1.5rem,4vw,2.8rem);
  align-items:start;
  margin-top:clamp(3.5rem,8vw,5.5rem);
  padding-top:clamp(3rem,7vw,4.5rem);
  border-top:1px solid var(--line);
}
@media (min-width:720px){.founder{grid-template-columns:auto 1fr}}
.founder img{width:clamp(6rem,14vw,9.5rem);aspect-ratio:1;object-fit:cover;border-radius:50%}
.founder__body{max-width:58ch}
.founder__body h3{margin-bottom:.2rem}
.founder__role{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--beacon);margin-bottom:1.1rem;
}
.founder__body > p{color:#C0D0D7}
.founder__contact{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.3rem 0 0}
.founder__contact a{
  font-family:var(--mono);font-size:.85rem;
  color:var(--foam);text-decoration:none;
  border-bottom:1px solid rgba(217,160,91,.5);padding-bottom:2px;
  transition:border-color .2s ease,color .2s ease;
}
.founder__contact a:hover{color:var(--beacon);border-bottom-color:var(--beacon)}

.finalcta{margin-top:clamp(3rem,7vw,4.5rem)}

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

.foot{
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
}
.foot__inner img{width:7.5rem;margin-bottom:1.4rem;opacity:.85}
.foot__inner p{margin:0 0 .5rem;color:var(--haze);font-size:.9rem}
.foot__meta{font-family:var(--mono);font-size:.75rem!important;letter-spacing:.06em}
.foot__meta a{color:var(--haze);text-decoration:none;border-bottom:1px solid var(--line)}
.foot__meta a:hover{color:var(--beacon)}

/* ---------------------------------------------- scroll reveal */

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Hard line breaks are a large-screen typesetting choice only. */
@media (max-width:760px){ .br-lg{display:none} }

/* ---------------------------------------------- contact form */

.cform{
  margin-top:clamp(2.5rem,6vw,4rem);
  max-width:44rem;
  display:grid;
  gap:1.4rem;
}
.cform__row{display:grid;gap:1.4rem}
@media (min-width:640px){.cform__row{grid-template-columns:1fr 1fr}}

.cform__field{display:block}
.cform__field > span{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--haze);
  margin-bottom:.6rem;
}
.cform__field > span i{font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.65}

.cform input,
.cform select,
.cform textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  font-weight:300;
  color:var(--foam);
  background:rgba(8,20,29,.72);
  border:1px solid var(--line);
  border-radius:0;
  padding:.85rem .95rem;
  transition:border-color .2s ease,background-color .2s ease;
  -webkit-appearance:none;appearance:none;
}
.cform textarea{resize:vertical;min-height:7rem;line-height:1.55}
.cform select{
  background-image:linear-gradient(45deg,transparent 50%,var(--haze) 50%),linear-gradient(135deg,var(--haze) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.25rem,calc(100% - .75rem) 1.25rem;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
}
.cform select option{background:#0A1620;color:var(--foam)}

.cform input:hover,.cform select:hover,.cform textarea:hover{border-color:rgba(147,169,179,.34)}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;
  border-color:var(--beacon);
  background:rgba(12,28,38,.9);
}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:none}

.cform .btn{justify-self:start;border:1px solid var(--beacon);cursor:pointer;font-family:var(--mono)}
.cform button[disabled]{opacity:.55;cursor:default}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.cform__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cform__status{
  margin:0;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.04em;
  min-height:1.2em;
  color:var(--haze);
}
.cform__status.is-ok{color:var(--beacon)}
.cform__status.is-bad{color:#E88B6B}

.cform__direct{
  margin-top:2rem;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--haze);
}
.cform__direct a{
  color:var(--foam);text-decoration:none;
  border-bottom:1px solid rgba(217,160,91,.5);padding-bottom:2px;
}
.cform__direct a:hover{color:var(--beacon);border-bottom-color:var(--beacon)}