/* ============================================================
   AEROS — forslag til ny aerosphone.com-forside
   Paletten er UENDRET (temaets :root). Det som er nytt:
   oppreiste overskrifter, tyngre brødtekst, ingen tekst oppå bilde.
   Bevisst ett tema — siden er navy, slik den alltid har vært.
   ============================================================ */
:root{
  /* --- AEROS' egne tokens, ordrett fra theme/style.css --- */
  --navy:#0B141E;         /* flate A */
  --navy-2:#102030;       /* flate B */
  --cream:#FFFBEF;        /* tekst   */
  --gold:#C6B996;
  --gold-light:#FFF1CB;
  --gold-ink:#7E6F45;     /* gull mørknet for krem-flata */
  --blue:#345A83;
  --ink:#14100A;
  --paper:#FFFBEF;        /* flate C */

  /* --- nytt: tekstnivåer med gulv. Ingenting under .62 --- */
  --txt:#FFFBEF;
  --txt-2:rgba(255,251,239,.82);
  --txt-3:rgba(255,251,239,.64);
  --rule:rgba(198,185,150,.22);
  --rule-soft:rgba(255,251,239,.10);

  /* ÉN sloer-definisjon for alle baand. Bevisst ett tall og ikke per-bilde-tuning:
     da finnes det ingen variant aa glemme naar et motiv byttes.
     Gjelder KUN >=1000px - paa mobil staar teksten under bildet.
     Maalt paa kompositten, venstre 42%, krem tekst, VERSTE piksel:
       betonghall 11,9  ·  høst/kord 11,4  ·  travertin 10,4  ·  haand 9,5
     Uten sloer ligger de samme motivene paa 1,03-1,81 — altsaa usynlig tekst.
     ⛔ Nytt motiv i et baand ⇒ regn kompositten paa nytt foer bytte. */
  /* ---------- SLOERENE ----------
     Tor 01.09: «effekten skal vaere veldig liten - bare litt for aa fremheve
     tekst. Det er fint naar teksten er i bildet.»
     Derfor er dette den letteste varianten som fortsatt er trygg. Malt paa
     alle seks motivene, verste piksel i tekstsonen:
       desktop 6,5-8,0  ·  mobil 7,9-9,0     demping av motivet: 3 % / 7 %
     🔴 GRENSEN ER MALT, IKKE VALGT. Skaleres toppverdien videre ned:
          0,70 -> 4,6 (saa vidt AA)   0,60 -> 3,9 (FEILER)   0,50 -> 3,3
        Raa-kontrasten uten sloer er 1,03-1,81 paa disse motivene - altsaa
        usynlig tekst. ⛔ Ikke senk under dette uten aa maale paa nytt.
     ⛔ Fallet begynner foerst etter tekstboksens hoyre kant (46 % / 54 %). */
  --veil:linear-gradient(90deg,
      rgba(11,20,30,.76) 0%,
      rgba(11,20,30,.72) 34%,
      rgba(11,20,30,.62) 46%,
      rgba(11,20,30,.38) 58%,
      rgba(11,20,30,.17) 68%,
      rgba(11,20,30,.04) 78%,
      rgba(11,20,30,0)   86%);

  --veil-m:linear-gradient(90deg,
      rgba(11,20,30,.78) 0%,
      rgba(11,20,30,.74) 42%,
      rgba(11,20,30,.66) 54%,
      rgba(11,20,30,.42) 64%,
      rgba(11,20,30,.19) 74%,
      rgba(11,20,30,.05) 83%,
      rgba(11,20,30,0)   90%);

  /* ---------- TYPOGRAFISK SKALA ----------
     Ni roller, ett sted. Foer dette hadde siden fire ulike broedtekst-
     stoerrelser og en snudd hierarki paa mobil: hero-h1 var 20,7 px mens
     krem-h2 var 29. Naa er avstanden mellom nivaaene den samme overalt.
     ⛔ Skriv aldri en `font-size` med tall direkte i en komponent - bruk en
        rolle. Trenger du en stoerrelse som ikke finnes, mangler det en rolle. */
  /* ⛔ MAA VAERE MINDRE ENN `--t-h2`. Paa 86px stjal summen fokus fra
     overskriftene og snudde hierarkiet: et tall i en seksjon kan ikke veie
     mer enn sidens overskrifter. Naa eier tallet sin egen seksjon, mens
     overskriftene eier siden. */
  --t-display:clamp(24px,5.6vw,38px);    /* pledge-summen, 4.3" */
  /* Prisen er asken, men foelger samme regel: et tall eier sin seksjon,
     aldri siden. Paa 54px var den sidens stoerste element. */
  --t-figure:clamp(24px,6vw,40px);       /* prisen */
  --t-hero:clamp(22px,5.8vw,46px);       /* h1 og h2 som staar I et bilde */
  --t-h2:clamp(25px,6.4vw,40px);         /* seksjonsoverskrift */
  --t-h3:clamp(17px,1.9vw,20px);
  --t-lead:clamp(16px,1.9vw,18px);
  --t-body:clamp(15.5px,1.7vw,16.5px);
  --t-small:clamp(14px,3.6vw,15.5px);    /* broedtekst i et bilde */
  --t-note:clamp(13px,1.4vw,13.5px);
  --t-label:clamp(11px,1.2vw,12px);      /* eyebrow, knapp, etiketter */

  --edge:clamp(22px,5vw,64px);
  --read:63ch;

  --f-sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif;
  --f-serif:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --f-logo:'Bell MT','Libre Baskerville',Georgia,serif;

  /* ✅ LAAST 01.09: sans til alt, serif til TALLENE. Bryteren er fjernet.
     TO ROLLER, IKKE EN.
     Merkevaren ligger i ORDMERKET (Bell MT, .18em) - ikke i at overskriftene
     tilfeldigvis er serif. Libre Baskerville i overskrifter er en generisk
     premium-serif; tusenvis av sider bruker den. Men ren Inter er ogsaa
     anonym, saa svaret er hverken-eller:
       overskrifter = sans   (lesbarhet: 4,0px tynneste strek mot serifens 2,0)
       TALLENE      = serif  (der AEROS faktisk er distinkt - 100 mm, 4.3",
                              55, 12, $399. Produktet ER definert av maal.)
     Da staar serifen igjen paa ordmerket og paa tallene, som er de to stedene
     den betyr noe, og brodteksten slipper aa betale for den. */
  --f-head:var(--f-sans);
  --f-num:var(--f-serif);
  --num-weight:400;
  --head-weight:600;
  --head-track:-.015em;
  --head-style:normal;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--navy);
  color:var(--txt);
  font-family:var(--f-sans);
  font-weight:400;              /* var 300 — Inter Light på navy er selve usynlighetsfella */
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-light)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- forslags-stripa (ikke en del av siden) ---------- */
/* (.pitch — FORSLAG-stripa — fjernet ved deploy 02.09) */

/* ---------- flater ---------- */
section{padding:clamp(60px,8vw,104px) 0}
.A{background:var(--navy)}
.B{background:var(--navy-2)}
.C{background:var(--paper);color:#241F16}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--edge)}
/* ⛔ `.narrow` var ustylet. Tre seksjoner brukte den som en smal spalte, men
   uten regler var den full viewportbredde - og `.ask` inni (max-width 520px)
   fylte derfor hele telefonskjermen og leste som en flate, ikke et kort. */
.narrow{max-width:760px;margin-inline:auto;padding-inline:var(--edge)}

.wrap-mid .stack{align-items:center}
/* Videoen staar alene i sin egen seksjon fra 01.09 (Tor). Ingen tekstspalte
   ved siden av - da er den sentrert og bundet, ikke full bredde. */
/* ---------- PLEDGEN OG RENDEREN ----------
   ⛔ Figuren laa direkte i <section>, ikke i `.wrap`. Seksjoner har bare
      VERTIKAL padding, saa videoen gikk kant-til-kant paa telefon og ble
      1180px bred paa skjerm - «alt for stor» (Tor 01.09). Begge deler var
      samme feil: den manglet en spalte aa ligge i.
   Paa desktop staar pledgen til venstre og renderen til hoyre; gapet er det
   som gir luft mellom dem paa telefon ogsaa. */
.backed-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(46px,11vw,64px);align-items:center;
}
.backed-say{text-align:center}
@media (min-width:1000px){
  .backed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- VIDEOKORTET STAAR I HEROENS BILDE ----------
   ⛔ INGEN EGEN SEKSJON UNDER HEROEN. Det ble proevd i tre former 01.09:
      en CSS-gradient, saa `floor.jpg` matchet mot heroens siste rad, saa
      samme fil med sloeret kopiert over. Alle tre ga en synlig kant. To
      flater som skaleres og males hver for seg blir aldri helt like -
      JPEG-runding, browserens interpolasjon ved `background-size`, og
      overlegg som ligger paa den ene og ikke den andre.
      Gulvet er derfor en del av `scene.jpg`. Ett bilde har ingen skjoet.

   Geometrien i fila er proporsjonal med BREDDEN, saa kortet ankres i prosent
   og alt skalerer sammen:
     mobil    motiv 4:3   .750 · luft .07 · kort .88 · luft .06  → h/b 1,760
     desktop  motiv 1,792 .558 · luft .05 · kort .34 · luft .04  → h/b  .992
   ⛔ Endrer du kortets bredde her, MAA `mkhero.py` kjoeres paa nytt med de
      samme tallene - ellers staar kortet ikke lenger paa gulvet. */
/* ---------- TRE FAKTA I HEROENS GULV ----------
   Erstattet videokortet 01.09 (Tor: heroen ble rotete paa telefon). Videoen
   staar i `#specs`, som hadde mistet figuren sin da den flyttet opp.
   Alle tre paastandene staar ordrett i spesifikasjonslista lenger nede -
   dette er ikke nye tall.
   ⛔ Gulvet i `scene.jpg` er bygget for HOEYDEN paa denne raden. Endrer du
      ikonstoerrelsen eller luften, MAA `mkhero.py` kjoeres med nye tall,
      ellers staar raden ikke lenger paa betongen. */
/* Tre i bredden I GULVET paa begge bredder. De laa en periode som en egen
   navy seksjon under bildet paa telefon; Tor ville heller ha dem i bildet, i
   samme stoerrelse (01.09).
   ⛔ `scene-tall.jpg` er bygget for HOEYDEN paa denne raden - ikonene er 40px
      her mot 30px paa desktop, saa gulvet er hoeyere paa mobil enn paa
      skjerm. Endrer du stoerrelsen, kjoer `mkhero.py` med nye tall. */
/* ---------- HEROENS GULV: INGRESSEN (telefon) OG IKONENE (skjerm) ----------
   ⛔ `display` SETTES BARE I MEDIA-BLOKKENE. Basisregelen hadde selv
      `display:grid`, sto ETTER `@media (max-width:999px){display:none}` og
      vant paa kildeorden - derfor sto ikonene i heroen paa telefon gjennom
      flere runder, oppa ingressen. En basisregel som setter det samme som
      en media-regel er ikke en dobbelt sikring, den er en tidsinnstilt feil.
   Telefon: ingressen fyller gulvet, ikonene er borte - tre ikoner der gjorde
   heroen travel i det formatet.
   Skjerm: ikonene staar i gulvet, ingressen er i `.hero-say` som foer. */
.hero-floor,
.hero-facts{
  position:absolute;z-index:3;left:0;right:0;
  margin:0 auto;
}
.hero-floor{
  bottom:clamp(16px,4.4vw,26px);
  padding:0 calc(var(--edge) + clamp(4px,2vw,14px));
  text-align:center;text-wrap:balance;
  font-size:var(--t-small);line-height:1.45;color:var(--cream);
}
.hero-facts{
  bottom:6.9%;list-style:none;
  padding:0 calc(var(--edge) + clamp(2px,1.6vw,10px));
  max-width:min(760px,100%);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,3.4vw,30px);
}
@media (max-width:999px){
  .hero-floor{display:block}
  .hero-facts{display:none}
}
@media (min-width:1000px){
  .hero-floor{display:none}
  .hero-facts{display:grid}
}
.hero-facts li{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,2.4vw,14px);text-align:center;
}
.hero-facts svg{
  width:clamp(38px,10.4vw,48px);height:clamp(38px,10.4vw,48px);
  /* ⛔ `--gold` (#C6B996) naar bare 2,6:1 mot gulvet - under 3:1-kravet for
     grafikk som baerer mening. `--gold-light` gir 3,6. Ingen `opacity` her:
     den ville spist marginen paa nytt. */
  color:var(--gold-light);
}
.hero-facts span{
  font-family:var(--f-num);font-weight:var(--num-weight);
  font-size:clamp(11.5px,2.9vw,13.5px);letter-spacing:.02em;
  color:var(--cream);text-wrap:balance;line-height:1.3;
}
/* DESKTOP: tilbake i heroens gulv, tre i bredden. Der er det plass, og
   `scene.jpg` er bygget for hoeyden paa raden. */
@media (min-width:1000px){
  .hero-facts{
    display:grid;bottom:5.8%;padding:0 var(--edge);
    gap:clamp(20px,3vw,44px);max-width:min(600px,52%);
  }
  .hero-facts li{gap:10px}
  .hero-facts svg{width:30px;height:30px}
  .hero-facts span{font-size:15px}
}

/* ---------- «CONCEPT RENDER» ----------
   Sto som en figurtekst UNDER videoen og leste som en bildetekst i en avis
   (Tor 01.09). Forbeholdet hoerer til i filmen, ikke ved siden av den.
   ⛔ KREM TEKST TAALER IKKE VIDEOEN RAA. Malt paa foerste bilde, nederste
      band: verste piksel 1,9:1 - hendene er lyse, og bildet ROTERER, saa
      ingen fast plassering er trygg. En kort scrim i bunnkanten er derfor
      ikke pynt, den er det som gjoer etiketten lesbar hele veien rundt.
      Med scrimen: 6,9:1 paa verste piksel. */
.vid-hold{
  position:relative;display:block;
  border-radius:clamp(10px,2.6vw,16px);
  overflow:hidden;                     /* klipper scrim og etikett til radien */
  /* Kortet staar paa lys betong - skyggen er en kontaktskygge pluss et mykt
     kast, slik en gjenstand paa et bord faktisk kaster. */
  box-shadow:
    0 1px 2px rgba(20,22,26,.26),
    0 6px 14px -4px rgba(20,22,26,.30),
    0 26px 54px -18px rgba(20,22,26,.52);
}
.vid-hold::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(64px,16vw,104px);pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,11,0) 0%,rgba(9,9,11,.20) 46%,rgba(9,9,11,.40) 100%);
}
.vid-tag{
  position:absolute;left:clamp(14px,3.4vw,20px);bottom:clamp(11px,2.6vw,16px);
  z-index:2;pointer-events:none;
  font-size:var(--t-label);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,251,239,.56);
}

/* ---------- typografi ---------- */
h1,h2,h3{
  font-family:var(--f-head);font-weight:var(--head-weight);font-style:var(--head-style);
  letter-spacing:var(--head-track);line-height:1.08;margin:0;text-wrap:balance;color:var(--txt);
}
h1{font-size:var(--t-h2)}
h2{font-size:var(--t-h2);line-height:1.12}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:0}
.C h1,.C h2,.C h3{color:#1C1810}
p{margin:0;max-width:var(--read)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--txt);font-weight:400}
.body{font-size:var(--t-body);color:var(--txt-2)}
.C .body{color:#463C2C}
.note{font-size:var(--t-note);line-height:1.55;color:var(--txt-3)}
.C .note{color:#6B5D45}
.eyebrow{
  display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.C .eyebrow{color:var(--gold-ink)}
.stack{display:flex;flex-direction:column;gap:22px;align-items:flex-start}

/* ---------- knapp ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  background:var(--gold);color:var(--ink);
  transition:background .34s ease,transform .16s ease;
}
.btn:hover{background:var(--gold-light);color:var(--ink)}
.btn:active{transform:scale(.99)}
.btn-line{
  background:none;border-color:rgba(198,185,150,.45);color:var(--gold);
  font-size:var(--t-note);padding:14px 24px;
}
.btn-line:hover{background:none;border-color:var(--gold);color:var(--gold-light)}

/* ---------- 1 · HERO — motivet i full bredde, teksten i det tomme venstrefeltet ----------
   Tors valg 31.08: teksten skal ligge I bildet. Da er sloeret ikke pynt, det er
   det eneste som gjoer teksten lesbar. MAALT paa kompositten (raabilde + slør):
     uten sloer .............. 2,92:1 snitt / 1,58:1 verste  = ulesbart
     dagens .cx-bleed-sloer .. 6,30:1 / 3,01:1               = faller under AA
     dette sloeret ........... 13,70:1 / 7,74:1              = AAA overalt
   ⛔ Byttes motivet, MAA tallene regnes paa nytt — sloeret er tonet for AKKURAT
   dette bildet, som er lyst (venstrefeltets lyshet 133-162 av 255). */
.hero{padding:0}
/* Heroen er ETT bilde med ETT tekstlag. Gulvet ble fjernet fra `scene.jpg`
   01.09 da framdriften flyttet ned til «Less screen. More life.» - bildet er
   naa rent motiv, 1,79 desktop / 4:3 mobil. */
.hero-stage{
  position:relative;isolation:isolate;
  /* ⛔ BILDET BESTEMMER HOEYDEN OG VISES HELT. Motivet er det viktigste vi
     har - `object-fit:cover` beskar det og dyttet telefonene ut av rammen.
     Scenen er derfor `position:relative` med bildet i normal flyt, og
     tekstlaget ligger absolutt oppa. */
  position:relative;
}
/* 🪤 `<picture>` er elementet i flyten, ikke `<img>`. Uten `display:contents`
   blir picture grid-barnet, `grid-area:1/1` paa img treffer ingenting, og
   teksten legger seg OVER bildet i stedet for OPPAA det. */
.hero-stage picture{display:contents}
/* ⛔ INGEN REGEL SKAL BESKJAERE DETTE BILDET. Motivet er det viktigste paa
   siden; `object-fit:cover` og faste aspekter har dyttet telefonene ut av
   rammen to ganger. Bildet vises i sitt eget aspekt, hele. */
.hero-stage img{width:100%;height:auto;display:block;object-fit:fill;aspect-ratio:auto}

@media (min-width:1000px){
  /* ⛔ INGEN `object-fit: cover` her. Motivets aspekt er 1,79 og en fast
     scenehoeyde ville kuttet ~78px av toppen — altsaa toppen av den store
     telefonen, som er halve poenget med bildet. Bildet bestemmer hoeyden;
     paa 1000px gir det 558px og paa 1440px 804px, og teksten faar plass i
     begge. Da er ogsaa sloerets maalte tall gyldige, fordi utsnittet er fila. */
  /* sloeret ligger MELLOM bildet og teksten */
  .hero-stage::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:var(--veil);
  }
  .hero-say{
    position:absolute;left:var(--edge);top:26%;z-index:3;
    max-width:min(46%,620px);padding:0;margin-inline:0;
  }
}

/* ---------- 2 · MÅLENE + millimeterskala ---------- */

@media (min-width:900px){

  .split.rev .split-fig{order:2}
}
.split-fig{margin:0}
.split-fig img,.split-fig .cx-video{width:100%;border-radius:2px;display:block}
/* Videoen skal aldri kunne bli en svart boks: `preload=metadata` + poster gjoer
   at det staar et bilde der selv naar autoplay blokkeres. Rotaarsaken til
   at videoer "stopper" var `preload=none` UTEN poster. */
/* ⛔ VIDEOEN BESKJAERES ALDRI I BREDDEN, OG HAR INGEN FELT VED SIDEN AV SEG.
   To feil paa rad her: foerst `object-fit:cover`, som spiste kantene. Saa
   `aspect-ratio:16/9` mot en video som faktisk er 1:1 (posteren er 1080x1080)
   - da ble `contain` til letterboxing, og `background:var(--navy-2)` gjorde
   de tomme feltene synlige som blaa striper.
   ⛔ Sett ALDRI et aspekt paa denne uten aa sjekke fila. 1:1 + ingen bakgrunn
      gir null letterboxing uansett spaltebredde. */
.cx-video{
  width:100%;height:auto;aspect-ratio:1/1;
  object-fit:contain;background:none;
}

.C .figcap{color:#6B5D45}

/* ---------- 5 · manifestet, komprimert ---------- */
/* Avsnittene som besvarer «why this exists». De staar i tekstloepet under
   baandet, ikke i en egen seksjon - som fullbredde-blokk med to spalter leste
   de som et nytt kapittel i stedet for en fortsettelse. */
/* Avsnitt 1 staar VED SIDEN AV motivet paa begge bredder (Tor 01.09).
   Avsnitt 2 og 3 gjoer ikke det: i 50 % av en 390px skjerm er spalten 195px,
   og to lange avsnitt der blir en soyle. De staar i bildet paa skjerm og i
   tekstloepet under paa telefon - samme tekst, to steder i DOM, ett synlig.
   ⛔ Endrer du dem, endre BEGGE. */
@media (min-width:1000px){
  /* ⛔ `min(46%,430px)` brakk teksten 11 prosentpoeng foer motivet og
     etterlot et doedt felt (Tor 01.09). Telefonene starter paa 57 %; teksten
     gaar til 54 %. Blekk 11,4 / graa 7,5 helt ut dit.
     Linjene blir lange paa brede skjermer - det er et bevisst bytte mot at
     spalten skal ende der bildet gjoer det. */
  .band.is-light .band-say .body{
    max-width:54%;
    margin-top:clamp(14px,1.9vw,20px);
    color:#463C2C;
  }
  .band.is-light .band-say .body + .body{margin-top:clamp(12px,1.5vw,16px)}
}
.band.is-light .band-say em{font-style:normal;color:var(--gold-ink)}
.sources{margin-top:30px;font-size:var(--t-note);line-height:1.6;color:#6B5D45;max-width:var(--read)}
.sources a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:#5E5233}

/* ---------- 7 · asken ---------- */
.ask{
  /* ⛔ Ikke fullbredde paa telefon (Tor 01.09). Rammen gikk fra kant til kant
     og leste som en seksjonsflate i stedet for et kort. */
  max-width:520px;margin-inline:auto;text-align:center;
  border:1px solid var(--rule);border-radius:2px;
  padding:clamp(30px,4vw,44px) clamp(22px,3.5vw,38px);
  background:rgba(255,251,239,.028);
}
.ask .price{
  font-family:var(--f-num);
  font-size:var(--t-figure);font-weight:var(--num-weight);letter-spacing:-.012em;line-height:1;
  color:var(--cream);font-variant-numeric:tabular-nums;
}
.ask .price em{font-style:normal;display:block;margin-top:10px;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.ask .btn{margin-top:26px;width:100%;justify-content:center}
.ask .note{margin:16px auto 0}

/* ---------- 8 · hvem ---------- */
.who{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px)}
@media (min-width:900px){.who{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.byline{display:flex;align-items:center;gap:clamp(16px,2.4vw,22px);margin-bottom:clamp(22px,3vw,28px)}
/* Portrettet er det eneste ansiktet paa siden - det taaler aa vaere stort. */
.byline img{
  width:clamp(84px,15vw,112px);height:clamp(84px,15vw,112px);
  border-radius:50%;object-fit:cover;flex:none;
}
.byline span{font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.facts{display:grid;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.facts li{padding:18px 0;border-bottom:1px solid var(--rule-soft)}
.facts h3{margin-bottom:6px;color:var(--gold)}
.facts p{font-size:var(--t-body);color:var(--txt-2)}

/* ---------- 9 · close ---------- */
.close-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,52px)}
@media (min-width:820px){.close-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.field input{
  flex:1 1 210px;min-width:0;font:inherit;font-size:var(--t-body);
  background:rgba(255,251,239,.05);border:1px solid var(--rule-soft);border-radius:2px;
  padding:15px 16px;color:var(--cream);
}
.field input::placeholder{color:rgba(255,251,239,.42)}
.field input:focus{border-color:var(--gold);outline:none}



/* ---------- mobil: strammere luft, kvadratiske bilder ----------
   Et 4:5-motiv paa 390px er 487px hoeyt. Fem av dem er 2400px scroll
   for det samme bildet i staaende. Paa telefon vises de i 1:1. */
@media (max-width:759px){
  /* Luft er ikke tomrom her - det er selve argumentet. En side som ber om
     mindre skjermtid kan ikke selv vaere tettpakket. (Tor 01.09) */
  section{padding:74px 0}
  .stack{gap:20px}
  .split-fig img:not(.cx-video){aspect-ratio:1/1;object-fit:cover;object-position:center}
    .facts li{padding:19px 0}
}

/* ---------- BÅND — samme form som heroen: motivet i full bredde, teksten i
   det tomme venstrefeltet. Tors valg 31.08.
   MAALT paa kompositten, venstre 42%, krem tekst, VERSTE piksel:
     uten sloer ......... høst 1,03:1 · graa 1,17:1   = usynlig
     heroens sloer (A) .. høst 7,04:1 · graa 6,08:1   = AA, ikke AAA
     dette sloeret (B) .. høst 11,44:1 · graa 10,50:1 = AAA
   Baandene faar B og ikke A fordi disse motivene har RENE HVITE hoeylys
   (sollys gjennom vindu, Y=1,000) som headerens betonghall ikke har.
   ⛔ Nytt motiv ⇒ regn tallene paa nytt FOER du bytter. */
/* 🪤 En implisitt grid-kolonne er `auto`-bred. Et bilde med width=1200 og
   `max-width:100%` blir da sirkulaert og sprenger containeren - malt 405px
   innhold i en 390px rute. `minmax(0,1fr)` binder kolonnen til containeren.
   Gjelder ENHVER grid her, ogsaa naar den bare har en kolonne. */
.band{padding:0;position:relative;grid-template-columns:minmax(0,1fr)}
/* ⛔ `section` har bare VERTIKAL padding - baandet ligger direkte i den og er
   allerede fullbredde. En negativ margin her dro bildet utenfor viewporten. */
.band picture{display:contents}
.band img{width:100%;display:block}
.band-say{padding:clamp(30px,5vw,44px) 0 clamp(40px,6vw,56px)}
/* ---------- BAAND PAA LYS GRUNN ----------
   «Screens doubled» staar paa `.C`, som allerede har moerk tekst - og motivet
   staar paa naer hvit bakgrunn.
   ⛔ INGEN SLOER HER. Sloeret er navy og finnes for aa baere KREM tekst mot
      et moerkt motiv. Lagt paa dette bildet ville det gjort det gustent og
      senket kontrasten i stedet for aa heve den.
      Malt paa fila, venstre 55 % / 50 %, verste piksel:
        blekk 11,3 desktop · 10,8 mobil   ·   graa broedtekst 7,5 · 7,1
   ⛔ Teksten arver `.C` sine farger. Setter du en farge her, faar du to
      steder aa vedlikeholde. */
.band.is-light::after{display:none}
/* ⛔ Ikke fullbredde paa telefon (Tor 01.09). Bildet har samme farge som
   flaten det ligger paa, saa kant-til-kant leser som at seksjonen mangler
   struktur - ikke som et baand. Med marg blir det et bildekort, samme
   spraak som videoen. De MOERKE baandene beholder full bredde: der er
   kontrasten mot flaten det som gjoer dem til baand. */
@media (max-width:999px){
  /* Baandet gaar kant-til-kant som de andre (Tor 01.09). Det er IKONENE og
     teksten under som ikke skal roere skjermkanten - se `.narrow`.
     Samme grep som paa skjerm: overskriften over motivet, broedteksten ved
     siden av det. MAALT paa `centi-tall.jpg`: full bredde er fri ned til
     30 % av hoeyden (blekk 11,1), telefonene starter paa 32,3 %.
     ⛔ Egen, mindre skala paa h2 her. `--t-hero` gir to linjer som naar
        ned i telefonene; dette holder den innenfor de 30 %. */
  /* ⛔ TRE TING KRYMPET SPALTEN, IKKE EN. Malt i nettleseren paa 375px:
        1. `@media (max-width:379px){.band-say{width:min(56%,215px)}}` er laget
           for de MOERKE baandene, der teksten staar ved siden av motivet i en
           smal soeyle. Den traff dette baandet ogsaa.
        2. `.stack` er flex med `align-items:flex-start`, saa barna krympet til
           innholdsbredde - h2 ble 166px av 210.
        3. `max-width:59%` regnes mot FORELDEREN, altsaa de 166px - ikke mot
           bildet. Resultatet ble 98px spalte.
     Naar teksten ble for hoy, strakk grid-raden seg og BILDET ble strukket med
     den: aspekt 0,311 mot filas 0,617. Det var deformasjonen, ikke bildet. */
  .band.is-light .band-say{
    align-self:start;width:100%;max-width:none;
    padding-top:clamp(11px,3.2vw,17px);
    padding-inline-end:var(--edge);
  }
  /* Overskriften gaar OVER og forbi motivet, som paa skjerm. */
  .band.is-light .band-say h2{
    font-size:clamp(15.5px,4.5vw,21px);line-height:1.12;
    max-width:none;text-wrap:balance;
  }
  /* ⛔ IKKE BESKJAER DETTE BILDET. `.band img` setter `aspect-ratio:4/3` +
     `cover` paa telefon for aa spare hoyde - men `centi-tall.jpg` ER bygget
     hoyt (1000x1620) nettopp for aa romme teksten. Uten dette ble det
     kuttet til 4:3 og avsnittene rant ut under bildet.
     ⛔ INGEN KUNSTIG SPALTEBREDDE. Teksten skal gaa helt fram til motivet
        (Tor 01.09) - den brakk foer og laa som en soeyle med tomt felt ved
        siden. MAALT: telefonene starter paa 62,8 %, teksten gaar til 59 %.
        Blekk 10,2 / graa 6,7 helt ut dit. */
  .band.is-light img{aspect-ratio:auto;object-fit:fill;height:auto;align-self:start}
  /* ---------- TEKSTEN FLYTER RUNDT MOTIVET ----------
     `mkcenti.py` skriver ut de tre tallene som skal staa her. Naa:
        motivet fra 62,8 % inn · starter 73,6 vw ned · 29,0 vw hoyt
     Lerretets hoyde er satt etter hva teksten faktisk trenger - malt i
     nettleseren til aspekt 0,852, bygget som 0,840.
     Motivet er forankret LAVT (ikke sentrert): da avslutter det seksjonen i
     stedet for aa ligge midt i et avsnitt, og lerretet slutter kort etter
     teksten i stedet for aa etterlate et halvt skjermbilde tomt gulv.
     `.fanger` er et tomt, usynlig element som opptar NOEYAKTIG det feltet.
     Teksten flyter rundt det: full bredde over og under telefonene, smalere
     ved siden av dem. Det er derfor spalten ikke lenger er en soeyle.
     ⛔ `float` virker ikke i en flex-container - `.stack` maa vaere `block`
        her, ellers gjoer `.fanger` ingenting og teksten legger seg oppa.
     ⛔ Byttes bildet, MAA de fire tallene males paa nytt. */
  .band.is-light .band-say .stack{width:100%;display:block}
  .band.is-light .fanger{
    float:right;
    width:calc(39.5vw - var(--edge));
    /* ⛔ IKKE `margin-top` FOR AA SKYVE DEN NED. En floats MARGIN-boks er det
       linjene flyter rundt, saa 71 vw margin dyttet ogsaa teksten OVER
       motivet innover - malt 60 % der den skulle vaert 93 %.
       Boksen gaar i stedet fra tekstens start til motivets bunn, og
       `shape-outside` rykker selve formen inn ovenfra. Da er feltet over
       motivet fritt, og bare linjene ved siden av det brytes. */
    height:calc(73.6vw - 12px + 29vw);
    shape-outside:inset(calc(73.6vw - 12px) 0 0 0);
    shape-margin:7px;
  }
  .band.is-light .band-say .eyebrow,
  .band.is-light .band-say h2{margin-bottom:clamp(8px,2vw,12px)}
  /* ⛔ `%` regnes mot BLOKKENS innholdsbredde, ikke mot bildet. Blokken har
     `--edge` paa hver side, saa 59 % av den ble 52 % av bildet. 61 % her
     lander paa 59 % av bildet - malt i nettleseren, der 66 % ga 64 % og
     dermed 1,2 pp INN i telefonene. */
  .band.is-light .band-say .body{
    max-width:none;
    font-size:clamp(12.5px,3.3vw,14px);line-height:1.5;color:#463C2C;
    margin-top:clamp(9px,2.2vw,13px);
  }
  .band.is-light .band-say .body + .body{margin-top:clamp(10px,2.6vw,15px)}
  .band.is-light .band-say .stack{gap:clamp(7px,1.8vw,10px)}
}
/* Baandet er seksjonens foerste element. Uten dette staar det en smal
   krem-stripe mellom det moerke baandet over og dette lyse bildet - to
   bilder med en tynn flate imellom leser som en feil, ikke som en pause. */
#story{padding-top:0}
/* ⛔ HVIT TEKST PAA HVIT BAKGRUNN. `.band-say .body` setter `--txt-2` (krem,
   82 %) eksplisitt, og h2 arver krem fra body - begge var usynlige her.
   Arv loeser det ikke: fargene MAA settes for `.is-light`. */
.band.is-light .band-say{color:#241F16}
.band.is-light .band-say h2{color:#241F16}
.band.is-light .band-say .eyebrow{color:#7A6438}
/* ⛔ INGEN GENERELL `max-width` HER. Den sto etter mobil-blokken, hadde lik
   spesifisitet, og vant - saa teksten kunne ikke bli bred paa telefon uansett
   hva media-regelen sa. Bredden settes i HVER av de to blokkene under. */

/* ---------- OVERSKRIFTEN OVER MOTIVET (desktop) ----------
   Den brakk paa tre linjer i en 46 %-spalte. MAALT paa fila, med 21:9-kuttet
   og `--op:55%`: full bredde er fri ned til 24 % av hoeyden (blekk 12,9),
   og treffer telefonenes overkant paa 26 % (1,5 - ulesbart).
   Overskriften faar derfor hele bredden, men bare den oeverste fjerdedelen,
   og broedteksten blir staaende i venstrefeltet under.
   ⛔ EN LINJE. Egen skala her fordi `--t-h2` (opptil 40px) brekker den i to
      paa 1000px, og to linjer naar ned i telefonene. */
@media (min-width:1000px){
  /* ⛔ TRE TING KRYMPET SPALTEN, IKKE EN. Malt i nettleseren paa 375px:
        1. `@media (max-width:379px){.band-say{width:min(56%,215px)}}` er laget
           for de MOERKE baandene, der teksten staar ved siden av motivet i en
           smal soeyle. Den traff dette baandet ogsaa.
        2. `.stack` er flex med `align-items:flex-start`, saa barna krympet til
           innholdsbredde - h2 ble 166px av 210.
        3. `max-width:59%` regnes mot FORELDEREN, altsaa de 166px - ikke mot
           bildet. Resultatet ble 98px spalte.
     Naar teksten ble for hoy, strakk grid-raden seg og BILDET ble strukket med
     den: aspekt 0,311 mot filas 0,617. Det var deformasjonen, ikke bildet. */
  .band.is-light .band-say{
    align-self:start;width:100%;max-width:none;
    padding-top:clamp(30px,4.4vw,54px);
    margin-inline-end:var(--edge);
  }
  .band.is-light .band-say h2{
    font-size:clamp(22px,3.2vw,36px);
    max-width:none;text-wrap:balance;
  }
}

/* det stille baandet har ingen tekst — og derfor heller ikke sloer */
.band.is-still::after{display:none}

@media (min-width:1000px){
  .band{display:grid;grid-template-columns:minmax(0,1fr)}
  .band img{grid-area:1/1;width:100%;height:auto}
  .band::after{
    content:"";grid-area:1/1;z-index:1;pointer-events:none;
    background:var(--veil);
  }
  .band-say{
    grid-area:1/1;z-index:3;align-self:center;
    max-width:min(44%,560px);padding:0;margin-inline-start:var(--edge);
  }
}

/* ---------- «BACKED SO FAR» ----------
   Samme form som `#fund`: `.narrow`, sentrert, tallene i et `.ask`-kort.
   ⛔ Seksjonen hadde et eget bilde med telefonene til hoyre og teksten paa
      1/3-linja. Det ble forkastet 01.09: to bildeseksjoner rett etter heroen
      var for mye, og de to kampanjeblokkene skal lese som ETT sted.
      `prog-bg.jpg` er derfor ute av bruk.
   ⛔ Framdriftens egne farger (krem/gull) gjelder igjen her - kortet staar paa
      navy, ikke paa lys grunn. Ingen navy-overstyringer. */
.prog-ask .prog-sum{margin-top:0}
/* Tallet sto uten aa si hva det var. Etiketten er bevisst liten og dempet:
   den skal forklare, ikke konkurrere med summen den staar under.
   ⛔ «Pledges» (flertall) leser som et ANTALL, ikke et beloep - og «Raised»
      ville vaert usant: pengene er lovet, ikke innkrevd. Ingenting belastes
      foer produksjonen er finansiert, saa ordet maa vaere «Pledged». */
.prog-what{
  display:block;margin-top:clamp(7px,1.2vw,10px);
  font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);
}
.prog-ask .prog-meta{justify-content:center;margin-top:clamp(14px,2vw,20px)}
.prog-ask .gauge{margin:clamp(22px,3vw,30px) auto clamp(4px,1vw,8px);max-width:100%}
.prog-ask .note{margin-top:clamp(16px,2.2vw,22px)}
/* ⛔ Ingen strek over tallet her - `.ask` har allerede en ramme, og to
   innrammninger rundt det samme er stoey (samme grunn som 01.09-omrisset). */
.prog-ask::before{content:none}

/* ---------- BAANDET SOM BAERER FRAMDRIFTEN ----------
   `.has-prog` er baandet hvis bilde har et forlenget gulv under motivet.
   ⛔ DETTE BAANDET KAN IKKE HA `aspect-ratio` + `object-fit:cover`. De andre
      baandene har det for aa spare hoeyde paa telefon - her ville det skaaret
      bort hele gulvet, altsaa underlaget teksten staar paa. Samme felle som
      tok heroen to ganger: bildet bestemmer hoeyden, og vises helt.
   ⛔ `align-self:center` sentrerer i HELE fila, ikke i motivet. Med 27 % gulv
      (desktop) dro det overskriften ned i moerket. Teksten posisjoneres derfor
      fra toppen, som i heroen. */
.band.has-prog{position:relative;display:block}
.band.has-prog img{
  width:100%;height:auto;display:block;
  aspect-ratio:auto;object-fit:fill;
}
.band.has-prog::after{position:absolute;inset:0;grid-area:auto}
.band.has-prog .band-say{
  position:absolute;left:0;z-index:3;
  align-self:auto;justify-self:auto;margin-inline-start:0;
}
@media (min-width:1000px){
  .band.has-prog .band-say{left:var(--edge);top:22%;max-width:min(44%,560px)}
}
@media (max-width:999px){
  .band.has-prog .band-say{top:7%;padding:0 0 0 var(--edge)}
}

/* ---------- FRAMDRIFTEN, INNI BILDET ----------
   Gulvet i `band-pocket.jpg` er jevnet ut og moerknet i SELVE FILA - ikke med et
   CSS-overlegg. Vinduslyset fra hallen ville ellers ligget midt bak teksten.
   Malt paa den ferdige fila, sentrert tekst, verste piksel:
     desktop 11,3  ·  mobil 13,7    (i heroen: 7,9 / 6,2)
   ⛔ Teksten MAA staa nederst: motivet slutter paa 73 % (desktop) / 53 %
      (mobil). Flyttes den opp, havner den paa gulvets lyse del. */

/* ---------- framdriftens typografi ----------
   Tors valg 01.09. Venstrejustert lot hoyre halvdel staa tom paa telefon, og
   aa flytte backers dit loeste balansen uten aa loese komposisjonen.
   Sentrert leser seksjonen som en inskripsjon: ett tall, én linje som
   forklarer det, én skala. `#fund` er allerede sentrert, saa grepet er ikke
   fremmed paa siden.
   🔗 Tallene bor i et `.ask`-kort, samme form som `#fund` - se `.prog-ask`.
   ⛔ Reglene fra 08.08 staar: ÉN skala, ETT maal, ingen delmaals-merker,
      ingen gloed paa fyllingen, ingen knapp her. */

.prog-sum{
  font-family:var(--f-num);font-weight:var(--num-weight);
  font-size:var(--t-display);line-height:.94;letter-spacing:-.015em;
  color:var(--cream);font-variant-numeric:tabular-nums;
}
/* Maalet og backers staar paa SAMME linje, skilt av en gull-prikk. To tall i
   samme vekt balanserer hverandre; stablet ble de to nivaaer som begge ville
   vaere det andre. */
.prog-meta{
  margin:clamp(10px,1.4vw,16px) auto 0;max-width:none;
  display:flex;align-items:baseline;justify-content:center;
  gap:.5em;flex-wrap:wrap;
  font-size:var(--t-body);letter-spacing:.02em;color:var(--txt-3);
}
.prog-meta b{
  font-family:var(--f-num);font-weight:var(--num-weight);
  color:var(--gold);letter-spacing:0;font-variant-numeric:tabular-nums;
  font-size:1.16em;
}
.prog-meta i{font-style:normal;color:var(--gold);opacity:.5}

/* Skalaen. Ingen merker, ingen endepunkt-etiketter: `$500,000` staar allerede
   i linja over. ⛔ Ingen hard kant - markoeren er en sirkel, og ringen rundt
   den er flatens egen farge, ikke en gloed. */
/* Skalaen var 2px og forsvant paa telefon. 6px baerer fortsatt som en
   instrumentstrek, men leses ogsaa som en maaling. */
.gauge{
  position:relative;height:14px;display:flex;align-items:center;
  max-width:min(680px,92%);margin:clamp(22px,3vw,32px) auto 0;
}
.gauge::before{
  content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;
  background:rgba(198,185,150,.15);
}
.gauge-fill{
  position:absolute;left:0;height:6px;width:var(--pct);
  border-radius:3px;
  background:linear-gradient(90deg,rgba(198,185,150,.72),var(--gold-light));
}
.gauge-dot{
  position:absolute;left:var(--pct);top:50%;
  width:13px;height:13px;margin-left:-6.5px;transform:translateY(-50%);
  border-radius:50%;background:var(--gold-light);
  box-shadow:0 0 0 4px var(--navy-2);
}
/* ---------- ET LEVENDE TALL ----------
   Tors valg 01.09. ⛔ Dette er IKKE en opptelling - den ble forkastet fordi et
   tall som ruller oppover er engasjements-mekanikk paa en side som lover at
   ingenting blinker. Dette er en langsom puls som sier «dette staar ikke
   stille», ikke «se paa meg»: fire sekunder, ingen bevegelse, ingen farge.
   ⛔ `prefers-reduced-motion` slaar den helt av. */
/* ⛔ IKKE OPACITY. Et tall som toner inn og ut leser som «blinker» eller
   «laster» - det er spraaket varsler og spinnere bruker, og siden lover det
   motsatte. Skala leser som pust. (Tor 01.09)
   ⛔ TYDELIGERE ER IKKE STOERRE UTSLAG. Foerst var dette en jevn sinus paa
      3,4 % - den var knapt synlig, og aa skru opp amplituden gjorde bare
      bokstavkantene uskarpe. Det som gjoer en puls lesbar er RYTMEN: et raskt
      slag og en lang hvile, som noe levende. Her er tallet i ro 78 % av tiden
      og beveger seg i 0,75 s - langt mer merkbart enn en konstant vugging,
      og langt mindre masete. (Tor 01.09) */
@keyframes aeros-puls{
  0%  {transform:scale(1)}
  7%  {transform:scale(1.062)}
  15% {transform:scale(1.012)}
  22% {transform:scale(1.028)}
  32% {transform:scale(1)}
  100%{transform:scale(1)}
}
/* ⛔ MARKOEREN SLAAR IKKE AV SEG SELV. En ring som pulser i det uendelige
   paa en framdriftsbar er et varsel - nettopp det siden lover at den ikke
   har (Tor 01.09). Den slaar KUN i oeyeblikket tallet faktisk endrer seg,
   to ganger, og legger seg saa. Tallet i overskriften pulser fortsatt: det
   sier «dette er levende», mens ringen sier «dette skjedde naa». */
@keyframes aeros-ring{
  0%  {box-shadow:0 0 0 4px var(--navy-2),0 0 0 3px rgba(255,241,203,.52)}
  7%  {box-shadow:0 0 0 4px var(--navy-2),0 0 0 9px rgba(255,241,203,.26)}
  32% {box-shadow:0 0 0 4px var(--navy-2),0 0 0 15px rgba(255,241,203,0)}
  100%{box-shadow:0 0 0 4px var(--navy-2),0 0 0 3px rgba(255,241,203,0)}
}
/* ⛔ BARE ETT TALL PULSERER. Foerst laa den paa beloepet i kortet OG paa
   markoeren; med to pulser i samme synsfelt ble det uro i stedet for liv.
   Den staar paa antallet i overskriften - det er der «259» er en paastand om
   mennesker - og paa markoeren, som er samme maaling i grafisk form. */
.want .live{animation:aeros-puls 3.4s cubic-bezier(.34,.8,.4,1) infinite}
.gauge-dot.just-changed{animation:aeros-ring 1.5s cubic-bezier(.34,.8,.4,1) 2}
@media (prefers-reduced-motion:reduce){
  .want .live,.gauge-dot.just-changed{animation:none}
}
.band.is-light + .narrow{padding-top:clamp(34px,5vw,52px)}

/* ============================================================
   MOBIL - BILDE FOERST, SAA TEKST. Tors valg 01.09.
   Teksten laa en runde OPPAA motivet ogsaa her. Den var lesbar (malt 8-15:1),
   men leste ikke som en sammenhengende blokk - overskrift og broedtekst
   svevde over hver sin del av bildet.
   ⛔ Og "ved siden av motivet" er regnet bort, ikke valgt bort:
      motivet tar 45-55 % av bredden, saa tekstspalten blir 155-190px
      = 20-24 tegn per linje. Komfortabel lesing er 45-75. Halvparten av
      minimum er en soeyle, ikke en spalte.
   Paa desktop staar teksten fortsatt I motivet - der er venstrefeltet
   560px bredt og holder 60+ tegn.
   ============================================================ */
@media (max-width:999px){
  /* BAANDENE FAAR SAMME FORM SOM HEROEN (Tor 01.09: «faar vi plass til flere
     slike seksjoner paa mobil?»). Mobilfilene er bygget for det - motivet
     ligger i hoyre halvdel, venstrefeltet er tomt.
     Malt paa kompositten med `--veil-m`, tekstsone 0-54 %, verste piksel:
       lomme 14,6  ·  varm 14,3   (og 6,4 / 9,2 selv 12 pp utenfor)
     ⛔ Samme tak som heroen: overskrift + EN kort linje. Den lange halvdelen
        av broedteksten staar i `.wide-only` og vises foerst fra 1000px. */
  .band{display:grid;grid-template-columns:minmax(0,1fr)}
  .band img{grid-area:1/1}
  .band::after{
    content:"";grid-area:1/1;z-index:1;pointer-events:none;background:var(--veil-m);
  }
  .band.is-still::after{display:none}

  .band-say{
    grid-area:1/1;z-index:3;align-self:center;justify-self:start;
    display:block;margin-inline:0;
    width:min(54%,250px);max-width:min(54%,250px);
    padding:0 0 0 var(--edge);
    overflow-wrap:anywhere;
  }
  .band-say .stack{gap:11px}
  .band h2{font-size:var(--t-hero);line-height:1.06;letter-spacing:-.018em;max-width:none}
  .band-say .body{font-size:var(--t-small);line-height:1.52;max-width:none;color:var(--txt-2)}
  .band-say .eyebrow{font-size:var(--t-label);letter-spacing:.14em;margin-bottom:0;line-height:1.35}
  .band-say .note{display:none}
  .wide-only{display:none}
  .band{padding-bottom:0}
  section + .band{padding-top:0}
  /* ⛔ Bare naar det NESTE ogsaa er et bilde. En tekstseksjon rett etter et
     baand trenger sin egen luft - uten dette laa overskriften klistret
     inntil motivet over. */
  .band + section:has(.band){padding-top:0}
  .band + section{padding-top:clamp(44px,10vw,64px)}
  @media (max-width:379px){
    .band-say{width:min(56%,215px);max-width:min(56%,215px)}
    /* ⛔ ikke det lyse baandet - der er teksten hele poenget */
    .band.is-light .band-say{width:100%;max-width:none}
    .band-say .eyebrow{display:none}
      }

  /* HEROEN paa telefon: teksten staar VED SIDEN AV motivet, ikke under det.
     Utsnittet er bygget for det - telefonene ligger i hoyre 59-100 %, saa
     venstrefeltet er tomt. Malt paa kompositten, tekstsone 0-55 %:
     14,3 snitt / 7,3 verste = AAA.
     ⛔ Her er det plass til TRE ting og ikke mer: slagord, overskrift, knapp.
        Ingressen og Wallpaper-linja staar andre steder paa telefon - legger
        du dem tilbake, renner teksten inn i motivet. */

  /* Sloeret dekker HELE scenen igjen, gulvet inkludert - ikonene staar der og
     trenger det for kontrast. (Det var bundet til bildets 4:3 i perioden da
     ikonlista laa utenfor bildet.) */
  .hero-stage::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--veil-m);
  }
  /* HARD CONSTRAINT (Tor 01.09, etter overlapp paa ekte iPhone).
     Tre sperrer, ikke én:
     1. Boksen er bundet til 54 % / 250px - motivet starter paa 59 %.
     2. ⛔ KNAPPEN FYLLER BOKSEN OG KAN IKKE VOKSE. Det var den ekte feilen:
        `width:auto` gjorde knappen bredere enn teksten over den, saa den stakk
        inn i motivet uansett hvor smal overskriften var.
     3. Skriften krymper med VIEWPORT og brekker heller en gang til.
        `overflow-wrap:anywhere` er siste utvei for et enkeltord som ikke faar
        plass - da brekkes ordet i stedet for aa sprenge boksen. */
  .hero-say{
    position:absolute;left:0;top:0;z-index:3;
    top:7%;left:0;
    display:block;
    width:min(50%,228px);max-width:min(50%,228px);
    /* 🪤 `.hero-say` baerer ogsaa `.wrap-hero`, som setter `margin-inline:auto`.
       Den sentrerte boksen i scenen (malt 23-77 % i stedet for 0-54 %), saa
       teksten endte oppa motivet uansett hvor smal boksen var. Nullstilles her. */
    margin-inline:0;
    padding:0 0 0 var(--edge);
    overflow-wrap:anywhere;
  }
  .hero-say .stack{gap:10px;align-items:stretch}
  .hero-say h1{font-size:var(--t-hero);line-height:1.06;max-width:none;letter-spacing:-.018em;text-wrap:pretty}
  .hero-say .eyebrow{font-size:var(--t-label);letter-spacing:.14em;margin-bottom:0;line-height:1.35}
  .hero-say .lead{display:none}
  .hero-cta{
    width:100%;max-width:100%;justify-content:center;
    padding:12px 8px;font-size:10.5px;letter-spacing:.05em;
  }
  /* ---------- REGEL: TEKSTEN KOLLIDERER ALDRI MED MOTIVET ----------
     Under 400px er det ikke lenger plass ved siden av telefonene. I stedet
     for aa krympe teksten videre - der den til slutt brekker ord og likevel
     naermer seg motivet - flyttes den UNDER bildet, i full bredde.
     Grensa er satt der den er fordi en AEROS Juno og en iPhone SE havner
     under den, mens vanlige telefoner (402pt og opp) beholder teksten ved
     siden av motivet.
     ⛔ Bildet beskjaeres til motivets 4:3 her: gulvet finnes bare for aa gi
        heroen hoeyde naar teksten ligger oppaa, og under bildet er det tomt
        rom. `object-position:top` sikrer at motivet aldri kuttes. */
  @media (max-width:400px){
    .hero-stage{display:block}
    .hero-stage img{aspect-ratio:4/3;object-fit:cover;object-position:center top}
    .hero-stage::after{aspect-ratio:4/3;height:auto;bottom:auto}
    .hero-say{
      position:static;width:auto;max-width:none;
      padding:clamp(26px,7vw,34px) var(--edge) clamp(6px,2vw,12px);
    }
    .hero-say .eyebrow{display:block}
    .hero-say .stack{gap:12px}
    .hero-cta{width:max-content;max-width:100%;padding:13px 24px;font-size:11.5px}
  }
  /* Hoeyden bindes EKSPLISITT i stedet for aa arves fra width/height.
     `<picture>` velger kilde ved parsing, saa attributtene kan komme fra en
     annen fil enn den som faktisk vises. Med aspect-ratio + cover foelger
     hoeyden alltid den faktiske bredden: 3:2 gir 260px paa en 390px skjerm,
     mot 487px for et 4:5-utsnitt. Det er ~900px spart over fem bilder. */
  .band img{
    width:100%;display:block;height:auto;
    aspect-ratio:4/3;object-fit:cover;object-position:center center;
  }
  /* det stille baandet har ingen tekst og kan vaere lavere */
  .band.is-still img{aspect-ratio:3/2}
  .band.is-low img{--op:35%}

}
@media (min-width:1000px){
  /* I venstrefeltet er knappen et element blant fem: eyebrow, h1, lead, CTA,
     presselinje. Malt hoyde ~445px mot motivets 796px - god klaring. */
  .hero-cta{width:auto}
}

/* ---------- 9 - DELINGEN: tre doerer + et lite presse-sett ---------- */
.doors{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:clamp(30px,4vw,44px)}
@media (min-width:760px){.doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.door{
  display:flex;flex-direction:column;gap:3px;
  padding:17px 20px;border:1px solid var(--rule);border-radius:2px;
  background:rgba(255,251,239,.028);color:var(--cream);
  transition:border-color .32s ease,background .32s ease;
}
.door:hover,.door:focus-visible{border-color:var(--gold);background:rgba(255,251,239,.05);color:var(--cream)}
.door b{font-size:var(--t-body);font-weight:600;letter-spacing:-.005em}
.door span{font-size:var(--t-note);color:var(--txt-3)}

.kit{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.5vw,40px)}
@media (min-width:860px){.kit{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.caption{
  margin:0 0 18px;padding:18px 20px;border-left:2px solid var(--gold);
  background:rgba(255,251,239,.03);
  font-size:var(--t-body);line-height:1.55;color:var(--txt-2);max-width:46ch;
}
.kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 10px}
.kit-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;display:block}

/* ---------- STICKY ASK PAA MOBIL ----------
   Paa live er sticky-baren SKJULT under 760px, saa knappen i #fund er eneste
   vei til aa reservere paa telefon - etter 12 skjermer med scroll. Den ble
   skjult 05.08 fordi den slaass med Complianz-fanen; den grunnen er borte
   (samtykke-knappen er en lenke i footeren naa).
   Reglene den maa foelge:
   - Den er ikke en ask NUMMER TO: samme maal som heroen og #fund (/#fund).
   - Den viser seg foerst NAAR heroens egen knapp er scrollet forbi.
   - Den skjuler seg naar #fund er i synsfeltet, ellers staar to asker oppa
     hverandre og konkurrerer.
   - Uten JS finnes den ikke. Den skal aldri kunne staa igjen og dekke innhold. */
.mob-ask{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;align-items:center;gap:12px;
  padding:11px var(--edge) calc(11px + env(safe-area-inset-bottom));
  background:rgba(11,20,30,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.22,.7,.25,1);
}
.mob-ask.on{transform:none}
.mob-ask .m-num{flex:1;min-width:0;line-height:1.15}
.mob-ask .m-sum{
  display:block;font-size:15px;font-weight:600;color:var(--cream);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.mob-ask .m-lab{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.mob-ask .m-bar{height:3px;margin-top:6px;border-radius:2px;background:rgba(198,185,150,.2)}
.mob-ask .m-bar i{display:block;height:100%;width:20.5%;border-radius:2px;background:var(--gold)}
.mob-ask .btn{flex:none;padding:14px 20px;font-size:12.5px;letter-spacing:.1em}
@media (max-width:999px){ .mob-ask{display:flex} }
@media (prefers-reduced-motion:reduce){ .mob-ask{transition:none} }

/* ---------- DESKTOP: baandhoeyde ----------
   Motivene er 1,79 brede. I full bredde blir hvert baand 804px paa en 1440-skjerm,
   og fem av dem gjorde siden 16 skjermer lang. 21:9 tar den til 617px.
   Kuttet er REGNET, ikke gjettet. Motivenes vertikale utstrekning, malt:
     hero  13,1-82,5 %   haand 30,5-73,8 %   lomme 0-43,9 %
     varm   8,5-74,8 %   eik    0-72,0 %
   Med 21:9 vises 76,7 % av hoeyden. `--op:30%` kutter da 7 % fra toppen og
   16,3 % fra bunnen - innenfor margen paa hero, haand og varm.
   Lomme og eik har motiv helt oppe i kanten og faar `--op:15%` (3,5 % topp).
   ⛔ Nytt motiv ⇒ mal utstrekningen paa nytt og sett `--op` deretter. */
@media (min-width:1000px){
  /* ⛔ HEROEN ER IKKE MED HER. Den store telefonen naar helt til bildekanten,
     saa ethvert toppkutt tar toppen av den - verifisert i render. Heroen viser
     hele motivet (804px paa 1440); de 190px den koster er ikke verdt feilen. */
  .band img{
    aspect-ratio:21/9;object-fit:cover;object-position:center var(--op,30%);
  }
  .band.is-low img{--op:15%}
  /* ⛔ Ikke beskaaret - se merknaden ved `.band.is-light .band-say`. */
  .band.is-light img{aspect-ratio:auto;object-fit:fill;height:auto;align-self:start}
}

/* ---------- HOVEDSPESIFIKASJONER paa kremflata ----------
   Erstattet de fire prinsipp-radene (Tor 01.09). Ikonene er samme sprak som
   resten av huset: 24-rutenett, currentColor, stroke 1.5 - ingen fyll.
   🪤 Gullet maa moerknes paa krem: #C6B996 gir 1,6:1 mot #FFFBEF.
      `--gold-ink` #7E6F45 er tonen som er regnet for denne flata. */
.specs-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  margin:34px 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(126,111,69,.28);
}
@media (min-width:720px){.specs-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px)}}
.specs-grid li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(20px,3vw,26px) 0;border-bottom:1px solid rgba(126,111,69,.28);
}
.sp-ic{flex:none;color:var(--gold-ink);margin-top:1px}
.specs-grid b{
  display:block;font-family:var(--f-num);font-weight:var(--num-weight);
  font-size:var(--t-h3);letter-spacing:0;color:#1C1810;margin-bottom:3px;
}
.specs-grid span{display:block;font-size:var(--t-body);line-height:1.5;color:#463C2C}


/* ---------- MOBILHEROEN: BILDE FOERST, TEKST UNDER ----------
   Tors valg 02.09 — samme struktur som `/the-phone`, der `.cx-hero-say`
   ligger i normal flyt under bildet og bare desktop absolutt-posisjonerer.
   ⛔ DENNE BLOKKEN ROERER IKKE DESKTOP. Alt staar i `max-width:999px`;
      `@media (min-width:1000px)` lenger opp eier fortsatt venstrefeltet,
      sloeret og ikonraden.
   ⛔ Sloeret er AV her. Det finnes for aa baere tekst oppaa motivet — naar
      teksten staar under bildet, demper det bare et produktbilde uten grunn.
   ⛔ `fp-hero-tall.jpg` er bygget for dette: 4:5 sentrert paa telefonene, som
      fyller 49 % av bredden mot 22 % i det vide utsnittet. Bytter du bilde,
      bruk et utsnitt UTEN tomt venstrefelt — det feltet har ingen jobb her. */
@media (max-width:999px){
  .hero-stage{display:block}
  .hero-stage::after{display:none}
  .hero-stage img{width:100%;height:auto;display:block}
  .hero-say{
    position:static;width:auto;max-width:none;
    margin:0;
    /* ⛔ Bunn-paddingen er IKKE valgfri. Uten den slutter heroen paa knappens
       nederste piksel — malt 0px til fargeskillet, saa knappen ser ut som den
       staar paa kanten av neste seksjon. */
    padding:clamp(24px,6vw,32px) var(--edge) clamp(34px,9vw,48px);
  }
  .hero-say .stack{gap:clamp(12px,3vw,16px);align-items:stretch}
  .hero-say .eyebrow{display:block}
  .hero-say h1{font-size:clamp(27px,7.4vw,34px);line-height:1.08;max-width:16ch}
  /* slagordet erstatter ingressen her — den er skjult paa telefon */
  .hero-floor{
    position:static;display:block;
    margin:0;padding:0;text-align:left;
    font-size:var(--t-small);color:rgba(255,251,239,.62);
  }
  .hero-cta{
    width:max-content;max-width:100%;
    padding:14px 26px;font-size:11.5px;letter-spacing:.06em;
    margin-top:clamp(4px,1.6vw,8px);
  }
}
@media (max-width:400px){
  /* ⛔ Regelen som stablet teksten under 400px er overfloedig naa — den
     staar allerede under bildet paa alle telefonbredder. */
  .hero-stage img{aspect-ratio:auto;object-fit:fill}
}