/* ============================================================
   Hansa — design tokens and site styles
   CSS custom properties below are the canonical brand tokens.
   Reference these in the app (or mirror them in Tailwind config)
   to keep colours and type consistent across web and app.
   ============================================================ */

:root {
  /* Colour palette */
  --ink:          #0D1722;
  --navy:         #1B3A5C;
  --sea-back:     #17304B;
  --sea-mid:      #11243A;
  --sea-front:    #0B1626;
  --stone:        #F5F6F8;
  --stone-dim:    rgba(245, 246, 248, .62);
  --terra:        #B5451B;
  --terra-lt:     #D4623A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--stone);
  font-family: "Jost", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 64% 54%, #182C44 0%, rgba(24, 44, 68, 0) 60%),
    linear-gradient(180deg, #11202F 0%, #0D1722 55%, #0A111B 100%);
}

/* ---------- Scene ---------- */
svg.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: sceneIn 1.8s ease-out both;
}
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }

.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(92deg, rgba(13, 23, 34, .92) 0%, rgba(13, 23, 34, .6) 34%, rgba(13, 23, 34, 0) 62%),
    linear-gradient(180deg, rgba(13, 23, 34, .5) 0%, rgba(13, 23, 34, 0) 22%, rgba(13, 23, 34, 0) 78%, rgba(10, 17, 27, .7) 100%);
}

/* ---------- Nav ---------- */
nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 6vw;
}
.wordmark { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--stone); }
.wordmark svg { width: 30px; height: 30px; display: block; }
.wordmark span { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.5rem; letter-spacing: .04em; }

/* ---------- Compass (decorative) ---------- */
svg.scene * { pointer-events: none; }
.tick { transition: stroke .3s, stroke-opacity .3s, stroke-width .3s; }
#sweep { opacity: .7; }

/* ---------- Nav links ---------- */
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  color: var(--stone-dim);
  text-decoration: none;
  font-family: "Jost", sans-serif;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .4em; text-transform: uppercase;
  transition: color .25s;
}
.nav-links a:hover { color: var(--stone); }

/* ---------- Copy ---------- */
.copy {
  position: relative; z-index: 4;
  max-width: 620px;
  padding: 0 6vw;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
}
.copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.copy > *:nth-child(1) { animation-delay: .15s; }
.copy > *:nth-child(2) { animation-delay: .3s; }
.copy > *:nth-child(3) { animation-delay: .45s; }
.copy > *:nth-child(4) { animation-delay: .6s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.eyebrow {
  font-family: "Jost", sans-serif;
  font-weight: 500; font-size: .72rem;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--terra-lt);
}
h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.7rem, 5.6vw, 4.6rem);
  line-height: 1.04; letter-spacing: .01em;
}
.sub {
  color: var(--stone-dim); font-weight: 300; font-size: 1.1rem; line-height: 1.65; max-width: 46ch;
}
.cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.btn {
  background: var(--terra); color: #FFFFFF; text-decoration: none;
  font-family: "Jost", sans-serif; font-weight: 500; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 28px;
  transition: background .25s, transform .25s;
}
.btn:hover { background: var(--terra-lt); transform: translateY(-2px); }
.ghost {
  color: var(--stone); text-decoration: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(245, 246, 248, .3); padding-bottom: 4px;
  transition: border-color .25s, color .25s;
}
.ghost:hover { border-color: var(--terra-lt); color: var(--terra-lt); }

.coords {
  position: absolute; right: 6vw; bottom: 26px; z-index: 4;
  font-family: "Jost", sans-serif; font-size: .68rem; letter-spacing: .22em;
  color: rgba(245, 246, 248, .38);
}

/* ---------- SVG animations ---------- */
.wave-anim { animation: drift linear infinite; }
.w1 .wave-anim { animation-duration: 30s; }
.w2 .wave-anim { animation-duration: 21s; animation-delay: -8s; }
.w3 .wave-anim { animation-duration: 14s; animation-delay: -3s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-320px); } }

.bob {
  animation: bob 7s ease-in-out infinite;
  transform-box: fill-box; transform-origin: 50% 80%;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(.8deg); }
  50%       { transform: translateY(-7px) rotate(-1.3deg); }
}

.pennant {
  animation: flutter 1.9s ease-in-out infinite;
  transform-box: fill-box; transform-origin: left center;
}
@keyframes flutter {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(.86) scaleY(1.12); }
}

.star { animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: .12; }
  50%       { opacity: .6; }
}

.course {
  stroke-dasharray: .1 13; stroke-linecap: round;
  animation: dashDrift 12s linear infinite;
}
@keyframes dashDrift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -131; } }

.marker { animation: blip 12s ease-in-out infinite; opacity: 0; }
.marker.m2 { animation-delay: 4s; }
.marker.m3 { animation-delay: 8s; }
@keyframes blip {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  26%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; }
}
.ping {
  animation: ping 12s linear infinite;
  transform-box: fill-box; transform-origin: center; opacity: 0;
}
.m2 .ping { animation-delay: 4s; }
.m3 .ping { animation-delay: 8s; }
@keyframes ping {
  0%   { transform: scale(.6);  opacity: .8; }
  9%   { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .copy { justify-content: flex-end; padding-bottom: 18vh; max-width: 100%; }
  .coords { display: none; }

  /* Tighten the nav so the wordmark and links fit a phone width */
  nav { padding: 20px 5vw; }
  .wordmark { gap: 10px; }
  .wordmark svg { width: 26px; height: 26px; }
  .wordmark span { font-size: 1.25rem; }
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: .64rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 17, 27, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--navy);
  border: 1px solid rgba(245, 246, 248, .12);
  padding: 3rem;
  max-width: 440px; width: 90%;
  position: relative;
}
.modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: none; cursor: pointer;
  color: var(--stone-dim); font-size: 1.4rem; line-height: 1;
  padding: 0;
}
.modal-close:hover { color: var(--stone); }
.modal-box h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem; font-weight: 600;
  margin-bottom: .5rem;
}
.modal-sub { color: var(--stone-dim); margin-bottom: 1.5rem; line-height: 1.6; }
.modal-form { display: flex; flex-direction: column; gap: 1rem; }
.modal-form input[type="email"] {
  background: rgba(245, 246, 248, .06);
  border: 1px solid rgba(245, 246, 248, .18);
  color: var(--stone);
  font-family: "Jost", sans-serif; font-size: .9rem;
  padding: 13px 16px; width: 100%;
  outline: none;
}
.modal-form input[type="email"]::placeholder { color: rgba(245, 246, 248, .38); }
.modal-form input[type="email"]:focus { border-color: var(--terra-lt); }
.modal-error { color: var(--terra-lt); font-size: .8rem; margin: 0; }
.modal-success-msg {
  color: var(--stone);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem; font-weight: 500;
  text-align: center; padding: 2rem 0;
}

/* ============================================================
   Interior pages (Platform · Intelligence)
   ============================================================ */
.subpage {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 760px at 82% -12%, #182C44 0%, rgba(24, 44, 68, 0) 58%),
    linear-gradient(180deg, #11202F 0%, #0D1722 58%, #0A111B 100%);
}

/* nav sits in the flow on interior pages rather than over a hero */
.subpage nav {
  position: relative;
  border-bottom: 1px solid rgba(245, 246, 248, .08);
}
.subpage .nav-links a.active { color: var(--stone); }

.page-main { flex: 1 0 auto; }

.page-head {
  max-width: 1120px; margin: 0 auto;
  padding: 9vh 6vw 4vh;
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
.page-head .eyebrow { margin-bottom: 1.1rem; }
.page-head h1 {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.05; letter-spacing: .01em;
  max-width: 17ch;
}
.page-head .lead {
  color: var(--stone-dim); font-weight: 300;
  font-size: 1.18rem; line-height: 1.7; max-width: 56ch; margin-top: 1.5rem;
}

.section { max-width: 1120px; margin: 0 auto; padding: 4vh 6vw; }
.section-title {
  font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 600;
  margin-bottom: .5rem;
}
.section-intro {
  color: var(--stone-dim); max-width: 62ch; line-height: 1.7; margin-bottom: 2.4rem;
}

/* ---------- Alternating spreads ---------- */
.spreads { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }
.spread {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding: clamp(3.5rem, 8vh, 6.5rem) 0;
  border-top: 1px solid rgba(245, 246, 248, .09);
}
.spread:first-child { border-top: none; }

/* swap sides on every second spread for the zig-zag */
.spread:nth-child(even) .spread-figure { order: 2; }
.spread:nth-child(even) .spread-body   { order: 1; }

.spread-figure {
  position: relative;
  width: 100%; max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid; place-items: center;
}
.chart-mark { width: 100%; height: 100%; display: block; overflow: visible; opacity: .62; }
.mark-rot { transform-origin: 100px 100px; }
.spread-num {
  position: absolute;
  font-family: "Cormorant Garamond", serif; font-weight: 500;
  font-size: clamp(3.2rem, 6.5vw, 4.8rem); letter-spacing: .02em;
  color: var(--stone);
}

.spread-index {
  font-family: "Jost", sans-serif; font-size: .68rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--terra-lt);
  margin-bottom: 1rem;
}
.spread-body h3 {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.1; margin-bottom: 1rem;
}
.spread-body p { color: var(--stone-dim); font-size: 1.02rem; line-height: 1.7; max-width: 44ch; }

.pill-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.pill {
  border: 1px solid rgba(245, 246, 248, .16);
  padding: .75rem 1.4rem; font-size: .78rem; letter-spacing: .1em;
  color: var(--stone-dim);
}

/* CTA band */
.cta-band { border-top: 1px solid rgba(245, 246, 248, .1); margin-top: 4vh; }
.cta-band .inner {
  max-width: 1120px; margin: 0 auto; padding: 7vh 6vw;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem;
}
.cta-band h2 {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
}
.cta-band p { color: var(--stone-dim); max-width: 48ch; line-height: 1.65; }

/* ---------- Footer menu ---------- */
.site-footer {
  position: relative; z-index: 4;
  border-top: 1px solid rgba(245, 246, 248, .1);
  background: rgba(10, 17, 27, .55);
}
.foot-inner {
  max-width: 1180px; margin: 0 auto; padding: 6vh 6vw 3vh;
  display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(2rem, 5vw, 4rem);
}
.foot-brand .wordmark { margin-bottom: 1.1rem; }
.foot-brand .wordmark svg { width: 28px; height: 28px; }
.foot-tag {
  color: var(--stone-dim); font-family: "Jost", sans-serif;
  font-size: .92rem; font-weight: 300; line-height: 1.65; max-width: 34ch;
}
.foot-cols { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 0; }
.foot-col h4 {
  font-family: "Jost", sans-serif; font-size: .66rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 1.1rem;
}
.foot-col a {
  display: block; color: var(--stone-dim); text-decoration: none;
  font-family: "Jost", sans-serif; font-size: .88rem; line-height: 1.2;
  padding: .42rem 0; transition: color .2s;
}
.foot-col a:hover { color: var(--terra-lt); }
.foot-base {
  max-width: 1180px; margin: 0 auto; padding: 1.6rem 6vw 3vh;
  border-top: 1px solid rgba(245, 246, 248, .07);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem;
  color: rgba(245, 246, 248, .4);
  font-family: "Jost", sans-serif; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Legal / prose pages ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 8vh 6vw 5vh; }
.legal .eyebrow { margin-bottom: 1rem; }
.legal h1 {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.06; letter-spacing: .01em;
}
.legal-meta {
  color: var(--stone-dim); font-family: "Jost", sans-serif;
  font-size: .78rem; letter-spacing: .08em; margin-top: 1.2rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid rgba(245, 246, 248, .12);
}
.legal-intro { color: var(--stone-dim); font-size: 1.08rem; line-height: 1.75; margin: 2rem 0; }
.legal h2 {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: 1.55rem; color: var(--stone); margin: 2.8rem 0 .8rem;
}
.legal h3 {
  font-family: "Jost", sans-serif; font-weight: 500; font-size: .95rem;
  letter-spacing: .02em; color: var(--stone); margin: 1.7rem 0 .5rem;
}
.legal p, .legal li { color: var(--stone-dim); font-size: 1rem; line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul, .legal ol { margin: 0 0 1.1rem 1.25rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--terra-lt); text-decoration: none; border-bottom: 1px solid rgba(212, 98, 58, .4); }
.legal a:hover { color: var(--stone); border-color: var(--stone); }
.legal strong { color: var(--stone); font-weight: 500; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: .88rem; }
.legal th, .legal td {
  text-align: left; padding: .7rem .85rem;
  border: 1px solid rgba(245, 246, 248, .12); color: var(--stone-dim); vertical-align: top; line-height: 1.55;
}
.legal th {
  color: var(--stone); font-family: "Jost", sans-serif; font-weight: 500;
  letter-spacing: .04em; background: rgba(245, 246, 248, .03);
}
.legal-toc {
  display: block;
  border: 1px solid rgba(245, 246, 248, .1); background: rgba(245, 246, 248, .02);
  padding: 1.4rem 1.6rem; margin: 2rem 0; columns: 2; column-gap: 2rem;
}
.legal-toc a {
  display: block; color: var(--stone-dim); text-decoration: none;
  font-size: .88rem; padding: .35rem 0; border: none;
}
.legal-toc a:hover { color: var(--terra-lt); }

@media (max-width: 760px) {
  .page-head { padding: 6vh 5vw 3vh; }
  .section { padding: 3vh 5vw; }
  .cta-band .inner { padding: 6vh 5vw; }

  .spreads { padding: 0 5vw; }
  .spread {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 2.6rem 0;
  }
  /* keep figure above text on every spread when stacked */
  .spread:nth-child(even) .spread-figure,
  .spread:nth-child(even) .spread-body { order: 0; }
  .spread-figure { max-width: 132px; margin: 0; }
  .spread-num { font-size: 2.6rem; }

  .foot-inner { grid-template-columns: 1fr; gap: 2.4rem; padding: 6vh 5vw 2vh; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
  .foot-base { padding: 1.6rem 5vw 3vh; }
  .legal { padding: 6vh 5vw 4vh; }
  .legal-toc { columns: 1; }
}