/* Vardøger — one page, dark, self-hosted fonts (SIL OFL, see fonts/). */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0b1a2e;
  --bg-2: #0f2440;
  --card: #12294a;
  --edge: #24406a;
  --text: #e8eef5;
  --muted: #a9b8cb;
  --orange: #e8743b;
  --cyan: #6de1fa;
  --max: 64rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background-color: var(--bg); }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg-2) 0, var(--bg) 40rem) no-repeat;
  background-color: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--cyan); text-underline-offset: 0.2em; }
a:hover { color: #a9f0ff; }
a:focus-visible, .skip:focus { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--orange);
  color: #10131a;
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; }

/* Hero: the offshore scene behind the text (the wide one on wide
   screens, the portrait one on phones), darkened where the text sits and
   faded into the page at the bottom. Decorative: the text says it all. */
.hero {
  display: flex;
  align-items: center;
  /* The scene behind the text at every width: its own 3:1 shape on wide
     screens; narrower, it keeps its height and is cut at the left (calm
     sea), so the vessel and the turbine stay in view at the right. */
  min-height: max(33.4vw, 34rem);
  background:
    linear-gradient(180deg, rgba(11, 26, 46, 0) 80%, var(--bg) 100%),
    linear-gradient(90deg, rgba(11, 26, 46, 0.92) 0%, rgba(11, 26, 46, 0.75) 30rem,
      rgba(11, 26, 46, 0.2) 46rem, rgba(11, 26, 46, 0) 56rem),
    url("../images/scene.jpg") right center / cover no-repeat;
  background-color: var(--bg);
}
/* The text over the calm sea on the left, clear of the scene. */
/* A grid: the badge and the buttons line up with the text; the logo
   spans from the top of the wordmark down to the slogan. */
.hero .hero-text {
  display: grid;
  grid-template-columns: auto minmax(0, 44rem);
  grid-template-areas: ". badge" "logo titles" ". actions";
  justify-content: start;
  column-gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: start;
  margin: 0;
  max-width: none;
  /* A little below the middle: the aurora keeps the top. */
  padding: 5rem 1.5rem 2rem max(1.5rem, 3vw);
}
.hero-text .badge { grid-area: badge; justify-self: start; }
.hero-text .titles { grid-area: titles; }
.hero-text .actions { grid-area: actions; }
/* From the top of the wordmark to the slogan. */
.logo {
  grid-area: logo;
  /* About as tall as the wordmark, tagline and line beside it. */
  width: clamp(7rem, 9vw, 10rem);
  height: auto;
  margin-top: 0.35rem;
}
.wordmark {
  margin: 0;
  font: 700 clamp(2.75rem, 7vw, 4.5rem)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
}
.tagline {
  margin: 0.5rem 0 0;
  color: var(--cyan);
  font-size: clamp(1.125rem, 2.4vw, 1.4rem);
}
.line { margin: 0.4rem 0 0; color: var(--muted); }
.slogan {
  margin: 0.9rem 0 0;
  color: var(--orange);
  font: 500 1.125rem/1.4 "Space Grotesk", sans-serif;
}

/* Sections */
main section { padding: 2.5rem 0 0.5rem; }
h2 {
  margin: 0 0 1rem;
  font: 500 1.6rem/1.2 "Space Grotesk", sans-serif;
}
h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--orange);
  border-radius: 2px;
}
.lead { font-size: 1.125rem; max-width: 46rem; }
main p { max-width: 46rem; }

/* The bar at the top once the hero has scrolled away. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem max(1.25rem, 3vw);
  background: rgba(11, 26, 46, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
  transition: transform 0.25s ease;
}
.js .topbar:not(.shown) { transform: translateY(-110%); }
.topbar .home {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font: 700 1.8rem/1 "Space Grotesk", sans-serif;
}
/* At least as tall as the "Get in touch" button beside it (≈ 2.4rem). */
.topbar .home img { width: 2.6rem; height: 2.6rem; }
.button.small { padding: 0.4rem 0.95rem; font-size: 0.95rem; border-radius: 8px; }
/* Jump targets clear of the bar. */
main section, #top { scroll-margin-top: 4.5rem; }

/* Badge, buttons */
.badge {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.25rem 0.9rem;
  border: 1px solid var(--orange);
  border-radius: 999px;
  color: var(--orange);
  font-size: 1rem; /* as the line under the tagline */
  font-weight: 600;
  letter-spacing: 0.03em;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.4rem 0 0;
}
.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: var(--orange);
  color: #10131a;
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: #f08a55; color: #10131a; }
.button.big { font-size: 1.15rem; padding: 0.85rem 1.8rem; }
.button .mail { vertical-align: -0.28em; margin-right: 0.55rem; }
.more { color: var(--cyan); text-decoration: none; }
.more:hover { text-decoration: underline; }

.links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* footer.wrap: the general .wrap rule (margin 0 auto, padding 0) would
   otherwise win over the footer's spacing. */
/* The paper line under "What's coming": quieter than the text above. */
.paper { color: var(--muted); }
.paper cite { font-style: italic; }

footer.wrap {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--edge);
  color: var(--muted);
}
footer p { margin: 0.2rem 0; }

html { scroll-behavior: smooth; }

/* Below 1600 px (half screens, laptops, tablets, phones) the text would
   cover the platform or the vessel: the whole scene becomes a banner
   above it instead. */
@media (max-width: 100rem) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: 33.4vw;
    background:
      linear-gradient(180deg, rgba(11, 26, 46, 0) calc(33.4vw - 3rem), var(--bg) 33.4vw),
      url("../images/scene.jpg") center top / 100% auto no-repeat;
    background-color: var(--bg);
  }
  .hero .hero-text { padding-top: 1.75rem; padding-bottom: 0.5rem; }
}


/* Phones: a taller crop of the scene (the vessel, crane and twin, not a
   thin strip), then the badge, the logo beside the wordmark and its lines,
   the button, and the two links under it. */
@media (max-width: 40rem) {
  .hero {
    padding-top: 15rem;
    background:
      linear-gradient(180deg, rgba(11, 26, 46, 0) 11rem, var(--bg) 15rem),
      url("../images/scene.jpg") right top / auto 15rem no-repeat;
    background-color: var(--bg);
  }
  .hero .hero-text {
    /* The logo with the badge beside it, then the text at full width; the
       logo column as wide as the logo, so the badge sits right next to it
       (the text below spans both columns and would widen an auto one). */
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas: "logo badge" "titles titles" "actions actions";
    column-gap: 0.9rem;
    row-gap: 0.6rem;
    padding: 0.5rem 1.25rem 0.5rem;
  }
  .logo { width: 4.5rem; margin-top: 0; }
  .hero-text .badge { align-self: center; margin: 0; }
  .wordmark { font-size: 2.6rem; }
  .tagline { font-size: 1.05rem; }
  .actions { gap: 0.6rem 1.25rem; }
  .actions .button { flex: 0 0 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topbar { transition: none; }
}