/* ==========================================================================
   Bilfoto 2026 – seksjoner og komponenter
   Hver blokk her tilsvarer én ACF-blokk i WordPress-temaet.
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-header);
  padding-block: clamp(1.25rem, 1.9vw, 2.375rem);
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out);
}
.site-header::before {                     /* gradient for lesbarhet over foto */
  content: ""; position: absolute; inset: 0;
  background: var(--bf-overlay-header);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
/* Gradienten er absolutt posisjonert og ville ellers male OVER logo og
   menylenker og dempe dem. Innholdet løftes derfor eksplisitt over. */
.site-header__inner { position: relative; z-index: 1; }
/* Ved scroll lå bakgrunnen som en flat flate på selve headeren og ga en hard
   sort kant mot innholdet. Bakgrunnen ligger nå på et pseudoelement som er
   høyere enn headeren og tones ut nedover – både fargen og blur-en. */
.site-header::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: calc(100% + clamp(2.75rem, 5.2vw, 6.25rem));
  background: linear-gradient(180deg,
      rgba(17, 17, 17, .94)   0%,
      rgba(17, 17, 17, .91)  46%,
      rgba(17, 17, 17, .72)  72%,
      rgba(17, 17, 17, .34)  88%,
      rgba(17, 17, 17, 0)   100%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.18) 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.18) 86%, transparent 100%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.site-header.is-stuck { padding-block: clamp(.875rem, 1.1vw, 1.375rem); }
.site-header.is-stuck::before { opacity: 0; }
.site-header.is-stuck::after  { opacity: 1; }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.site-logo img { width: clamp(122px, 8.49vw, 163px); height: auto; opacity: 1; }

.header-nav { display: flex; align-items: center; gap: clamp(1rem, 1.98vw, 2.375rem); }
.header-nav__link {
  font-size: var(--fs-ui);
  letter-spacing: .04em;
  transition: color var(--dur-fast) var(--ease-out);
}
/* XD viser «[ kontakt ]» i gull, men da leses den som en aktiv tilstand.
   Gull brukes derfor bare ved hover – begge lenkene er hvite i ro. */
.header-nav__link:hover,
.header-nav__link:focus-visible { color: var(--bf-gold); }
.header-nav__link .bracket { color: var(--bf-text-muted); }

/* --- Meny-overlegg (XD: artboard «index – 1») ---------------------------
   Målt i XD: bildet er 1276x459 med topp/venstre i (74, 264). Menykolonnen
   er venstrestilt og starter på x1438 og slutter på 1846 – altså 74 px fra
   kantene: 1276 + 88 + 408 = 1772 = 1920 - 2x74. Forholdet mellom kolonnene
   (72 % / 23 %) er beholdt, men båndet følger sidens container (30 px marg)
   slik at logo og «[ meny ]» står i flukt med bildet og menykolonnen.
   Menypunktene har 100 px mellom hver topp (45 px tekst + 44 px luft), og
   pillene ligger 113 px under siste punkt. */

.menu-overlay {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid;
  grid-template-columns: minmax(0, 1276fr) minmax(0, 408fr);
  column-gap: clamp(1.25rem, 4.58vw, 5.5rem);            /* XD: 88 px  */
  align-content: center; align-items: start;
  /* Samme bånd som .container, slik at logoen i headeren står i flukt med
     venstre bildekant og «[ meny ]» med høyre kant av menykolonnen. */
  padding-inline: max(var(--bf-gutter), (100vw - var(--bf-container)) / 2);
  padding-block: clamp(5.5rem, 13.75vw, 16.5rem) clamp(2rem, 5.4vw, 6.5rem);
  background: var(--bf-black);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.menu-overlay.is-open { visibility: visible; opacity: 1; }

.menu-overlay__media { position: relative; aspect-ratio: 1276 / 459; overflow: hidden; }
.menu-overlay__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform var(--dur-hero) var(--ease-out);
}
.menu-overlay.is-open .menu-overlay__media img { transform: scale(1); }

.menu-nav {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: clamp(.75rem, 2.28vw, 2.75rem);                   /* XD: 100 px pitch */
  padding-block-start: clamp(.5rem, 2.34vw, 2.8125rem);  /* XD: y309 mot bildets y264 */
}
.menu-nav__item { overflow: hidden; }
.menu-nav__link {
  display: inline-block;
  font-size: var(--fs-menu);
  line-height: 1.25;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out);
  transition-delay: var(--i-delay, 0ms);
}
.menu-overlay.is-open .menu-nav__link { transform: none; }
.menu-nav__link:hover, .menu-nav__link[aria-current="page"] { color: var(--bf-gold); }

.menu-nav__group { display: flex; flex-direction: column; align-items: flex-start; }
.menu-nav__toggle { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-menu); }
.menu-nav__toggle svg { width: .6em; height: .6em; transition: transform var(--dur-fast) var(--ease-out); }
.menu-nav__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.menu-nav__sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.menu-nav__sub[data-open="true"] { grid-template-rows: 1fr; }
.menu-nav__sub > div { overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: .35em; }
.menu-nav__sub a { font-size: var(--fs-name); color: var(--bf-text-muted); padding-block: .2em; }
.menu-nav__sub a:hover { color: var(--bf-gold); }

/* XD: to piller (212x29) under menypunktene, venstrestilt på samme x */
.menu-nav__contact {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(.625rem, 2.08vw, 2.5rem);                   /* XD: 40 px */
  margin-block-start: clamp(1.75rem, 5.9vw, 7.0625rem);  /* XD: 113 px */
}

/* Headeren skal fortsatt vise logo og «[ meny ]» når menyen er åpen (slik den
   gjør i XD-artboardet), så den løftes over overlegget. «[ kontakt ]» skjules
   – Kontakt ligger allerede i menylisten. */
body.is-menu-open .site-header { z-index: calc(var(--z-menu) + 1); }
body.is-menu-open .site-header::before,
body.is-menu-open .site-header::after { opacity: 0; }
body.is-menu-open .header-nav__link--contact { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .menu-overlay {
    grid-template-columns: 1fr;
    padding-block: clamp(5rem, 17vw, 8rem) var(--space-lg);
    /* Bildet ligger over menypunktene i stedet for ved siden; da må innholdet
       ligge fra toppen, ikke sentrert, ellers får bildet for lite plass. */
    align-content: start;
    row-gap: var(--space-sm);
  }
  /* Bildet var skjult på mobil (kundens korrektur 26.08.2026: det skal med).
     Båndet er lavere enn på desktop – 16:9 heller enn 1276/459 – slik at
     menypunktene fortsatt ligger over skjermkanten på en telefon. */
  .menu-overlay__media { aspect-ratio: 16 / 9; }
  .menu-nav { padding-block-start: 0; gap: clamp(.5rem, 3.4vw, 1.5rem); }
  .menu-nav__contact { margin-block-start: var(--space-md); gap: var(--space-xs); }
}

/* --- Hero (fullskjerm – kundens korrektur 24.01.2026) ------------------- */

/* Hero er 16:9 i designet (1920x1080). Låst til 100svh ble neste seksjon
   liggende helt utenfor skjermen; nå holdes den innenfor 88svh slik at toppen
   av kortene alltid tittes fram, med et gulv på 74svh for smale skjermer. */
.hero {
  position: relative;
  height: min(88svh, max(56.25vw, 74svh));
  display: grid; align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-hero) var(--ease-inout);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
.hero__slide.is-active img {
  animation: bf-kenburns 9s var(--ease-inout) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; transform: none; }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      rgba(17, 17, 17, var(--scrim-top))                       0%,
      rgba(17, 17, 17, calc(var(--scrim-mid) * .75))          24%,
      rgba(17, 17, 17, var(--scrim-mid))                      52%,
      rgba(17, 17, 17, calc(var(--scrim-bottom) * .7))        82%,
      rgba(17, 17, 17, var(--scrim-bottom))                  100%);
}

/* XD «Line 5» (vertikal 1 px strek i hero) er fjernet på kundens ønske 24.08.2026. */

.hero__content { padding-block-end: clamp(4.5rem, 7.3vw, 8.75rem); }
.hero__title { font-size: var(--fs-hero-h1); line-height: var(--lh-snug); max-width: 40ch; }
.hero__subtitle { margin-top: var(--space-sm); font-size: var(--fs-body); max-width: 64ch; }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
/* Tekstflaten tones ut og løftes litt når man scroller forbi heroen
   (--hero-scroll settes av main.js, 0 uten JS eller ved redusert bevegelse).
   Forsiden har alt i .hero__content; sidene har tittelrad og fot hver for seg. */
.hero:not(.hero--page) .hero__content,
.hero--page:not(.hero--kort) .hero__tittelrad,
.hero--page:not(.hero--kort) .hero__foot {
  opacity: calc(1 - var(--hero-scroll, 0));
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -2.5rem), 0);
}

.hero-dots { display: flex; gap: clamp(.75rem, 1.35vw, 1.625rem); align-items: center; }
.hero-dots__dot {
  width: clamp(6px, .42vw, 8px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bf-white); opacity: .5;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero-dots__dot[aria-current="true"] { opacity: 1; transform: scale(1.35); }
.hero-dots__dot:hover { opacity: .85; }

.hero__scroll {
  position: absolute; inset-block-end: var(--space-sm); inset-inline-start: 50%;
  translate: -50% 0;
  display: grid; place-items: center; gap: .5rem;
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bf-text-muted);
}
.hero__scroll::after {
  content: ""; width: 1px; height: clamp(28px, 2.6vw, 50px);
  background: linear-gradient(180deg, var(--bf-gold), transparent);
  animation: bf-scrollhint 2.4s var(--ease-inout) infinite;
}
@keyframes bf-scrollhint { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* --- Tjenestekort (XD: 600x682, gull sirkel Ø70) ------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-sm);
}
.card {
  position: relative; display: block;
  aspect-ratio: 600 / 682;
  overflow: hidden;
  isolation: isolate;
}
.card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.card:hover img, .card:focus-visible img { transform: scale(1.06); }
.card__overlay { position: absolute; inset: 0; background: var(--bf-overlay-card); }
/* XD: sirkel 32 px fra topp, tittel 24 px fra venstre – begge øverst i kortet */
.card__title {
  position: absolute; inset-block-start: clamp(1.25rem, 2.6vw, 3.1rem);
  inset-inline-start: clamp(.875rem, 1.25vw, 1.5rem);
  inset-inline-end: clamp(4.25rem, 5.4vw, 6.5rem);
  font-size: var(--fs-card); line-height: var(--lh-snug);
  translate: 0 -.15em;
}
.card__arrow {
  position: absolute;
  inset-block-start: clamp(1rem, 1.67vw, 2rem); inset-inline-end: clamp(.875rem, 1.25vw, 1.5rem);
  width: clamp(46px, 3.65vw, 70px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bf-gold); color: var(--bf-black);
  display: grid; place-items: center;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.card__arrow svg { width: 42%; height: 42%; }
.card:hover .card__arrow { transform: scale(1.08) rotate(90deg); }

/* --- Fordeler ----------------------------------------------------------- */

.benefits__title { font-size: var(--fs-h3); margin-block-end: var(--space-sm); }
/* XD: punktene ligger på én rad og hugger sin egen bredde (x30, 314, 664, 1093),
   ikke i like kolonner. */
.benefits__list {
  display: flex; flex-wrap: wrap;
  gap: var(--space-xs) clamp(1rem, 1.8vw, 2.25rem);
}
.benefits__item { display: flex; align-items: flex-start; gap: clamp(.75rem, 1.15vw, 1.375rem); font-size: var(--fs-body); }
.benefits__item::before {
  content: ""; flex: 0 0 auto; align-self: flex-start; margin-top: .55em;
  width: clamp(6px, .42vw, 8px); height: clamp(6px, .42vw, 8px); background: var(--bf-gold);
}

/* --- Stats (lys seksjon, animerte tall) --------------------------------- */

/* XD: tallene står på en venstrestilt rad med ~60 px mellomrom og hugger
   sin egen bredde – ikke fordelt over full container. Ingen kantlinje. */
.stats {
  display: flex; flex-wrap: wrap;
  gap: var(--space-md) clamp(1.5rem, 3.13vw, 3.75rem);
}
.stat__label { font-size: var(--fs-label); line-height: var(--lh-snug); }
.stat__value {
  font-size: var(--fs-stat); line-height: 1; letter-spacing: -.02em;
  margin-top: clamp(.5rem, 1.5vw, 1.75rem);
  font-variant-numeric: tabular-nums;
}

.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-md) var(--space-lg);
  align-items: start;
  margin-block-start: var(--space-xl);
}
.split__statement { font-size: var(--fs-statement); line-height: var(--lh-snug); }

/* --- Gull-skimmer over stort utsagn ------------------------------------ */
/* Gradienten klippes til teksten og sveiper diagonalt fra øvre venstre mot
   nedre høyre hjørne. Rolig tempo: sveipet tar ca. 4,5 s av en 11 s syklus,
   resten hviler i mørk profilfarge. Starter når teksten avsløres. */
.text-shine {
  --shine-color: var(--bf-gold-dim);
  --shine-glint: var(--bf-gold);
  --shine-base: var(--bf-text-on-light);
  --shine-duration: 11s;
  --shine-delay: .6s;
}

/* Variant som holder WCAG 3:1 for stor tekst også i det glimtet passerer.
   Gull #C5B99E gir 1,94:1 mot hvit og dempet gull 2,89:1; denne dypere
   gulltonen gir 3,9:1. Legg til klassen `text-shine--kontrast`. */
.text-shine--kontrast { --shine-color: #8a7a55; --shine-glint: #96855e; }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .is-revealed.text-shine,
  .is-revealed .text-shine {
    background-image: linear-gradient(135deg,
        var(--shine-base)   0%,
        var(--shine-base)  38%,
        var(--shine-color) 45%,
        var(--shine-glint) 50%,
        var(--shine-color) 55%,
        var(--shine-base)  62%,
        var(--shine-base) 100%);
    background-size: 280% 280%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: bf-shine var(--shine-duration) cubic-bezier(.4, 0, .3, 1)
               var(--shine-delay) infinite;
  }
}

@keyframes bf-shine {
  0%   { background-position: 100% 100%; }  /* glimtet ligger utenfor, oppe til venstre */
  42%  { background-position: 0% 0%; }      /* sveiper diagonalt ned mot høyre */
  100% { background-position: 0% 0%; }      /* hviler i mørk profilfarge */
}

@media (prefers-reduced-motion: reduce) {
  .is-revealed.text-shine, .is-revealed .text-shine {
    background-image: none; color: var(--shine-base); animation: none;
  }
}
@media print {
  .text-shine { background-image: none !important; color: #111 !important; }
}

/* Mørk seksjon: bytt grunnfarge slik at effekten også kan brukes der.
   Gull mot #111 gir 4,6:1, så der er kontrasten uproblematisk. */
.section:not(.section--light) .text-shine { --shine-base: var(--bf-white); }

/* --- CTA-band ----------------------------------------------------------- */

.cta {
  display: grid; grid-template-columns: minmax(0, 1.35fr) auto;
  gap: var(--space-md);
  align-items: baseline;      /* XD: pillene står i linje med tittelens første linje */
}
.cta__title {
  font-size: var(--fs-display); line-height: var(--lh-snug);
  /* XD tegnet boksen 864 px, men «god» måler 863 px og smatt med på linje 1.
     852 px ligger mellom linje 2 (839) og linje 1 + «god» (863) => samme brekk som XD. */
  max-width: max(30ch, min(852px, 44.4vw));
}
/* PDF-en viser understreking der tittelen er en lenke – ikke ellers */
.cta__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.cta__title a:hover { text-decoration-color: var(--bf-gold); }
.cta__arrow {
  /* XD: ikonet er 30 x 30 px ved 1920, altså 0,6em av 50 px-teksten */
  display: inline-block; width: .6em; height: .6em; vertical-align: -.02em;
  margin-inline-start: .4em;
  color: var(--bf-gold);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta__title:hover .cta__arrow { transform: translate3d(-.15em, -.15em, 0); }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

/* --- Fullbredde mediabånd ---------------------------------------------- */

.media-band { position: relative; aspect-ratio: 1860 / 970; overflow: hidden; }
.media-band img { width: 100%; height: 100%; object-fit: cover; }
/* Referanse-slideren bytter bilde sammen med teksten: bildene ligger stablet
   i .media-band__slides og krysstoner. Rammen holder høyden, slik at figuren
   selv kan vokse med teksten under bildet på mobil. */
.media-band__slides { position: relative; aspect-ratio: 1860 / 970; overflow: hidden; }
.media-band__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-hero) var(--ease-inout);
}
.media-band__slide.is-active { opacity: 1; }
.media-band__bilde { position: relative; width: 100%; height: 100%; overflow: hidden; }
.media-band--short { aspect-ratio: 1860 / 658; }

/* Parallakse: bildet glir litt saktere enn siden. JS setter --px fra -1 (båndet
   nederst i bildet) til 1 (øverst) og klassen has-parallax – bare uten
   prefers-reduced-motion, så skaleringen ikke beskjærer bildet for ingenting.
   Skala 1.12 gir 6 % overheng i hver ende; forskyvningen bruker nøyaktig det.
   Ligger på bildet, ikke på innpakningen maska klipper og skalerer. */
.media-band.has-parallax .media-band__bilde img,
.media-band.has-parallax .media-band__slide {
  transform: translate3d(0, calc(var(--px, 0) * 6%), 0) scale(1.12);
  will-change: transform;
}
@media (max-width: 700px) {
  .media-band:not(.media-band--quote), .media-band--short { aspect-ratio: 4 / 3; }
}

/* --- Referanse-slider --------------------------------------------------- */

.quotes { position: relative; }
.quotes__mark { width: clamp(34px, 2.8vw, 54px); color: var(--bf-gold); margin-block-end: var(--space-sm); }
.quote {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-md) var(--space-lg); align-items: start;
}
.quote[hidden] { display: none; }
/* Bildet i den frittstående referansen: samme figur som på Kundeuttalelser i
   prototypen – 915 x 586, venstrestilt over sitatet. Ligger etter .media-band
   og overstyrer dens sideforhold og bredde. */
.quotes__media {
  width: min(100%, 915px);
  aspect-ratio: 915 / 586;
  margin-block-end: var(--space-md);
}
.quote__text { font-size: var(--fs-display); font-style: italic; line-height: var(--lh-snug); }
.quote__source { margin-block-start: var(--space-sm); font-size: var(--fs-source); font-weight: 700; color: var(--bf-gold); }
.quote__source span { display: block; font-weight: 400; }
.quote__body { font-size: var(--fs-body); line-height: var(--lh-loose); }

/* XD: referansen ligger som overlegg i nedre del av mediabåndet, med én
   chevron ute til høyre. */
/* Høyden kommer fra .media-band__slides – da kan teksten legge seg under
   bildet på mobil uten å bli klippet av figurens faste sideforhold. */
.media-band--quote { position: relative; aspect-ratio: auto; }
.media-band__scrim {
  position: absolute; inset-block-end: 0; inset-inline: 0; height: 62%;
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.45) 38%, rgba(17,17,17,.9) 100%);
  pointer-events: none;
}
.media-band__quote {
  position: absolute;
  inset-block-end: clamp(1.25rem, 4.4vw, 5.3rem);   /* XD: 85 px luft under blokken */
  inset-inline-start: clamp(1rem, 1.25vw, 1.5rem);
  inset-inline-end: clamp(1rem, 1.25vw, 1.5rem);
  display: flex; align-items: flex-end; gap: var(--space-sm);
}
.media-band__quote .quotes__mark { margin-block-end: var(--space-xs); }
.media-band__quote .quote { flex: 1 1 auto; }
.media-band__quote .quote {                 /* XD: sitat 946 px, brødtekst 693 px */
  grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
  gap: var(--space-sm) clamp(1.5rem, 2.7vw, 3.25rem);
  align-items: end;                         /* XD: kolonnene er bunn-justert */
}
/* Tettere blokk enn ellers: kilden ligger rett under sitatet */
.media-band__quote .quote__source { margin-block-start: clamp(.75rem, 1.15vw, 1.375rem); }
.media-band__quote .quote__body { padding-block-end: .1em; line-height: var(--lh-body); }

@media (max-width: 900px) {
  /* Mobil: bildet beholder 4:3, referansen og pilen ligger under bildet */
  .media-band--quote .media-band__slides { aspect-ratio: 4 / 3; }
  .media-band__quote {
    position: static; margin-block-start: var(--space-sm);
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--space-sm);
  }
  .media-band__quote .quote { grid-template-columns: 1fr; align-items: start; }
  .media-band__quote .quote__body { padding-block-end: 0; }
  .media-band__quote .quotes__btn.quotes__btn--bare {
    align-self: flex-end; margin-block-end: 0; width: 42px;
    border: 1px solid var(--bf-hairline);   /* tydelig trykkflate på mobil */
  }
  /* Knappen står helt ute mot containerkanten, og hover-tilstanden flytter og
     forstørrer den. På mobil klippet .media-band sitt overflow bort den høyre
     halvdelen av sirkelen så snart man hadde trykket på den. Nudgen er derfor
     av her, og båndet trenger ikke klippe: bildene klippes av
     .media-band__slides, som har sitt eget overflow. */
  .media-band--quote { overflow: visible; }
  .media-band__quote .quotes__btn.quotes__btn--bare:hover,
  .media-band__quote .quotes__btn.quotes__btn--bare:focus-visible { transform: none; }
  .media-band__scrim { display: none; }
}

.quotes__nav { display: flex; gap: var(--space-xs); justify-content: flex-end; margin-block-start: var(--space-md); }
.quotes__btn.quotes__btn--bare {
  /* XD: chevron ute til høyre, loddrett midt på brødteksten */
  flex: 0 0 auto;              /* uten denne klemmes knappen sammen av sitatkolonnen */
  align-self: flex-end;
  margin-block-end: clamp(1rem, 2.2vw, 2.65rem);
  width: clamp(30px, 1.9vw, 36px); aspect-ratio: 1;
  border: 0; display: grid; place-items: center;
  color: var(--bf-white); opacity: .9;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Ved hover skal pilen bli en tydelig knapp: gull flate med mørk chevron.
   (Tidligere satte denne regelen også chevronen i gull, slik at den forsvant
   mot gullflaten fra .quotes__btn:hover – den så ut som en tom firkant.) */
.quotes__btn.quotes__btn--bare {
  border-radius: 50%;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.quotes__btn.quotes__btn--bare:hover,
.quotes__btn.quotes__btn--bare:focus-visible {
  opacity: 1;
  background: var(--bf-gold);
  color: var(--bf-black);
  transform: translateX(3px) scale(1.12);
}
.quotes__btn.quotes__btn--bare svg { width: 72%; }

.quotes__btn {
  width: clamp(40px, 2.9vw, 56px); aspect-ratio: 1;
  border: 1px solid var(--bf-hairline);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.quotes__btn:hover { background: var(--bf-gold); border-color: var(--bf-gold); color: var(--bf-black); }
.quotes__btn svg { width: 30%; }

/* --- Footer ------------------------------------------------------------- */
/* XD: tekstkolonner starter på x242 (ikke x30), logo sentrert på siden,
   sosiale ikoner ender på x1490. Footeren har altså et tydelig innrykk
   i forhold til innholdet over, og ingen kantlinje. */

.site-footer { padding-block: var(--space-xl) var(--space-md); }

.site-footer__inner {
  width: min(100%, 1250px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* like sidekolonner => logo står i senter */
  align-items: center;
  gap: var(--space-md);
}
.site-footer__cols { display: flex; gap: clamp(1.5rem, 5.05vw, 6rem); }
.site-footer address { font-style: normal; color: var(--bf-text-muted); font-size: var(--fs-ui); line-height: 1.9; }
.site-footer address a:hover { color: var(--bf-gold); }

.site-footer__logo { justify-self: center; }
.site-footer__logo img { width: clamp(122px, 8.49vw, 163px); opacity: .5; }  /* XD: footerlogo på 50 % */

.social { display: flex; gap: clamp(.75rem, 2.1vw, 2.5rem); justify-self: end; }
.social a {
  display: block; color: var(--bf-white); opacity: .5;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.social a:hover { opacity: 1; color: var(--bf-gold); transform: translateY(-2px); }
.social svg { width: clamp(32px, 2.4vw, 46px); height: auto; }

.site-footer__legal {
  margin-block-start: var(--space-lg);
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--bf-text-muted);
}

@media (max-width: 860px) {
  /* Mobil: alt midtstilt, med logoen først slik at den står øverst i midten */
  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: var(--space-sm); text-align: center; }
  .site-footer__logo { order: -1; justify-self: center; }
  .social { justify-self: center; }
  .site-footer__cols { flex-direction: column; align-items: center; gap: var(--space-xs); }
  .site-footer address { text-align: center; }
}

/* --- Logoer / salgs-CTA ------------------------------------------------- */
/* Overskrift og tekst sentrert som seksjonstitlene, logoene på én rad som
   bryter ved behov. Ensfargede logoer: hvite på mørk flate, sorte på lys. */
.logos__list {
  list-style: none; padding: 0;
  margin: var(--space-md) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
.logos__item a { display: block; }
.logos__item img {
  display: block; width: auto;
  height: clamp(26px, 2.4vw, 44px); max-width: clamp(120px, 12vw, 200px);
  object-fit: contain;
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.logos--mono .logos__item img { filter: brightness(0) invert(1); }
.section--light.logos--mono .logos__item img { filter: brightness(0); }
.logos__item a:hover img, .logos__item a:focus-visible img { opacity: 1; }
.logos__cta { display: flex; justify-content: center; margin-block-start: var(--space-md); }