:root {
  --water: #63dbff;
  --water-soft: #e8f8ff;
  --ink: #1b4b8f;
  --bg: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

a { color: inherit; }

h1 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}

h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
  margin: 2.5rem 0 .75rem;
}

.checklist { padding-left: 1.25rem; margin: 1rem 0 1.5rem; }
.checklist li { margin-bottom: .35rem; }
.checklist li::marker { color: var(--water); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 4vw, 3rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-toggle { display: none; }

.site-header nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-header nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { border-bottom-color: var(--water); }

main {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1rem 4rem;
}

main.hero {
  max-width: none;
  padding: 0;
}

.hero-intro {
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
}

/* Bildene beholder sitt opprinnelige format. Hver rad fylles ut, og rader med
   få bilder blir høyere, så de fremhevede bildene blir større. */
.gallery {
  --gap: 4px;
  padding: 1rem clamp(1rem, 4vw, 3rem) 4rem;
}
.gallery .row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.gallery .row.last { width: calc(var(--sum) / 4.3 * 100%); max-width: 100%; }
.gallery .g {
  position: relative;
  flex: var(--r) 1 0;
  min-width: 0;
  background: var(--water-soft);
}
.gallery .g::before { content: ""; display: block; padding-bottom: calc(100% / var(--r)); }
.gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Smale skjermer: bildene brytes over flere rader */
@media (max-width: 700px) {
  .gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); }
  .gallery .row, .gallery .row.last { display: contents; }
  .gallery .g { flex: calc(var(--r) * 100) 1 calc(var(--r) * 9rem); max-width: calc(var(--r) * 16rem); }
  .gallery::after { content: ""; flex-grow: 1000000; }
}

.hero-logo { width: min(16rem, 55vw); height: auto; margin-bottom: 1.5rem; }
.lead { font-size: 1.25rem; margin: 0 0 1.5rem; }

.hero-title { max-width: 60rem; margin-bottom: .75rem; font-size: 1rem; line-height: 1.15; }
.hero-title-main { display: block; font-size: clamp(1.6rem, 4vw, 2.9rem); margin-bottom: .4rem; }
@media (min-width: 701px) { .hero-title-main { white-space: nowrap; } }
.hero-title-sub { display: block; font-size: clamp(1.2rem, 2.6vw, 1.75rem); }
.hero-sub { font-size: 1.15rem; margin-bottom: .75rem; }
.hero-arrow { display: block; margin: 0 auto 1rem; animation: arrow-bob 1.6s ease-in-out infinite; }
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.4rem); }
}
@media (prefers-reduced-motion: reduce) { .hero-arrow { animation: none; } }

.button {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: var(--water);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s;
}
@media (hover: hover) { .button:hover { transform: translateY(-2px); } }

.cards { list-style: none; padding: 0; display: grid; gap: 1rem; }
.cards a {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: var(--water-soft);
  text-decoration: none;
  transition: background .15s;
}
.cards a:hover { background: var(--water); }

/* Bli en buddy: sentrert intro, og ved scrolling eksempelkort til venstre og tekst til høyre */
main.buddy-page { max-width: none; padding: 0; }
.buddy-intro {
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  background:
    linear-gradient(rgba(20, 55, 110, .4), rgba(20, 55, 110, .55)),
    url("../assets/bakgrunn-buddy.jpg") center top / cover no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(3rem, 14vh, 8rem) 1rem 2rem;
}
.buddy-intro h1 { margin-bottom: .75rem; }
.buddy-intro .lead { margin: 0 0 1.5rem; }
.buddy-why {
  max-width: 64rem;
  margin: 0 auto;
  padding: 4rem 1rem 1rem;
}
.buddy-why h2.team-label { margin-top: 0; font-size: 1.6rem; letter-spacing: .04em; opacity: .85; }
.buddy-why-lead {
  max-width: 44rem;
  margin: 0 0 2.5rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: #2a3f5f;
}
.why-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
.why-grid li {
  border-top: 1px solid rgba(27, 75, 143, .25);
  padding: 1.5rem 0 2rem;
}
.why-grid h3 {
  margin: 0 0 .6rem;
  font-family: "Bodoni Moda", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
}
.why-grid p { margin: 0; line-height: 1.55; }
@media (max-width: 700px) {
  .why-grid { grid-template-columns: 1fr; }
}
.buddy-spotted {
  max-width: none;
  margin: 3rem 0 0;
  background: #ffcb47;
  /* innholdet holdes til 64rem, men bakgrunnen går ut til kantene */
  padding: 4rem max(1rem, calc((100% - 64rem) / 2)) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.buddy-spotted .checklist li::marker { color: var(--ink); }
.buddy-spotted .buddy-card { box-shadow: 0 .5rem 2rem rgba(27, 75, 143, .25); }
.buddy-card {
  order: 2;
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 .5rem 2rem rgba(27, 75, 143, .15);
}
.buddy-text h2 { margin-top: 0; }
@media (max-width: 700px) {
  .buddy-spotted { grid-template-columns: 1fr; }
  .buddy-card { max-width: 20rem; margin: 0 auto; }
}

/* Om oss: grunnleggere og støttespillere */
main.about { max-width: 64rem; }
.about .lead { max-width: 44rem; }

h2.team-label {
  font-style: normal;
  margin: 4rem 0 1.5rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}
.team-intro { max-width: 44rem; margin: -.5rem 0 1.5rem; }
.team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 5vw, 4rem);
}
.team-grid.founders {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
}
.founders .person-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin-bottom: 1.25rem;
  background: var(--water-soft);
}
.person-photo.placeholder { background: var(--water-soft); }
img[src$="josefine.jpg"] { object-position: 45% 50%; }
img[src$="frida.jpg"] { object-position: center 0%; }
img[src$="andrine.jpg"] { object-position: center 35%; }
img[src$="emma.jpg"] { object-position: center 18%; }
.founders .person h3 { font-size: clamp(1.1rem, 1.85vw, 1.5rem); }
@media (max-width: 900px) {
  .team-grid.founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.person {
  border-top: 1px solid rgba(27, 75, 143, .25);
  padding: 2rem 0 2.5rem;
}
.person h3 {
  margin: 0 0 .6rem;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  white-space: nowrap; /* hvert navn på én linje */
}
.person p { margin: 0; opacity: .65; }
.person .person-bio {
  margin: 1rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .85;
}
.person.support { padding: 1.5rem 0 2rem; }
.person.support h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
/* Buddy Board: kompakt navneliste */
.team-grid.board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
}
.board .person { padding: 1rem 0 1.25rem; }
.board .person h3 {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  white-space: normal;
}
@media (max-width: 900px) {
  .team-grid.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .team-grid, .team-grid.founders { grid-template-columns: 1fr; }
  .person h3 { font-size: 1.6rem; }
  /* Grunnleggerne: lite bilde til venstre, navn og tittel til høyre */
  .founders .person {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: center;
    padding: 1.25rem 0 1.5rem;
  }
  .founders .person-photo { grid-row: 1 / span 2; margin-bottom: 0; }
  .founders .person h3 { font-size: 1.35rem; margin: 0 0 .25rem; align-self: end; }
  .founders .person p { align-self: start; }
  .founders .person .person-bio { grid-column: 1 / -1; align-self: auto; margin-top: 1rem; }
}

/* Kontakt: bildeserie som glir i bakgrunnen */
main.contact-page {
  position: relative;
  max-width: none;
  padding: 0;
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-runner { position: absolute; inset: 0; }
.photo-runner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .62);
}
.photo-runner-track {
  display: flex;
  gap: 4px;
  height: 100%;
  width: max-content;
  animation: photo-runner 80s linear infinite;
}
.photo-runner-track img {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1; /* kutter bunnen av bildene (ca. 25 %) */
  object-fit: cover;
  object-position: center top;
  flex: none;
  display: block;
}
@keyframes photo-runner {
  to { transform: translateX(calc(-50% - 2px)); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-runner-track { animation: none; }
}
.contact-text {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  padding: 3rem 1rem;
  text-align: center;
  text-shadow: 0 0 .75rem rgba(255, 255, 255, .9), 0 0 .25rem rgba(255, 255, 255, .9);
}

/* Bunntekst */
.site-footer {
  background: var(--ink);
  border-top: 1rem solid #82d9fb;
  color: #fff;
  padding: 3.5rem clamp(1rem, 4vw, 3rem) 1.5rem;
  font-size: 1rem;
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
.footer-brand p { margin: 1.25rem 0 0; color: rgba(255, 255, 255, .7); }
.footer-brand img { display: block; height: auto; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.footer-col h2 {
  font-style: normal;
  margin: 0 0 .4rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}
.footer-col a { text-decoration: none; overflow-wrap: anywhere; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-icon { margin-top: .5rem; display: inline-flex; }
.footer-bottom {
  max-width: 72rem;
  margin: 3rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
}

/* Mobil: hamburgermeny og romsligere trykkflater */
@media (max-width: 700px) {
  .site-header { flex-wrap: nowrap; position: relative; padding-block: 1rem; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink);
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform .2s, opacity .2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    gap: 0;
    padding: .5rem clamp(1rem, 4vw, 3rem) 1.25rem;
    background: #fff;
    border-bottom: 1px solid rgba(27, 75, 143, .15);
    box-shadow: 0 .75rem 1.5rem rgba(27, 75, 143, .08);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a {
    padding: .9rem 0;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(27, 75, 143, .1);
  }
  .site-header nav a[aria-current="page"] { border-bottom-color: var(--water); }
}

/* Splash: logoen vises kort første gang man åpner forsiden */
#splash { display: none; }
html.splash-on #splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  background: #fff;
  cursor: pointer;
  transition: opacity .7s ease, visibility .7s;
}
html.splash-on #splash.hide { opacity: 0; visibility: hidden; }
/* Plasseres med JavaScript, oppå logoen på forsiden */
html.splash-on #splash img {
  position: absolute;
  opacity: 0;
}
html.splash-on #splash img.placed { animation: splash-logo 1.2s ease-out both; }
@keyframes splash-logo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.splash-on #splash img.placed { animation: none; opacity: 1; }
}

/* Personvernerklæring: lesbar tekstside */
main.legal h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-top: 2.25rem; }
main.legal p, main.legal li { font-size: 1rem; }
main.legal .checklist li { margin-bottom: .6rem; }
.legal-updated { font-size: .9rem; opacity: .7; margin: -.75rem 0 1rem; }

/* Bli en buddy: mystisk «Dykk dypere»-boble. Den bor i den hvite «Hvorfor bli en
   buddy?»-seksjonen: klistrer seg til toppen av skjermen mens man scroller gjennom
   seksjonen, og vokser underveis (--grow settes av js/dive.js, 1 → ca. 1.4). */
.dive-float {
  position: sticky;
  top: 1.5rem;
  z-index: 40;
  height: 0;              /* tar ikke plass, så teksten under ikke flyttes */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}
.dive-float > * { flex-shrink: 0; }
@media (max-width: 960px) {
  /* smal skjerm: teksten fyller hele bredden, så boblen ligger fast over overskriften */
  .dive-float { position: static; height: auto; margin-bottom: 1.5rem; }
}
.dive-button {
  --sky: var(--water);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.9rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--sky);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(27, 75, 143, .22);
  scale: var(--grow, 1);
  transform-origin: top right;
  transition: transform .15s, background .3s, scale .3s ease-out, opacity .3s;
}
/* «Mother!»-stil: blå kursiv som skråner litt oppover */
.dive-title {
  display: block;
  font: italic 800 1.65rem/1.1 "Bodoni Moda", Georgia, serif;
  letter-spacing: -.01em;
  transform: rotate(-6deg);
}
.dive-sub {
  display: block;
  margin-top: .35rem;
  font: italic 500 .85rem/1.2 "Bodoni Moda", Georgia, serif;
  transform: rotate(-6deg);
  opacity: .9;
}
@media (hover: hover) { .dive-button:hover { transform: translateY(-2px); } }
.dive-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dive-button.is-diving { background: #3cc4f0; }
/* ingen plass ved siden av teksten: liten og gjennomsiktig til den er forbi */
.dive-button.is-shy { opacity: .35; }
@media (hover: hover) { .dive-button.is-shy:hover { opacity: 1; } }

.dive-bubbles { position: absolute; inset: 0; pointer-events: none; }
.dive-bubbles i {
  position: absolute;
  bottom: -12px;
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(27, 75, 143, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  animation: dive-rise 3.2s ease-in infinite;
}
.dive-bubbles i:nth-child(1) { left: 12%; animation-delay: 0s; }
.dive-bubbles i:nth-child(2) { left: 32%; width: 5px; height: 5px; animation-delay: 1.1s; }
.dive-bubbles i:nth-child(3) { left: 55%; animation-delay: 2s; }
.dive-bubbles i:nth-child(4) { left: 74%; width: 6px; height: 6px; animation-delay: .6s; }
.dive-bubbles i:nth-child(5) { left: 90%; width: 4px; height: 4px; animation-delay: 1.6s; }
@keyframes dive-rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-4.5rem) scale(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dive-bubbles { display: none; }
  .dive-button { scale: 1; }
}

/* Stup uti: påmelding med e-post */
.signup-form { margin-top: 2rem; }
.signup-form > label[for] { display: block; font-weight: 700; margin-bottom: .4rem; }
.signup-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.signup-row input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .75rem 1.1rem;
  border: 2px solid var(--water);
  border-radius: 999px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
}
.signup-row input:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.signup-row .button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.signup-consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-size: .95rem; }
.signup-consent input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--ink); flex: none; }
.form-status { min-height: 1.6em; margin-top: 1rem; font-weight: 700; }
.form-status.is-error { color: #b3261e; }
.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Påmelding: bildemosaikk bak kortet */
main.signup-page {
  position: relative;
  max-width: none;
  padding: 4rem 1rem 5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}
.signup-mosaic {
  position: absolute;
  inset: -2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: .5rem;
  transform: rotate(-4deg) scale(1.08);
}
.signup-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: .75rem; }
.signup-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(27, 75, 143, .35), rgba(27, 75, 143, .65));
}
.signup-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  padding: 2.5rem 2rem 1.5rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1.5rem 3rem rgba(10, 30, 60, .35);
}
.signup-card h1 { font-size: clamp(2rem, 5vw, 3rem); }
.signup-kicker {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2a8fb8;
}
.signup-card .signup-form { margin-top: 1.5rem; }
@media (max-width: 40rem) {
  main.signup-page { padding: 4rem 1rem 4.5rem; }
  .signup-mosaic { grid-template-columns: repeat(2, 1fr); }
  .signup-card { padding: 2rem 1.25rem 1rem; }
}

/* Plask-overgang (js/plask.js): et mørkt dyp toner inn og glir litt opp når man synker,
   og toner ut oppover når man kommer opp igjen. Laget er bare én skjerm høyt og animeres
   kun med opacity og transform, så det går jevnt også på mobil. */
.plask { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.plask-down { pointer-events: auto; }
.plask-water,
.plask-arrive body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -10vh;
  height: 120vh;      /* luft over og under, så adressefeltet på mobil ikke avslører kanten */
  height: 120lvh;
  background: linear-gradient(180deg, #1a4a8c 0%, #0b2550 45%, #050f26 100%);
  opacity: 0;
  will-change: opacity, transform;
}
.plask-water { animation: plask-sink 1s cubic-bezier(.65, 0, .35, 1) forwards; }
/* står mørkt til siden er ferdig lastet, så starter js/plask.js oppstigningen (.plask-go) */
.plask-arrive body::after { z-index: 999; pointer-events: none; opacity: 1; }
.plask-go body::after { animation: plask-surface 1.2s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes plask-sink {
  from { opacity: 0; transform: translateY(6%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes plask-surface {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6%); }
}

/* lysprikker som driver sakte oppover (myk kant uten filter, det er tungt på mobil) */
.plask i {
  position: absolute;
  bottom: -2rem;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  will-change: transform, opacity;
  animation: plask-drift 2s cubic-bezier(.25, .1, .25, 1) forwards;
}
@keyframes plask-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  30%  { opacity: .7; }
  100% { transform: translate(var(--sway), -70vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plask-arrive body::after { display: none; }
}

/* FAQ: still et spørsmål (sendes til Brevo via js/brevo-form.js) */
.question-form {
  margin-top: 2.5rem;
  padding: 1.75rem 1.5rem 1rem;
  border-radius: 1.25rem;
  background: var(--water-soft);
}
.question-form h2 { margin: 0 0 1rem; }
.question-form textarea,
.question-form input[type="email"] {
  display: block;
  width: 100%;
  padding: .75rem 1.1rem;
  border: 2px solid var(--water);
  border-radius: 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
}
.question-form textarea { resize: vertical; min-height: 7rem; }
.question-form input[type="email"] { border-radius: 999px; }
.question-form textarea:focus,
.question-form input[type="email"]:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.question-form .button { margin-top: 1rem; border: 0; font: inherit; font-weight: 700; cursor: pointer; }