/*
Theme Name: Auto Connect
Theme URI: https://autoconnect.no/
Author: Auto Connect
Description: Tema for Auto Connect, bruktbilforhandler i Mjøndalen. Mørk profil med rød aksent brukt sparsomt, på handlinger og aktive tilstander. Biler legges inn som egen innholdstype med felter for merke, årsmodell, kilometerstand, pris og utstyr, slik at nye biler kan legges ut fra wp-admin uten å røre kode.
Version: 3.9.4
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autoconnect
Tags: business, dark, custom-logo, custom-menu, translation-ready
*/

/* ============================================================
   AUTO CONNECT, designsystem
   ------------------------------------------------------------
   Ett stilark for hele temaet. Sidespesifikke forskjeller
   ligger bak WordPress sine body-klasser:
     .home            forsiden
     .single-bil      én bil
     .post-type-archive-bil   biler til salgs
     .side-kontakt    kontaktsiden
   ============================================================ */

:root{
  --bg:#0A0A0B;
  --bg-2:#101114;
  --bg-3:#17181C;
  --bg-4:#1E1F24;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  /* Varm off-white i overskrifter og uthevet tekst, mot kjølige grå
     flater. Den kontrasten gir dybde i et mørkt grensesnitt. */
  --txt:#F6F4F0;
  --txt-2:#A2A4AB;
  /* #6E7076 ga 3,6:1 mot kortbakgrunnen og falt under WCAG AA.
     #85878E gir 4,9:1 mot bg-3 og 4,6:1 mot bg-4. */
  --txt-3:#85878E;
  --red:#D6151F;
  --red-hi:#F2242F;
  --red-dim:rgba(214,21,31,.14);
  /* Nøytral ikonfarge. Rødt er reservert for handlinger og aktive
     tilstander, ikke for hver eneste hake og hvert eneste ikon. */
  --ikon:#8E9198;

  /* Displayfont. Bytt til 'Barlow' her for å gå tilbake til v2-uttrykket,
     fonten ligger fortsatt i assets/fonts. Breddeaksen er poenget med
     Archivo: brede versaler leser åpent, men må strammes inn på smal
     skjerm, se mediaspørringen nederst. */
  --display:'Archivo','Barlow',system-ui,sans-serif;
  --display-bredde:118%;
  --body:'Inter',system-ui,sans-serif;

  --wrap:1280px;
  --pad:clamp(20px,4vw,40px);
  /* Avstanden fra innholdsspalten ut til venstre skjermkant. Brukt av
     elementer som skal bryte ut av rammen. */
  --utbrudd:calc(var(--pad) + (100vw - min(100vw, var(--wrap))) / 2);

  /* Tetthetsskala. v2 hadde én verdi for alle seksjoner, og da puster
     hele siden likt fra topp til bunn. Tre trinn gir komposisjon. */
  --sec:clamp(72px,9vw,128px);
  --sec-tett:clamp(56px,6.5vw,92px);
  --sec-luft:clamp(88px,12vw,168px);
  --r:14px;
}

/* ---------- grunnlag ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* IKKE sett overflow-x:hidden på html. Det gjør html til en scroll-container
   og slår ut position:sticky på headeren, som da forsvinner ut av skjermen
   når man scroller. Målt 17.8.2026: header havnet på top -2008px.
   Sidelengs draing løses ved å fjerne det som faktisk er for bredt, ikke
   ved å skjule det. */
html{scroll-behavior:smooth}
/* Ankerhopp (#selg, #erfaring …) skal lande under headeren, ikke bak den.
   Gjelder alle bredder: headeren ligger over innholdet ved ankerhopp
   uansett om den er sticky (desktop) eller fast (mobil). */
[id]{scroll-margin-top:92px}

/* MEN: ankrene på forsiden ligger på seksjonsRAMMEN, ikke på innholdet, og
   seksjonene har opptil 168 px egen luft over overskriften (se
   tetthetsskalaen --sec / --sec-tett / --sec-luft). 92 px påslag OVENPÅ den
   luften ga inntil 260 px svart tomrom før noe var å lese, verst på
   #erfaring. Meldt av kunden 18.8.2026, både på desktop og mobil.

   Derfor trekkes seksjonens egen luft fra her. Regnestykket lander
   overskriften 100 px fra toppen av vinduet uansett skjermbredde, altså
   rundt 20 px under den festede headeren. Negativ scroll-margin er lov og
   betyr «la rammen begynne over vindusk anten», som er nettopp poenget.

   HOLD DENNE BLOKKEN I TAKT MED padding-reglene under «.home section»
   lenger nede i fila. Bytter du luft-variabel der, må den byttes her. */
.home #biler,
.home #kontakt{scroll-margin-top:calc(100px - var(--sec))}
.home #selg,
.home #finansiering{scroll-margin-top:calc(100px - var(--sec-tett))}
.home #erfaring{scroll-margin-top:calc(100px - var(--sec-luft))}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Fint korn over hele flaten. Uten dette er alle flatene helt matte og
   helt like, og siden leser som flatt digitalt grått. Med det får de
   mørke feltene materiale. Ligger over alt, tar ingen klikk. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url(assets/img/korn.png);
  background-size:160px 160px;
  opacity:.028;mix-blend-mode:overlay;
}
@media(prefers-reduced-motion:reduce){body::after{opacity:.02}}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* WordPress-hjelpere */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:999;width:auto;height:auto;
  clip:auto;clip-path:none;background:var(--red);color:#fff;padding:12px 18px;
  border-radius:6px;font-family:var(--display);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
}

/* ---------- typografi ---------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:600;
  font-stretch:var(--display-bredde);
  /* 1.06 klemte ringen på Å og strekene på Ø mot linja over.
     Norske versaler trenger denne luften. */
  line-height:1.12;
  letter-spacing:-.008em;overflow-wrap:break-word;
}
h1{font-size:clamp(2rem,5.2vw,3.6rem);text-transform:uppercase}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase;font-stretch:110%}
h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:650;font-stretch:106%}
p{color:var(--txt-2)}

/* forsiden kjører større og balanserte overskrifter */
.home h1,.home h2,.home h3,.home h4{text-wrap:balance}
.home h1{font-size:clamp(1.75rem,5.9vw,4.4rem)}
.home h2{font-size:clamp(1.5rem,4.4vw,2.9rem)}
.home h3{font-size:clamp(1.1rem,2vw,1.45rem)}

.single-bil h1{font-size:clamp(1.85rem,3.6vw,2.9rem)}
.single-bil h3{font-size:1.05rem}
.side-kontakt h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.side-kontakt h3{font-size:1.02rem}

/* seksjonsetikett: rød strek + versaler */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--txt-2);
  margin-bottom:20px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red);flex:none}
.lead{font-size:clamp(1rem,1.5vw,1.13rem);max-width:62ch}

/* ---------- knapper ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;border-radius:6px;border:1.5px solid transparent;
  cursor:pointer;transition:.22s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-hi);transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(214,21,31,.7)}
.btn-ghost{border-color:var(--line-2);color:var(--txt);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:.85rem}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}

/* ============================================================
   TOPPBAR
   ============================================================ */
/* z-index 101 legger toppbaren over mobil-hetten (z 100) og bakplaten
   (z 99), så den er synlig ved sidetopp. KJENT REST (parkert av Akil
   18.8.2026): nettopp dette laget males på strømningsposisjon i de
   første bildene etter tilbake-sveip på iPhone, så telefon/e-post kan
   blafre øverst når man kommer tilbake NEDSCROLLET. Eneste kjente fiks
   er å skjule toppbaren på mobil (prøvd i v3.3.7, rullet tilbake fordi
   Akil vil ha baren synlig). Ikke jag dette blaffet i CSS igjen. */
.topbar{background:#000;border-bottom:1px solid var(--line);font-size:.83rem;position:relative;z-index:101}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;height:40px}
.topbar a{color:var(--txt-2);display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar-l{display:flex;gap:24px}
.topbar-r{display:flex;align-items:center;gap:16px;color:var(--txt-3);font-size:.8rem}
.topbar-r a{color:var(--txt-2);display:grid;place-items:center;transition:color .2s}
.topbar-r a:hover{color:#fff}
.tb-adr{margin-left:6px}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,11,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  /* INGEN will-change/translateZ her. Hintet ble lagt til i v3.2.2 mot
     belte-feilen (som i stedet ble løst av hetten, se ::before under
     640px-spørringen), hjalp aldri, og tvang headeren til eget
     komposittlag. Ved tilbake-navigering kunne Safari la det laget stå
     malt på gammel posisjon i et par tideler, så innholdet blafret der
     menyen skulle vært. Fjernet i v3.3.4. */
}
/* På iPhone med URL-linja nederst går siden helt opp under statuslinja, og
   innholdet ruller synlig gjennom det beltet mens headeren fester seg under.
   Når headeren er festet, strekker den seg derfor opp og dekker beltet.
   env() er 0 uten viewport-fit=cover i <meta>, se header.php. */
.site-header.stuck{padding-top:env(safe-area-inset-top,0px)}
/* Forsiden starter gjennomsiktig over heroen og tetner ved scroll. */
.home .site-header{
  background:rgba(10,10,11,.72);backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:transparent;transition:.3s;
}
.home .site-header.stuck{background:rgba(10,10,11,.96);border-bottom-color:var(--line)}

.site-header .wrap{display:flex;align-items:center;gap:32px;height:78px}
.brand img{height:44px;width:auto}
.brand .brand-text{
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);
  position:relative;padding:6px 0;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--red);transition:width .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover,.nav a.on,.nav .current-menu-item > a,.nav .current_page_item > a{color:#fff}
.nav a:hover::after,.nav a.on::after,.nav .current-menu-item > a::after,.nav .current_page_item > a::after{width:100%}
.nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.header-cta{margin-left:8px}
.burger{
  display:none;margin-left:auto;background:none;border:0;color:#fff;
  padding:8px;cursor:pointer;min-width:44px;min-height:44px;place-items:center;
}
.burger svg{width:26px;height:26px}
/* Ringeknapp, kun mobil (vises i 900px-spørringen). Ghost-sirkel som
   sosialikonene i footeren, ikke rød fylt: en rød blokk som følger hele
   scrollen gjør rammen støyende, og mobilmenyen har alt en rød CTA.
   Rødt kvitterer i stedet ved trykk. */
.header-tlf{
  display:none;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);place-items:center;color:var(--txt);
  transition:border-color .2s,color .2s;flex:none;
}
.header-tlf svg{width:19px;height:19px}
.header-tlf:hover{border-color:#fff}
.header-tlf:active{border-color:var(--red);color:var(--red)}

/* mobilmeny: fanes ut under headeren, samme tokens som resten */
.mobile-nav{
  display:none;background:rgba(10,10,11,.98);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);position:sticky;z-index:99;
  /* Følger headeren. Vokser headeren med statuslinja, må menyen ned like mye. */
  top:calc(78px + env(safe-area-inset-top,0px));
}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;display:grid;padding-block:8px}
/* Scopet til lenkene i lista. Uten «ul» traff denne også CTA-knappen under
   lista, og slo ut både .btn sin sentrering og den hvite teksten: knappen
   ble venstrestilt med grå skrift på rødt. */
.mobile-nav ul a{
  display:block;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-2);transition:color .2s;
}
.mobile-nav li:last-child a{border-bottom:0}
.mobile-nav ul a:hover,.mobile-nav .current-menu-item > a{color:#fff}
.mobile-nav .btn{margin:14px 0 20px;width:100%}

/* ============================================================
   HERO, forsiden
   ============================================================ */
.hero{position:relative;min-height:min(90vh,840px);display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% 46%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    /* Myk skygge bak selve tekstblokken. Uten den skinner BMW-emblemet
       gjennom «stole på», og nummerskiltet gjennom knappene. Formet som
       en ellipse så bilen ellers beholder lyset sitt. Ikke fjern. */
    radial-gradient(78% 82% at 20% 52%,
      rgba(10,10,11,.93) 0%,
      rgba(10,10,11,.80) 42%,
      rgba(10,10,11,.36) 68%,
      rgba(10,10,11,0) 88%),
    linear-gradient(to right,
      rgba(10,10,11,.97) 0%,
      rgba(10,10,11,.95) 32%,
      rgba(10,10,11,.86) 50%,
      rgba(10,10,11,.52) 66%,
      rgba(10,10,11,.18) 84%,
      rgba(10,10,11,.10) 100%),
    linear-gradient(to top,var(--bg) 0%,rgba(10,10,11,.35) 22%,transparent 48%);
}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(56px,9vw,104px) clamp(40px,6vw,68px)}
.hero-inner{max-width:900px}
/* Heroen har egne linjeskift i markupen. text-wrap:balance overstyrte dem
   og delte «BRUKTBILER DU KAN» i to selv om den fikk plass på én linje. */
.hero h1{margin-bottom:22px;text-wrap:wrap}
.hero h1 .accent{color:var(--red)}
.hero .lead{font-size:clamp(1.02rem,1.7vw,1.2rem);color:#C9CBD1;margin-bottom:34px;max-width:54ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.5);border:1px solid var(--line-2);
  backdrop-filter:blur(10px);border-radius:100px;
  padding:8px 18px 8px 14px;margin-bottom:26px;
  font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:#E6E7EA;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-dim)}

/* ============================================================
   TRUST-STRIPE
   ============================================================ */
/* Harde 1px-linjer tvers over 1280 piksler er det som gjør et mørkt
   design flatt. Disse tones ut mot kantene. */
.trust{background:var(--bg-2);position:relative}
.trust::before,.trust::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);
}
.trust::before{top:0}
.trust::after{bottom:0}
.trust .wrap{padding-inline:0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:34px 28px;border-right:1px solid var(--line);display:flex;gap:15px;align-items:flex-start}
.trust-item:last-child{border-right:0}
.trust-item svg{width:24px;height:24px;color:var(--ikon);flex:none;margin-top:2px}
.trust-item strong{
  display:block;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:.02em;margin-bottom:3px;
}
.trust-item span{font-size:.87rem;color:var(--txt-3);line-height:1.5}

/* ============================================================
   SEKSJONER
   ============================================================ */
/* Tetthet varierer med hensikt. Selge-seksjonen strammes inn fordi den
   er tett på innhold, om-seksjonen får luft fordi den skal puste, og
   partnerne strammes inn fordi de er støtteinformasjon. */
.home section{padding-block:var(--sec)}
.home .ways section{padding-block:var(--sec-tett)}
.home #erfaring{padding-block:var(--sec-luft)}
.home .partners section{padding-block:var(--sec-tett)}
.sec-head{margin-bottom:clamp(38px,5vw,58px);max-width:70ch}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;max-width:none}
.sec-head.row .lead{max-width:42ch;margin-bottom:6px}
/* Knappen står i overskriftsraden i stedet for sentrert under rutenettet.
   v2 hadde tre seksjoner på rad med samme «rutenett, så sentrert rød
   knapp»-takt. Nå er det én. */
.sec-head-hoyre{display:flex;flex-direction:column;align-items:flex-end;gap:18px;flex:none}
.sec-head-hoyre .lead{margin-bottom:0}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lead{margin:16px auto 0}

/* ---------- bilkort ---------- */
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* Hele kortet er klikkflate. Lenken ligger på tittelen og strekkes ut
   over kortet med ::after, slik at det fortsatt er ÉN lenke per kort for
   skjermleser og tastatur, ikke tre som peker samme sted. */
.car{
  position:relative;
  /* Svak lysgradient fra toppen, så kortet leser som en flate med lys på,
     ikke som et fylt rektangel. */
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 42%),var(--bg-3);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
}
.car-body h3 a::after{content:"";position:absolute;inset:0;z-index:3}
.car:focus-within{border-color:var(--line-2)}
.car-body h3 a:focus-visible::after{outline:2px solid var(--red-hi);outline-offset:-4px;border-radius:var(--r)}
.car:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 22px 50px -22px rgba(0,0,0,.9)}
.car-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.car-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.car:hover .car-img img{transform:scale(1.06)}
/* Bil uten eget foto ennå. Ryddig plassholder er bedre enn å vise
   en annen bil, eller å la kortet se ødelagt ut. */
.car-img.awaiting{background:linear-gradient(160deg,#1F2024,#0D0E10);display:grid;place-items:center}
.car-img.awaiting .ph{text-align:center;padding:18px}
.car-img.awaiting .ph img{width:104px;height:auto;opacity:.45;margin:0 auto 12px}
.car-img.awaiting .ph span{font-size:.8rem;color:var(--txt-3);letter-spacing:.02em}
.car-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.car-body h3{margin-bottom:4px}
.car-sub{font-size:.86rem;color:var(--txt-3);margin-bottom:18px}
.car-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;
  padding:16px 0;border-block:1px solid var(--line);margin-bottom:18px;
}
.spec{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--txt-2)}
.spec svg{width:15px;height:15px;color:var(--txt-3);flex:none}
.car-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;gap:14px;flex-wrap:wrap}
.price small{display:block;font-size:.73rem;color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1px}
.price strong{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.012em;line-height:1.1;font-variant-numeric:tabular-nums}
/* Skiltet «Se bilen» er nå ren visuell markør, ikke egen lenke. */
.car-link{
  font-family:var(--display);font-weight:700;font-size:.83rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-2);display:inline-flex;align-items:center;gap:7px;
  transition:gap .22s,color .22s;padding-bottom:3px;
}
.car:hover .car-link{gap:12px;color:var(--txt)}
.cars-cta{text-align:center;margin-top:52px;display:none}

/* ---------- to måter å selge på ---------- */
.ways{background:var(--bg-2);border-block:1px solid var(--line)}
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.way{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 42%),var(--bg-3);
  border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(30px,3.6vw,44px);transition:.3s;overflow:hidden;
}
.way::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line-2);transition:.3s}
.way.feature::before{background:var(--red)}
.way:hover{border-color:var(--line-2);transform:translateY(-4px)}
.way-tag{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;padding:5px 12px;border-radius:4px;
  background:var(--bg-4);color:var(--txt-2);margin-bottom:18px;
}
.way.feature .way-tag{background:var(--red-dim);color:#FF6A72}
.way h3{font-size:clamp(1.4rem,2.4vw,1.85rem);text-transform:uppercase;margin-bottom:14px}
.home .way h3{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.way > p{margin-bottom:24px}
.way ul{list-style:none;display:grid;gap:13px}
.way li{display:flex;gap:12px;font-size:.94rem;color:var(--txt-2);line-height:1.55}
.way li svg{width:19px;height:19px;color:var(--ikon);flex:none;margin-top:3px}
.ways-cta{text-align:center;margin-top:46px}

/* ---------- verdisjekk ---------- */
/* Forsidens handling for den som skal selge. Kortet er det lyseste
   elementet i seksjonen med vilje: det er det eneste her man skal ta
   på. Feltene ligger i én sammenhengende ramme, som et skilt, ikke som
   fem løse bokser, og andre rad foldes ut når kunden er i gang. */
.verdi-kort{
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%),var(--bg-3);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(22px,2.8vw,34px);
  margin-bottom:clamp(56px,7vw,86px);
}
.verdi-inn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start}

.verdi-felt{border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:var(--bg-2)}
.vrad{display:grid}
.vrad-1{grid-template-columns:1fr 1fr}
.vrad-2{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2)}
.vcelle{position:relative;padding:13px 18px 14px;border-right:1px solid var(--line-2);min-width:0}
.vrad > .vcelle:last-child{border-right:0}
.vcelle label{
  display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-3);font-weight:500;margin-bottom:2px;
}
/* Feltene har ingen egen ramme; rammen er cella de står i. Da må
   fokusmarkeringen komme fra cella, ellers ser man ikke hvor man står. */
.vcelle input{
  width:100%;background:transparent;border:0;padding:0;color:var(--txt);
  font-family:var(--display);font-weight:600;font-stretch:var(--display-bredde);
  font-size:1.08rem;letter-spacing:.01em;line-height:1.5;
}
.vcelle input::placeholder{color:var(--txt-3);font-weight:500;letter-spacing:.02em}
.vcelle input:focus{outline:none}
.vcelle:focus-within{background:var(--bg-3)}
.vcelle::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.vcelle:focus-within::after{transform:scaleX(1)}
/* Kjennemerket skrives i versaler av JS. Sperresatt tekst gjør at det
   leses som et skilt og ikke som et ord. */
#v-regnr{letter-spacing:.14em;text-transform:uppercase}

/* Andre rad. Skjult til kunden er i gang, men BARE når JavaScript er
   tilgjengelig: uten .js står den åpen, og skjemaet virker som før. */
.js .verdi .vrad-2{
  height:0;overflow:hidden;border-top-color:transparent;
  /* visibility, ikke bare høyde: et felt med høyde 0 er fortsatt i
     tabulatorrekkefølgen og leses av skjermlesere. Uten dette kunne man
     tabulere fra kilometerstand rett inn i tre felter ingen ser. */
  visibility:hidden;
  transition:height .35s cubic-bezier(.4,0,.2,1),border-top-color .35s;
}
.js .verdi.apen .vrad-2{height:auto;border-top-color:var(--line-2);visibility:visible}

.verdi-handling{display:grid;gap:14px;justify-items:stretch;align-content:start}
.verdi-handling .btn{width:100%;padding-block:17px}

/* Bryteren. Et ekte avkryssingsfelt, tegnet om, så tastatur og
   skjermleser får det de skal ha. */
.bryter{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.bryter input{position:absolute;opacity:0;width:0;height:0}
.bryter .spor{
  width:42px;height:24px;border-radius:99px;background:var(--bg-4);
  border:1px solid var(--line-2);flex:none;position:relative;transition:.22s;
}
.bryter .spor::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--txt-3);transition:.22s cubic-bezier(.4,0,.2,1);
}
.bryter input:checked + .spor{background:var(--red-dim);border-color:var(--red)}
.bryter input:checked + .spor::after{transform:translateX(18px);background:var(--red-hi)}
.bryter input:focus-visible + .spor{outline:2px solid var(--red-hi);outline-offset:3px}
.bryter-tekst{font-size:.88rem;color:var(--txt-2);line-height:1.4}

/* Balansert brytning: uten den henger «svare deg.» alene på linje to.
   Nettlesere uten støtte bryter som før, altså ingen risiko. */
/* Feil ved feltet. Cella får rød kant og meldingen står under, slik at man
   ser hvilket felt det gjelder uten å lete i en stripe på toppen. Den røde
   understreken fra fokus vinner over denne når man står i feltet, som er
   riktig: da holder man på å rette. */
.vcelle.har-feil{background:rgba(214,21,31,.07)}
.vcelle.har-feil::after{transform:scaleX(1);background:var(--red)}
.vcelle:focus-within.har-feil::after{background:var(--red-hi)}
.vfeil{
  margin-top:6px;font-size:.78rem;line-height:1.45;color:#F3B5B8;
  font-family:var(--body);font-weight:400;letter-spacing:0;
}

.verdi-note{margin-top:16px;font-size:.83rem;color:var(--txt-3);line-height:1.55;max-width:78ch;text-wrap:balance}
.verdi-melding{margin-bottom:20px}
/* Ankeret for hele verdisjekken. Ekstra luft over det som ellers, fordi
   feilmeldingen skal være godt synlig når man lander her etter en
   innsending som ikke gikk gjennom, ikke ligge og skrape i overkanten. */
#verdi{scroll-margin-top:120px}

/* Kvitteringen. Står der skjemaet sto, i samme ramme, så siden ikke
   hopper når den kommer. */
.verdi-kvitt{text-align:center;padding:clamp(32px,4.4vw,52px)}
.kv-merke{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 20px;background:var(--red-dim);border:1px solid rgba(214,21,31,.42);
}
.kv-merke svg{width:26px;height:26px;color:var(--red-hi)}
.verdi-kvitt h3{text-transform:uppercase;margin-bottom:12px}
.verdi-kvitt p{max-width:56ch;margin:0 auto}
.verdi-kvitt p b{color:var(--txt);font-family:var(--display);font-weight:600;letter-spacing:.02em}
.kv-naa{margin-top:10px!important;font-size:.9rem;color:var(--txt-3)}
.kv-naa a{color:var(--txt-2);border-bottom:1px solid var(--line-2)}
.kv-naa a:hover{color:var(--red-hi);border-bottom-color:var(--red-hi)}
.kv-lenker{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.kv-lenker a{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:.86rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px;border:1px solid var(--line-2);border-radius:6px;
  color:var(--txt-2);transition:.22s;
}
.kv-lenker a:hover{color:var(--txt);border-color:#fff;background:rgba(255,255,255,.05)}
.kv-lenker svg{width:16px;height:16px;flex:none}
.kv-lenker a:hover svg{color:var(--red-hi)}

/* De to måtene å selge på ligger nå UNDER verdisjekken, som forklaring
   av hva som skjer etterpå. Overskriften er derfor et hakk lavere enn
   seksjonsoverskriften over skjemaet. */
.maater .sec-head{margin-bottom:clamp(30px,3.4vw,44px)}
.maater-tit{
  font-size:clamp(1.3rem,2.6vw,1.75rem);text-transform:uppercase;
  font-stretch:110%;margin-bottom:14px;
}

/* ---------- erfaring ---------- */
/* Det eneste stedet på forsiden der noe bryter ut av 1280-rammen.
   Bildet går helt ut til venstre skjermkant, teksten blir stående i
   spalten. Uten et slikt brudd har hele siden ett eneste innrykk fra
   topp til bunn, og det er nettopp det som leser som mal. */
.exp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,5.5vw,76px);align-items:center}
.exp-media{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  border-radius:0 var(--r) var(--r) 0;
  margin-left:calc(-1 * var(--utbrudd));
  width:calc(100% + var(--utbrudd));
  /* Uten taket her er høyden låst til BREDDEN gjennom aspect-ratio, og
     bredden vokser med skjermen. Målt 18.8.2026: 791 px høyt i et 720 px
     vindu allerede på 1280, 1187 px på 1920 og 1583 px på 2560. Bunnen av
     bildet var da aldri synlig, uansett hvor stor skjerm man har.
     Meldt av kunden. Taket gjør at bildet beskjæres i stedet for å vokse,
     og object-fit:cover under tar seg av beskjæringen. */
  max-height:min(78vh,660px);
}
.exp-media img{width:100%;height:100%;object-fit:cover}
.exp-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.5),transparent 55%)}
.exp-stamp{
  position:absolute;left:26px;bottom:26px;z-index:2;
  background:rgba(10,10,11,.78);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);border-radius:10px;padding:18px 24px;
}
.exp-stamp b{display:block;font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:1;color:#fff}
.exp-stamp span{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-2)}
.exp-text .lead{margin-top:18px}
.exp-points{display:grid;gap:26px;margin-top:34px}
.exp-point{display:flex;gap:17px}
.exp-point .num{
  font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--txt);
  border:1.5px solid var(--line-2);border-radius:50%;width:34px;height:34px;
  display:grid;place-items:center;flex:none;letter-spacing:0;
}
.exp-point h4{font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:5px}
.exp-point p{font-size:.93rem}

/* ---------- partnere ---------- */
.partners{background:var(--bg-2);border-block:1px solid var(--line)}
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
/* Fire hvite blokker var det nest lyseste på hele forsiden, plassert
   nederst, på det minst viktige innholdet. Nå er de mørke fliser med
   logoene i hvitt. Logoene lysner på hover. */
.partner{
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),var(--bg-3);
  border:1px solid var(--line);border-radius:10px;height:112px;
  display:grid;place-items:center;padding:22px;
  transition:.3s;overflow:hidden;
}
.partner:hover{border-color:var(--line-2);transform:translateY(-3px)}
.partner img{max-height:44px;max-width:76%;width:auto;object-fit:contain;opacity:.78;transition:.3s}
.partner:hover img{opacity:1}
.fin-note{
  margin-top:34px;padding:22px 26px;background:var(--bg-3);
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:8px;
  font-size:.93rem;color:var(--txt-2);
}
.fin-note strong{color:var(--txt)}

/* ---------- CTA / kontakt på forsiden ---------- */
.cta-block{position:relative;overflow:hidden;background:var(--bg-2)}
.cta-inner{
  position:relative;z-index:1;background:var(--bg-3);
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(38px,5.5vw,72px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,64px);align-items:center;
}
.cta-inner h2{margin-bottom:16px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.contact-card{display:grid;gap:2px}
.contact-row{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
.contact-row:last-child{border-bottom:0}
.contact-row .ico{width:42px;height:42px;border-radius:9px;background:var(--bg-4);display:grid;place-items:center;flex:none}
.contact-row svg{width:18px;height:18px;color:var(--ikon)}
.contact-row small{display:block;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-bottom:2px}
.contact-row b{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.01em}

/* ---------- footer ----------
   Målene er forsidens. Undersidene i utkastet hadde en litt strammere
   variant, men bunnteksten er nå ett felles element, og forsiden er
   den godkjente referansen. Forskjellen er rundt ti piksler i høyde. */
.site-footer{background:#000;border-top:1px solid var(--line);padding-block:clamp(52px,6vw,76px) 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(28px,3vw,46px);margin-bottom:48px}
/* width:auto er bærende: logoen sendes med width- og height-attributt,
   og uten dette strekkes den til 500 piksler bred. */
.foot-brand img{height:40px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.92rem;max-width:38ch}
.site-footer h4{
  font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:20px;color:#fff;
}
.foot-list{list-style:none;display:grid;gap:12px}
.foot-list a,.foot-list li{color:var(--txt-2);font-size:.93rem;transition:color .2s}
.foot-list a:hover{color:var(--red)}
.foot-hours{display:grid;gap:9px}
.foot-hours div{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;color:var(--txt-2)}
.foot-hours dd{color:var(--txt);font-variant-numeric:tabular-nums}
.foot-kart{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.88rem;color:var(--txt-2);transition:color .2s;
}
.foot-kart svg{width:15px;height:15px;color:var(--ikon)}
.foot-kart:hover{color:#fff}
.foot-sosialt{display:flex;gap:12px;margin-top:20px}
.foot-sosialt a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--txt-2);transition:.2s;
}
.foot-sosialt a:hover{color:#fff;border-color:#fff}
.foot-sosialt svg{width:16px;height:16px}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.85rem;color:var(--txt-3);
}

/* ---------- scroll-animasjon ----------
   Elementene skjules bare når JavaScript faktisk kjører. Uten skript
   står alt synlig, i stedet for å bli liggende usynlig for alltid. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   BRØDSMULER OG SIDETOPP
   ============================================================ */
.crumbs{padding-block:22px;font-size:.85rem;color:var(--txt-3)}
.crumbs a{color:var(--txt-2);transition:color .2s}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin-inline:8px}
.page-top{padding-bottom:clamp(28px,4vw,44px)}
.page-top h1{margin-bottom:14px}
.side-kontakt .page-top{padding-bottom:clamp(30px,4vw,48px)}

/* ============================================================
   BILER TIL SALGS, arkivet
   ============================================================ */
.filters{
  position:sticky;top:78px;z-index:80;
  background:rgba(16,17,20,.94);backdrop-filter:blur(14px);
  border-block:1px solid var(--line);padding-block:18px;margin-bottom:clamp(30px,4vw,44px);
}
.filters .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fgroup{display:flex;flex-direction:column;gap:5px}
.fgroup label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:500}
.fgroup select{
  background:var(--bg-3);color:var(--txt);border:1px solid var(--line-2);
  border-radius:7px;padding:9px 34px 9px 13px;font-family:var(--body);font-size:.9rem;
  cursor:pointer;appearance:none;min-width:132px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7076' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;
}
.fgroup select:hover{border-color:var(--line-2)}
.fgroup.sorter{margin-left:auto}
/* Wrapperen rundt nedtrekkene finnes bare for mobil-sammenfoldingen.
   display:contents gjør den usynlig for flex-layouten på desktop, så
   raden ligger nøyaktig som før wrapperen kom til. */
.filterfelt{display:contents}
.filter-toggle{
  display:none;align-items:center;gap:9px;
  background:var(--bg-3);color:var(--txt);border:1px solid var(--line-2);
  border-radius:7px;padding:11px 16px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s;
}
.filter-toggle:hover{border-color:#fff}
.filter-toggle svg{width:15px;height:15px;color:var(--txt-3);transition:transform .25s}
.filters.open .filter-toggle svg{transform:rotate(180deg)}
.freset{display:flex;align-items:center;gap:16px;font-size:.86rem;color:var(--txt-2)}
.freset button{
  background:none;border:0;color:var(--red);font-family:var(--body);font-size:.88rem;
  cursor:pointer;padding:8px 0;transition:opacity .2s;
}
.freset button:hover{opacity:.75}
.count b{color:var(--txt);font-weight:600}

/* aktive filtre som fjernbare brikker, så det alltid er synlig
   hva som er skrudd på og hvordan man skrur det av igjen */
.chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding-block:14px 0}
.chips[hidden]{display:none}
.chips .chip-etikett{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3)}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:100px;
  padding:6px 8px 6px 14px;font-size:.85rem;color:var(--txt);
  font-family:var(--body);cursor:pointer;transition:.2s;
}
.chip:hover{border-color:#fff}
.chip svg{width:13px;height:13px;color:var(--txt-3);flex:none}
.chip:hover svg{color:var(--txt)}

.post-type-archive-bil .cars{padding-bottom:clamp(48px,6vw,72px)}

/* tomt resultat */
.empty{
  text-align:center;padding:clamp(46px,7vw,86px) 20px;
  border:1px dashed var(--line-2);border-radius:var(--r);margin-bottom:clamp(48px,6vw,72px);
}
.empty[hidden]{display:none}
.empty h3{margin-bottom:9px}
.empty p{max-width:44ch;margin:0 auto 22px}

/* lager hentet fra Billink, vises så lenge ingen biler er lagt inn her */
.billink{margin-bottom:clamp(48px,6vw,72px)}
.billink iframe{display:block;width:100%;border:0;background:#fff;border-radius:var(--r)}

/* svar fra kontaktskjemaet */
.melding{
  padding:16px 18px;border-radius:var(--r);margin-bottom:24px;
  border:1px solid var(--line-2);background:var(--bg-2);
}
.melding b{display:block;margin-bottom:4px}
.melding p,.melding ul{margin:0;font-size:15px;color:var(--txt-2)}
.melding ul{padding-left:18px}
.melding ul li+li{margin-top:3px}
.melding-ok{border-color:#2F6F4F;background:rgba(47,111,79,.16)}
.melding-feil{border-color:var(--red);background:var(--red-dim)}

/* fella mot roboter, skal aldri ses eller nås med tabulator */
.agn{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Lagerhenvisning på forsiden, så lenge bilene ikke er lagt inn her.
   Skal lese som en invitasjon, ikke som en tom hylle: derfor rød kant
   mot venstre og samme vekt som de andre seksjonene, ikke stiplet ramme. */
.lager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(24px,3vw,44px);
  padding:clamp(30px,4vw,46px) clamp(26px,4vw,48px);
  background:var(--bg-3);border:1px solid var(--line-2);
  border-left:3px solid var(--red);border-radius:var(--r);
}
.lager-tekst{flex:1 1 380px;min-width:0}
.lager h3{margin-bottom:8px}
.lager h3 strong{color:var(--red);font-weight:inherit}
.lager p{max-width:56ch;margin:0}
.lager-valg{display:flex;flex-wrap:wrap;gap:12px;flex:0 1 auto;max-width:100%}
/* «Si fra hva du leter etter» er for lang til å stå på én linje i en smal
   spalte, og .btn er nowrap ellers i temaet. Her må den få brytes, ellers
   stikker knappen ut av kortet. Gjelder uansett bredde, så oppførselen ikke
   avhenger av at en mediaspørring treffer. */
.lager-valg .btn{white-space:normal;text-align:center;max-width:100%}
@media(max-width:600px){
  .lager{flex-direction:column;align-items:stretch}
  /* flex-basis blir HØYDE i kolonneretning. Uten denne blir tekstblokken
     380px høy og det står et stort tomrom over knappene. */
  .lager-tekst{flex:0 1 auto}
  .lager-valg{width:100%}
  .lager-valg .btn{flex:1 1 100%}
}

/* ønskeliste-CTA */
.wish{background:var(--bg-2);border-block:1px solid var(--line);padding-block:clamp(52px,6vw,84px)}
.wish-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:center}
.wish h2{margin-bottom:14px}
.wish .btn{margin-top:24px}
.wish-list{display:grid;gap:14px}
.wish-list .it{display:flex;gap:13px;font-size:.94rem;color:var(--txt-2)}
.wish-list svg{width:19px;height:19px;color:var(--ikon);flex:none;margin-top:3px}

/* ============================================================
   ÉN BIL
   ============================================================ */
.detail{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px,3.4vw,48px);padding-bottom:clamp(56px,7vw,88px);align-items:start;
}

/* galleri */
.gal-main{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:3/2;padding:0;border:0;display:block;width:100%}
.gal-main img{width:100%;height:100%;object-fit:cover}
button.gal-main{cursor:zoom-in}
.gal-zoom{
  position:absolute;top:16px;right:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--display);font-weight:700;
  padding:8px 13px;border-radius:100px;color:var(--txt);
  background:rgba(0,0,0,.6);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(-4px);transition:.25s;
}
.gal-zoom svg{width:14px;height:14px}
.gal-main:hover .gal-zoom,.gal-main:focus-visible .gal-zoom{opacity:1;transform:none}
.gal-main.awaiting{background:linear-gradient(160deg,#1F2024,#0D0E10);display:grid;place-items:center}
.gal-main.awaiting .ph{text-align:center;padding:24px}
.gal-main.awaiting .ph img{width:150px;height:auto;opacity:.45;margin:0 auto 14px}
.gal-main.awaiting .ph span{font-size:.9rem;color:var(--txt-3)}
.gal-count{
  position:absolute;bottom:16px;right:16px;z-index:2;
  font-size:.8rem;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);color:var(--txt);
}
/* Antall spalter følger antall bilder, satt fra malen. Fast repeat(5)
   ga én ensom miniatyr på rad to så snart bilen hadde seks bilder. */
.gal-thumbs{display:grid;grid-template-columns:repeat(var(--thumbs,5),1fr);gap:10px;margin-top:10px}
.thumb{
  aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--bg-3);
  border:1.5px solid transparent;cursor:pointer;transition:.22s;padding:0;
  display:grid;place-items:center;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.on{border-color:var(--red)}
.thumb:hover{border-color:var(--line-2)}
.thumb.ph{background:linear-gradient(160deg,#1F2024,#0D0E10);cursor:default}
.thumb.ph span{font-size:.68rem;color:var(--txt-3);letter-spacing:.02em;text-align:center;padding:4px}

/* kjøpsboks */
.buy{
  position:sticky;top:96px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 34%),var(--bg-3);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
}
.buy h1{margin-bottom:5px}
.buy .sub{font-size:.92rem;color:var(--txt-3);margin-bottom:20px}
.price-row{padding-block:18px;border-block:1px solid var(--line);margin-bottom:18px}
.price-row .lbl{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
.price-row .amt{font-family:var(--display);font-weight:800;font-size:2.15rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-row .mnd{font-size:.87rem;color:var(--txt-2);margin-top:7px}
.price-row .mnd b{color:var(--txt);font-weight:600}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:22px}
.q{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--txt-2)}
.q svg{width:15px;height:15px;color:var(--txt-3);flex:none}
.buy-actions{display:grid;gap:10px}
.buy-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--txt-3);line-height:1.55}
.single-bil .btn{padding:15px 28px;width:100%}
.single-bil .header-cta{width:auto;padding:11px 20px;font-size:.85rem}
.single-bil .mobile-nav .btn{width:100%}

/* Fullbredde-bilde som bryter opp rekken av like bokser.
   Uten dette er bilsiden fem identiske kort stablet oppå hverandre. */
.bilde-band{
  position:relative;height:clamp(240px,42vh,460px);overflow:hidden;
  margin-block:clamp(4px,1vw,12px);
}
.bilde-band img{width:100%;height:100%;object-fit:cover}
.bilde-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%);
}

/* Båndet på forsiden er lavere enn på bilsidene: der er bildet innholdet,
   her er det en pust mellom to seksjoner. Toningen i over- og underkant
   gjør at det smelter inn i den mørke flaten i stedet for å ligge som en
   utklippet stripe. */
.band-forside{height:clamp(180px,26vh,320px);margin-block:0}

/* innholdsblokker */
.blocks{display:grid;gap:clamp(28px,3.4vw,44px)}
.blocks-slutt{padding-bottom:clamp(64px,8vw,104px)}
.block{
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 38%),var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,42px);
}
.block h2{margin-bottom:22px}
.block > p{max-width:70ch}
.block > p + p{margin-top:14px}

/* spesifikasjoner */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,56px)}
.srow{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.srow dt{color:var(--txt-3)}
.srow dd{color:var(--txt);font-weight:500;text-align:right}

/* utstyr */
.kit{columns:3;column-gap:clamp(24px,3vw,52px);list-style:none}
.kit li{break-inside:avoid;display:flex;gap:10px;padding:7px 0;font-size:.93rem;color:var(--txt-2)}
.kit li svg{width:16px;height:16px;color:var(--ikon);flex:none;margin-top:4px}

/* ---------- finansieringskalkulator ---------- */
.kalk{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,44px);align-items:start}
.kalk-felt{display:grid;gap:26px;align-content:center;min-height:100%}
.kalk-rad label{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  font-weight:500;margin-bottom:10px;
}
.kalk-rad label b{
  font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--txt);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;
}
.kalk-rad input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--bg-4);cursor:pointer;
}
.kalk-rad input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--red);border:3px solid var(--bg-2);cursor:grab;
}
.kalk-rad input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--red);
  border:3px solid var(--bg-2);cursor:grab;
}
.kalk-ut{
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);
}
.kalk-ut .lbl{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.kalk-ut .mnd{
  font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.5rem);
  letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;
}
.kalk-ut .mnd .enhet{font-size:.9rem;font-weight:600;color:var(--txt-2);letter-spacing:.02em}
.kalk-sum{display:grid;gap:0;margin-top:20px;padding-top:6px;border-top:1px solid var(--line)}
.kalk-sum div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:.88rem;border-bottom:1px solid var(--line)}
.kalk-sum div:last-child{border-bottom:0}
.kalk-sum dt{color:var(--txt-3)}
.kalk-sum dd{color:var(--txt);font-weight:500;font-variant-numeric:tabular-nums}
.kalk-note{margin-top:18px;font-size:.8rem;color:var(--txt-3);line-height:1.55}

/* trygt kjøp */
.safe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
.safe .it h3{margin-bottom:7px}
.safe .it p{font-size:.91rem}

/* andre biler */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.mcar{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s}
.mcar:hover{transform:translateY(-5px);border-color:var(--line-2)}
.mcar-img{aspect-ratio:16/10;overflow:hidden;background:#000;position:relative}
.mcar-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mcar:hover .mcar-img img{transform:scale(1.06)}
.mcar-img.ph{background:linear-gradient(160deg,#1F2024,#0D0E10);display:grid;place-items:center}
.mcar-img.ph .inner{text-align:center;padding:14px}
.mcar-img.ph img{width:86px;opacity:.45;margin:0 auto 9px;height:auto}
.mcar-img.ph span{font-size:.75rem;color:var(--txt-3)}
.mcar-b{padding:18px 20px 20px}
.mcar-b h3{margin-bottom:3px}
.mcar-b .s{font-size:.83rem;color:var(--txt-3);margin-bottom:13px}
.mcar-b .p{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.mcar-b .p.alle{color:var(--red);font-size:.95rem}

/* kontakt-CTA nederst på bilsiden */
.cta-strip{background:var(--bg-2);border-block:1px solid var(--line);padding-block:clamp(52px,6vw,80px);text-align:center}
.cta-strip h2{margin-bottom:14px}
.cta-strip p{max-width:52ch;margin:0 auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-row .btn{width:auto}

/* ---------- lightbox ---------- */
.lightbox{
  border:0;padding:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;
  background:rgba(6,6,7,.97);color:var(--txt);overflow:hidden;
}
.lightbox::backdrop{background:rgba(6,6,7,.9)}
.lightbox[open]{display:grid;grid-template-rows:auto 1fr auto}
.lb-topp{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(16px,3vw,28px)}
.lb-teller{font-size:.85rem;color:var(--txt-2);font-variant-numeric:tabular-nums}
.lb-lukk,.lb-pil{
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--txt);
  border-radius:50%;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  transition:.2s;flex:none;
}
.lb-lukk:hover,.lb-pil:hover{background:rgba(255,255,255,.14);border-color:#fff}
.lb-lukk svg,.lb-pil svg{width:20px;height:20px}
.lb-scene{
  position:relative;display:grid;place-items:center;overflow:hidden;
  padding-inline:clamp(8px,2vw,24px);
}
.lb-scene img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  cursor:zoom-in;transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.lb-scene.zoom{overflow:auto}
.lb-scene.zoom img{cursor:zoom-out;transform:scale(2.2);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.lb-pil{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-forrige{left:clamp(8px,2vw,24px)}
.lb-neste{right:clamp(8px,2vw,24px)}
.lb-bunn{display:flex;gap:8px;justify-content:center;padding:14px clamp(16px,3vw,28px) clamp(18px,3vw,26px);overflow-x:auto}
.lb-bunn button{
  width:74px;height:56px;flex:none;border-radius:6px;overflow:hidden;padding:0;
  border:1.5px solid transparent;background:var(--bg-3);cursor:pointer;transition:.2s;
}
.lb-bunn button img{width:100%;height:100%;object-fit:cover}
.lb-bunn button.on{border-color:var(--red)}
@media(max-width:640px){
  .lb-bunn{display:none}
  .lb-pil{width:40px;height:40px}
}

/* ============================================================
   KONTAKTSIDEN
   ============================================================ */
.kontakt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,3.6vw,52px);padding-bottom:clamp(56px,7vw,88px);align-items:start}

.form-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.form-card h2{margin-bottom:8px}
.form-card > p{margin-bottom:26px;font-size:.95rem}

.purpose{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.purpose input{position:absolute;opacity:0;pointer-events:none}
/* Valgt tilstand var tidligere bare farge. Nå er det en ekte
   radiomarkør i tillegg, slik at valget også leses uten fargesyn. */
.purpose label{
  display:grid;grid-template-columns:auto 1fr;column-gap:13px;row-gap:0;align-items:start;
  padding:16px 18px;border:1.5px solid var(--line-2);border-radius:9px;
  cursor:pointer;transition:.22s;background:var(--bg-4);
}
.purpose label::before{
  content:"";width:18px;height:18px;border-radius:50%;margin-top:3px;
  border:1.5px solid var(--line-2);background:transparent;transition:.22s;
  box-shadow:inset 0 0 0 5px transparent;
  grid-column:1;grid-row:1;
}
/* Begge tekstlinjene skal ligge i kolonnen ved siden av markøren,
   ikke under den. */
.purpose .t,.purpose .d{grid-column:2}
.purpose label:hover{border-color:rgba(255,255,255,.28)}
.purpose input:checked + label{border-color:var(--red);background:var(--red-dim)}
.purpose input:checked + label::before{border-color:var(--red);box-shadow:inset 0 0 0 5px var(--red)}
.purpose input:focus-visible + label{outline:2px solid var(--red-hi);outline-offset:3px}
.purpose .t{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em;display:block;margin-bottom:3px}
.purpose .d{font-size:.83rem;color:var(--txt-3);line-height:1.45}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);font-weight:500;margin-bottom:7px}
.field label .req{color:var(--red)}
.field input,.field textarea,.field select{
  width:100%;background:var(--bg-2);color:var(--txt);
  border:1px solid var(--line-2);border-radius:8px;
  padding:13px 15px;font-family:var(--body);font-size:.95rem;
  transition:border-color .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(255,255,255,.24)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red);background:var(--bg-3);outline:none}
.field textarea{min-height:118px;resize:vertical}
.field .hint{font-size:.8rem;color:var(--txt-3);margin-top:6px}
.bilfelt{display:none}
.bilfelt.vis{display:block}
.form-foot{margin-top:24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form-foot .btn{flex:none}
.form-foot small{font-size:.82rem;color:var(--txt-3);max-width:36ch;line-height:1.5}

.info{display:grid;gap:20px}
.info-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px)}
.info-card h3{margin-bottom:16px;font-family:var(--display);font-size:.86rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff}
.info-card .card-text{font-size:.93rem}
.irow{display:flex;align-items:flex-start;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}
.irow:last-child{border-bottom:0;padding-bottom:0}
.irow:first-of-type{padding-top:0}
.irow .ico{width:40px;height:40px;border-radius:9px;background:var(--bg-4);display:grid;place-items:center;flex:none}
.irow svg{width:17px;height:17px;color:var(--ikon)}
.irow small{display:block;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
.irow b{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.01em}
.irow a:hover b{color:var(--red)}

.hours{display:grid;gap:0}
.hrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.hrow:last-child{border-bottom:0}
.hrow dt{color:var(--txt-2)}
.hrow dd{color:var(--txt);font-weight:500}
.hours-note{
  margin-top:16px;padding:13px 15px;border-radius:8px;
  background:var(--red-dim);border:1px solid rgba(214,21,31,.3);
  font-size:.83rem;color:#F3B5B8;line-height:1.5;
}

.map{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,#1B1C20,#0C0D0F);
  border:1px solid var(--line);aspect-ratio:21/9;
  display:grid;place-items:center;text-align:center;margin-bottom:clamp(56px,7vw,88px);
}
/* Grid-barn får ikke krympe under min-content som standard, og «Åpne i
   Google Maps» er nowrap. Uten disse stakk kortet 10px ut av skjermen ved
   320px, og siden lot seg dra sidelengs. */
.map .inner{padding:clamp(18px,5vw,30px);min-width:0;max-width:100%}
.map .btn{white-space:normal;max-width:100%}
.map svg{width:38px;height:38px;color:var(--ikon);margin:0 auto 16px}
.map h3{margin-bottom:6px}
.map p{font-size:.93rem;margin-bottom:20px}
.map .grid-lines{
  position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
}
/* når ekte kart er lagt inn i Tilpass */
.map.embed{display:block;padding:0}
.map.embed iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   VANLIGE SIDER OG INNLEGG (fallback-maler)
   ============================================================ */
.prose{padding-bottom:clamp(56px,7vw,88px);max-width:75ch}
.prose h2{margin:34px 0 14px}
.prose h3{margin:26px 0 10px}
.prose p,.prose ul,.prose ol,.prose figure,.prose table{margin-bottom:16px}
.prose ul,.prose ol{padding-left:22px}
.prose li{color:var(--txt-2);margin-bottom:6px}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r);margin-block:20px}
.prose blockquote{border-left:3px solid var(--red);padding-left:20px;margin-block:22px;color:var(--txt-2)}
.prose code,.prose pre{background:var(--bg-3);border-radius:6px}
.prose pre{padding:16px;overflow-x:auto}
.aligncenter{margin-inline:auto}
.alignright{float:right;margin:0 0 16px 20px}
.alignleft{float:left;margin:0 20px 16px 0}
.wp-caption-text,.wp-element-caption{font-size:.85rem;color:var(--txt-3);margin-top:8px}
.post-list{display:grid;gap:18px;padding-bottom:clamp(56px,7vw,88px)}
.post-list article{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.post-list h2{font-size:1.3rem;margin-bottom:6px}
.post-list time{font-size:.82rem;color:var(--txt-3)}
.pagination{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:60px}
.pagination .page-numbers{
  border:1px solid var(--line-2);border-radius:7px;padding:9px 15px;
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--txt-2);
}
.pagination .current,.pagination .page-numbers:hover{border-color:var(--red);color:#fff}

/* ============================================================
   RESPONSIVT
   ============================================================ */
@media(max-width:1080px){
  .cars{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  .kalk{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .buy{position:static}
  .kit{columns:2}
  .more{grid-template-columns:repeat(2,1fr)}
  .more .mcar:last-child{display:none}
  .safe{grid-template-columns:1fr;gap:24px}
  .wish-in{grid-template-columns:1fr}
  .kontakt{grid-template-columns:1fr}
  .map{aspect-ratio:16/9}
}
@media(max-width:900px){
  /* IKKE gjør headeren position:fixed her. Prøvd i v3.3.5 mot
     tilbake-sveip-blaffet og reversert samme kveld: fast posisjonering
     festes til layout-viewporten og KLIPPES til den, så på iPhone med
     URL-linja nederst gjenoppsto beltet over headeren (hetten males på
     dokument-lerretet og virker bare med sticky). Blaffet løses i
     stedet av den faste bakplaten body::before i 640px-spørringen. */
  /* Knappen flyttes ned under kortene, ellers står «Se hele utvalget»
     over bilene på mobil. */
  .sec-head-hoyre{align-items:flex-start}
  .sec-head-hoyre .btn{display:none}
  .cars-cta{display:block}
  .fgroup.sorter{margin-left:0}
  .nav,.header-cta{display:none}
  /* Ringeknappen tar auto-margen; med auto på begge fordeles resten av
     plassen mellom dem og burgeren driver mot midten. */
  .header-tlf{display:grid;margin-left:auto}
  .burger{display:grid;margin-left:0}
  .exp-grid,.ways-grid,.cta-inner{grid-template-columns:1fr}
  /* Knappen får ikke plass ved siden av fem felter. Den legger seg under,
     med bryteren til venstre for seg så raden ikke blir to etasjer høy. */
  .verdi-inn{grid-template-columns:1fr}
  .verdi-handling{
    grid-template-columns:minmax(0,1fr) auto;align-items:center;
    justify-items:start;gap:18px;
  }
  .verdi-handling .btn{width:auto}
  .exp-media{aspect-ratio:16/11;max-height:400px}
  /* Stempelet er 185 × 104 og lå med 26 px klaring. I en ramme som måler
     355 × 244 på en 375 px skjerm er det 52 % av bredden og 43 % av høyden,
     og det la seg oppå motivet i stedet for ved siden av det. Målt 19.8.2026
     på live, med nøkkelbildet som sto her da: nøkkelen, altså hele poenget,
     havnet bak boksen. Krympet her, urørt på desktop, der det ligger i et
     tomt hjørne. */
  .exp-stamp{left:18px;bottom:18px;padding:11px 15px;border-radius:9px}
  .exp-stamp b{font-size:1.7rem}
  .exp-stamp span{font-size:.66rem;letter-spacing:.12em}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
  .sec-head.row{flex-direction:column;align-items:flex-start}
  .specs{grid-template-columns:1fr}
  .freset{margin-left:0;width:100%;justify-content:space-between}
}
@media(max-width:680px){
  /* Brede versaler bryter stygt på smal skjerm. Breddeaksen strammes inn. */
  :root{--display-bredde:104%}
  .exp-media{border-radius:0}
  /* Bunnteksten sto som ÉN lang søyle: logo, fire snarveier, fire
     kontaktlinjer, tre åpningstider og bunnlinjen under hverandre. Det ble
     en skjermhøyde med bare bunntekst. Snarveier og Kontakt er korte og
     står nå side ved side, mens logoblokken og åpningstidene tar full
     bredde: tidene har tallene høyrestilt og trenger plassen. */
  /* Ikke to like spalter: «salg@auto-connect.no» er den lengste strengen i
     bunnteksten og ble kuttet i en halv skjermbredde. Kontakt får derfor
     mer plass enn snarveiene, som er korte ord. Brytningen under er en
     sikkerhet hvis adressen en dag blir enda lengre. */
  .foot-grid{grid-template-columns:.82fr 1.18fr;column-gap:18px;row-gap:30px}
  .foot-brand,.foot-apent{grid-column:1 / -1}
  .foot-list a,.foot-list li{overflow-wrap:anywhere}
  .bilde-band{height:clamp(200px,34vh,300px)}
  .cars{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid var(--line);padding:24px 20px}
  .trust-item:last-child{border-bottom:0}
  .topbar-r{display:none}
  .hero{min-height:auto;padding-top:40px}
  .kit{columns:1}
  .more{grid-template-columns:1fr}
  .more .mcar:last-child{display:block}
  .gal-thumbs{grid-template-columns:repeat(min(var(--thumbs,4),4),1fr)}
  .quick{grid-template-columns:1fr}
  .price-row .amt{font-size:1.85rem}
  .grid2,.purpose{grid-template-columns:1fr}
  /* Én celle per rad. Skillelinjene må da gå vannrett, ellers står de
     igjen som streker langs høyre kant av en full bredde. */
  .vrad-1,.vrad-2{grid-template-columns:1fr}
  .vcelle{border-right:0;border-bottom:1px solid var(--line-2)}
  /* Nederste celle i hver rad trenger ingen strek: rad 2 har sin egen
     overkant, og under den lukker rammen rundt hele feltet. */
  .vrad > .vcelle:last-child{border-bottom:0}
  .verdi-handling{grid-template-columns:1fr;justify-items:stretch}
  .verdi-handling .btn{width:100%}
  .kv-lenker a{width:100%;justify-content:center}
  .map{aspect-ratio:4/3}
  .fgroup{flex:1 1 calc(50% - 6px)}
  .fgroup select{width:100%;min-width:0}
  /* Filterpanelet er fire etasjer høyt her og spiste ~40 % av skjermen som
     sticky. Sammenlagt til én lav rad: knapp + antall alltid synlig,
     nedtrekkene foldes ut ved trykk. Nullstill vises kun utfoldet. */
  .filter-toggle{display:inline-flex}
  .filterfelt{display:none;width:100%}
  .filters.open .filterfelt{display:flex;flex-wrap:wrap;gap:12px}
  .filters:not(.open) .freset{width:auto;margin-left:auto}
  .filters:not(.open) .freset button{display:none}
}
@media(max-width:640px){
  .tb-adr{display:none}
  /* Tett header på mobil. Gjennomsiktig header pluss backdrop-filter lot
     store lyse overskrifter spøke gjennom når de scrollet under, og
     backdrop-filter er dessuten en kjent kilde til tegneartefakter i iOS
     Safari når nettleserlinja animerer. På liten skjerm er det ingenting
     å vinne på effekten. */
  .site-header,
  .home .site-header,
  .home .site-header.stuck{
    background:var(--bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid var(--line);
    /* Forsidens .3s-overgang har ingenting å jevne ut på mobil (samme
       farge festet og ufestet), men smører enhver sen tilstandsendring
       utover 300 ms. Av på mobil, så alt slår til momentant. */
    transition:none;
  }
  /* Diskret dybde når headeren er festet: den skal lese som at den ligger
     OVER innholdet, nå som mobil ikke kan ha desktopens blur-overgang. */
  .site-header.stuck{box-shadow:0 12px 28px -16px rgba(0,0,0,.85)}
  /* Fast, svart bakplate bak headerens plass i viewporten. WebKit maler
     første bilde etter tilbake-sveip med sticky-elementer på
     strømningsposisjon (utenfor skjermen når man står nedscrollet) og
     flytter dem først etterpå; i de ~0,2 s blafret sideinnholdet der
     menyen skulle vært, uansett laghint og pageshow-dytt. Fast
     posisjonering males riktig fra første bilde (bevist i v3.3.5), så
     platen gjør blaffet til en svart flate, usynlig på dette designet.
     Normalt er den alltid dekket av headeren (z 100); toppbaren er
     skjult på mobil, så ingenting annet kan male seg gjennom masken i
     de forsinkede bildene. Mobilmenyen (z 99, senere i malerekkefølgen)
     ligger også over. */
  body::before{
    content:"";position:fixed;top:0;left:0;right:0;height:78px;
    background:var(--bg);z-index:99;
  }
  .mobile-nav{
    background:var(--bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  /* Beltet på fysisk iPhone med URL-linja nederst: når Safari-kromet
     minimeres under scroll, vokser det synlige området OPPOVER under
     statuslinja, men sticky festes til layout-viewporten, hvis toppkant
     blir liggende et statuslinje-høyt felt under den fysiske toppen.
     I det feltet vises dokument-lerretet, altså innhold som alt har rullet
     forbi, OVER headeren. padding-top/env() når aldri opp dit, padding
     vokser nedover fra festepunktet. Headeren får derfor en tett hette
     som strekkes 120px OPP fra overkanten og dekker feltet. Utenfor
     skjermen er den usynlig. Hetten står ALLTID på, ikke bare med .stuck:
     .stuck settes av JavaScript, og ved tilbake-navigering med gjenopprettet
     scroll maler Safari siden før skriptet har kjørt, så en .stuck-skopet
     hette blafret innhold i beltet i ~0,2 s. Toppbaren er skjult på
     mobil, så hetten har ingenting å dekke ved sidetopp (den ligger da
     helt utenfor dokumentet, over headerens overkant på y 0).
     Kan ikke verifiseres i emulering, som mangler dynamisk nettleser-krom. */
  .site-header::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;
    background:var(--bg);
  }
  /* På mobil scroller man raskere enn på desktop, og en 0,7 sekunders
     innfading rekker ikke bli ferdig før innholdet er lest. Kortere vei
     og kortere tid, så effekten er over i det man stopper. */
  .js .reveal{transform:translateY(12px);transition-duration:.32s}
  .js .reveal.in{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}