/* SPM Sport AS — nettside
   Farger hentet fra offisiell logofil: marineblå #06163B, terrakotta #BF4E33 */

:root{
  --navy: #06163B;
  --navy-2: #0e2050;
  --navy-3: #142a63;
  --terracotta: #BF4E33;
  --terracotta-dark: #9c3d26;
  --terracotta-light: #e2caba;
  --bg: #ffffff;
  --bg-soft: #f6f4ef;
  --bg-soft-2: #eeeae1;
  --text: #17203a;
  --muted: #5a6172;
  --border: #e4e0d5;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(6, 22, 59, 0.08);
  --maxw: 1160px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 0.5em;
}

h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3{ font-size: 1.3rem; letter-spacing: 0.01em; }

p{ margin: 0 0 1em; }

a{ color: var(--terracotta); text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width: 100%; display: block; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display: inline-block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  color: var(--terracotta);
  margin-bottom: 0.6em;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  box-shadow: none;
  color: #fff;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.site-header.scrolled{
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(6,22,59,0.08), 0 6px 20px rgba(6,22,59,0.05);
  color: var(--navy);
}

.brand-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 5px 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 16px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img{ height: 44px; width: auto; }

.brand-text{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  font-size: 1.25rem;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.site-header.scrolled .brand-text{ color: var(--navy); }

.brand-text span{
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--terracotta);
  text-transform: uppercase;
}

nav.main-nav{
  display: flex;
  align-items: center;
  gap: 28px;
}

nav.main-nav a{
  color: #dfe3ee;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  transition: color 0.25s ease;
}

nav.main-nav a:hover, nav.main-nav a.active{
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 4px;
}

@media (min-width: 721px){
  .site-header.scrolled nav.main-nav a{ color: var(--muted); }
  .site-header.scrolled nav.main-nav a:hover,
  .site-header.scrolled nav.main-nav a.active{ color: var(--navy); }
}

.header-cta{
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover{ text-decoration: none; }

.btn-primary{
  background: var(--terracotta);
  color: #fff;
}
.btn-primary:hover{ background: var(--terracotta-dark); }

.btn-outline{
  background: transparent;
  border-color: currentColor;
  color: #fff;
}
.btn-outline:hover{ background: rgba(255,255,255,0.1); }

.btn-navy{
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover{ background: var(--navy-2); }

.btn-ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--navy);
}
.btn-ghost:hover{ background: var(--bg-soft); }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.25s ease;
}
.site-header.scrolled .nav-toggle{ color: var(--navy); }

.site-header.scrolled .btn-outline{
  border-color: var(--navy);
  color: var(--navy);
}
.site-header.scrolled .btn-outline:hover{
  background: rgba(6,22,59,0.06);
}

/* ---------- Hero ---------- */
/* Living background: a slow, looping zoom/pan on the photo layer gives a
   cinemagraph feel without needing actual video files. */
.photo-hero{
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
  color: #fff;
}
.photo-hero-bg{
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-repeat: no-repeat;
  animation: kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
.photo-hero-overlay{
  position: absolute;
  inset: 0;
}
/* Soft fade at the bottom so the photo melts into the navy sections below
   instead of stopping on a hard edge. */
.photo-hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom,
    rgba(6,22,59,0) 0%,
    rgba(6,22,59,0.55) 45%,
    var(--navy) 100%);
  pointer-events: none;
}
.photo-hero > .container{
  position: relative;
  z-index: 1;
}
@keyframes kenburns{
  0%{ transform: scale(1) translate3d(0, 0, 0); }
  100%{ transform: scale(1.13) translate3d(-1.6%, -1.4%, 0); }
}
@media (prefers-reduced-motion: reduce){
  .photo-hero-bg{ animation: none; }
}

.hero{
  padding: 172px 0 120px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.hero > .container{ width: 100%; }

.hero-inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero h1{ color: #fff; margin-bottom: 0.35em; }

.hero .lead{
  font-size: 1.15rem;
  color: #cdd3e3;
  max-width: 46ch;
}

.hero-actions{
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-mark{
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-mark img{
  display: block;
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45));
}

/* ---------- Sections ---------- */
section{
  padding: 72px 0;
  position: relative;
  background-color: var(--bg);
}
.section-soft{ background-color: var(--bg-soft); }

/* Solid navy content sections — alternating tones for rhythm down the page.
   Text/card colors below are scoped so nested white cards (tag-card, cat-card,
   contact-card) stay dark-on-white and are never accidentally turned white-on-white. */
.section-navy{ background: var(--navy); color: #fff; }
.section-navy-alt{ background: var(--navy-2); color: #fff; }

.section-navy .section-head h2, .section-navy .section-head h3,
.section-navy-alt .section-head h2, .section-navy-alt .section-head h3,
.section-navy .cat-group h3, .section-navy-alt .cat-group h3,
.section-navy .cta-banner h3, .section-navy-alt .cta-banner h3{
  color: #fff;
}
.section-navy .cat-group h3, .section-navy-alt .cat-group h3{
  border-bottom-color: rgba(255,255,255,0.18);
}
.section-navy .ref-item strong, .section-navy-alt .ref-item strong{ color: #fff; }
.section-navy .ref-item span, .section-navy-alt .ref-item span{ color: #b7c0d6; }
.section-navy .photo-block figcaption, .section-navy-alt .photo-block figcaption{ color: #b7c0d6; }
.section-navy .phone-callout, .section-navy-alt .phone-callout{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.section-head{
  max-width: 720px;
  margin: 0 0 40px;
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

/* grid of activity/arena tags */
.tag-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.tag-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--navy);
}
.tag-card .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* three-up feature cards */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.feature-card .num{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--terracotta-light);
  line-height: 1;
  margin-bottom: 10px;
}

/* reference customers */
.ref-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  margin-top: 8px;
}
.ref-item{
  border-left: 3px solid var(--terracotta);
  padding: 6px 0 6px 16px;
}
.ref-item strong{ color: var(--navy); display:block; }
.ref-item span{ color: var(--muted); font-size: 0.95rem; }

/* CTA banner */
.cta-banner{
  background: var(--terracotta);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-banner h3{ color: #fff; margin-bottom: 4px; }
.cta-banner p{ margin: 0; color: rgba(255,255,255,0.9); }

/* ---------- Catalogs ---------- */
.cat-group{ margin-bottom: 52px; }
.cat-group h3{
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.cat-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cat-card:hover{
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}
.cat-cover{
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg-soft-2);
  overflow: hidden;
}
.cat-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cat-body{
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.cat-card h4{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0;
}
.cat-card p{
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
  flex-grow: 1;
}
.cat-card .cat-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.cat-card .filesize{
  font-size: 0.82rem;
  color: var(--muted);
}
.cat-card .dl{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cat-card:hover .dl{ color: var(--terracotta-dark); }

/* ---------- Contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.contact-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.contact-row{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.contact-row:last-child{ border-bottom: none; }
.contact-row .icon{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  color: var(--terracotta);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.contact-row .label{
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.contact-row .value{
  font-weight: 700;
  color: var(--navy);
  font-size: 1.15rem;
}
.contact-row .value a{ color: var(--navy); }
.contact-row .value a:hover{ color: var(--terracotta); }

.phone-callout{
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.phone-callout .big-phone{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  color: #fff;
  display: block;
  margin: 10px 0 18px;
}
.phone-callout .big-phone:hover{ color: var(--terracotta-light); }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--navy);
  color: #c9cede;
  padding: 56px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-grid h4{
  color: #fff;
  font-size: 1rem;
  margin-bottom: 14px;
}
.footer-grid ul{ list-style: none; padding: 0; margin: 0; }
.footer-grid li{ margin-bottom: 8px; }
.footer-grid a{ color: #c9cede; }
.footer-grid a:hover{ color: #fff; }
.footer-brand img{ height: 40px; margin-bottom: 12px; }
.footer-brand p{ color: #97a0b8; font-size: 0.92rem; max-width: 34ch; }
.footer-social{ display: flex; gap: 12px; margin-top: 14px; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid #2a3a63;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.95rem;
}
.footer-social a:hover{ background: var(--terracotta); border-color: var(--terracotta); text-decoration: none; }

.footer-bottom{
  border-top: 1px solid #223258;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: #7d87a3;
}
.footer-bottom a{ color: #7d87a3; }
.footer-bottom a:hover{ color: #fff; }

/* ---------- Legal pages ---------- */
.legal-content{
  max-width: 760px;
}
.legal-content h2{ margin-top: 1.6em; }
.legal-content h2:first-child{ margin-top: 0; }
.legal-content ul{ padding-left: 1.2em; }
.legal-content li{ margin-bottom: 0.4em; }
.legal-content .updated{
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 2em;
}

/* ---------- Page hero (inner pages) ---------- */
/* Section intros — solid navy, no photo, so nothing collides with the hero image */
.page-hero{
  background-image:
    radial-gradient(900px 420px at 88% -40%, rgba(191,78,51,0.22), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff;
  padding: 96px 0 72px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
/* On the legal pages the intro is the first section, so it needs clearance
   for the fixed header. On index it is preceded by the hero. */
.site-header + .page-hero{ padding: 140px 0 56px; border-top: none; }

/* ---------- Content photos (Om oss etc.) ---------- */
.photo-block{
  margin: 32px 0;
}
.photo-block img{
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.photo-block figcaption{
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--muted);
}
.photo-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 36px 0;
}
.photo-row figure{ margin: 0; }
.photo-row img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.photo-row figcaption{
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--muted);
}
@media (max-width: 720px){
  .photo-row{ grid-template-columns: 1fr; }
}
.page-hero h1{ color: #fff; margin: 0; }
.page-hero p{ color: #cdd3e3; max-width: 60ch; margin-top: 10px; }

/* ---------- Utility ---------- */
.mt-0{ margin-top: 0; }
.text-muted{ color: var(--muted); }
.center{ text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-mark{ order: -1; }
  .hero-mark img{ max-width: 220px; }
  .feature-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .ref-list{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  nav.main-nav{
    position: fixed;
    top: 84px; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 18px;
    border-top: 1px solid #223258;
    display: none;
  }
  nav.main-nav.open{ display: flex; }
  nav.main-nav a{ color: #dfe3ee; }
  nav.main-nav a:hover, nav.main-nav a.active{ color: #fff; }
  .nav-toggle{ display: block; }
  .header-cta .btn-outline{ display: none; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-banner{ flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   TILLEGG: seksjonsskiller, hovedkataloger, nyhetsbrev, galleri
   ============================================================ */

/* --- Tydeligere start på hver seksjon --- */
.section-head .eyebrow{ position: relative; padding-top: 18px; }
.section-head .eyebrow::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:3px; background:var(--terracotta); border-radius:2px;
}

/* --- Fotoband som skiller hoveddelene --- */
.section-divider{
  position: relative;
  height: 62vh;
  min-height: 420px;
  max-height: 700px;
  overflow: hidden;
  background: var(--navy);
  padding: 0;
}
.section-divider .divider-media{
  position:absolute; inset:-12% 0;      /* ekstra høyde til parallakse */
  will-change: transform;
}
.section-divider img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.section-divider img{ filter: brightness(1.12) saturate(1.05); }
.section-divider::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom,
    var(--navy) 0%, rgba(6,22,59,0.06) 26%,
    rgba(6,22,59,0.06) 74%, var(--navy) 100%);
}
/* mørk plate bak teksten, så den er lesbar uten å mørklegge hele bildet */
.section-divider .divider-label span{
  background: rgba(6,22,59,0.72);
  padding: 10px 22px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.section-divider .divider-label{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em;
  color:#fff; font-size:clamp(.9rem,2vw,1.15rem);
  text-shadow:0 2px 16px rgba(0,0,0,.55);
  text-align:center; padding:0 24px;
}
@media (max-width:720px){ .section-divider{ height:46vh; min-height:300px; } }

/* --- "Slik bestiller du" - tydelig boks i katalogtoppen --- */
.order-box{
  background: rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-left:4px solid var(--terracotta);
  border-radius:var(--radius);
  padding:24px 28px;
  margin-top:28px;
  max-width:760px;
}
.order-box h3{ color:#fff; margin:0 0 14px; font-size:1.15rem; }
.order-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.order-steps li{
  display:flex; gap:14px; align-items:flex-start;
  color:#cdd3e3; font-size:.97rem; line-height:1.5;
}
.order-steps .num{
  flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--terracotta); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:.9rem;
}
.order-box .order-contact{
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.14);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

/* --- Hovedkataloger --- */
.cat-group.hoved h3{ font-size:1.5rem; }
.cat-badge{
  display:inline-block; margin-left:10px; vertical-align:middle;
  background:var(--terracotta); color:#fff;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  font-size:.68rem; padding:4px 10px; border-radius:999px;
}
.cat-group.hoved .cat-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cat-group.hoved .cat-card{ border:2px solid var(--terracotta); }
.cat-group.hoved .cat-card h4{ font-size:1.3rem; }
.cat-group-intro{
  color:#b7c0d6; font-size:.97rem; max-width:70ch; margin:-8px 0 22px;
}

/* --- Nyhetsbrev --- */
.newsletter{ background:var(--navy-2); }
.newsletter-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
}
.newsletter h2{ color:#fff; }
.newsletter p{ color:#cdd3e3; }
.newsletter ul{ color:#cdd3e3; padding-left:1.1em; margin:0 0 8px; }
.newsletter li{ margin-bottom:6px; }
.nl-card{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius); padding:30px;
}
.nl-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.nl-field label{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  font-size:.82rem; color:#cdd3e3;
}
.nl-field input{
  padding:13px 15px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.95); color:var(--navy);
  font-family:inherit; font-size:1rem;
}
.nl-field input:focus{
  outline:3px solid rgba(191,78,51,.55); outline-offset:1px; border-color:var(--terracotta);
}
.nl-card .btn{ width:100%; justify-content:center; }
.nl-note{ font-size:.83rem; color:#98a2bd; margin:14px 0 0; line-height:1.5; }
.nl-note a{ color:var(--terracotta-light); }
.nl-status{
  margin-top:14px; padding:12px 14px; border-radius:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:.92rem; display:none;
}
.nl-status.vis{ display:block; }
@media (max-width:900px){ .newsletter-inner{ grid-template-columns:1fr; gap:30px; } }

/* --- Instagram-galleri (horisontal blaing) --- */
.ig-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:24px;
}
.ig-scroll-wrap{ position:relative; }
.ig-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:265px;
  gap:16px; overflow-x:auto; padding:4px 4px 18px;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
}
.ig-strip::-webkit-scrollbar{ height:8px; }
.ig-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); border-radius:4px; }
.ig-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,.07); border-radius:4px; }
.ig-item{
  scroll-snap-align:start; position:relative;
  aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden;
  background:var(--navy-3); display:block;
}
.ig-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.ig-item:hover img, .ig-item:focus-visible img{ transform:scale(1.06); }
.ig-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,22,59,.55), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.ig-item:hover::after, .ig-item:focus-visible::after{ opacity:1; }
.ig-nav{ display:flex; gap:10px; }
.ig-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  color:#fff; font-size:1.15rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.ig-btn:hover{ background:var(--terracotta); border-color:var(--terracotta); }
.ig-btn:disabled{ opacity:.3; cursor:default; }
.ig-btn:disabled:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }
@media (max-width:720px){ .ig-strip{ grid-auto-columns:210px; } }

@media (prefers-reduced-motion: reduce){
  .ig-strip{ scroll-behavior:auto; }
  .ig-item img{ transition:none; }
}

/* Overskrifter utenfor .section-head i mørke seksjoner må også være hvite,
   ellers arver de marineblå tekst på marineblå bakgrunn. */
.section-navy .ig-head h2,
.section-navy-alt .ig-head h2,
.newsletter .ig-head h2{ color:#fff; }

/* Terrakottastreken over stikktittelen skal gjelde alle seksjonstopper */
.ig-head .eyebrow, .newsletter .eyebrow{ position:relative; padding-top:18px; }
.ig-head .eyebrow::before, .newsletter .eyebrow::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:3px; background:var(--terracotta); border-radius:2px;
}

/* ============================================================
   SKJEV 3D-KARUSELL (ren CSS + litt JS for transform pr. kort)
   ============================================================ */
.carousel{ position:relative; }
.carousel-viewport{
  perspective: 1900px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  padding: 10px 0 26px;
  width: 100vw;                        /* bryter ut av .container */
  margin-left: calc(50% - 50vw);
}
.carousel-track{
  display:flex; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  padding: 34px calc(50% - 195px);      /* halve kortbredden -> første/siste kan sentreres */
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  transform-style: preserve-3d;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }

.carousel-item{
  flex:0 0 390px;
  scroll-snap-align:center;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  background:var(--navy-3);
  transform-origin:center center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  will-change: transform;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  display:block;
}
.carousel-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(6,22,59,.35), rgba(6,22,59,0) 45%, rgba(6,22,59,.35));
  opacity:.28; transition:opacity .45s ease;
}
.carousel-item.aktiv::after{ opacity:0; }
.carousel-item.aktiv{ box-shadow:0 26px 60px rgba(0,0,0,.5); }

/* Fallback før JS rekker å måle: midtstilt, uskjevt */
.carousel-track:not(.klar) .carousel-item{ transform:none; opacity:1; }

.carousel-nav{
  display:flex; gap:12px; justify-content:center; align-items:center;
  margin-top:6px;
}
.carousel-dots{ display:flex; gap:8px; align-items:center; margin:0 8px; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  border:none; background:rgba(255,255,255,.28); cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.carousel-dot.aktiv{ background:var(--terracotta); transform:scale(1.5); }

@media (max-width:1100px){
  .carousel-track{ padding:30px calc(50% - 155px); }
  .carousel-item{ flex-basis:310px; }
}
@media (max-width:720px){
  .carousel-track{ padding:26px calc(50% - 125px); gap:8px; }
  .carousel-item{ flex-basis:250px; }
  .carousel-viewport{ perspective:1100px; }
}
@media (prefers-reduced-motion: reduce){
  .carousel-track{ scroll-behavior:auto; }
  .carousel-item{ transition:none; }
}

/* ============================================================
   LIV: innhold toner inn ved scrolling + parallakse på fotoband
   ============================================================ */
/* Skjul-tilstanden aktiveres KUN når JS har bekreftet at den kan slå den av igjen
   (klassen js-avslor settes på <html>). Uten JS vises alt umiddelbart. */
.js-avslor .avslor{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-avslor .avslor.synlig{ opacity: 1; transform: none; }

/* kort i rekke kommer inn etter hverandre */
.js-avslor .avslor-gruppe > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.js-avslor .avslor-gruppe.synlig > *{ opacity: 1; transform: none; }
.js-avslor .avslor-gruppe.synlig > *:nth-child(1){ transition-delay: .00s; }
.js-avslor .avslor-gruppe.synlig > *:nth-child(2){ transition-delay: .07s; }
.js-avslor .avslor-gruppe.synlig > *:nth-child(3){ transition-delay: .14s; }
.js-avslor .avslor-gruppe.synlig > *:nth-child(4){ transition-delay: .21s; }
.js-avslor .avslor-gruppe.synlig > *:nth-child(5){ transition-delay: .28s; }
.js-avslor .avslor-gruppe.synlig > *:nth-child(6){ transition-delay: .35s; }

/* katalogkort løfter seg litt tydeligere */
.cat-card{ transition: box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); }
.cat-card:hover{ transform: translateY(-6px); }
.cat-card .cat-cover img{ transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.cat-card:hover .cat-cover img{ transform: scale(1.05); }

/* knapper får en liten respons */
.btn{ transition: background .2s ease, transform .15s ease, border-color .2s ease; }
.btn:active{ transform: translateY(1px); }

@media (prefers-reduced-motion: reduce){
  .js-avslor .avslor, .js-avslor .avslor-gruppe > *{ opacity:1 !important; transform:none !important; transition:none; }
  .cat-card:hover{ transform:none; }
  .cat-card:hover .cat-cover img{ transform:none; }
  .section-divider .divider-media{ transform:none !important; }
}

/* ============================================================
   SEKSJON MED BILDE VED SIDEN AV TEKSTEN
   ============================================================ */
.med-foto{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.med-foto.bilde-forst{ grid-template-columns: 0.95fr 1.05fr; }
.med-foto.bilde-forst .med-foto__bilde{ order: -1; }
.med-foto__tekst > .section-head{ margin-bottom: 0; }

figure{ margin: 0; }          /* nettleserens standard 40px sidemarg vekk */
.med-foto__bilde{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.38);
  aspect-ratio: 4 / 3;
}
.med-foto__bilde img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.med-foto__bilde:hover img{ transform: scale(1.04); }
.med-foto__bilde figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 20px 14px;
  background: linear-gradient(to top, rgba(6,22,59,.88), transparent);
  color: #dfe3ee; font-size: .84rem; line-height: 1.45;
}

/* bildet i historie-avsnittet får samme innramming */
.photo-block img{ border-radius: 14px; box-shadow: 0 22px 50px rgba(0,0,0,.38); }

@media (max-width: 900px){
  .med-foto,
  .med-foto.bilde-forst{ grid-template-columns: 1fr; gap: 26px; }
  .med-foto.bilde-forst .med-foto__bilde{ order: 0; }
  .med-foto__bilde{ aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce){
  .med-foto__bilde:hover img{ transform: none; }
}

/* ============================================================
   MOBIL: to katalogkort i bredden, så man slipper å bla ett og ett
   ============================================================ */
@media (max-width: 720px){
  .cat-grid,
  .cat-group.hoved .cat-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .cat-card{ border-radius: 8px; }
  .cat-body{ padding: 12px 12px 14px; gap: 7px; }

  .cat-card h4,
  .cat-group.hoved .cat-card h4{ font-size: .98rem; line-height: 1.12; }
  .cat-card p{ font-size: .8rem; line-height: 1.4; }

  /* filstørrelse og «Åpne PDF» under hverandre – for smalt ved siden av */
  .cat-card .cat-meta{
    flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 4px;
  }
  .cat-card .filesize{ font-size: .72rem; }
  .cat-card .dl{ font-size: .78rem; }

  .cat-group h3{ font-size: 1.15rem; }
  .cat-group.hoved h3{ font-size: 1.25rem; }
  .cat-group-intro{ font-size: .88rem; margin-bottom: 16px; }
  .cat-badge{ font-size: .6rem; padding: 3px 8px; }
}

/* Svært smale telefoner: behold to kolonner, men stram inn ytterligere */
@media (max-width: 380px){
  .cat-grid, .cat-group.hoved .cat-grid{ gap: 9px; }
  .cat-body{ padding: 10px 10px 12px; }
  .cat-card p{ font-size: .76rem; }
}