/* ---------- hero (komprimert, to kolonner som originalen) ---------- */
  .hero {
    position: relative;
    padding: 6.8rem 0 0.5rem;
    overflow: hidden;
  }
  #tide-shader {
    position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px);
    z-index: 0; display: block;
    filter: blur(26px) saturate(1.05);
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 82%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 82%);
  }
  #tide-shader { opacity: var(--shader-opacity); }
  .hero .container { position: relative; z-index: 2; }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 1rem 3rem;
  }


  /* hero-ordet: kursiv Fraunces (egen fil, ikke i guiden) med markeringsstreken fra design/ (data-sweep) */
  .hero .display { max-width: 14ch; }
  .display em { font-style: italic; font-weight: 420; color: var(--color-text); }
  .display em[data-sweep] { font-style: italic; font-weight: 420; }

  .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.9rem; }
  /* laptop-bredder (rett over mobil-bryteren): mer plass til teksten, litt slankere knapper, så begge får plass på én rad */
  @media (min-width: 861px) and (max-width: 1100px) {
    .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
    .hero-ctas { gap: 0.75rem; }
    .hero-ctas .btn-primary, .hero-ctas .btn-ghost { padding: 0.9rem 1.2rem; }
  }

  /* rubber duck – i grid-kolonnen, som originalen */
  .duck-float {
    justify-self: end; align-self: center;
    width: clamp(220px, 28vw, 420px);
    margin-bottom: -0.5rem;
    pointer-events: none;
  }
  /* the duck is cropped at ~90% of the image height; the eased fade must end before
     that crop and before the hero's overflow clip, or a hard edge shows */
  .duck-float img {
    --duck-fade: linear-gradient(to bottom,
      black 77%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.55) 83%,
      rgba(0,0,0,0.25) 86%, rgba(0,0,0,0.08) 88%, transparent 90%);
    width: 100%; height: auto; display: block;
    mask-image: var(--duck-fade);
    -webkit-mask-image: var(--duck-fade);
    /* bobbing is driven by JS (translate/rotate); roll pivots at the waterline */
    transform-origin: 50% 88%;
    will-change: translate, rotate;
  }

  /* mobil: sentrert tekst, duck under – som originalen */
  @media (max-width: 860px) {
    .hero { padding: 5.8rem 0 0.5rem; }
    .hero-inner { grid-template-columns: 1fr; gap: 0; text-align: center; }
    .hero .display { margin-inline: auto; }
    .hero-sub { margin-inline: auto; }
    .hero-ctas { justify-content: center; }
    .duck-float {
      justify-self: center;
      width: clamp(170px, 52vw, 260px);
      margin: 0.25rem auto -1rem;
    }
  }


  /* ---------- marquee (løftet opp rett under hero/CTA) ---------- */
  .clients { padding: 5.5rem 0 2rem; position: relative; z-index: 2; }
  @media (max-width: 720px) { .clients { padding: 3rem 0 2rem; } }
  /* The edge fade is two overlays in the page colour, not a mask-image: Safari drops logos
     that slide into a masked container while the track animates */
  .marquee {
    --fade: clamp(2.5rem, 10%, 7rem);
    position: relative; overflow: hidden;
  }
  .marquee::before, .marquee::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: var(--fade); z-index: 1; pointer-events: none;
  }
  .marquee::before { left: 0; background: linear-gradient(to right, var(--color-bg), transparent); }
  .marquee::after { right: 0; background: linear-gradient(to left, var(--color-bg), transparent); }
  .marquee-track {
    display: flex; width: max-content; gap: 3.5rem; align-items: center;
  }
  .marquee-track img {
    height: 3.4rem; width: auto; object-fit: contain;
    filter: var(--logo-filter); opacity: 0.55;
    transition: opacity 0.3s, filter 0.3s;
  }
  .marquee-track img:hover { opacity: 0.9; filter: var(--logo-filter-hover); }
  @media (max-width: 720px) { .marquee-track { gap: 2.4rem; } .marquee-track img { height: 2.7rem; } }
  /* phones: the content width leaves too little room between the fades, so run edge to edge */
  @media (max-width: 720px) { .clients .marquee { width: 100%; --fade: 1.5rem; } }



  /* ---------- kort (card, card-stat, card-feature, card-link, card-wave, section-alt fra design/components.css) ---------- */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 3rem; }
  @media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
  .stat-label { margin-top: 0.7rem; font-weight: 600; }
  .card-stat .card-body { margin-top: 0.3rem; font-size: 0.94rem; }

  .bento { display: grid; gap: 1.2rem; margin-top: 3rem; grid-template-columns: repeat(6, 1fr); }
  .bento .card { grid-column: span 2; padding: 2.3rem; }
  @media (max-width: 860px) { .bento .card { grid-column: span 6; } }
  .bento .h3 { font-size: 1.45rem; font-weight: 560; }
  .bento .card-body, .values-grid .card-body { font-size: 0.98rem; }

  .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 3rem; }
  @media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }
  .paths .card-link { padding: 2.8rem 2.8rem 6rem; min-height: 330px; gap: 1rem; }
  @media (max-width: 720px) { .paths .card-link { padding: 2.2rem 1.6rem 5rem; } }
  .paths .h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.015em; }

  .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
  @media (max-width: 760px) { .values-grid { grid-template-columns: 1fr; } }