/* ===========================================================================
   archeonglobal.com

   Colour comes entirely from brand/tokens/archeon.css, which this file assumes
   is loaded first. Nothing here declares a hex value that the token file does
   not already own - if a colour is missing, it belongs in the tokens, not here.

   The page is navy-first and committed to one scheme: it is a single marketing
   surface, and the mark's two-plane read depends on a known ground. The
   reversed lockup is used throughout because of that.
   =========================================================================== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ar-navy);
  color: var(--ar-ink-on-dark);
  font-family: var(--ar-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ar-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ar-signal-lift);
  color: var(--ar-navy);
  padding: 10px 18px;
  border-radius: 0 0 var(--ar-radius-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--ar-signal-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Shared type ──────────────────────────────────────────────────────── */

.eyebrow,
.kicker {
  font-family: var(--ar-font-display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ar-tracking-eyebrow);
  margin: 0 0 18px;
}
.eyebrow { color: var(--ar-ink-on-dark-3); }
.kicker { color: var(--ar-signal-deep); }
.kicker-dark { color: var(--ar-signal-lift); }

.muted { color: var(--ar-ink-3); }
.band-navy .muted, .foot .muted { color: var(--ar-ink-on-dark-4); }

/* ── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ar-navy) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ar-hairline-on-dark);
  padding-top: env(safe-area-inset-top);
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand { display: block; flex: none; }
/* The lockup is fixed artwork, so it is scaled by height and never squeezed:
   the width attribute in the markup is its true aspect at this height. */
.nav-brand img { height: 34px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-links a {
  padding: 7px 12px;
  border-radius: var(--ar-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--ar-ink-on-dark-2);
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-cta {
  border: 1px solid var(--ar-hairline-on-dark);
  color: #fff !important;
}
.nav-cta:hover { border-color: var(--ar-signal-lift); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 12% -10%, rgba(34, 129, 195, 0.20), transparent 60%),
    radial-gradient(70% 80% at 100% 0%, rgba(95, 178, 240, 0.10), transparent 55%),
    var(--ar-navy);
  padding: clamp(72px, 13vw, 148px) 0 clamp(84px, 14vw, 164px);
}
/* The arc sits low and wide, bled off both edges - the mark's gesture rather
   than a second copy of the mark. */
.hero-arc {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -34%;
  width: 124%;
  height: 92%;
  opacity: 0.5;
  pointer-events: none;
}
.hero-inner { position: relative; }

.hero h1 {
  font-size: clamp(2.35rem, 6.2vw, 4.15rem);
  max-width: 15ch;
  margin-bottom: 26px;
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 55%, #B9CDE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Where background-clip:text is unsupported the gradient would render as a
   transparent headline, so the colour is only removed once it is known to work. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { color: var(--ar-ink-on-dark); background: none; }
}

.lead {
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  color: var(--ar-ink-on-dark-2);
  max-width: 62ch;
  margin-bottom: 34px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--ar-radius-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.14s;
}
.btn:active { transform: translateY(1px); }
/* Signal Lift, not Signal Blue: navy on #2281C3 is 3.94:1 and fails AA.
   Navy on #5FB2F0 is 7.19:1. */
.btn-primary { background: var(--ar-signal-lift); color: var(--ar-navy); }
.btn-primary:hover { background: #86C6F5; }
.btn-ghost {
  border-color: var(--ar-hairline-on-dark);
  color: var(--ar-ink-on-dark-2);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* The 404 has no page below it, so the hero carries the full viewport rather
   than sitting on top of a fold that never arrives. */
.hero-404 {
  display: flex;
  align-items: center;
  min-height: calc(100dvh - 220px);
}

/* ── Bands ────────────────────────────────────────────────────────────── */

.band { padding: clamp(64px, 10vw, 110px) 0; }
.band-tight { padding-top: 0; }
.band-paper { background: var(--ar-paper); color: var(--ar-ink); }
.band-navy {
  background: var(--ar-navy-structural);
  color: var(--ar-ink-on-dark);
  border-top: 1px solid var(--ar-hairline-on-dark);
}

.band-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 20ch; }
.band-sub {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--ar-ink-3);
  font-size: 1.02rem;
}
.band-sub-dark { color: var(--ar-ink-on-dark-3); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
}
.split h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); margin-bottom: 18px; max-width: 22ch; }
.split p { color: var(--ar-ink-2); }
.split em { font-style: normal; font-weight: 650; color: var(--ar-ink); }

/* ── Products ─────────────────────────────────────────────────────────── */

.products {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.product {
  --accent: var(--ar-signal-deep);
  position: relative;
  overflow: hidden;
  background: var(--ar-surface);
  border: 1px solid var(--ar-hairline);
  border-radius: var(--ar-radius);
  padding: 26px 26px 24px;
  color: var(--ar-ink-2);
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
/* Each product's single accent, as a 3px edge. This is the only place a
   product colour appears on the parent's site. */
.product::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.product:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--ar-hairline));
  box-shadow: 0 4px 12px rgba(2, 30, 66, 0.07), 0 16px 40px rgba(2, 30, 66, 0.09);
}
/* One accent per product, set here rather than in a style attribute, so the
   page carries no inline CSS and the CSP can refuse it outright. */
.product-tanklogic { --accent: var(--ar-product-tanklogic); }
.product-vessel    { --accent: var(--ar-product-vessel); }
.product-piping    { --accent: var(--ar-product-piping); }

/* The shipped product gets the width; the planned ones do not pretend to. */
.product-lead { grid-column: 1 / -1; }
.product-reserved { background: transparent; }
.product-reserved::before { opacity: 0.45; }

.product-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.product h3 { font-size: 1.25rem; color: var(--ar-ink); }
.product-line {
  font-weight: 600;
  color: var(--ar-ink);
  margin-bottom: 10px;
}
.product p { font-size: 15px; }

.tag {
  font-family: var(--ar-font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid var(--ar-hairline);
  color: var(--ar-ink-3);
}
.tag-live {
  border-color: transparent;
  background: color-mix(in srgb, var(--ar-ok) 13%, transparent);
  color: #0a7a0a;
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; }
.chips li {
  font-size: 12.5px;
  font-weight: 550;
  padding: 4px 11px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--ar-ink-2);
}

.product-links { margin-top: 16px; font-size: 14px; }
.product-links a { color: var(--ar-signal-deep); font-weight: 600; text-decoration: none; }
.product-links a:hover { text-decoration: underline; }
.product-links .sep { color: var(--ar-ink-4); margin: 0 6px; }

/* ── Principles ───────────────────────────────────────────────────────── */

.principles {
  list-style: none;
  counter-reset: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 2px;
  background: var(--ar-hairline-on-dark);
  border: 1px solid var(--ar-hairline-on-dark);
  border-radius: var(--ar-radius);
  overflow: hidden;
}
.principles li {
  background: var(--ar-navy-structural);
  padding: 28px 26px 30px;
}
/* Five principles into a three-column grid leaves one cell showing the gap
   colour, which reads lighter than the cards beside it. This fills that cell
   in the card colour. A pseudo-element, so it never enters the list's
   accessible tree as a sixth, empty principle. */
.principles::after {
  content: "";
  background: var(--ar-navy-structural);
}
.principles .n {
  display: block;
  font-family: var(--ar-font-mono);
  font-size: 12px;
  color: var(--ar-signal-lift);
  margin-bottom: 14px;
  letter-spacing: 0.06em;
}
.principles h3 { font-size: 1.06rem; margin-bottom: 10px; }
.principles p { font-size: 14.5px; color: var(--ar-ink-on-dark-3); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.foot {
  background: var(--ar-navy);
  border-top: 1px solid var(--ar-hairline-on-dark);
  padding: clamp(48px, 7vw, 76px) 0 calc(32px + env(safe-area-inset-bottom));
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.foot-brand img { display: block; width: 100%; max-width: 230px; opacity: 0.95; }
.foot-tagline {
  margin: 16px 0 0;
  max-width: 240px;
  font-family: var(--ar-font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ar-tracking-eyebrow);
  line-height: 1.7;
  color: var(--ar-ink-on-dark-4);
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 28px;
}
.foot-cols h4 {
  font-family: var(--ar-font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ar-tracking-eyebrow);
  color: var(--ar-ink-on-dark-4);
  margin-bottom: 14px;
}
.foot-cols a, .foot-cols span {
  display: block;
  font-size: 14.5px;
  color: var(--ar-ink-on-dark-2);
  text-decoration: none;
  padding: 4px 0;
}
.foot-cols a:hover { color: var(--ar-signal-lift); }

.foot-bottom {
  margin-top: clamp(36px, 6vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--ar-hairline-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: space-between;
  align-items: baseline;
}
.foot-bottom p { font-size: 13px; color: var(--ar-ink-on-dark-4); margin: 0; }
/* No column block above it on the 404, so it needs no separating rule. */
.foot-bottom-solo { margin-top: 0; padding-top: 0; border-top: none; }
.foot-bottom .muted { max-width: 62ch; }

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .nav-inner { padding: 12px 18px; gap: 12px; }
  .nav-brand img { height: 27px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 6px 9px; font-size: 13.5px; }
  /* The in-page anchors are reachable by scrolling; at this width they cost
     the lockup its room. The product link is the one that is not.

     Both forms are named because they are the same link seen from different
     pages: the homepage writes them as "#products", while 404.html and
     /brand/ have to write "/#products" to get back to it. Matching only the
     bare "#" left those two pages showing every nav item at every width, and
     the row pushed the header wider than the viewport. */
  .nav-links a[href^="#"],
  .nav-links a[href^="/#"] { display: none; }

  .wrap { padding: 0 18px; }
  .hero h1 { max-width: none; }
  .hero-arc { bottom: -28%; opacity: 0.4; }

  .foot-top { grid-template-columns: 1fr; }
  .foot-brand img { max-width: 190px; }
}