/* =========================================================================
   Momentum — Referencer (realiserede cases)
   Editorial alternating list with 1:1 video walkthroughs.
   ========================================================================= */

/* -------- Page hero -------- */
.refp-hero {
  position: relative;
  min-height: 73vh;
  background: var(--bjg-forest);
  color: var(--bjg-cream);
  overflow: hidden;
  display: grid;
  grid-template-rows: 96px 1fr;
}
.refp-hero__bg {
  position: absolute; inset: 0;
  background-image: url('assets/images/family-office-dark.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  transform: scale(1.04);
}
.refp-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(34,34,34,0.55) 0%,
      rgba(34,34,34,0.40) 40%,
      rgba(34,34,34,0.85) 100%
    );
}
.refp-hero__center {
  position: relative;
  z-index: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}
.refp-hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 16px;
}
.refp-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7;
}
.refp-hero__title {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.refp-hero__title em { font-style: italic; opacity: 0.78; }
.refp-hero__lede {
  margin-top: 36px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(245,241,237,0.80);
  max-width: 58ch;
}
.refp-hero__meta {
  position: relative;
  z-index: 2;
  grid-row: 3;
  display: flex; align-items: end; justify-content: space-between;
  padding: 0 var(--gutter) 36px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  gap: 24px;
  color: rgba(245,241,237,0.7);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.refp-hero__meta-r { display: flex; gap: 48px; }
.refp-hero__meta-r span strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: none;
  margin-top: 8px;
  line-height: 1;
}

/* -------- Filter strip -------- */
.refp-filters {
  position: sticky;
  top: 84px;
  z-index: 50;
  border-bottom: 1px solid var(--bjg-rule);
  border-top: 1px solid var(--bjg-rule);
  background: rgba(245,241,237,0.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.refp-filters__inner {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
  gap: 24px;
}
.refp-filters__count {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bjg-graphite);
  display: inline-flex; align-items: baseline; gap: 10px;
}
.refp-filters__count strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--bjg-forest);
  letter-spacing: -0.005em;
}
.refp-filters__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.refp-pill {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--bjg-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--bjg-graphite);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out);
}
.refp-pill:hover { color: var(--bjg-forest); border-color: rgba(34,46,78,0.35); }
.refp-pill.is-active {
  background: var(--bjg-forest);
  color: var(--bjg-cream);
  border-color: var(--bjg-forest);
}

@media (max-width: 760px) {
  .refp-filters__inner { flex-direction: column; align-items: stretch; min-height: 0; padding: 14px var(--gutter); }
  .refp-filters__count { position: static; transform: none; }
}

/* -------- The case list -------- */
.refp-list {
  background: var(--bjg-cream);
  padding: clamp(64px, 9vh, 120px) 0 clamp(120px, 16vh, 200px);
}
.refp-list__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.refp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 2.6vw, 44px);
}

/* -------- Single card -------- */
.refp-card {
  display: flex;
  flex-direction: column;
  background: var(--bjg-bone);
  border-radius: 4px;
  overflow: hidden;
}

/* Video tile — 1:1 (button) */
.refp-video {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: var(--bjg-forest);
  cursor: pointer;
  isolation: isolate;
  transition: transform 500ms var(--ease-out);
}
.refp-video__poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1200ms var(--ease-out), filter 500ms var(--ease-out);
  filter: brightness(0.94);
}
.refp-video:hover .refp-video__poster {
  transform: scale(1.04);
  filter: brightness(1);
}
.refp-video::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(34,34,34,0.30) 0%, rgba(34,34,34,0) 28%),
    linear-gradient(180deg, rgba(34,34,34,0) 55%, rgba(34,34,34,0.60) 100%);
  z-index: 1;
  pointer-events: none;
}
.refp-video__chrome {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2vw, 26px);
  color: #fff;
}
.refp-video__tl {
  display: flex; justify-content: space-between; align-items: start;
  gap: 16px;
}
.refp-video__chip {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  background: var(--bjg-forest);
  color: var(--bjg-cream);
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(34,46,78,0.30);
}
.refp-video__length {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(34,46,78,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 11px;
  border-radius: 4px;
}
.refp-video__play-wrap {
  align-self: center;
  justify-self: center;
}
.refp-video__play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(245,241,237,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.40);
  display: grid; place-items: center;
  color: var(--bjg-forest);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  position: relative;
}
.refp-video:hover .refp-video__play { transform: scale(1.05); background: #fff; }
.refp-video__play svg { transform: translateX(2px); }
.refp-video__bl {
  display: flex; align-items: center; justify-content: flex-end;
}
.refp-video__hint {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.refp-video:hover .refp-video__hint { opacity: 1; transform: translateY(0); }

/* Card body */
.refp-card__body {
  background: var(--bjg-bone);
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px) clamp(32px, 4.4vw, 44px);
  display: flex; flex-direction: column;
  flex: 1;
  border-radius: 0 0 4px 4px;
}
.refp-card__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.014em;
  color: var(--bjg-forest);
  margin: 0 0 18px;
  text-wrap: balance;
}
.refp-card__summary {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--bjg-graphite);
  margin: 0;
}
.refp-card__divider {
  height: 1px;
  background: var(--bjg-rule);
  margin: clamp(24px, 2.4vw, 32px) 0;
}

/* Facts list — "Label value" rows */
.refp-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.refp-facts__row {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bjg-graphite);
}
.refp-facts__label {
  font-weight: 600;
  color: var(--bjg-forest);
  margin-right: 8px;
}
.refp-facts__value {
  font-weight: 300;
  color: var(--bjg-graphite);
}

/* Card CTA */
.refp-card__btn {
  appearance: none;
  -webkit-appearance: none;
  margin-top: clamp(24px, 2.4vw, 32px);
  align-self: flex-start;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--bjg-forest);
  color: var(--bjg-cream);
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  transition: opacity var(--dur-2) var(--ease-out);
}
.refp-card__btn:hover { opacity: 0.88; }

@media (max-width: 900px) {
  .refp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .refp-video__play { width: 56px; height: 56px; }
}

/* -------- Empty state -------- */
.refp-empty {
  padding: clamp(80px, 12vh, 140px) 0;
  text-align: center;
  color: var(--bjg-mute);
  font-family: var(--font-sans);
  font-size: 14px;
}

/* =========================================================================
   Video modal
   ========================================================================= */
.refp-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vh, 48px);
  background: rgba(8, 22, 16, 0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}
.refp-modal.is-open { display: flex; opacity: 1; }
.refp-modal__inner {
  position: relative;
  width: min(96vw, 1080px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--bjg-cream);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.40);
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition: transform 360ms var(--ease-out), opacity 360ms var(--ease-out);
  max-height: calc(100vh - 64px);
}
.refp-modal.is-open .refp-modal__inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.refp-modal__video {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0E0E0E;
  overflow: hidden;
}
.refp-modal__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.refp-modal__video::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.refp-modal__videolen {
  position: absolute;
  left: 18px; bottom: 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #fff;
  background: rgba(34,46,78,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 11px;
  border-radius: 4px;
  z-index: 3;
  transition: opacity var(--dur-2) var(--ease-out);
}
.refp-modal__videolen.is-hidden { opacity: 0; pointer-events: none; }
.refp-modal__playbtn {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  z-index: 4;
  background: rgba(34,46,78,0.25);
  cursor: pointer;
  border: 0;
  transition: opacity 240ms var(--ease-out);
}
.refp-modal__playbtn .core {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(245,241,237,0.95);
  display: grid; place-items: center;
  color: var(--bjg-forest);
  transition: transform 240ms var(--ease-out);
}
.refp-modal__playbtn:hover .core { transform: scale(1.04); }
.refp-modal__playbtn.is-hidden { opacity: 0; pointer-events: none; }

.refp-modal__side {
  padding: clamp(28px, 3.4vw, 44px);
  display: flex; flex-direction: column; gap: 18px;
  background: var(--bjg-cream);
  overflow-y: auto;
}
.refp-modal__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bjg-graphite);
  display: flex; align-items: center; gap: 12px;
}
.refp-modal__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bjg-forest); opacity: 0.5; }
.refp-modal__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--bjg-forest);
  margin: 4px 0 0;
}
.refp-modal__summary {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bjg-graphite);
  margin: 6px 0 4px;
}
.refp-modal__facts {
  list-style: none; padding: 0; margin: 6px 0 0;
  border-top: 1px solid var(--bjg-rule);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.refp-modal__factrow {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bjg-graphite);
}
.refp-modal__factlabel {
  font-weight: 600;
  color: var(--bjg-forest);
  margin-right: 8px;
}
.refp-modal__factvalue {
  font-weight: 300;
}

.refp-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(245,241,237,0.92);
  color: var(--bjg-forest);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease-out);
}
.refp-modal__close:hover { background: #fff; }

@media (max-width: 900px) {
  .refp-modal__inner { grid-template-columns: 1fr; max-height: calc(100vh - 32px); }
}