/* Alle verdier er lest ut av docs/reference-390.json, -768.json og -1280.json,
   malt pa den levende siden 30. august 2026 ved 390x720, 768x720 og 1280x720.
   Endres et tall her uten at fasiten endres, blir _scripts/gate.sh rod.
   Det er meningen.

   Brytepunktene er originalens egne, ikke runde tall vi fant pa:
     1200px  Astras innholdspadding (--ast-container-default-xlg-padding
             klemmes til min(40px, 20px) under 1201px)
      976px  Spectras nettbrettbrytning
      921px  Astras typografi, nettbrett
      767px  Spectras mobilbrytning
      544px  Astras typografi, mobil

   Strukturen speiler originalens Spectra-oppsett uten a arve klassenavnene:
   hver .block er en "root container" som trekkes ut i full bredde med
   negativ margin-inline lik --space, og .content er den indre kolonnen med sin
   egen maksbredde. Uten det paret treffer verken bredder eller linjebrytning. */

:root {
  --text:        rgb(34, 34, 34);
  --text-light:    rgb(255, 255, 255);
  --text-blue:   rgb(30, 41, 59);
  --button-blue:   rgb(17, 28, 68);
  --accent:       rgb(255, 0, 0);
  --white:         rgb(255, 255, 255);
  --black:        rgb(0, 0, 0);

  --font-title:  'Montserrat', sans-serif;
  --font-body:    'Source Sans Pro', sans-serif;
  --font-ui:      'DM Sans', sans-serif;

  --space:         40px;   /* main-padding; .block trekker seg ut med like mye */

  /* Spectras container-skygge. Null utstrekning, men den ligger i fasiten
     pa hver eneste seksjon - derfor er den ogsa her. */
  --block-shadow: rgba(0, 0, 0, 0.44) 0px 0px 0px 0px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Originalen setter antialiased pa body. Uttrekket maler den ikke, men den
     endrer tykkelsen pa all tekst - tydeligst pa lys tekst mot mork bakgrunn,
     der kopien sto merkbart fetere. Funnet i den visuelle sidestillingen. */
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
}

img { max-width: 100%; }

/* ── Typeskala ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 400; margin: 0; }

h1 { font-size: 72px;   line-height: 1.4em;  margin-bottom: 15px; }
h2 { font-size: 72px;   line-height: 1.3em;  text-transform: uppercase; }
h3 { font-size: 48px;   line-height: 1.3em; }
h4 { font-size: 24px;   line-height: 1.2em;  margin-bottom: 15px; }

/* Brodteksten arver storrelse og linjehoyde fra body. Det er ikke en
   forenkling: originalen setter dem bare pa body, og forholdstallet 1.65
   folger med ned i hvert barn. */
p  { font-family: var(--font-body); font-weight: 400; margin: 0; }

mark { background: none; color: var(--accent); }

/* ── Blokkrammen ───────────────────────────────────────────────────────── */

/* Originalen bryter lange ord: break-word inne i innholdet, anywhere i
   footeren. Forskjellen er min-content-bredden - og den avgjor bade
   linjebrytningen i smale spalter og hvor brede rutenettkolonnene blir. */
main   { padding: 0 var(--space); overflow-wrap: break-word; }
.footer { overflow-wrap: anywhere; }

.block {
  position: relative;
  display: flex;
  max-width: 100vw;
  margin-inline: calc(-1 * var(--space));
  box-shadow: var(--block-shadow);
}

.content {
  width: 100%;
  max-width: min(100%, 1200px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
.content-row     { flex-direction: row; align-items: flex-start; }
.content-800     { max-width: min(100%, 800px); }
.content-768     { max-width: min(100%, 768px); }
.content-grid{ max-width: min(100%, 100%); display: grid;
                   grid-template-columns: 1fr 1fr; gap: 5px; align-items: stretch; }

.heading { width: 100%; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 10px;
  overflow: hidden;
}
.hero-video-frame {
  position: absolute; inset: 0; z-index: 0;
  background: var(--white);
}
/* line-height 1 er originalens egen (uagb-container__video-wrap video).
   Fasiten maler <video>, og der er linjehoyden alltid lik fontstorrelsen -
   som i sin tur arves fra body, og folger dermed 20px/17px-brytningen. */
.hero-video-frame video {
  display: inline-block; position: static;
  width: 100%; height: 100%; max-width: 100%;
  line-height: 1;
  object-fit: cover;
}
/* Bakgrunnen bak videoen er originalens egen: den vises mens filen laster. */
.hero-video-frame video {
  opacity: 0.8;
  background: url(assets/bilder/fineartprinting-sepe-detail-side.webp) 50% 50%;
  background-size: cover;
}
.hero-content { position: relative; z-index: 1; gap: 20px; }
.hero-heading { text-align: center; }
.hero h1, .hero h4 { color: var(--text-light); text-align: center; text-transform: none; }
.hero h4 { font-family: var(--font-title); }

.divider { border: 0; border-top: 2px solid var(--text-light); margin: 0 auto; }
.divider-45 { width: 45%; margin-bottom: 10px; }
.divider-15 { width: 15%; margin-bottom: 0; }

/* ── Intro ─────────────────────────────────────────────────────────────── */

.intro-title { padding: 50px 40px 0; gap: 20px; }
.intro-title .content { gap: 20px; }
.intro-heading { text-align: center; padding: 50px 0 15px; }
.intro-title h2 { color: var(--text); text-align: center; }

.intro-text { padding: 50px 40px 80px; gap: 20px; }
.intro-text .content { gap: 20px; }
/* Den forste spalten har 50px hoyrepadding i originalen, pa alle bredder.
   Den flytter linjebrytningen: pa 390px blir avsnittet 14 linjer i stedet
   for 12. Den sitter pa wrapperen, ikke pa .column - se kommentaren i
   index.html. */
.column-content { width: 100%; }
.intro-text .column:first-child .column-content { padding-right: 50px; }

.column {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
}
.lead { text-align: left; margin: 0 0 2em; }      /* 40px / 34px */

/* ── Trykkmetodene ─────────────────────────────────────────────────────── */

.method {
  min-height: 60vh;
  margin-bottom: 5px;
  padding: 10px;
  gap: 20px;
  overflow: hidden;
}
.method .content { gap: 20px; }
.method-card {
  width: 100%; max-width: 1000px;
  padding: 30px; border-radius: 20px;
  text-align: center;
}
/* Originalens egen «bg-blur»-klasse, hentet fra sidens innebygde stilark. */
.bg-blur { backdrop-filter: blur(10px); }

.method h2 { color: var(--text-light); text-align: center; margin-bottom: 10px; }
.method p  { color: var(--text-light); text-align: center; margin-bottom: 20px; }

[data-ref="fotografi"], [data-ref="giclee"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
[data-ref="fotografi"] {
  background-image: url(assets/bilder/digital-giclee-technique-onarts.webp);
  background-position: 50% 50%;
}
[data-ref="giclee"] {
  background-image: url(assets/bilder/fineartprinting-sepe-detail-side.webp);
  background-position: 67% 49%;
}

/* Spectras bakgrunnsoverlegg. De ligger som ::before over bakgrunnsbildet,
   og uttrekket maler ikke pseudo-elementer - CTA-en sto med et 70% hvitt
   slor i originalen og uten i kopien, uten at porten sa noe. Funnet i den
   visuelle sidestillingen 30. august 2026. */
[data-ref="fotografi"]::before,
[data-ref="giclee"]::before,
.cta::before {
  content: ""; position: absolute; inset: 0;
}
[data-ref="fotografi"]::before,
[data-ref="giclee"]::before { background: rgb(17, 17, 17); opacity: 0.15; }
.cta::before                  { background: var(--white);     opacity: 0.7; }

/* Innholdet ligger over overlegget - originalens egen regel pa hver
   container som ikke er video- eller formwrapper. */
.block > .content { position: relative; }

/* ── Mobilkortene ──────────────────────────────────────────────────────── */
/* Originalens uag-hide-desktop/uag-hide-tab: samme tekst som kortet oppa
   bildet, men som egen blokk i flyten. Skjult over 767px. */

.mobile-card { display: none; }

/* ── Bannere ───────────────────────────────────────────────────────────── */
/* Fasiten har en ugjennomsiktig svart gradient OVER bildet. Originalen viser
   altsa ikke natures-01 i det hele tatt her - bildet lastes, men dekkes.
   Det er kopiert som malt, ikke som antatt. */

.banner {
  padding: 300px 25px;
  gap: 0;
  background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0)),
                    url(assets/bilder/natures-01.webp);
}
.banner-low { padding: 250px 25px; }
.banner .content { gap: 0; }
.banner h2 { color: var(--text-light); text-align: center; margin-bottom: 50px; }
.banner p  { color: var(--text-light); text-align: center; }

/* ── Papirkortene ──────────────────────────────────────────────────────── */

.paper-card { display: grid; margin-bottom: 5px; padding: 0; }
/* Annethvert kort speilvendes i originalen: bildet star til hoyre pa 02, 04
   og 06. Porten ser det ikke - de to rutene er divs uten rolle - sa dette er
   malt med getBoundingClientRect mot den levende siden, ikke lest av fasiten. */
.paper-card.mirrored .paper-image { order: 2; }
.paper-image {
  min-height: 650px;
  background-size: cover;
  background-repeat: no-repeat;
}
.paper-text {
  background: var(--black);
  padding: 80px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: left;
}
.paper-prefix {
  display: block; width: 100%;
  font-family: var(--font-body); font-size: 16px; line-height: 1em;
  font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 24px;
}
.paper-card h2 { width: 100%; color: var(--text-light); text-align: left; margin-bottom: 20px; }
.paper-card p  { width: 100%; color: var(--text-light); text-align: left; }

.paper-image-01 { background-image: url(assets/bilder/ultra-smooth-3-2.webp);    background-position: 28% 67%; }
.paper-image-02 { background-image: url(assets/bilder/white-velvet-3-2.webp);    background-position: 34% 64%; }
.paper-image-03 { background-image: url(assets/bilder/rag-3-2.webp);             background-position: 35% 60%; }
.paper-image-04 { background-image: url(assets/bilder/rag-satin-3-2.webp);       background-position: 36% 63%; }
.paper-image-05 { background-image: url(assets/bilder/museum-etching-3-2.webp);  background-position: 33% 68%; }
.paper-image-06 { background-image: url(assets/bilder/german-etching-3-2.webp);  background-position: 34% 62%; }
.paper-image-07 { background-image: url(assets/bilder/william-turner-3-2.webp);  background-position: 35% 63%; }

/* ── Mellomrom ─────────────────────────────────────────────────────────── */

.spacer {
  padding: 100px 0;
  flex-direction: column;
  gap: 100px 0;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}

/* ── Stegene ───────────────────────────────────────────────────────────── */

.step-all {
  padding: 112px 40px;
  gap: 48px 0;
  background-color: var(--white);
}
.step-all .content { align-items: flex-start; row-gap: 48px; }
.step-stack {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  row-gap: 24px;
}
.step {
  position: relative; top: 0; z-index: 1;
  transition-property: top, bottom;
  transition-duration: 250ms;
  transition-timing-function: ease;
  width: 100%; max-width: 100%;
  display: flex; flex-direction: row;
  align-items: flex-start; justify-content: flex-start;
  gap: 0 72px;
  background-color: var(--white);
  box-shadow: var(--block-shadow);
}
.step-1 { padding: 44px 0 20px; }
/* Steg 2 og 3 har en 1px rod topplinje i originalen. Den er lett a overse -
   men den er ogsa den ene pikselen som skilte kopien fra fasiten her. */
.step-2 { padding: 70px 0 20px; border-top: 1px solid var(--accent); }
.step-3 { padding: 70px 0 50px; border-top: 1px solid var(--accent); }

.step-left {
  width: 100%; max-width: 30%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  row-gap: 32px;
}
.step-right {
  width: 100%; max-width: 70%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  row-gap: 0;
}
.step-badge { width: 100%; text-align: center; }
.step-number { display: inline-flex; padding: 5px; }
.step-number svg { width: 90px; height: 90px; box-sizing: content-box; fill: rgb(51, 51, 51); }

.step h2 { text-align: start; color: var(--text); }
.step h3 { text-align: start; color: var(--text); text-transform: none; }
.step p  { text-align: start; color: var(--text); }
/* Originalens tomme <p> mellom overskrift og brodtekst. Den er null hoy,
   men bærer 32px bunnmarg - og den ligger i fasiten. */
.empty-space { position: relative; margin: 0 0 1.6em; } /* 32px / 27.2px */
/* Den tomme containeren nederst i hvert steg. Den er hele grunnen til at
   stegene er sa hoye, og til at sticky-effekten rekker a virke. */
.step-gap { width: 100%; padding: 10px; z-index: -1; }
.step-gap-350 { min-height: 350px; }
.step-gap-100 { min-height: 100px; }

/* ── CTA ───────────────────────────────────────────────────────────────── */

.cta {
  padding: 112px 40px;
  gap: 0;
  background-image: url(assets/bilder/etching-technique-onarts.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 54% 44%;
  background-attachment: fixed;
}
.cta-card {
  width: 100%;
  padding: 75px 25px;
  background: var(--white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  row-gap: 50px;
}
.cta-text { width: 100%; text-align: center; }
.cta-above {
  font-size: 16px; line-height: 1em; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-blue); margin-bottom: 24px;
}
.cta h2 { color: var(--text-blue); text-align: center; margin-bottom: 20px; }
.cta-below { color: var(--text); text-align: center; margin: 0 12%; }

.cta-buttons { display: flex; flex-direction: row; gap: 10px; }
.btn {
  font-family: var(--font-ui); font-size: 20px; line-height: 20px;
  font-weight: 500; text-transform: uppercase; text-decoration: none;
  text-align: start; border-radius: 50px;
  display: flex; justify-content: center; align-items: center;
}
.btn-filled {
  color: var(--text-light); background-color: var(--accent);
  padding: 25px 75px; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 0px;
}
/* Rammen er 5px rod pa alle bredder, ikke 1px mork. Porten ser hverken
   rammebredde eller -farge, og pa desktop star knappene side om side der den
   fylte knappen er hoyest - sa feilen gjemte seg i to lag. Den visuelle
   sidestillingen fant den. */
.btn-hollow {
  color: var(--text); background: transparent;
  padding: 20px 70px; border: 5px solid var(--accent);
}

/* Ikonet ligger etter teksten, 20x20, med 8px avstand. */
.btn-icon { display: flex; align-items: center; margin-left: 8px; }
.btn-icon svg { width: 20px; height: 20px; display: block; }
.btn-filled .btn-icon svg { fill: var(--text-light); }
.btn-hollow  .btn-icon svg { fill: var(--text-blue); }

/* ── Hahnemühle-stripe ─────────────────────────────────────────────────── */

.hahnemuhle {
  padding: 92px 0 0;
  flex-direction: column;
  gap: 20px 0;
  justify-content: center;
  align-items: center;
}
.hahnemuhle-figure { margin: 0; width: 100%; }
.hahnemuhle img { display: inline; vertical-align: bottom; max-width: 100%; width: 100%; height: auto; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer { background-color: var(--white); padding: 0; margin: 0; }
/* Full bredde, men med sidens egen --space i sidene: uten den står teksten
   klint inntil viewport-kanten. 40px over 1200, 20px under - samme rytme som
   main har. Mobilregelen under setter 20px hele veien rundt. */
.footer-top { display: grid; padding: 45px var(--space); min-height: 200px; background: var(--white); }
/* Full bredde: originalens 1200px-tak er fjernet 31. august 2026. Footeren
   måles ikke lenger mot originalen - se redesignet i reference-map.json.
   Én kolonne siden Info-spalten ble fjernet samme dag. */
.footer-top .footer-row {
  min-height: 200px; width: 100%;
  display: grid; grid-template-columns: 1fr;
  align-items: flex-start;
}
/* Hver footerspalte er bygget av Astra-widgets med 1.25em bunnmarg. Den
   kollapser med h4-ens egne 20px og vinner: 21.25px pa mobil, 25px pa
   desktop. Uten wrapperen blir hver spalte 1.25px for lav - nok til a felle
   porten pa footerens hoyde. */
.footer-widget { margin-bottom: 1.25em; }
.footer-widget:last-child { margin-bottom: 0; }

.footer h4 { color: var(--text); text-align: left; margin-bottom: 20px; }
.footer-top p { color: var(--text); text-align: left; margin-bottom: 1.75em; } /* 35px / 29.75px */
.footer mark { color: var(--accent); }

.footer-bottom { display: grid; padding: 25px; min-height: 30px; background: var(--black); }
.footer-bottom .footer-row {
  max-width: 1200px; min-height: 30px; margin-inline: auto; width: 100%;
  display: grid; align-items: center;
}
.footer-bottom p {
  font-size: 16px; text-align: center;   /* linjehoyden arves: 16 x 1.65 = 26.4px */
  color: var(--text-light); margin: 0;
}

/* ── Animasjoner ───────────────────────────────────────────────────────── */
/* Retning og varighet er fasitens, ikke valgt fritt. script.js setter
   --aos-duration per element fra data-aos-duration. */

[data-aos] {
  opacity: 0;
  transition: opacity var(--aos-duration, 400ms) ease,
              transform var(--aos-duration, 400ms) ease;
}
/* Startavstanden er AOS-bibliotekets egen: 100px, ikke 40. Malt pa
   originalen for animasjonen utloses. Porten ser den ikke - den maler
   hviletilstanden etter at animasjonen er ferdig. */
[data-aos="fade"]       { transform: none; }
[data-aos="fade-up"]    { transform: translateY(100px); }
[data-aos="fade-down"]  { transform: translateY(-100px); }
[data-aos="fade-left"]  { transform: translateX(100px); }
[data-aos="fade-right"] { transform: translateX(-100px); }

[data-aos].aos-done { opacity: 1; transform: none; }

/* Uttrekket maler hviletilstand. Uten denne ville porten lest opacity 0 for
   alt under folden - noyaktig fellen som ga blanke skjermbilder 30. august. */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1; transform: none; transition: none; }
}

/* ══ Responsivt ═════════════════════════════════════════════════════════════
   Alt som endrer seg med bredden star her, ikke spredt utover fila. Blokkene
   kommer i synkende rekkefolge, sa den smaleste vinner sist - samme kaskade
   som originalen har.

   Verdiene er malt, ikke valgt: docs/reference-768.json og docs/reference-390.json.
   Brytepunktene er originalens, se toppen av fila. */

/* ── ≤1200px: Astras innholdspadding klemmes til 20px ──────────────────── */
@media (max-width: 1200px) {
  :root { --space: 20px; }
}

/* ── ≤976px: Spectras nettbrettverdier ─────────────────────────────────── */
@media (max-width: 976px) {
  /* Spectra overstyrer den indre maksbredden pa nettbrett - 1024px for alle
     blokker, uansett hva de har pa desktop (800, 768, 1200 eller 100%).
     Under 977px er det derfor denne som gjelder, ikke blokkens egen. */
  .content, .content-800, .content-768, .content-grid {
    max-width: min(100%, 1024px);
  }

  .intro-heading { padding: 20px 0 0; }

  .banner, .banner-low      { padding: 80px 32px; }
  .banner h2                { margin-bottom: 32px; }

  .spacer                { padding: 80px 32px; gap: 40px 0; }

  .paper-card h2             { margin-bottom: 16px; }
  .paper-text              { padding: 20px; }

  .step-all                { padding: 80px 32px; gap: 50px 0; }
  /* Alle tre stegene far samme padding pa nettbrett - forskjellen pa 44/70/70
     og 20/20/50 er en ren desktop-sak. Den rode topplinja pa steg 2 og 3 blir
     staende. */
  .step                     { padding: 24px 0 0; gap: 0 40px; align-items: stretch; }
  .step-left             { row-gap: 0; }

  .cta                      { padding: 80px 32px; }
  .cta-card                 { width: 500px; padding: 40px; row-gap: 24px; }
  .cta h2                   { margin-bottom: 16px; }
  .cta-above                 { margin-bottom: 20px; }
  .cta-below                { margin: 0; }

  .contact h2               { margin: 0 0 16px; }
  .contact-title           { padding-right: 20%; }

  .hahnemuhle               { padding: 80px 0 0; gap: 32px 0; justify-content: flex-start; }
}

/* ── ≤921px: Astras typeskala, nettbrett ───────────────────────────────── */
@media (max-width: 921px) {
  body { font-size: 17px; }
  /* Astras footerbygger stabler spaltene fra 921px og gir hver av dem 10px
     bunnmarg (.ast-footer-row-tablet-stack). Pa toppraden forsvinner den i
     min-height: 200px; i bunnraden er den hele forskjellen mellom 30 og 36. */
  .footer-column { margin-bottom: 10px; }
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h3 { font-size: 25px; }
  h4 { font-size: 20px; }
}

/* ── ≤767px: Spectras mobilverdier ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Spectra setter flex-wrap: wrap pa hver container under 767px. Det er den
     ene erklaeringen som far stegene til a stable seg. */
  .content, .step { flex-wrap: wrap; }
  .content, .content-800, .content-768, .content-grid {
    max-width: min(100%, 767px);
  }

  .intro-title      { padding: 64px 24px 24px; }
  .intro-heading  { padding: 0 15px; }
  .intro-text       { padding: 0 24px; }

  /* Kortet med tekst over trykkmetodene er skjult pa mobil i originalen.
     Da blir seksjonens tekst tom og h2 leses uten text-transform - begge
     deler folger av display: none, og begge ligger i fasiten. */
  .method-card       { display: none; }
  .method h2,
  .method p          { text-align: left; }
  /* Originalen ga mobilpadding til to av de tre trykkmetodene; fotografi sto
     igjen med 10px. Silketrykk er fjernet, sa bare giclee er igjen her. */
  [data-ref="giclee"] { padding: 64px 24px; }

  .banner, .banner-low { padding: 64px 24px; }
  .banner h2           { margin-bottom: 28px; }
  /* Bare papirbanneret har mobil-minstehoyde i originalen. Detaljbanneret
     har ingen - derfor star den her og ikke pa .banner. */
  [data-ref="papir-intro"] { min-height: 600px; }

  .spacer           { padding: 64px 0; gap: 40px 0; }

  .content-grid    { grid-template-columns: 1fr; }
  /* Speilvendingen er en desktop- og nettbrettsak. Nar kortene stables, ligger
     bildet overst pa alle sju. */
  .paper-card.mirrored .paper-image { order: 0; }
  .paper-image         { min-height: 300px; }
  .paper-text         { padding: 50px 20px; min-height: 450px; }
  .paper-card h2        { margin-bottom: 12px; }
  .paper-prefix       { font-size: 15px; margin-bottom: 16px; }

  .step-all           { padding: 64px 24px; gap: 40px 0; }
  .step                { gap: 16px 0; }
  .step-left,
  .step-right          { max-width: 100%; }
  /* Begge luftcontainerne faller til samme verdi pa mobil. */
  .step-gap-350,
  .step-gap-100       { min-height: 50px; }

  .cta                 { padding: 64px 24px; }
  .cta-card            { width: 100%; padding: 24px; }
  .cta h2              { margin-bottom: 12px; }
  .cta-above            { font-size: 15px; margin-bottom: 16px; }
  .cta-buttons         { flex-direction: column; }

  .contact             { padding: 10px 15px 100px; }
  .contact h2          { margin: 0 0 12px; }
  .field-50             { width: 100%; }

  .hahnemuhle          { padding: 64px 0 0; gap: 65px 0; flex-direction: row; }

  .mobile-card           { display: flex; padding: 40px 20px 30px; gap: 20px; }
  .mobile-card-content   { max-width: min(100%, 767px); align-items: flex-start; }
  .mobile-card-box      { width: 100%; text-align: left; }
  .mobile-card h2        { color: var(--text-blue); text-align: left; margin: 0 0 10px; }
  .mobile-card-text     { text-align: left; margin: 0 0 20px; }
}

/* ── ≤544px: Astras typeskala, mobil ───────────────────────────────────── */
@media (max-width: 544px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }

  /* Footerbyggeren er Astras, ikke Spectras - derfor brytes den her og ikke
     pa 767px. Luften rundt krymper; kolonnebrytningen forsvant da footeren
     ble en kolonne overalt. */
  .footer-top                { padding: 20px; }
}