/* ──────────────────────────────────────────────────────────
   FONTS (self-hosted variable woff2)
────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;font-weight:300 600;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;font-weight:300 600;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ──────────────────────────────────────────────────────────
   RESET & BASE
────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.65;color:#0f172a;background:#f7f5f0;overflow-x:hidden}
h1,h2,h3,h4,.hstat-num,.slide-h{font-family:'Bricolage Grotesque',system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
/* <picture> forsvinner fra layouten så <img> arver container-reglene direkte */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Respekter prefers-reduced-motion — demp animasjon, reveal og smooth-scroll (#12) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
}

/* ──────────────────────────────────────────────────────────
   TOKENS
────────────────────────────────────────────────────────── */
:root{
  --navy:   #060e1c;
  --dark:   #0b1628;
  --blue:   #1d4ed8;
  --blue2:  #3b82f6;
  --orange: #f97316;
  --slate:  #0f172a;
  --muted:  #4a5570;
  --border: #e2e8f0;
  --bg:     #edeae5;
  --white:  #ffffff;
  --r:      12px;
}

/* ──────────────────────────────────────────────────────────
   SCROLL REVEAL
────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}
.reveal[data-delay="5"]{transition-delay:.5s}
.reveal[data-delay="6"]{transition-delay:.6s}

/* ──────────────────────────────────────────────────────────
   LAYOUT
────────────────────────────────────────────────────────── */
.wrap{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.sec{padding:7rem 0}

/* Skip-link — usynlig til den får tastaturfokus */
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:600;
  background:var(--navy);color:#fff;
  font-size:.9rem;font-weight:700;
  padding:.75rem 1.25rem;border-radius:0 0 6px 6px;
  transition:top .2s;
}
.skip-link:focus{top:0}

/* ──────────────────────────────────────────────────────────
   NAV — transparent → solid on scroll
────────────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:.85rem 1.5rem;
  box-shadow:0 1px 0 rgba(255,255,255,.04);
  transition:box-shadow .4s;
}
/* Blur/tint ligger på en pseudo slik at nav-elementet selv IKKE blir
   containing block for det fixed-posisjonerte mobilpanelet.
   (backdrop-filter på nav ville ellers låse .nav-links til nav-boksen.) */
nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(6,14,28,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .4s;
}
nav.scrolled::before{
  background:rgba(6,14,28,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
nav.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.nav-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}

/* Logo */
.logo{display:flex;align-items:center;gap:.65rem}
.logo-img{height:40px;width:auto;display:block}

/* Links */
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{color:rgba(255,255,255,.85);font-size:.85rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-btn{
  /* #be5a19 = lyseste oransje som gir nøyaktig 4,5:1 med hvit tekst */
  background:#be5a19;color:#fff!important;
  font-size:.85rem;font-weight:700;
  padding:.48rem 1.2rem;border-radius:3px;
  transition:background .2s,transform .15s!important;
}
.nav-btn:hover{background:var(--orange);transform:translateY(-1px)!important}

/* Hamburger */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:.25s}
@media(max-width:680px){
  /* 44×44 tappeflate rundt hamburgeren, ikonet sentrert */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    width:44px;height:44px;padding:0;margin-right:-.5rem;
  }
  .nav-links{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:64px;left:0;right:0;bottom:0;
    background:rgba(6,14,28,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    padding:1rem 1.5rem 2rem;
    overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    display:flex;align-items:center;min-height:48px;
    padding:.85rem 0;font-size:1.15rem;
    border-bottom:1px solid rgba(255,255,255,.08);width:100%;
  }
  .nav-btn{
    justify-content:center;text-align:center;
    margin-top:1rem;width:100%;padding:.9rem;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO — full-viewport slider
────────────────────────────────────────────────────────── */
.hero-wrap{position:relative}
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--navy)}

/* slides — inaktive slides skjules også for tastatur/skjermleser og
   hit-testing; visibility-delayen på 1.2s bevarer crossfaden */
.slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 0s 1.2s;
  display:flex;align-items:flex-end;
}
.slide.active{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 0s 0s;
}
.slide-bg{
  position:absolute;inset:0;
  transition:transform 8s linear;
  transform:scale(1.04);
}
.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.slide.active .slide-bg{transform:scale(1)}
/* Produktslide (Z-Line): vis hele produktet på desktop, men fyll flaten
   under desktop så vi unngår stort svart tomrom i toppen av heroen (#4) */
.slide-bg--contain{background-color:#060e1c}
.slide-bg--contain img{object-fit:contain}
@media(max-width:1023px),(orientation:portrait){
  /* Contain letterboxer det brede bildet og gir svart dødflate når heroen er
     full viewport-høyde — gjelder hele tablet-området, ikke bare mobil, og
     alle portrett-viewporter (iPad Pro 12.9 er 1024 bred). Cover + fokus mot
     høyre (der brukeren/rullestolen står) fyller flaten uten å miste motivet
     (iPad #3, mobil #4) */
  .slide-bg--contain img{object-fit:cover;object-position:74% center}
}
.slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,14,28,.88) 0%, rgba(6,14,28,.3) 55%, transparent 100%);
}
.slide-content{
  position:relative;z-index:2;
  padding:0 1.5rem 9rem;
  max-width:1160px;margin:0 auto;width:100%;
}
@media(max-width:480px){.slide-content{padding:0 1.25rem 7rem}}
.slide-tag{
  display:inline-block;
  background:rgba(29,78,216,.5);
  border:1px solid rgba(59,130,246,.4);
  color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:.3rem .85rem;border-radius:100px;margin-bottom:1.1rem;
  backdrop-filter:blur(6px);
}
.slide h1,.slide-h{
  font-size:clamp(2.2rem,6vw,4.2rem);
  font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.04em;
  max-width:780px;margin-bottom:.9rem;
}
.slide h1 span,.slide-h span{color:var(--orange)}
.slide-sub{font-size:1.05rem;color:rgba(255,255,255,.65);max-width:520px;margin-bottom:1.6rem}
.slide-btns{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-hero-a{
  display:inline-flex;align-items:center;gap:.5rem;
  /* #be5a19 = lyseste oransje som gir nøyaktig 4,5:1 med hvit tekst */
  background:#be5a19;color:#fff;
  font-size:.95rem;font-weight:700;
  padding:.8rem 1.9rem;border-radius:3px;
  transition:background .2s,transform .15s;
}
.btn-hero-a:hover{background:var(--orange);transform:translateY(-2px)}
.btn-hero-b{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);
  font-size:.95rem;font-weight:600;
  padding:.8rem 1.9rem;border-radius:3px;
  backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s;
}
.btn-hero-b:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}

/* Slider controls */
.slider-nav{
  position:absolute;bottom:2.2rem;right:1.5rem;z-index:10;
  display:flex;align-items:center;gap:.6rem;
}
.sdot{
  position:relative;
  width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .3s,width .3s;padding:0;
}
.sdot.on{background:#fff;width:24px;border-radius:4px}
/* Usynlig 24px tappeflate rundt hver dot (WCAG 2.5.8) uten å endre utseendet */
.sdot::after{content:'';position:absolute;inset:-8px}
.sprev,.snext{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;margin-left:.4rem;
}
.sprev:hover,.snext:hover{background:rgba(255,255,255,.18)}
@media(max-width:680px){
  /* Nok avstand mellom dot-tappeflatene + fullstore piler */
  .slider-nav{gap:1rem}
  .sprev,.snext{width:44px;height:44px}
}
/* Desktop (≥1024): stats ligger som overlay over heroens bunn (~100–115px
   høy) — løft slider-navigasjonen over overlayet, ellers lander pilene oppå
   «12 Produktkategorier» (målt kollisjon på alle bredder 1024–1599) */
@media(min-width:1024px){
  .slider-nav{bottom:8.5rem}
}

/* Stats — mobil + tablet: egen stripe UNDER heroen (så hero-CTA-ene blir
   klikkbare og slider-navet ikke krasjer med tallene). Desktop: absolutt
   overlay på heroens bunn, forankret til .hero-wrap. Overlayet slår først inn
   fra 1024 — i tablet-området lander slider-navet ellers midt i stats-raden
   (iPad #4, mobil #5) */
.hero-stats{
  display:flex;justify-content:center;
  background:var(--dark);
}
.hero-stats-inner{
  display:flex;flex-wrap:wrap;
  width:100%;max-width:1160px;
  border-top:1px solid rgba(255,255,255,.08);
}
@media(min-width:1024px){
  .hero-stats{
    position:absolute;left:0;right:0;bottom:0;z-index:3;
    background:transparent;pointer-events:none;
  }
  .hero-stats-inner{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    pointer-events:auto;
  }
}
.hstat{
  flex:1;min-width:140px;
  padding:1.1rem 1.5rem;
  border-right:1px solid rgba(255,255,255,.07);
  text-align:center;
}
.hstat:last-child{border-right:none}
.hstat-num{
  font-size:1.7rem;font-weight:900;color:#fff;
  letter-spacing:-.05em;display:block;
}
.hstat-lbl{font-size:.73rem;color:rgba(255,255,255,.65);font-weight:500;letter-spacing:.3px}

/* ──────────────────────────────────────────────────────────
   VISUAL DEPTH UPGRADES
────────────────────────────────────────────────────────── */

/* Product cards — richer shadow + floating lift */
.pc{
  box-shadow:0 1px 3px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.06);
}
.pc:hover{
  box-shadow:0 8px 24px rgba(15,23,42,.10),0 24px 48px rgba(15,23,42,.08);
  transform:translateY(-6px);
}

/* Gradient shine on product card images on hover */
.pc-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.pc:hover .pc-img::after{opacity:1}
.pc-img{position:relative}

/* Pain points — left accent bar on hover */
.pain-item{
  border-left:3px solid transparent;
  transition:background .2s,border-color .2s;
}
.pain-item:hover{
  background:#f0f6ff;
  border-left-color:var(--blue);
}

/* Process step glow on hover */
.step-item:hover .step-n{
  box-shadow:0 0 0 6px rgba(29,78,216,.15);
}

/* Gallery image zoom is already handled; add caption overlay */
.gi::after{
  content:attr(data-caption);
  position:absolute;bottom:0;left:0;right:0;
  padding:.75rem 1rem;
  font-size:.78rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  transform:translateY(100%);transition:transform .3s;
}
.gi:hover::after{transform:translateY(0)}

/* Testimonial card — subtle top border accent */
.tc{border-top:3px solid transparent;transition:border-color .3s,box-shadow .3s}
.tc:hover{border-top-color:var(--blue);box-shadow:0 8px 32px rgba(15,23,42,.10)}

/* About section — decorative background blob */
.about-section{position:relative;overflow:hidden}
.about-section::before{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(29,78,216,.08) 0%,transparent 70%);
  top:-100px;right:-100px;pointer-events:none;
}

/* Partner callout — subtle blue left border */
.partner-callout .p-inner{
  border-left:4px solid var(--blue);
  padding-left:2rem;
  text-align:left;
}

/* Stat "Siden 1999" font sizing to match others */
.hstat-num[data-static]{
  font-size:1.2rem;
  letter-spacing:-.02em;
}

/* ──────────────────────────────────────────────────────────
   PAIN POINTS — accordion / FAQ
────────────────────────────────────────────────────────── */
.help-intro{
  max-width:760px;
  padding:5.5rem 0 3rem;
}
.help-intro .eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);margin-bottom:1rem;display:block;
}
.help-intro h2{
  font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;
  letter-spacing:-.04em;line-height:1.1;color:var(--slate);
  margin-bottom:1rem;
}
.help-intro p{font-size:1.05rem;color:var(--muted);max-width:560px}

.faq-list{
  max-width:800px;
  margin-bottom:2rem;
  display:flex;flex-direction:column;gap:.65rem;
}
.faq-item{
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 12px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.05);
  border-left:3px solid transparent;
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.faq-item.open{
  border-left-color:var(--blue);
  box-shadow:0 4px 24px rgba(15,23,42,.10),0 1px 4px rgba(15,23,42,.06);
}
.faq-item:nth-child(1){--pi-color:#1d4ed8;--pi-bg:#eff4ff}
.faq-item:nth-child(2){--pi-color:#ea6c0c;--pi-bg:#fff5ed}
.faq-item:nth-child(3){--pi-color:#0891b2;--pi-bg:#ecfbfe}
.faq-item:nth-child(4){--pi-color:#7c3aed;--pi-bg:#f5f0ff}
.faq-item:nth-child(5){--pi-color:#059669;--pi-bg:#ecfdf5}
.faq-item:nth-child(6){--pi-color:#e11d48;--pi-bg:#fff1f3}
.faq-item:nth-child(7){--pi-color:#b45309;--pi-bg:#fffbeb}
.faq-item:nth-child(8){--pi-color:#0f766e;--pi-bg:#f0fdfa}

.faq-q{
  width:100%;display:flex;align-items:center;gap:1rem;
  padding:1.25rem 1.4rem;
  background:none;border:none;cursor:pointer;text-align:left;
  min-height:44px;
}
.faq-q:hover .faq-title,
.faq-q:hover .faq-badge{color:var(--blue)}
.faq-item.open .faq-title,
.faq-item.open .faq-badge{color:var(--blue)}
.faq-badge{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;border-radius:7px;
  /* Mørkere oransje enn --orange — trengs for WCAG-kontrast på den lyse badge-bakgrunnen */
  background:#fff5ed;color:#c2410c;
  font-size:.7rem;font-weight:800;letter-spacing:.5px;
  transition:color .2s;
}
.faq-title{
  flex:1;font-size:1rem;font-weight:700;color:var(--slate);line-height:1.3;
  transition:color .2s;
}
.faq-chevron{
  flex-shrink:0;
  color:var(--muted);transition:transform .3s cubic-bezier(.22,.61,.36,1),color .2s;
}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--blue)}

/* Overskrifts-wrapper rundt accordion-knappene — nullstill heading-stilene
   så utseendet er identisk med en ren button */
.faq-hw{margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
.faq-body{
  overflow:hidden;
  max-height:0;
  /* visibility:hidden tar lukket innhold ut av accessibility-treet;
     delayen bevarer lukke-animasjonen */
  visibility:hidden;
  transition:max-height .4s cubic-bezier(.22,.61,.36,1),visibility 0s .4s;
  padding:0 1.5rem 0 4.8rem;
}
/* Åpen høyde settes eksakt av JS (scrollHeight) så langt innhold ikke klippes (#3) */
.faq-item.open .faq-body{
  padding-bottom:1.5rem;
  visibility:visible;
  transition:max-height .4s cubic-bezier(.22,.61,.36,1),visibility 0s 0s;
}
.faq-body p{
  font-size:.95rem;color:var(--muted);line-height:1.75;
  max-width:720px;margin-bottom:1rem;
}
.faq-body p:last-child{margin-bottom:0}
.faq-body p strong{color:var(--slate)}
.faq-body ul{
  list-style:none;padding:0;margin:.25rem 0 1rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.faq-body ul li{
  display:flex;align-items:baseline;gap:.65rem;
  font-size:.95rem;color:var(--muted);line-height:1.65;
}
.faq-body ul li::before{
  content:'';flex-shrink:0;
  width:.42rem;height:.42rem;
  background:var(--orange);border-radius:0;
  margin-top:.42rem;
}
@media(max-width:480px){
  .faq-body{padding:0 1.1rem 0 1.1rem}
  .faq-item.open .faq-body{padding-bottom:1.25rem}
}

/* ──────────────────────────────────────────────────────────
   ABOUT — editorial two-column
────────────────────────────────────────────────────────── */
.about-section{background:var(--navy);padding:7rem 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-imgs{position:relative;height:600px}
.img-primary{
  position:absolute;left:0;top:0;
  width:62%;height:72%;
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.img-primary img{width:100%;height:100%;object-fit:cover;object-position:left top}
.img-accent{
  position:absolute;right:0;bottom:0;
  width:50%;height:48%;
  border-radius:var(--r);overflow:hidden;
  border:3px solid var(--navy);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.img-accent img{width:100%;height:100%;object-fit:cover;object-position:center 25%}

.about-text .eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue2);margin-bottom:1rem;display:block;
}
.about-text h2{
  font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;
  letter-spacing:-.04em;line-height:1.1;color:#fff;
  margin-bottom:.3rem;
}
.about-text .sub{font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:1.6rem}
.about-text p{font-size:.95rem;color:rgba(255,255,255,.55);margin-bottom:.9rem;line-height:1.7}
.about-text p strong{color:rgba(255,255,255,.85)}
.about-creds{margin-top:2rem;display:flex;flex-direction:column;gap:.5rem}
.ac{
  display:flex;align-items:center;gap:.75rem;
  font-size:.87rem;color:rgba(255,255,255,.5);
  padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.ac:last-child{border-bottom:none}
.ac svg{color:var(--blue2);flex-shrink:0}

/* Tablet (681–1023): skaler bildekomposisjonen med kolonnebredden via
   aspect-ratio i stedet for fast 600px-høyde. Fast høyde strekker portrettet
   til en smal stripe i den trange tablet-kolonnen (ca. 0,53:1) — aspect-ratio
   holder desktop-proporsjonen (524/600 ≈ 0,75:1) hele veien ned (iPad #2) */
@media(min-width:681px) and (max-width:1023px){
  .about-imgs{height:auto;aspect-ratio:524/600}
}
/* Tablet-portrett (681–900): stables + kappet bildebredde så komposisjonen
   beholder desktop-proporsjonene i stedet for å bli uforholdsmessig høy (iPad #2) */
@media(min-width:681px) and (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-imgs{max-width:440px}
}
/* Mobil (≤680): stables med fast, kompakt bildehøyde — uendret fra mobil-auditen */
@media(max-width:680px){
  .about-grid{grid-template-columns:1fr}
  .about-imgs{height:340px}
  .img-primary{width:60%;height:72%}
  .img-accent{width:50%;height:46%}
}

/* ──────────────────────────────────────────────────────────
   PRODUCTS — magazine grid
────────────────────────────────────────────────────────── */
.prod-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:2.5rem;gap:2rem;flex-wrap:wrap;
}
.prod-header h2{
  font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;
  letter-spacing:-.04em;color:var(--slate);line-height:1.1;
  max-width:480px;
}
.prod-header p{font-size:.92rem;color:var(--muted);max-width:340px}

.prod-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
/* Kortene er gruppert i kategori-wrappere for mobilradene. På tablet/desktop
   løses wrapperne opp med display:contents slik at kortene forblir direkte
   grid-items. Kategorititlene skjules kun visuelt (ikke display:none) så
   overskriftshierarkiet h2 → h3 → h4 er intakt for skjermlesere på alle
   bredder */
.prod-cat,.prod-row{display:contents}
.prod-cat-title{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* DOM-rekkefølgen følger kategoriene — gjenopprett den opprinnelige visuelle
   rekkefølgen i grid-en med order, så tablet/desktop er uendret. Kortene har
   ingen fokuserbare elementer, så visuell rekkefølge ≠ DOM-rekkefølge er
   uproblematisk her */
@media(min-width:681px){
  .prod-cat:nth-child(1) .pc:nth-child(1){order:7}
  .prod-cat:nth-child(1) .pc:nth-child(2){order:8}
  .prod-cat:nth-child(1) .pc:nth-child(3){order:3}
  .prod-cat:nth-child(2) .pc:nth-child(1){order:4}
  .prod-cat:nth-child(2) .pc:nth-child(2){order:5}
  .prod-cat:nth-child(2) .pc:nth-child(3){order:1}
  .prod-cat:nth-child(2) .pc:nth-child(4){order:2}
  .prod-cat:nth-child(3) .pc:nth-child(1){order:6}
  .prod-cat:nth-child(3) .pc:nth-child(2){order:10}
  .prod-cat:nth-child(3) .pc:nth-child(3){order:11}
  .prod-cat:nth-child(4) .pc:nth-child(1){order:12}
  .prod-cat:nth-child(4) .pc:nth-child(2){order:9}
}
.pc{
  border-radius:var(--r);overflow:hidden;
  background:#fff;
  box-shadow:0 2px 12px rgba(15,23,42,.06);
  transition:box-shadow .25s,transform .25s;
  display:flex;flex-direction:column;
}
.pc:hover{box-shadow:0 12px 40px rgba(15,23,42,.12);transform:translateY(-4px)}
.pc-img{
  aspect-ratio:4/3;width:100%;overflow:hidden;
  background:var(--bg);flex-shrink:0;
}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pc:hover .pc-img img{transform:scale(1.06)}
.pc-body{padding:1.4rem 1.4rem 1.6rem;flex:1;display:flex;flex-direction:column}
.pc-tag{
  font-size:.67rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--blue);margin-bottom:.55rem;
}
.pc-body h4{font-size:1.05rem;font-weight:700;color:var(--slate);margin-bottom:.45rem;line-height:1.3}
.pc-body p{font-size:.875rem;color:var(--muted);line-height:1.6;flex:1}
.prod-cta{display:flex;justify-content:center;margin-top:2.75rem}
.btn-lesmer{
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 2rem;
  font-size:.9rem;font-weight:700;letter-spacing:.2px;line-height:1.3;
  color:#fff;background:var(--blue);border:1.5px solid var(--blue);border-radius:3px;
  text-decoration:none;transition:background .2s,border-color .2s,transform .15s;
}
.btn-lesmer svg{width:15px;height:15px;flex-shrink:0;transition:transform .18s}
.btn-lesmer:hover{background:var(--blue2);border-color:var(--blue2);transform:translateY(-2px)}
.btn-lesmer:hover svg{transform:translate(1px,-1px)}

/* Kontakt-CTA — oransje = kontakt (samme fargespråk som hero), blå = les mer/eksternt */
.kontakt-cta{text-align:center;margin-top:1.5rem}
.kontakt-cta p{font-size:.87rem;color:var(--muted);margin-bottom:1rem}
.btn-kontakt{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  /* #be5a19 = lyseste oransje som gir nøyaktig 4,5:1 med hvit tekst */
  background:#be5a19;color:#fff;
  font-size:.95rem;font-weight:700;
  padding:.8rem 1.9rem;border-radius:3px;
  transition:background .2s,transform .15s;
}
.btn-kontakt:hover{background:var(--orange);transform:translateY(-2px)}

/* 2 kolonner helt ned til 681 — ellers blir seksjonen ~9000px med 12
   fullbredde-kort i tablet-portrett (iPad #5) */
@media(max-width:1023px){.prod-grid{grid-template-columns:repeat(2,1fr)}}

/* Mobil: kategoriserte rader med horisontal scroll-snap — samme mekanikk som
   omtale-slideren. Kort på 80 % bredde så neste kort titter frem og
   signaliserer at raden kan sveipes. Seksjonen krymper fra ~7000px til
   ~2000px, og kategorititlene gjør den skannbar */
@media(max-width:680px){
  .prod-grid{display:block}
  .prod-cat{display:block}
  .prod-cat+.prod-cat{margin-top:1.6rem}
  .prod-cat-title{
    position:static;width:auto;height:auto;overflow:visible;
    clip-path:none;white-space:normal;
    font-size:1.05rem;font-weight:800;letter-spacing:-.02em;
    color:var(--slate);margin-bottom:.35rem;
  }
  .prod-row{
    display:flex;
    gap:.9rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Bleed til viewport-kanten (motvirker .wrap-padding) + rom for
       kortskyggen vertikalt; padding gjenoppretter posisjonen visuelt */
    margin:-1.25rem -1.5rem;
    padding:1.25rem 1.5rem;
    scroll-padding-inline:1.5rem;
    scrollbar-width:none;
  }
  .prod-row::-webkit-scrollbar{display:none}
  .prod-row .pc{flex:0 0 80%;scroll-snap-align:start}
  /* Kort utenfor viewport horisontalt får aldri .visible fra
     IntersectionObserver — dropp per-kort-reveal inne i radene */
  .prod-row .pc.reveal{opacity:1;transform:none;transition:none}
}

/* ──────────────────────────────────────────────────────────
   GALLERY
────────────────────────────────────────────────────────── */
.gallery-section{background:var(--dark);padding:7rem 0}
.gallery-head{margin-bottom:2.5rem}
.gallery-head h2{
  font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;
  letter-spacing:-.04em;color:#fff;line-height:1.1;margin-bottom:.5rem;
}
.gallery-head p{font-size:.92rem;color:rgba(255,255,255,.5)}

.g-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:210px;
  gap:.75rem;
}
/* .gi er <button> (tastaturtilgjengelig lightbox) — nullstill
   button-defaults så utseendet er identisk med en div */
.gi{
  border-radius:10px;overflow:hidden;cursor:pointer;
  position:relative;background:#111;
  border:none;padding:0;font:inherit;text-align:inherit;
  display:block;width:100%;
}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s;filter:brightness(.75)saturate(.9)}
.gi:hover img{transform:scale(1.06);filter:brightness(.95)saturate(1.1)}
.gi-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%);
  opacity:0;transition:opacity .3s;
}
.gi:hover .gi-overlay{opacity:1}

@media(max-width:900px){.g-grid{grid-template-columns:repeat(4,1fr)}}
/* 10 bilder i 4 kolonner gir 4+4+2 med tom halvrad til slutt. La de to siste
   spanne dobbel bredde så sisteraden fylles balansert (iPad #9). Kun i
   tablet-delen av 4-kolonne-området (681–900) — 5 kolonner (901+) og 2 kolonner
   (≤600) går opp i 10 selv, og mobil (≤680) holdes urørt */
@media(min-width:681px) and (max-width:900px){
  .g-grid .gi:nth-child(9),
  .g-grid .gi:nth-child(10){grid-column:span 2}
}
@media(max-width:600px){.g-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}}

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS
────────────────────────────────────────────────────────── */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.tc{
  background:#fff;border-radius:var(--r);
  padding:2rem 1.8rem;
  box-shadow:0 2px 16px rgba(15,23,42,.07);
  display:flex;flex-direction:column;gap:1rem;
}
.tc-stars{color:#f59e0b;font-size:.95rem;letter-spacing:1px}
.tc-quote{
  font-size:.93rem;color:#334155;line-height:1.7;
  font-style:italic;flex:1;
  position:relative;padding-top:1rem;
}
.tc-quote::before{
  content:'\201C';
  position:absolute;top:-.4rem;left:0;
  font-size:3.5rem;line-height:1;font-style:normal;
  color:var(--blue2);opacity:.2;font-family:Georgia,serif;
}
.tc-author{display:flex;align-items:center;gap:.75rem}
.tc-name{font-size:.88rem;font-weight:700;color:var(--slate)}
.tc-role{font-size:.78rem;color:var(--muted);margin-top:.1rem}

/* Mobil + tablet-portrett: horisontal slider med scroll-snap. Kort på 85%
   bredde så neste kort titter frem og signaliserer at det kan sveipes. Grid-en
   ville ellers gitt 2 kolonner i nesten hele tablet-området → kort 3 alene med
   gapende tom celle. Lange sitat leses dessuten best i full kortbredde (iPad #7) */
@media(max-width:900px){
  .testi-grid{
    display:flex;
    gap:.9rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Bleed til viewport-kanten (motvirker .wrap-padding) + rom for
       kortskyggen vertikalt; padding gjenoppretter posisjonen visuelt */
    margin:-1.25rem -1.5rem;
    padding:1.25rem 1.5rem;
    scroll-padding-inline:1.5rem;
    scrollbar-width:none;
  }
  .testi-grid::-webkit-scrollbar{display:none}
  .tc{flex:0 0 85%;scroll-snap-align:start}
  /* Kort 2–3 ligger utenfor viewport horisontalt og ville ellers stått
     i opacity:0 til de sveipes inn — dropp per-kort reveal i slideren.
     MÅ følge slider-breakpointen (900) ellers blir kortene usynlige (iPad #7) */
  .testi-grid .tc.reveal{opacity:1;transform:none;transition:none}
}
/* Landskaps-tablet: 3 kolonner så alle tre omtalene vises samtidig og raden
   blir balansert. Grid-ens auto-fill gir bare 2 kolonner under ~984 → tving 3.
   Desktop (≥1024) beholder auto-fill uendret (iPad #7) */
@media(min-width:901px) and (max-width:1023px){
  .testi-grid{grid-template-columns:repeat(3,1fr)}
}

/* ──────────────────────────────────────────────────────────
   PROCESS — horizontal with connecting line
────────────────────────────────────────────────────────── */
.process-section{background:var(--navy);padding:7rem 0}
.process-head{margin-bottom:3.5rem;text-align:center}
.process-head h2{
  font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;
  letter-spacing:-.04em;color:#fff;line-height:1.1;margin-bottom:.5rem;
}
.process-head p{font-size:.92rem;color:rgba(255,255,255,.5);max-width:480px;margin-inline:auto}

.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;position:relative;
}
/* connector segments — one per gap, stopping clear of each circle (27px radius + 1px breathing room) */
.step-item:not(:last-child)::after{
  content:'';position:absolute;
  top:27px;
  left:calc(50% + 27px + 1px);
  width:calc(100% - 54px - 2px);
  height:1px;background:rgba(255,255,255,.12);z-index:0;
}
.step-item{padding:0 1rem;text-align:center;position:relative;z-index:1}
.step-n{
  width:54px;height:54px;border-radius:50%;
  background:rgba(29,78,216,.2);border:1.5px solid rgba(29,78,216,.5);
  color:var(--blue2);font-size:1.05rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;
  transition:background .3s,border-color .3s;
}
.step-item:hover .step-n{background:var(--blue);border-color:var(--blue);color:#fff}
.step-item h3{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:.45rem}
.step-item p{font-size:.81rem;color:rgba(255,255,255,.5);line-height:1.6}

/* 4 kolonner blir uleselig smale (~15–18 tegn/linje) helt opp til ~830.
   2×2 fra 900 gir stegene nok bredde; 4 kolonner beholdes 901+ (iPad #6) */
@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr;gap:2rem}
  .step-item::after{display:none}
}
@media(max-width:420px){.steps{grid-template-columns:1fr}}

/* ──────────────────────────────────────────────────────────
   PARTNER CALLOUT
────────────────────────────────────────────────────────── */
.partner-callout{
  background:var(--bg);border-top:1px solid var(--border);
  padding:4rem 0;
}
.p-inner{
  max-width:900px;margin:0 auto;text-align:left;
  border-left:4px solid var(--blue);
  padding-left:2rem;
}
.p-inner h3{font-size:1.3rem;font-weight:800;color:var(--slate);margin-bottom:.75rem}
.p-inner>p{font-size:.95rem;color:var(--muted);margin-bottom:1.75rem;line-height:1.75;max-width:640px}
.p-partners{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
}
.p-card{
  display:flex;flex-direction:column;
  background:#fff;border-radius:10px;padding:1.25rem 1.4rem;
  border-top:3px solid var(--blue);
  box-shadow:0 2px 10px rgba(15,23,42,.06);
}
.p-card h4{font-size:.95rem;font-weight:800;color:var(--slate);margin-bottom:.4rem}
.p-card p{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:.9rem}
.p-link{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:auto;align-self:flex-start;
  font-size:.8rem;font-weight:700;color:var(--blue);
  border:1.5px solid var(--blue);padding:.38rem .85rem;border-radius:5px;
  transition:background .2s,color .2s;
}
.p-link:hover{background:var(--blue);color:#fff}
/* 3 kolonner kan ikke krympe under min-content i 681–730 (p-link-teksten
   bryter ikke) → 46px side-overflow og wobble. 2 kolonner i mellomområdet
   gir kortene rom; 1 kolonne på mobil (iPad #1) */
@media(max-width:900px){.p-partners{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.p-partners{grid-template-columns:1fr}}

/* ──────────────────────────────────────────────────────────
   CONTACT
────────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
.ci-head h2{
  font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;
  letter-spacing:-.04em;color:var(--slate);line-height:1.1;margin-bottom:.5rem;
}
.ci-head p{font-size:.92rem;color:var(--muted);margin-bottom:2rem}
.cdet{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.1rem}
.cdet-ic{
  width:40px;height:40px;flex-shrink:0;
  background:var(--bg);border-radius:9px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--blue);
}
.cdet strong{display:block;font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:.4px}
.cdet span{font-size:.92rem;font-weight:600;color:var(--slate)}

.cform-wrap{
  background:#fff;border-radius:var(--r);
  border:1px solid var(--border);
  padding:2.25rem;
  box-shadow:0 8px 48px rgba(15,23,42,.08);
}
.cform-wrap h3{font-size:1rem;font-weight:700;color:var(--slate);margin-bottom:1.4rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:.76rem;font-weight:700;color:var(--slate);margin-bottom:.38rem;letter-spacing:.2px}
.fg input,.fg select,.fg textarea{
  width:100%;padding:.7rem .95rem;
  border:1.5px solid var(--border);border-radius:7px;
  /* 16px hindrer at iOS auto-zoomer inn ved fokus (#8) */
  font-size:16px;font-family:inherit;color:var(--slate);
  background:#fff;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
/* Egen nedtrekkspil siden appearance:none fjerner den native (#9) */
.fg select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a5570' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;
  padding-right:2.6rem;cursor:pointer;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(29,78,216,.1);
}
.fg textarea{resize:vertical;min-height:110px}
/* 44px+ tappehøyde på skjemafelt på mobil (#6) */
@media(max-width:680px){
  .fg input,.fg select{min-height:48px}
}
.fsubmit{
  width:100%;background:var(--slate);color:#fff;
  border:none;border-radius:3px;padding:.9rem;
  font-size:.95rem;font-weight:700;cursor:pointer;
  transition:background .2s;
  font-family:inherit;
}
.fsubmit:hover{background:var(--blue)}
.fsubmit:disabled{opacity:.6;cursor:wait}
.fok{
  display:none;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:7px;padding:.85rem;color:#1e40af;
  font-size:.88rem;text-align:center;margin-top:.75rem;
}
.ferr{
  display:none;background:#fef2f2;border:1px solid #fecaca;
  border-radius:7px;padding:.85rem;color:#991b1b;
  font-size:.88rem;text-align:center;margin-top:.75rem;
}
.ferr a{color:inherit;font-weight:700}
.fem{color:#b91c1c;font-size:.78rem;font-weight:600;margin-top:.35rem}
.fg [aria-invalid="true"]{border-color:#dc2626}
/* Honeypot — skjult for folk, synlig for bots */
.fhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fnote{font-size:.73rem;color:var(--muted);text-align:center;margin-top:.65rem}

@media(max-width:800px){.contact-grid{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

/* ──────────────────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────────────────── */
footer{background:var(--navy);padding:3.5rem 1.5rem 2.5rem}
.footer-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:3rem}
.ft-brand .logo-img{height:34px}
.ft-brand p{font-size:.84rem;color:rgba(255,255,255,.52);margin-top:.9rem;line-height:1.65;max-width:260px}
.ft-col h4{font-size:.75rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.ft-col li a{font-size:.86rem;color:rgba(255,255,255,.58);transition:color .2s}
.ft-col li a:hover{color:#fff}
.ft-social{display:flex;gap:.75rem;margin-top:1rem}
.ft-social a{
  width:38px;height:38px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);transition:background .2s,color .2s;
}
.ft-social a:hover{background:rgba(255,255,255,.12);color:#fff}
.ft-bottom{
  max-width:1160px;margin:2rem auto 0;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;
}
/* .48 er laveste hvit-opacity som klarer 4,5:1 på navy — holder bunnteksten
   tydelig mer dempet enn kolonnelenkene (.58) uten å bryte kontrastkravet */
.ft-bottom p{font-size:.77rem;color:rgba(255,255,255,.48)}
.ft-legal{font-size:.77rem;color:rgba(255,255,255,.48);text-align:right;max-width:500px}

@media(max-width:760px){
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .ft-bottom{flex-direction:column;text-align:center}
  .ft-legal{text-align:center}
}

/* ──────────────────────────────────────────────────────────
   MOBIL — touch-targets (WCAG 2.5.8 / Apple HIG) (#6)
────────────────────────────────────────────────────────── */
@media(max-width:680px){
  .btn-lesmer{min-height:44px}
  .btn-kontakt{min-height:44px}
  .p-link{min-height:44px}
  .ft-social a{width:44px;height:44px}
}

/* ──────────────────────────────────────────────────────────
   TABLET — layout-tetthet (681–900)
────────────────────────────────────────────────────────── */
@media(max-width:900px){
  /* Tablet fikk desktop-luften (7rem sec + 5.5rem help-intro ≈ 200px dødrom
     før overskriften). Demp det, men behold mer pust enn mobil (iPad #8) */
  .sec{padding:5rem 0}
  .help-intro{padding:1.5rem 0 2.5rem}
}

/* ──────────────────────────────────────────────────────────
   MOBIL — layout-tetthet
────────────────────────────────────────────────────────── */
@media(max-width:680px){
  /* Mindre dødrom øverst i seksjonene (#15) */
  .sec{padding:4rem 0}
  .help-intro{padding:.5rem 0 2rem}
  /* Kompaktere produktkort i mobilradene */
  .pc-img{aspect-ratio:3/2}
  .pc-body{padding:1.1rem 1.1rem 1.3rem}
  /* Partner-callout: dropp venstre-border + innrykk når kortene stables (#17) */
  .partner-callout .p-inner{border-left:none;padding-left:0}
}

/* ──────────────────────────────────────────────────────────
   LIGHTBOX
────────────────────────────────────────────────────────── */
/* <dialog> + showModal() gir fokusfelle, Escape og fokus-retur gratis —
   overstyr UA-stilene så den fyller viewporten */
.lb{
  position:fixed;inset:0;z-index:1000;
  width:100%;height:100%;max-width:100%;max-height:100%;
  margin:0;border:none;
  background:rgba(0,0,0,.94);
  align-items:center;justify-content:center;
  padding:2rem;
}
.lb[open]{display:flex}
.lb::backdrop{background:transparent}
.lb img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain}
/* Mørk knapp-bakgrunn + lys kant/skygge så kontrollene er synlige på
   både lyse og mørke bilder */
.lb-x{
  position:absolute;top:1.5rem;right:1.5rem;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.55);color:#fff;font-size:1.3rem;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 2px 14px rgba(0,0,0,.45);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lb-x:hover{background:rgba(0,0,0,.8)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.55);color:#fff;font-size:2rem;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 2px 14px rgba(0,0,0,.45);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:1;
}
.lb-nav:hover{background:rgba(0,0,0,.8)}
.lb-prev{left:1.5rem}
.lb-next{right:1.5rem}

/* ──────────────────────────────────────────────────────────
   404
────────────────────────────────────────────────────────── */
.err-page{
  min-height:calc(100vh - 80px);
  display:flex;align-items:center;
  background:linear-gradient(160deg,var(--navy) 0%,var(--dark) 100%);
  padding:8rem 0 6rem;text-align:center;
}
.err-page .wrap{max-width:640px}
.err-code{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(6rem,18vw,11rem);font-weight:900;line-height:1;
  color:var(--orange);letter-spacing:-.04em;margin-bottom:.5rem;
}
.err-page h1{
  font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:1rem;
}
.err-sub{color:rgba(255,255,255,.65);max-width:460px;margin:0 auto 2rem}
.err-page .slide-btns{justify-content:center}