/* ============================================================
   MonumentArt — 05 SEKSJONER
   Seksjonsspesifikk styling: nav, hero, tjenester, pakker,
   portefølje, om oss, kontakt, footer.
   ============================================================ */

/* ============================================================
   NAVIGASJON
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: transform .55s var(--e-out), background .45s var(--e-out),
              border-color .45s var(--e-out), height .45s var(--e-out),
              backdrop-filter .45s var(--e-out);
  border-bottom: 1px solid transparent;
}
.site-nav__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max-w);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
/* Myk toning bak menyen før den blir «stuck», slik at lenkene er
   lesbare også når heroen har en lys himmel bak seg */
.site-nav::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 190%;
  background: linear-gradient(to bottom, rgba(5,6,8,.78) 0%, rgba(5,6,8,.34) 46%, transparent 100%);
  pointer-events: none;
  transition: opacity .45s var(--e-out);
}
.site-nav.is-stuck::before { opacity: 0; }
/* Fast glass når man har skrollet */
.site-nav.is-stuck {
  background: rgba(6, 8, 11, 0.62);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border-bottom-color: var(--line);
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.9);
}
/* Skjuler seg ved scroll ned, kommer tilbake ved scroll opp */
.site-nav.is-hidden { transform: translateY(-102%); }

.brand { display: inline-flex; align-items: center; gap: .75rem; flex: none; }
/* Merket er høyere enn det er bredt (339 × 424), så høyden styrer
   størrelsen og bredden følger etter. Én verdi å endre: --brand-mark-h. */
.brand__mark {
  --brand-mark-h: 24px;
  height: var(--brand-mark-h);
  width: calc(var(--brand-mark-h) * 0.7995);
  flex: none;
  color: var(--c-accent);
}
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__name {
  font-family: var(--f-display);
  font-size: .96rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--c-text);
  white-space: nowrap;
}
.brand__name b { font-weight: 300; color: var(--c-text-3); }
/* Logoen i toppmenyen. Bildet er 5,14 ganger så bredt som høyt;
   høyden styrer størrelsen. */
.brand__logo { display: block; height: 34px; width: auto; }

.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-link {
  position: relative;
  padding: .6rem .82rem;
  font-size: .815rem; letter-spacing: .005em;
  color: var(--c-text-3);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--e-out);
  white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute;
  left: .82rem; right: .82rem; bottom: .3rem; height: 1px;
  background: var(--c-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--e-out);
}
.nav-link:hover { color: var(--c-text); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-current { color: var(--c-text); }
.nav-link.is-current::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: .75rem; flex: none; }

/* Fremdriftsindikator i toppen av nav */
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px;
  width: 100%; transform-origin: left; transform: scaleX(0);
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(224,189,136,.7);
}

/* Hamburger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line-2);
  position: relative; flex: none;
  background: rgba(255,255,255,.03);
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1px;
  background: var(--c-text);
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobilmeny */
.mobile-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  padding: calc(var(--nav-h) + 2.5rem) var(--gutter) 3rem;
  background: rgba(5,7,9,.9);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: opacity .5s var(--e-out), visibility .5s, clip-path .7s var(--e-out);
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: clamp(.65rem, 1.9vh, 1.05rem);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 6.5vw, 2.4rem);
  font-weight: 400; letter-spacing: -.035em;
  color: var(--c-text);
  opacity: 0; transform: translateY(22px);
}
.mobile-menu.is-open .mobile-menu__link { animation: menu-in .7s var(--e-out) forwards; }
.mobile-menu__link i {
  font-family: var(--f-mono); font-style: normal;
  font-size: .62rem; letter-spacing: .18em; color: var(--c-accent);
}
@keyframes menu-in { to { opacity: 1; transform: none; } }

/* ============================================================
   HERO — 3D SCROLL-ANIMASJON
   Strukturen er tre lag dypt, og hvert lag har én oppgave:

     .hero__driver   høy beholder som gir animasjonen scroll å gå på
     .hero__sticky   én skjermhøyde som står stille mens man ruller
     innholdet       canvas, rendering, toning, tekst, indikatorer

   Uten 3D (ingen WebGL, eller redusert bevegelse) settes klassen
   .is-static, og heroen kollapser til én vanlig skjermhøyde.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
}

.hero__driver {
  position: relative;
  height: 460vh;            /* settes på nytt fra JS etter skjermstørrelse */
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--c-bg);
}

/* ---- Lag 1: 3D-scenen ---- */
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--e-out);
}
.hero.is-live .hero__canvas { opacity: 1; }

/* ---- Lag 2: den ferdige renderingen ---- */
.hero__render {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  will-change: opacity;
  transition: filter .9s var(--e-out);
}
/* Mens 3D-motoren lastes står renderingen uskarpt bak «Laster modell»,
   slik at man aldri møter en helt svart skjerm. */
.hero__render.is-standby { filter: blur(26px) saturate(115%); transform: scale(1.06); }
.hero__render img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- Lag 3: toning ---- */
.hero__grad {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(7,9,11,.92) 0%, rgba(7,9,11,.55) 26%, rgba(7,9,11,.1) 52%, rgba(7,9,11,0) 72%),
    linear-gradient(to bottom, rgba(5,6,8,.55) 0%, rgba(5,6,8,.12) 14%, transparent 26%),
    linear-gradient(to right, rgba(5,6,8,.6) 0%, rgba(5,6,8,.14) 46%, transparent 74%);
}

/* ---- Lag 4: tekstblokkene ---- */
.hero__stages {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(3.2rem, 8vh, 6rem);
  pointer-events: none;
}
.hero__stages-inner {
  position: relative;
  max-width: 900px;
  min-height: 262px;
}
@media (max-width: 640px) { .hero__stages-inner { min-height: 300px; } }

.hero-stage {
  position: absolute; left: 0; bottom: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.hero-stage:first-child { opacity: 1; }

.hero-stage__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: clamp(.9rem, 2vw, 1.35rem);
}
.hero-stage__eyebrow--accent { color: var(--c-accent); }

.hero-stage__title {
  font-family: var(--f-display);
  /* Alle fire titlene har samme størrelse. Den første var tidligere
     større (den er sidens h1), men når titlene bytter, så teksten
     ut til å hoppe. Nå er det bare innholdet som skifter. */
  font-size: clamp(2.3rem, 5.6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--c-text);
  text-wrap: balance;
}
.hero-stage__title--lead { /* samme størrelse som de andre, se over */ }

.hero-stage__text {
  margin-top: clamp(1rem, 2vw, 1.45rem);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text-2);
  text-wrap: pretty;
}

.hero-stage__cta {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  pointer-events: auto;
}

/* ---- Lag 5: indikatorer ---- */
.hero__hint {
  position: absolute;
  right: var(--gutter); bottom: clamp(3.2rem, 8vh, 6rem);
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-text-4);
  transition: opacity .4s var(--e-out);
}
.hero__hint-line { display: block; width: 46px; height: 1px; background: rgba(255,255,255,.28); }

.hero__rail {
  position: absolute;
  right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 140px;
  background: rgba(255,255,255,.14);
}
.hero__rail-fill {
  width: 1px; height: 0%;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(224,189,136,.6);
}

.hero__loader {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(7, 9, 11, .82);
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-text-3);
  transition: opacity .6s var(--e-out);
  z-index: 6;
}

/* ---- Statisk reserve: ingen WebGL, eller redusert bevegelse ---- */
.hero.is-static .hero__driver { height: 100svh !important; }
.hero.is-static .hero__render { opacity: 1; }
.hero.is-static .hero__rail,
.hero.is-static .hero__hint { display: none; }
.hero.is-static .hero__stages-inner { min-height: 0; }
.hero.is-static .hero-stage { position: relative; }

@media (max-width: 900px) {
  .hero__rail { display: none; }
  .hero__hint { bottom: 1.6rem; }
}

/* ============================================================
   OVERGANGSBÅND UT AV HEROEN
   ============================================================ */
.hero-outro {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-outro__inner {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(2.4rem, 6vw, 4.5rem);
}
.hero-outro__link {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 500; letter-spacing: -.03em;
  color: var(--c-text);
  display: inline-flex; align-items: baseline; gap: .6rem;
  transition: color var(--t-fast) var(--e-out);
}
.hero-outro__link span { color: var(--c-accent); transition: transform var(--t-base) var(--e-out); display: inline-block; }
.hero-outro__link:hover { color: var(--c-accent); }
.hero-outro__link:hover span { transform: translateX(7px); }


/* ============================================================
   TJENESTESEKSJONER
   ============================================================ */
.svc-intro { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Galleri: redaksjonelt rutenett med varierte høyder */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.35rem);
}
.gallery__cell { position: relative; min-height: 0; }
/* Standardmønster — bytt gjerne span-klassene for et annet oppsett */
.g-span-7  { grid-column: span 7; }
.g-span-5  { grid-column: span 5; }
.g-span-6  { grid-column: span 6; }
.g-span-4  { grid-column: span 4; }
.g-span-8  { grid-column: span 8; }
.g-span-12 { grid-column: span 12; }
/* ---------- Hvorfor forholdstallene ser rare ut ----------
   Før hadde hver rute et fast format: 16:9 for de brede, 4:5 for de
   høye. Da ble to ruter i samme rad ulikt høye — en 8-kolonners i
   16:9 er 487 px, en 4-kolonners i 4:5 er 529 — og rutenettet tok
   den høyeste. Forskjellen ble stående igjen som et svart hull under
   den laveste ruta. I interiørgalleriet var hullet 243 piksler.

   Nå settes formatet av bredden i stedet. Høyden på en rad er
   bestemt én gang — en 7-kolonners rute i 16:9 — og hver spennvidde
   har fått nøyaktig det forholdet som gir samme høyde:

       forhold = (bredden på n kolonner / bredden på 7 kolonner) × 16/9

   Forholdet mellom to spennvidder er praktisk talt konstant, fordi
   mellomrommet er lite mot kolonnene: fra 900 til 1560 px endrer
   w5/w7 seg fra 0,7064 til 0,7072. Radene møtes altså innenfor én
   piksel på hele spekteret, uten JavaScript og uten faste høyder.

   Endrer du spennviddene i MA.galleries, faller alt på plass av seg
   selv — så lenge hver rad summerer til 12. */
.g-span-12 { aspect-ratio: 3.0827; }
.g-span-8  { aspect-ratio: 2.0386; }
.g-span-7  { aspect-ratio: 1.7778; }   /* 16:9 — denne setter radhøyden */
.g-span-6  { aspect-ratio: 1.5166; }
.g-span-5  { aspect-ratio: 1.2555; }
.g-span-4  { aspect-ratio: 0.9945; }

/* De gamle formatklassene står igjen for egne oppsett, men brukes
   ikke av galleriene lenger. */
.g-hero  { aspect-ratio: 21 / 9; }
.g-square{ aspect-ratio: 1 / 1; }
.g-portrait { aspect-ratio: 3 / 4; }

/* På telefon er alt én kolonne, og da skal alle rutene være like
   store — ellers hopper spalten opp og ned uten grunn. 3:2 er valgt
   som mellomting: rutene blir høye nok til å se noe på en liten
   skjerm, og beskjæringen av et 16:9-render er bare 11 % i bredden. */
@media (max-width: 900px) {
  .g-span-12, .g-span-8, .g-span-7, .g-span-6, .g-span-5, .g-span-4 {
    grid-column: span 12;
    aspect-ratio: 3 / 2;
  }
  .g-hero, .g-portrait { aspect-ratio: 3 / 2; }
}

/* Verktøykort (360°, VR, før/etter) */
.tool-card { display: grid; gap: var(--sp-5); }
.tool-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.tool-card__title { font-size: var(--fs-h4); }
.tool-card__text { color: var(--c-text-3); font-size: var(--fs-sm); max-width: 54ch; }

/* Funksjonsliste med hake */
.feature-list { display: grid; gap: .85rem; }
.feature-list li { display: flex; align-items: flex-start; gap: .8rem; font-size: var(--fs-sm); color: var(--c-text-2); list-style: none; }
.feature-list svg { flex: none; width: 31px; height: 11.4px; margin-top: .45rem; color: var(--c-accent); }

/* ============================================================
   GRAFISK DESIGN — mockup-scene
   ============================================================ */
.mockup-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 12%, rgba(224,189,136,.11), transparent 62%),
    linear-gradient(168deg, #131820 0%, #0a0d12 58%, #070909 100%);
  box-shadow: var(--sh-xl);
  display: grid; place-items: center;
  perspective: 1400px;
}
.mockup-stage::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 90px 120px -80px rgba(255,255,255,.14);
  border-radius: inherit; pointer-events: none;
}
/* Gulvrefleksjon */
.mockup-stage::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 6%; height: 26%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(224,189,136,.14), transparent 72%);
  filter: blur(24px); pointer-events: none;
}
.mockup {
  position: relative; z-index: 2;
  width: 62%;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-16deg) rotateZ(1deg);
  transition: transform 1.1s var(--e-out);
  will-change: transform;
}
.mockup-stage:hover .mockup { transform: rotateX(3deg) rotateY(-6deg) rotateZ(0deg) scale(1.03); }

/* ---------- Liggende ark ----------
   Scenen var bygget for et stående ark. Et liggende A4 (1,414:1) på
   62 % bredde blir lavt og flyter midt i tomrommet, så det trenger
   sine egne mål:

   • bredere ark (84 %), ellers står det og svømmer
   • lavere scene (5:4 i stedet for 4:3), så tomrommet over og under
     blir like stort som luften ved sidene
   • slakere vinkel. På −16° blir et bredt ark kraftig forkortet i
     dybden, og den bortre kortsiden krymper til nesten ingenting.
     −11° holder perspektivet uten å vri arket ut av form. */
.mockup-stage--landskap { aspect-ratio: 5 / 4; }
.mockup--landskap { width: 84%; transform: rotateX(6deg) rotateY(-11deg) rotateZ(0.5deg); }
.mockup-stage--landskap:hover .mockup--landskap { transform: rotateX(2deg) rotateY(-4deg) rotateZ(0deg) scale(1.04); }
.mockup img { border-radius: 4px; box-shadow: 0 60px 90px -40px rgba(0,0,0,.95), 0 8px 22px -10px rgba(0,0,0,.8); }
.mockup__sheen {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(118deg, transparent 34%, rgba(255,255,255,.2) 48%, transparent 60%);
  mix-blend-mode: overlay; pointer-events: none;
}

/* Logo-rutenett */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.logo-cell {
  aspect-ratio: 5 / 3;
  display: grid; place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--c-text-3);
  transition: background var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
  position: relative; overflow: hidden;
}
.logo-cell:hover { background: rgba(224,189,136,.06); color: var(--c-accent); }
.logo-cell svg { width: 46%; height: auto; max-height: 54%; }
.logo-cell__name {
  position: absolute; inset: auto 0 .55rem 0; text-align: center;
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-4);
  opacity: 0; transform: translateY(6px);
  transition: all var(--t-base) var(--e-out);
}
.logo-cell:hover .logo-cell__name { opacity: 1; transform: none; }

/* Fargepalett-strimmel */
.swatches { display: flex; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); }
.swatch { flex: 1; aspect-ratio: 1 / 2.4; position: relative; transition: flex .6s var(--e-out); }
.swatch:hover { flex: 1.9; }
.swatch span {
  position: absolute; inset: auto .5rem .6rem .6rem;
  font-family: var(--f-mono); font-size: .56rem; letter-spacing: .1em;
  color: rgba(255,255,255,.72); opacity: 0; transition: opacity var(--t-base) var(--e-out);
}
.swatch:hover span { opacity: 1; }

/* ============================================================
   WEBDESIGN — nettleserramme
   ============================================================ */
.browser {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: #0b0e13;
  box-shadow: var(--sh-xl);
}
.browser__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.028);
}
.browser__dots { display: flex; gap: .4rem; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.browser__url {
  flex: 1; padding: .4rem .8rem; border-radius: var(--r-pill);
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em;
  color: var(--c-text-4); text-align: center;
}
.browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #080a0e; }

/* Animert UI-skjelett inne i nettleseren */
.ui-skeleton { position: absolute; inset: 0; padding: clamp(1rem, 2.4vw, 2rem); display: grid; gap: clamp(.6rem, 1.4vw, 1.1rem); grid-template-rows: auto auto 1fr; }
.ui-bar { height: 9px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); }
.ui-bar--xl { height: clamp(20px, 3.4vw, 34px); width: 62%; background: var(--grad-accent); opacity: .82; }
.ui-bar--lg { height: clamp(14px, 2.2vw, 22px); width: 44%; }
.ui-bar--sm { width: 30%; }
.ui-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1.2vw, 1rem); }
.ui-tile { border-radius: var(--r-sm); background: linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.ui-cursor {
  position: absolute; z-index: 3; width: 15px; height: 15px;
  border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 6px rgba(224,189,136,.18), 0 6px 16px -4px rgba(0,0,0,.9);
  pointer-events: none;
}

/* ============================================================
   PAKKER
   ============================================================ */
.plans { display: grid; gap: clamp(1rem, 1.8vw, 1.6rem); align-items: stretch; }
@media (min-width: 980px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  transition: transform .6s var(--e-out), border-color .5s var(--e-out), box-shadow .6s var(--e-out), background .5s var(--e-out);
  overflow: hidden;
  isolation: isolate;
}
.plan::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 50% -10%, rgba(224,189,136,.16), transparent 62%);
  opacity: 0; transition: opacity .55s var(--e-out);
}
.plan:hover { transform: translateY(-8px); border-color: rgba(224,189,136,.32); box-shadow: var(--sh-xl); }
.plan:hover::before { opacity: 1; }

.plan--featured {
  border-color: rgba(224,189,136,.36);
  background: linear-gradient(168deg, rgba(224,189,136,.1), rgba(255,255,255,.02));
  box-shadow: var(--sh-lg), 0 0 90px -40px rgba(224,189,136,.5);
}
.plan--featured::before { opacity: .7; }

.plan__badge {
  position: absolute; top: 1.15rem; right: 1.15rem;
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: var(--r-pill);
  background: var(--grad-accent); color: #0a0b0d; font-weight: 600;
}
.plan__index { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .22em; color: var(--c-accent); }
.plan__name { margin-top: .9rem; font-size: clamp(1.45rem, 2.3vw, 1.95rem); }
.plan__for { margin-top: .55rem; font-size: var(--fs-xs); color: var(--c-text-3); letter-spacing: .02em; }
.plan__price { margin-top: clamp(1.2rem, 2.2vw, 1.7rem); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan__price-from { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-4); }
.plan__price-num {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 400; letter-spacing: -.04em; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.plan__price-cur { font-size: .95rem; color: var(--c-text-3); }
.plan__note { margin-top: .4rem; font-size: .72rem; color: var(--c-text-4); }
.plan__rule { margin-block: clamp(1.2rem, 2.2vw, 1.7rem); height: 1px; background: var(--line); }
.plan__list { display: grid; gap: .8rem; flex: 1; }
.plan__list li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-text-2); list-style: none; }
/* Merkefiguren står i stedet for et hake-ikon. Den er bred og lav,
   så ruten er bredere enn den er høy, og topp-margen er justert slik
   at figuren fortsatt sitter midt på den første tekstlinjen. */
.plan__list svg { flex: none; width: 30px; height: 11px; margin-top: .45rem; color: var(--c-accent); }
.plan__cta { margin-top: clamp(1.4rem, 2.4vw, 2rem); }

/* Sammenligningstabell */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--line); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: var(--fs-sm); }
.compare-table th, .compare-table td { padding: 1.05rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(10,13,17,.92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .17em; text-transform: uppercase; color: var(--c-text-3);
  font-weight: 500;
}
.compare-table thead th.is-featured { color: var(--c-accent); }
.compare-table tbody tr { transition: background var(--t-fast) var(--e-out); }
.compare-table tbody tr:hover { background: rgba(255,255,255,.028); }
.compare-table td:first-child, .compare-table th:first-child { color: var(--c-text); font-weight: 500; }
.compare-table td { color: var(--c-text-3); }
.compare-table .yes { color: var(--c-accent); }
.compare-table .no  { color: var(--c-text-4); }
.compare-table td svg { width: 15px; height: 15px; }
/* «Ja» er merkefiguren, ikke en hake — den trenger sitt eget format. */
.compare-table td .ico-mark { width: 27px; height: 10px; }

/* Enhetsprisliste — samme tabellramme som sammenligningen, men to
   spalter: post til venstre, pris høyrestilt. Tallene settes med
   tabulærsiffer så kolonnen står rett nedover. */
.unit-table { min-width: 460px; }
.unit-table th[scope="row"] { font-weight: 500; }
.unit-table th[scope="row"] small {
  display: block; margin-top: .25rem;
  font-family: var(--f-body); font-weight: 400;
  font-size: .78rem; line-height: 1.45; color: var(--c-text-4);
}
.unit-table__num {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--c-text) !important; font-weight: 500;
}
.unit-table thead .unit-table__num { color: var(--c-text-3) !important; font-weight: 500; }
.unit-table__suffix { color: var(--c-text-4); font-weight: 400; font-size: .85em; }
/* Tillegg er ikke en leveranse i seg selv — de tones ned og får
   aksentfargen på tallet, så de leser som påslag og ikke som poster. */
.unit-table tbody tr.is-mod th[scope="row"] { color: var(--c-text-3); font-weight: 400; }
.unit-table tbody tr.is-mod .unit-table__num { color: var(--c-accent) !important; }

/* Tilbud utenfor pakkene */
.offers { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 860px) { .offers { grid-template-columns: repeat(2, 1fr); } }
.offer { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.2rem); border-radius: var(--r-lg); }
.offer__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.offer__name { font-size: var(--fs-h4); letter-spacing: -.024em; }
.offer__price {
  font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500; letter-spacing: -.035em; color: var(--c-accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.offer__for { margin-top: .7rem; font-size: var(--fs-sm); color: var(--c-text-3); }
.offer__list {
  list-style: none; margin: 1.3rem 0 0; padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .7rem;
  font-size: var(--fs-sm);
  /* Luft ned mot knappen. Uten den klistrer siste punkt seg til
     knappen i kortet som har flest punkter og dermed ingen
     overskuddsplass igjen til «margin-top: auto». */
  margin-bottom: clamp(1.3rem, 2.2vw, 1.8rem);
}
.offer__list li { display: grid; grid-template-columns: 27px 1fr; gap: .7rem; align-items: start; }
.offer__list li > span:first-child { color: var(--c-accent-2); padding-top: .42em; }
.offer__list .ico-mark { width: 27px; height: 10px; display: block; }
/* Knappen skal stå i bunn, så de to kortene får lik nedre kant
   selv når det ene har én punkt mer enn det andre. */
.offer .btn { margin-top: auto; }

/* Vilkår */
.terms { display: grid; gap: clamp(.8rem, 1.6vw, 1.3rem); }
@media (min-width: 640px)  { .terms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .terms { grid-template-columns: repeat(3, 1fr); } }
.term { padding: 1.3rem 1.4rem; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.term__label { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent); }
.term__text { margin-top: .6rem; font-size: var(--fs-sm); color: var(--c-text-3); }

/* USP-argument */
.usp { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .usp { grid-template-columns: repeat(3, 1fr); } }
.usp__item { padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(255,255,255,.022); }
.usp__num { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .22em; color: var(--c-accent); }
.usp__title { margin-top: .8rem; font-size: var(--fs-h4); }
.usp__text { margin-top: .7rem; font-size: var(--fs-sm); color: var(--c-text-3); }

/* ============================================================
   PORTEFØLJE
   ============================================================ */
/* Samme problem som i galleriene sto her: en bred rute i 16:9 var
   487 px høy, naboen i 4:3 var 317, og differansen ble stående som
   et hull. Løsningen er den samme, men regnet motsatt vei — her er
   det den brede ruta som setter høyden, og den smale får forholdet
   som treffer nøyaktig samme høyde:

       en bred rute = to smale + ett mellomrom
       forhold(smal) = 16/9 × w / (2w + mellomrom) = 0,867

   Siden en bred rute per definisjon er to smale, stemmer det uansett
   hvor mange kolonner rutenettet finner plass til. Alle rader i
   porteføljen får dermed samme høyde, på alle skjermbredder.

   `dense` fyller igjen hull: uten den kunne en bred rute legge seg
   alene på en rad med tom plass ved siden av. */
.portfolio-grid {
  display: grid;
  /* auto-fit, ikke auto-fill: står det bare to prosjekter igjen
     etter et filter, kollapser de tomme sporene og de to deler
     bredden mellom seg i stedet for å klumpe seg til venstre. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  grid-auto-flow: row dense;
  gap: clamp(.8rem, 1.5vw, 1.4rem);
}
.portfolio-item { aspect-ratio: 0.867; transition: opacity .5s var(--e-out), transform .5s var(--e-out); }
.portfolio-item.is-filtered-out { display: none; }
.portfolio-item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
/* Med et filter på er det få ruter igjen, og en dobbeltbred rute
   får da sjelden plass i raden den havner i — det etterlater et
   hull. Under filter er derfor alle rutene like brede; da går
   det alltid opp. Det brede oppsettet er for «Alle prosjekter». */
.portfolio-grid.is-filtrert .portfolio-item--wide,
.portfolio-grid.portfolio-grid--smal .portfolio-item--wide {
  grid-column: span 1;
  aspect-ratio: 0.867;
}
/* Én kolonne: da er «bred» og «smal» det samme, og alt skal være likt. */
@media (max-width: 780px) {
  /* Alle kortene i samme format. Regelen for smal visning over
     (.portfolio-grid--smal, som JS setter når det er færre enn tre
     kolonner) er sterkere enn en vanlig klasse, og ga de brede kortene
     0,867 mens de andre fikk 3:2 — derfor var annethvert kort høyere. */
  .portfolio-grid .portfolio-item,
  .portfolio-grid .portfolio-item--wide,
  .portfolio-grid.portfolio-grid--smal .portfolio-item--wide,
  .portfolio-grid.is-filtrert .portfolio-item--wide { grid-column: span 1; aspect-ratio: 3 / 2; }
}

/* Siste rute alene på en rad tar hele bredden — høyden settes av
   js/modules/portfolio.js, som måler raden over.

   Står sist og med nok vekt til å slå både --wide og filterregelen
   over: uten det ville en bred rute under filter fortsatt holde på
   sin ene kolonne, og hullet vi prøver å lukke ble stående. */
.portfolio-grid .portfolio-item.portfolio-item--full {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}

.portfolio-empty { padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; color: var(--c-text-3); }

/* Casestudie-panel */
.case {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
@media (min-width: 1024px) { .case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.case--reverse .case__media { order: -1; }
@media (min-width: 1024px) { .case--reverse .case__media { order: 0; } .case--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.case__kicker { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent); }
.case__title { margin-top: .9rem; }
.case__text { margin-top: 1.2rem; color: var(--c-text-3); font-size: var(--fs-sm); max-width: 56ch; }
.case__facts { margin-top: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.2rem; }
.case__fact-num { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.04em; color: var(--c-text); }
.case__fact-label { margin-top: .3rem; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-4); }

/* ============================================================
   OM OSS
   ============================================================ */
.about-text {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.1vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -.032em;
  line-height: 1.28;
  color: var(--c-text);
  max-width: 24ch;
}

.values { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); }
.value {
  display: grid; gap: .5rem;
  padding-block: clamp(1.2rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.value:last-child { border-bottom: 1px solid var(--line); }
/* Etiketten (Misjon, Visjon …) står på egen linje over tittelen.
   Før var tittelen en flex-rad; animasjonen deler teksten i ord, og
   hvert ord ble da et eget flex-element med stor luke imellom, så
   lange titler brakk som «Ingen AI- / bilder eller filmer / generte».
   Nå flyter ordene som vanlig tekst. */
.value__title { display: block; font-family: var(--f-display); font-size: var(--fs-h4); line-height: 1.25; color: var(--c-text); letter-spacing: -.022em; text-wrap: balance; }
.value__title i { display: block; margin-bottom: .55rem; font-family: var(--f-mono); font-style: normal; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); }
.value__text { color: var(--c-text-3); font-size: var(--fs-sm); max-width: 60ch; }

.about-media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); }
.about-media video, .about-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Holder bildet i samme mørke stemning som resten av siden */
.about-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5,7,9,.78) 0%, rgba(5,7,9,.18) 45%, rgba(5,7,9,.42) 100%),
    radial-gradient(85% 70% at 50% 45%, transparent 30%, rgba(5,7,9,.4) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: inherit;
}
@media (max-width: 900px) { .about-media video, .about-media img { aspect-ratio: 4 / 3; } }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact { display: grid; gap: clamp(2rem, 4.5vw, 4.5rem); }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }

.contact__aside { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.4rem); }
.contact__big {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  font-weight: 400; letter-spacing: -.045em; line-height: 1.05;
  color: var(--c-text);
}
.contact__links { display: grid; gap: .95rem; }
.contact__link { display: flex; align-items: center; gap: .85rem; color: var(--c-text-2); font-size: var(--fs-sm); transition: color var(--t-fast) var(--e-out); }
.contact__link:hover { color: var(--c-accent); }
.contact__link svg { width: 15px; height: 15px; color: var(--c-text-4); flex: none; }

.form { display: grid; gap: clamp(1rem, 1.8vw, 1.35rem); }
.form__row { display: grid; gap: inherit; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: .5rem; }

/* Suksess-tilstand */
.form-success {
  display: none;
  padding: clamp(2rem, 4vw, 3.2rem);
  text-align: center;
  border-radius: var(--r-xl);
  border: 1px solid rgba(224,189,136,.3);
  background: radial-gradient(80% 100% at 50% 0%, rgba(224,189,136,.12), rgba(255,255,255,.02));
}
.form-success.is-visible { display: block; animation: pop-in .8s var(--e-out); }
@keyframes pop-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.form-success__mark { width: 62px; height: 62px; margin: 0 auto 1.4rem; }
.form-success__mark circle, .form-success__mark path { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-success__mark circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw 1s var(--e-out) forwards; }
.form-success__mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s var(--e-out) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Priskalkulator */
.calc { display: grid; gap: clamp(1.2rem, 2.2vw, 1.8rem); padding: clamp(1.5rem, 2.8vw, 2.3rem); }
.calc__row { display: grid; gap: .8rem; }
.calc__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc__val { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .1em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.calc__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.calc__opt {
  padding: .58rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255,255,255,.022);
  font-size: var(--fs-xs); color: var(--c-text-3);
  transition: all var(--t-fast) var(--e-out);
}
.calc__opt:hover { border-color: var(--line-3); color: var(--c-text); }
.calc__opt.is-active { border-color: rgba(224,189,136,.55); background: rgba(224,189,136,.14); color: var(--c-accent); }
.calc__result {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding-top: clamp(1.2rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--line);
}
.calc__amount {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 400; letter-spacing: -.04em; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
/* Linja rett under summen: hva grunnbeløpet er, eller en beskjed om
   at ingenting er valgt ennå. */
.calc__base { margin-top: .5rem; font-size: .7rem; color: var(--c-text-4); line-height: 1.5; max-width: 40ch; }
.calc__disclaimer { font-size: .7rem; color: var(--c-text-4); max-width: 34ch; line-height: 1.5; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* Der det store ordmerket sto, går nå det samme tjenestebåndet som
   over heroen. Det gjør den samme jobben — fyller bunnen og holder
   bevegelse i siden helt ned — men sier noe i tillegg.

   Båndet har allerede en linje under seg, så bunnraden skal ikke
   tegne enda en rett under den. */
.marquee--footer { margin-top: clamp(2.5rem, 5vw, 4rem); }
.marquee--footer + .container > .footer-bottom {
  margin-top: 1.6rem; padding-top: 0; border-top: 0;
}
.footer-cols { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 800px) { .footer-cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer-col__title { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-text-4); margin-bottom: 1.1rem; }
.footer-col__list { display: grid; gap: .7rem; }
.footer-col__list a, .footer-col__list li { font-size: var(--fs-sm); color: var(--c-text-3); list-style: none; transition: color var(--t-fast) var(--e-out); }
.footer-col__list a:hover { color: var(--c-accent); }
.footer-bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-xs); color: var(--c-text-4);
}
.footer-bottom a:hover { color: var(--c-text-2); }

/* ============================================================
   MERKET I 3D BAK KONTAKTSKJEMAET
   Ligger som et lag i bakgrunnen av seksjonen, ikke i flyten.
   Innholdet står over, og lerretet tar ingen klikk.
   ============================================================ */
/* Merket er parkert (se index.html). Laginndelingen under står igjen,
   slik at figuren kan legges tilbake uten at noe annet må røres. */
#kontakt { position: relative; isolation: isolate; overflow: clip; }
#kontakt > .container { position: relative; z-index: 1; }

.contact__mark {
  position: absolute;
  z-index: 0;
  /* Nede til høyre: der er det luft under skjemaet, og figuren får stå
     for seg selv i stedet for å ligge bak et kort. */
  right: -6%;
  bottom: 3%;
  width: clamp(32rem, 52vw, 60rem);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .78;
  /* Toner ut mot kantene, så den aldri møter innholdet med en hard slutt */
  -webkit-mask-image: radial-gradient(68% 68% at 52% 48%, #000 34%, transparent 82%);
          mask-image: radial-gradient(68% 68% at 52% 48%, #000 34%, transparent 82%);
}

@media (max-width: 1080px) {
  .contact__mark { opacity: .5; right: -22%; bottom: -4%; width: min(40rem, 92vw); }
}
/* På telefon står figuren under skjemaet i stedet for ved siden av,
   mindre og svakere. Den skal være der — det er de fleste besøkende
   som ser nettstedet herfra — men aldri komme i veien for feltene. */
/* På telefon finnes det ingen tom spalte å sette figuren i — der
   stables alt. Den flyttes derfor opp bak overskriften, som er det
   ene stedet med luft, og holdes svak nok til at teksten leses like
   lett. Bedre enn å skjule den: det er herfra de fleste ser
   nettstedet. */
@media (max-width: 720px) {
  .contact__mark {
    right: -30%;
    top: -1%;
    bottom: auto;
    width: min(26rem, 86vw);
    opacity: .26;
  }
}

/* ============================================================
   BRIXO
   Kort forklaring + tilbudet i Prosjekt Premium. Bygger på det som
   finnes fra før: .mockup-stage (scenen fra Grafisk design), .steps
   (nummerert liste), .offer (kortet fra «Rammeavtale»). Bare telefon-
   plassholderen, firepunktslisten og tilbudsoppsettet er nye.
   ============================================================ */

/* Etiketten er lengre enn i de andre seksjonene. På telefon får
   den bryte til to linjer i stedet for å stikke ut av skjermen. */
#brixo .section-index { max-width: 100%; flex-wrap: wrap; row-gap: .45rem; }

/* Stående scene på desktop, lavere på nettbrett og telefon. Telefonene
   styres av scenens høyde (se under), så de passer i alle tre. */
.mockup-stage.brixo-stage { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) { .mockup-stage.brixo-stage { aspect-ratio: 16 / 10; } }
@media (max-width: 640px)  { .mockup-stage.brixo-stage { aspect-ratio: 1 / 1; } }

/* To telefoner med ekte skjermbilder. Avvik bak til venstre, oppgaver
   foran til høyre — samme komposisjon som «Seksjon 4:5» i Design-
   lerretet. Bredde og plassering står i cqh (scenens høyde) og regnes
   fra midten av scenen, så figuren holder seg samlet og sentrert både
   i den stående scenen på desktop og den liggende på nettbrett/telefon. */
.mockup-stage.brixo-stage { container-type: size; }
.brixo-tlf {
  position: absolute; z-index: 2; margin: 0;
  padding: 1.1cqh;
  border-radius: 5.3cqh;
  background: linear-gradient(160deg, #323a45 0%, #0c1015 100%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 7cqh 10cqh -4cqh rgba(0,0,0,.95), 0 1.2cqh 2.8cqh -1.2cqh rgba(0,0,0,.85);
  transform: perspective(1800px) rotateX(6.3deg) rotateY(-14deg) rotateZ(1deg);
  transition: transform 1.1s var(--e-out);
  will-change: transform;
}
.brixo-tlf img {
  display: block; width: 100%; height: auto;
  border-radius: 4.2cqh;
}
.brixo-tlf--bak {
  width: 30cqh;
  left: calc(50cqw - 30.8cqh); top: 11.8cqh;
  transform: perspective(1800px) rotateX(6.3deg) rotateY(-14deg) rotateZ(1deg) scale(.97);
}
/* Telefonen bak dempes med et lag over, ikke med filter: et filter på
   et element i 3D tegnes i lav oppløsning i Chrome, og skjermbildet
   ble uskarpt. */
.brixo-tlf--bak::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(7, 9, 12, .26);
  pointer-events: none;
}
.brixo-tlf--fram { width: 33.2cqh; left: calc(50cqw - 3.2cqh); top: 21.6cqh; z-index: 3; }
/* Som brosjyren i Grafisk design: vinkelen slakkes litt når musa er over */
.brixo-stage:hover .brixo-tlf--fram { transform: perspective(1800px) rotateX(3deg) rotateY(-6deg) rotateZ(0deg) scale(1.02); }
.brixo-stage:hover .brixo-tlf--bak  { transform: perspective(1800px) rotateX(3deg) rotateY(-6deg) rotateZ(0deg) scale(.97); }
@media (prefers-reduced-motion: reduce) { .brixo-tlf { transition: none; } }

/* Fire punkter — samme merke som i pakkene */
.brixo-liste {
  list-style: none; margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; padding: 0;
  display: grid; gap: .8rem 1.6rem;
  font-size: var(--fs-sm); color: var(--c-text-2);
}
@media (min-width: 560px) { .brixo-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brixo-liste li { display: grid; grid-template-columns: 27px 1fr; gap: .7rem; align-items: start; }
.brixo-liste li > span:first-child { color: var(--c-accent-2); padding-top: .42em; }
.brixo-liste .ico-mark { width: 27px; height: 10px; display: block; }

/* «Les mer om Brixo ↗» — tekstlenke, ikke en tredje knapp */
.brixo-lenke {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font-size: var(--fs-sm); color: var(--c-text);
  border-bottom: 1px solid rgba(224,189,136,.4);
  padding-bottom: .15rem;
  transition: color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.brixo-lenke:hover { color: var(--c-accent); border-color: var(--c-accent); }
.brixo-lenke__ikon svg { width: 14px; height: 14px; display: block; }

/* Tilbudet: tallet i egen kolonne til venstre (6 / måneder inkludert),
   tekst og knapper til høyre. På telefon legger tallet seg som en rad
   over teksten. Knappene står side om side og brytes pent når de ikke
   får plass. */
.brixo-tilbud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
.brixo-tilbud__tall {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-right: clamp(1.6rem, 4vw, 3.5rem);
  border-right: 1px solid var(--line-2);
  align-self: stretch;
}
.brixo-tilbud__num {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4.5rem, 9vw, 7.5rem); line-height: 1;
  /* Tekst med gradient klippes ved kanten av boksen sin. Negativ
     bokstavavstand gjorde boksen smalere enn sifferet, og høyre side
     av «6» ble kuttet. Ingen negativ avstand, og litt luft rundt. */
  letter-spacing: 0;
  padding: 0 .08em;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brixo-tilbud__enhet {
  margin-top: .9rem;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-text-3); text-align: center; line-height: 1.7;
}
.brixo-tilbud .offer__for { max-width: 64ch; font-size: var(--fs-body); color: var(--c-text-2); line-height: var(--lh-body); }
.brixo-tilbud__knapper { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.4rem, 2.4vw, 1.9rem); }
.brixo-tilbud .btn { margin-top: 0; }
@media (max-width: 640px) {
  .brixo-tilbud { grid-template-columns: minmax(0, 1fr); }
  .brixo-tilbud__tall {
    flex-direction: row; justify-content: flex-start; gap: 1rem;
    padding: 0 0 1.4rem; border-right: 0; border-bottom: 1px solid var(--line-2);
  }
  .brixo-tilbud__enhet { margin-top: 0; text-align: left; }
  .brixo-tilbud__knapper .btn { width: 100%; }
}