/* ===================== FONTS ===================== */
/* Self-hosted Montserrat (variable, latin). Served from our own domain so it
   can't be blocked by content/privacy filters, and uses a UNIQUE family name
   so a different "Montserrat" installed locally can never shadow it. */
@font-face {
  font-family: 'Montserrat NC';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/montserrat-var.woff2') format('woff2');
}

/* ===================== BASE ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat NC', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  background: #000;
  letter-spacing: -0.05em;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* better mobile viewport handling */
  min-height: 600px;
  background: url('assets/hero.jpg') center / cover no-repeat;
  overflow: hidden;
}

/* subtle darkening so white text stays legible on bright snow */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.05) 65%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

/* --- top bar: words (left) + brand (right) on one line --- */
.hero__top {
  position: absolute;
  top: clamp(1rem, 2.2vw, 1.5rem);
  left: clamp(1.75rem, 4vw, 3rem);
  right: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
}

.hero__words {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 2vw, 2.25rem);
}

.hero__words a {
  font-size: clamp(0.62rem, 1.2vw, 19px);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.25s ease;
  color: inherit;
  text-decoration: none;
}

.hero__words a:hover {
  opacity: 1;
}

.hero__brand {
  font-size: clamp(0.95rem, 1.8vw, 1.8rem);
  font-weight: 700;
  white-space: nowrap;
}

/* --- bottom-left: tagline --- */
.hero__tagline {
  position: absolute;
  bottom: clamp(1.75rem, 4vw, 3rem);
  left: clamp(1.75rem, 4vw, 3rem);
  font-size: clamp(2.5rem, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.07em;
  z-index: 2;
}

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

/* Narrow screens (phones): drop the nav links, keep only the logo + tagline */
@media (max-width: 768px) {
  .hero__words {
    display: none;
  }
}

/* ===================== SECTION 2 (white) ===================== */
.panel {
  width: 100%;
  min-height: 68vh;
  min-height: 68svh;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(2rem, 6vw, 6rem);
}

.panel__content {
  max-width: 760px;
  text-align: right;
}

.panel__headline {
  font-size: clamp(2.5rem, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.07em;
  text-align: right;
}

.panel__text {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  margin-left: auto;
  max-width: 34ch;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: right;
}

/* left-aligned variant of the white panel */
.panel--left {
  justify-content: flex-start;
}

.panel--left .panel__content,
.panel--left .panel__headline,
.panel--left .panel__text {
  text-align: left;
}

.panel--left .panel__text {
  margin-left: 0;
  margin-right: auto;
}

/* ===================== SECTION 3 (full image) ===================== */
.image-section {
  position: relative;
  width: 100%;
  height: 80vh;
  height: 80svh;
  min-height: 520px;
  background: url('assets/independence.jpg') right center / cover no-repeat;
}

.image-section--appl {
  background: url('assets/applications.jpg') center / cover no-repeat;
}

.image-section__content {
  position: absolute;
  bottom: clamp(4rem, 12vh, 8rem);
  left: clamp(1.75rem, 4vw, 3rem);
  right: clamp(1.75rem, 4vw, 3rem);
  max-width: 40ch;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.image-section__headline {
  font-size: clamp(2.5rem, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.07em;
}

.image-section__text {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 34ch;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
}

/* Short landscape viewports (small laptops like 1366×768 — and shorter still
   under Windows 125%/150% display scaling, common on HP laptops). The longer
   Applications copy is bottom-anchored and grows upward, so on a short screen
   it can outgrow the image and push the "In every phone" heading up out of the
   section. Pull the block tighter to the bottom and ease the copy size so it
   fits. Scoped to >640px so phones are untouched, and to short heights so Macs
   and desktop monitors (taller viewports) are unaffected. */
@media (min-width: 641px) and (max-height: 800px) {
  .image-section__content {
    bottom: clamp(1.5rem, 5vh, 3rem);
  }
  .image-section--appl .image-section__text {
    font-size: 1.05rem;
    margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  }
}

/* ===================== SECTION 6 (white — Team) ===================== */
.team {
  width: 100%;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 4vw, 3rem) 0;
}

.team__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.team__headline {
  font-size: clamp(2.5rem, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.07em;
  margin: 0;
  text-align: left;
}

.team__grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.team__member {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Henry left, Eliina centre, Marie right — captions always centered under their photo */
.team__member--left {
  align-items: flex-start;
}

.team__member--center {
  align-items: center;
}

.team__member--right {
  align-items: flex-end;
}

.team__photo {
  width: 100%;
  max-width: 310px;
  aspect-ratio: 1 / 1;
  background: #e9e9e9;
  border-radius: 4px;
  overflow: hidden;
}

.team__caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  padding-top: 0.95rem;
  width: 100%;
  max-width: 310px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}

.team__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.team__name {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  color: #000;
}

.team__role {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 400;
  color: #000;
}

.team__linkedin {
  flex-shrink: 0;
  display: inline-flex;
  color: #000;
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

.team__linkedin:hover {
  opacity: 1;
}

.team__linkedin svg {
  width: 22px;
  height: 22px;
  display: block;
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
}

@media (max-width: 640px) {
  /* Hero: lock height to the stable small-viewport unit so the address bar
     collapsing on scroll can't grow the box and rescale (zoom) the image */
  .hero {
    height: 100svh;
    min-height: 100svh;
    background-position: center;
    background-size: cover;
  }
  /* Independence image: frame the centre-right (the climber), a touch more
     zoom and framed slightly lower */
  .image-section:not(.image-section--appl) {
    background-position: 72% 55%;
    background-size: auto 116%;
  }

  /* Readability scrim: soft dark gradient under the bottom text so white copy
     stays legible over bright areas (the climber, the white moon) */
  .image-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.32) 38%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 0;
  }
  .image-section__content {
    z-index: 1;
  }
  /* Narrow screens: ease back the body copy size, headings unchanged */
  .panel__text,
  .image-section__text {
    font-size: 1rem;
  }
  .team {
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }
  .team__grid {
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 11vw, 4.5rem);
  }
  .team__member--left,
  .team__member--right {
    align-items: center;
    text-align: center;
  }
  /* Stacked: captions back in normal flow so they don't overlap the next photo */
  .team__caption {
    position: static;
    padding-top: 0.85rem;
  }
}

/* ===================== SECTION 7 (white — end image) ===================== */
.endscreen {
  position: relative;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.endscreen__img {
  width: 100%;
  height: auto;
  display: block;
}

.endscreen__cta {
  position: absolute;
  bottom: clamp(1.75rem, 5vw, 4rem);
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  font-size: clamp(2.5rem, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.07em;
  white-space: nowrap;
  text-decoration: none;
}

/* ===================== MOBILE ===================== */