/* =====================================================================
   Nordic Heat Solution AS — Landing page
   Clean · Professional · Balanced · Sharp edges throughout
   Static HTML/CSS — intended for later conversion to WordPress.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ink:        #15181b;   /* near-black charcoal — header/footer/hero */
  --ink-2:      #1e2329;   /* slightly lighter dark surface */
  --ink-3:      #2a3037;   /* dark borders / hover */

  --brand:      #7d8136;   /* olive-green — from the logo flame */
  --brand-dark: #646a2b;   /* hover / pressed */
  --brand-tint: #f1f3e7;   /* very light olive — section wash */

  --ember:      #e2641e;   /* warm flame accent (used sparingly) */
  --ember-dark: #c5550f;

  --paper:      #ffffff;
  --mist:       #f5f6f2;   /* light section background */
  --line:       #e1e3da;   /* hairline borders */
  --line-2:     #d2d5c9;

  --text:       #1f2429;   /* body copy */
  --muted:      #5c636b;   /* secondary copy */
  --muted-2:    #878d94;

  --maxw: 1200px;
  --gap: clamp(1rem, 2.4vw, 2rem);
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -28px rgba(20,24,28,.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;   /* SHARP EDGES everywhere */
}
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.08;
 color: var(--ink);
  text-transform: none;
}
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3rem, 5.5vw, 5rem); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #c9cdd2; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Figtree", system-ui, sans-serif;
  text-transform: uppercase; font-weight: 600; font-size: .82rem; color: var(--brand-dark);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--brand); display: inline-block; }
.section--ink .eyebrow { color: #b6bd6a; }
.section--ink .eyebrow::before { background: var(--brand); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-top: .7rem; }
.section-head p { color: var(--muted); margin-top: .9rem; font-size: 1.05rem; }
.section-cta { display: flex; justify-content: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 2.8rem); flex-wrap: wrap; }
.section--ink .section-head h2 { color: #fff; }
.section--ink .section-head p { color: #aab0b6; }
.lead { font-size: 1.12rem; color: var(--muted); }

/* ---------- Buttons ---------- */
/*
 * Fill animation: 200%-wide gradient per variant — right half = resting colour,
 * left half = fill colour. background-position slides left on hover so the fill
 * sweeps in from the left edge. No pseudo-elements or z-index tricks needed.
 */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 1.05rem;
  padding: .82rem 1.6rem;
  border: 2px solid transparent;
  background-size: 200% 100%;
  background-position: right center;
  transition:
    background-position .32s cubic-bezier(.4,0,.2,1),
    color        .24s cubic-bezier(.4,0,.2,1),
    border-color .24s cubic-bezier(.4,0,.2,1),
    transform    .22s cubic-bezier(.4,0,.2,1),
    box-shadow   .22s cubic-bezier(.4,0,.2,1);
}
.btn:hover  { background-position: left center; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.btn:active { background-position: left center; transform: translateY(0); box-shadow: none; transition-duration: .08s; }

.btn svg { width: 18px; height: 18px; flex: none; transition: transform .22s cubic-bezier(.4,0,.2,1); }
.btn:hover svg:last-child { transform: translateX(4px); }

/* right 50% = resting · left 50% = fill that slides in
 * Solid-fill variants: NO border-color override — they inherit
 * "border: 2px solid transparent" from .btn so the background
 * fills flush to the edge with zero visible frame.
 * Only ghost + outline set an explicit border-color (intentional outline). */
.btn--primary {
  background-image: linear-gradient(to left, var(--brand) 50%, var(--brand-dark) 50%);
  color: #fff;
}

.btn--ember {
  background-image: linear-gradient(to left, var(--ember) 50%, var(--ember-dark) 50%);
  color: #fff;
}

.btn--ghost {
  background-image: linear-gradient(to left, #ffffff 50%, #eef0e6 50%);
  color: var(--ink);
}

.btn--dark {
  background-image: linear-gradient(to left, var(--ink) 50%, var(--ink-3) 50%);
  color: #fff;
}

/* White-fill button — for primary CTAs on coloured section backgrounds (e.g. CTA band) */
.btn--white {
  background-image: linear-gradient(to left, #ffffff 50%, #eef0e6 50%);
  color: var(--ink);
}

.btn--outline {
  background-image: linear-gradient(to left, var(--ink) 50%, var(--ink-3) 50%);
  color: #fff;
}

/* =====================================================================
   Top utility bar
   ===================================================================== */
.topbar {
  background: var(--ink);
  color: #aeb4ba;
  font-size: .86rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; flex-wrap: wrap; }
.topbar a { color: #cfd3d8; }
.topbar a:hover { color: #fff; }
.topbar__left { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__item svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.topbar__alert { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }
.topbar__alert .dot { width: 8px; height: 8px; background: var(--ember); display: inline-block; box-shadow: 0 0 0 3px rgba(226,100,30,.25); }
.topbar__alert strong { color: var(--ember); }

/* =====================================================================
   Header / navigation
   ===================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}
.site-header.scrolled {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
}

/* ---- Transparent-header variant (index.html only) ----
   Applied via class="header--transparent" on <header>.
   On scroll, JS adds .scrolled which restores the solid white look. */
.header--transparent:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Brand name white on dark hero */
.header--transparent:not(.scrolled) .brand__name b   { color: #fff; }
.header--transparent:not(.scrolled) .brand__name span { color: rgba(255,255,255,.6); }
/* Nav links white */
.header--transparent:not(.scrolled) .nav__links a {
  color: rgba(255,255,255,.88);
}
.header--transparent:not(.scrolled) .nav__links a:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.45);
}
/* Phone number white */
.header--transparent:not(.scrolled) .nav__phone { color: rgba(255,255,255,.88); }
/* Hamburger bars white (mobile) */
.header--transparent:not(.scrolled) .nav__toggle {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}
.header--transparent:not(.scrolled) .nav__toggle span,
.header--transparent:not(.scrolled) .nav__toggle span::before,
.header--transparent:not(.scrolled) .nav__toggle span::after { background: #fff; }
/* When mobile nav is open at the top, snap to solid white so
   the slide-down menu reads correctly against white background */
.header--transparent.open {
  background: #fff;
  border-bottom-color: var(--line);
}
/* Dropdown panels always render dark text — the .nav__links a white-color
   rule (0,3,1) would otherwise make items invisible on the white panel.
   These selectors use 4 classes (0,4,0) to win that specificity battle. */
.header--transparent:not(.scrolled) .nav__dropdown-panel .nav__dropdown-item       { color: var(--ink); }
.header--transparent:not(.scrolled) .nav__dropdown-panel .nav__dropdown-item:hover  { color: var(--ink); border-bottom-color: var(--line); }
.header--transparent:not(.scrolled) .nav__dropdown-panel .nav__dropdown-item--accent       { color: var(--brand-dark); }
.header--transparent:not(.scrolled) .nav__dropdown-panel .nav__dropdown-item--accent:hover { color: #fff; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand img { height: 40px; width: auto; }
.brand__name { font-family: "Figtree", system-ui, sans-serif; line-height: .96; }
.brand__name b { display: block; font-size: 1.22rem; font-weight: 700; color: var(--ink); text-transform: uppercase; }
.brand__name span { display: block; font-size: .82rem; font-weight: 600; color: var(--brand-dark); text-transform: uppercase; }

.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__links a {
  display: inline-flex; align-items: center;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: .95rem; color: var(--text); white-space: nowrap;
  padding: .55rem .8rem; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav__links > li { display: flex; align-items: center; }
.nav__links a:hover { color: var(--brand-dark); border-bottom-color: var(--brand); }

.nav__cta { display: flex; align-items: center; gap: .8rem; }
.nav__phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink); font-size: .98rem; }
.nav__phone svg { width: 18px; height: 18px; color: var(--brand); }

.nav__cta .btn { padding-block: .48rem; font-size: .95rem; }

.nav__toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line-2); background: #fff; align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: .2s;
}
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after { position: absolute; top: 7px; }

/* =====================================================================
   Services dropdown
   ===================================================================== */
.nav__item--dropdown { position: relative; }

.nav__dropdown-toggle { display: inline-flex !important; align-items: center; gap: .25rem; }
.nav__caret {
  width: 13px; height: 13px; flex: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.nav__item--dropdown.is-open .nav__caret { transform: rotate(180deg); }

.nav__dropdown-panel {
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: #fff;
  border-top: 2px solid var(--brand);
  box-shadow: 0 12px 36px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
  z-index: 200;
}
@media (hover: hover) and (pointer: fine) {
  .nav__item--dropdown:hover .nav__caret { transform: rotate(180deg); }
  .nav__item--dropdown:hover .nav__dropdown-panel {
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
}
.nav__item--dropdown.is-open .nav__dropdown-panel {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* Items — higher specificity than .nav__links a so no !important needed */
.nav__dropdown-panel .nav__dropdown-item {
  display: block;
  position: relative;          /* anchors the ::before accent bar */
  padding: .64rem 1.05rem;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: .96rem; font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: background .18s ease;
}
/* Animated left accent bar — scaleY(0→1) from top on hover */
.nav__dropdown-panel .nav__dropdown-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.nav__dropdown-panel .nav__dropdown-item:hover::before { transform: scaleY(1); }
.nav__dropdown-panel .nav__dropdown-item:last-child { border-bottom: none; }
.nav__dropdown-panel .nav__dropdown-item:hover {
  background: var(--brand-tint);
  color: var(--ink);
}
/* Accent item (Døgnvakt / Se alle prosjekter) */
.nav__dropdown-panel .nav__dropdown-item--accent {
  color: var(--brand-dark);
  background: var(--brand-tint);
}
.nav__dropdown-panel .nav__dropdown-item--accent::before { display: none; }
.nav__dropdown-panel .nav__dropdown-item--accent:hover {
  background: var(--brand);
  color: #fff;
}

/* =====================================================================
   Hero
   ===================================================================== */
/* First sections need top padding to clear the fixed header (76px nav height) */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; padding-top: 76px; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: brightness(1.18) saturate(1.04); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15,18,21,.72) 0%, rgba(15,18,21,.50) 46%, rgba(15,18,21,.18) 100%),
    linear-gradient(to top, rgba(15,18,21,.55) 0%, rgba(15,18,21,0) 48%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 9vw, 7.5rem); max-width: 700px; }
.hero__eyebrow { color: #c2c890; }
.hero__eyebrow::before { background: var(--brand); }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 1rem 0 1.1rem; }
/* Accent span — works on any section; lighter tint on dark/olive backgrounds */
.accent { color: var(--brand); }
.section--ink .accent { color: #b6bd6a; }
.cta-band .accent    { color: #c6cc7e; }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d4d8dc; max-width: 38em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 2.6rem; padding-top: 1.7rem; border-top: 1px solid rgba(255,255,255,.16); }
.hero__meta .item { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: #cfd3d8; }
.hero__meta .item svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.hero__meta .item b { color: #fff; font-weight: 600; }

/* =====================================================================
   Feature strip — auto-scroll marquee
   ===================================================================== */
.features { background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; padding-block: clamp(0.5rem, 1vw, 0.75rem); }
.features__track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.features__track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.features__track:hover { animation-play-state: paused; }
.feature {
  display: flex; align-items: center; gap: .8rem;
  padding: clamp(.75rem, 1.2vw, 1rem) clamp(1.4rem, 2.2vw, 2.2rem);
  border-right: 1px solid var(--line);
  flex: none; min-width: 240px;
}
.feature__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-dark); border: 1px solid var(--line); }
.feature__icon svg { width: 18px; height: 18px; }
.feature p { font-size: .82rem; color: var(--muted); margin-top: .2rem; line-height: 1.45; max-width: 22ch; }

/* =====================================================================
   Services
   ===================================================================== */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* "Dette gjør vi" — 4 kort i 2×2 i stedet for 3 kolonner med tom celle */
@media (min-width: 621px) {
  #dette-gjor-vi .services__grid { grid-template-columns: 1fr 1fr; }
}
.service {
  background: var(--paper);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  transition: background .18s ease, transform .18s ease;
  position: relative;
}
.service::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: var(--brand); transition: width .22s ease; }
.service:hover { background: #fbfcf8; }
.service:hover::before { width: 100%; }
.service__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--brand); color: #fff; margin-bottom: 1.1rem; }
.service__icon svg { width: 27px; height: 27px; }
.service h3 { margin-bottom: .55rem; }
.service p { color: var(--muted); font-size: .98rem; }
.service__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-family: "Figtree", system-ui, sans-serif; font-weight: 600; color: var(--brand-dark); }
.service__more svg { width: 16px; height: 16px; transition: transform .18s ease; }
.service:hover .service__more svg { transform: translateX(4px); }

/* =====================================================================
   About
   ===================================================================== */
.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about__media { position: relative; }
.about__media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; border: 1px solid var(--line); }
.about__badge {
  position: absolute; left: -1px; bottom: -1px;
  background: var(--brand); color: #fff; padding: 1.1rem 1.4rem; max-width: 230px;
}
.about__badge b { font-family: "Figtree", system-ui, sans-serif; font-size: 2.4rem; line-height: 1; display: block; }
.about__badge span { font-size: .9rem; }
.about h2 { margin: .7rem 0 1.1rem; }
.about p + p { margin-top: 1rem; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.6rem; margin-top: 1.8rem; }
.value { display: flex; gap: .7rem; align-items: flex-start; }
.value svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.value b { display: block; font-size: 1.05rem; color: var(--ink); font-family: "Figtree", system-ui, sans-serif; }
.value span { font-size: .9rem; color: var(--muted); }

/* Full-width 3-column variant (e.g. CleanLoop "Vi jobber systematisk med") */
.values--3 { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.values--3 .value { padding: 1.3rem 1.4rem; border: 1px solid var(--line); background: var(--mist); }
.values--3 .value svg { width: 26px; height: 26px; }
@media (max-width: 640px) { .values--3 { grid-template-columns: 1fr; } }

/* =====================================================================
   Projects
   ===================================================================== */
.projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.project { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--ink); }
.project img { width: 100%; height: 380px; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.project:hover img { transform: scale(1.05); opacity: .82; }
.project__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem; background: linear-gradient(to top, rgba(15,18,21,.92), rgba(15,18,21,0)); color: #fff; }
.project__cap .tag { font-family: "Figtree", system-ui, sans-serif; text-transform: uppercase; font-size: .76rem; color: #c2c890; font-weight: 600; }
.project__cap h3 { color: #fff; margin-top: .2rem; }

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ink); /* fallback */
}
/* Full-bleed background image */
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../img/nhs_cover.jpg') center 40% / cover no-repeat;
  filter: brightness(.75) saturate(1.1);
}
/* Black overlay 50% */
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.50);
}
.cta-band .container {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p  { color: rgba(255,255,255,.82); margin-top: .5rem; }
.cta-band__actions { display: flex; gap: .9rem; flex-wrap: wrap; }

/* =====================================================================
   Contact
   ===================================================================== */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
/* Flex column so the map expands to fill whatever height the form dictates */
.contact__info { display: flex; flex-direction: column; }
.contact__info h2 { margin: .7rem 0 1rem; }

/* Map — fills remaining space below the contact-list */
.contact__map {
  flex: 1;
  min-height: 220px;
  margin-top: 1.8rem;
  overflow: hidden;
  border: 1px solid var(--line);
}
.contact__map iframe {
  display: block;
  width: 100%; height: 100%;
  filter: grayscale(18%);     /* subtle desaturation to match the site palette */
}
.contact-list { margin-top: 1.8rem; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--brand); color: #fff; }
.contact-list .ic svg { width: 22px; height: 22px; }
.contact-list .ic--ember { background: var(--brand); }
.contact-list b { font-family: "Figtree", system-ui, sans-serif; font-size: .82rem; text-transform: uppercase; color: var(--muted-2); display: block; }
.contact-list a, .contact-list span { color: var(--ink); font-size: 1.08rem; font-weight: 500; }
.contact-list a:hover { color: var(--brand-dark); }

/* Form */
.form { background: var(--mist); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.4rem); }
.form h3 { margin-bottom: 1.3rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%; background: #fff; border: 1px solid var(--line-2);
  padding: .8rem .9rem; font: inherit; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(125,129,54,.16); }
.field textarea { min-height: 130px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__note { font-size: .82rem; color: var(--muted-2); margin-top: .8rem; }

.field--check { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.2rem; }
.field--check input[type="checkbox"] {
  width: 17px; height: 17px; flex: none; margin-top: 2px;
  accent-color: var(--brand); cursor: pointer;
  border: 1px solid var(--line-2); padding: 0; background: #fff;
}
.field--check label {
  font-size: .9rem; font-weight: 400; text-transform: none; color: var(--muted); cursor: pointer; margin-bottom: 0; line-height: 1.5;
}
.field--check label a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.field--check label a:hover { color: var(--ink); }
.form .btn { width: 100%; justify-content: center; margin-top: .4rem; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--ink); color: #9aa0a6; padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 3px solid var(--brand); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3.5rem; }

/* Brand column */
.footer__brand .brand { margin-bottom: 1.3rem; }
.footer__brand .brand img { height: 52px; }           /* larger footer logo */
.footer__brand .brand__name b, .footer__brand .brand__name span { color: #fff; }
.footer__brand p { font-size: .94rem; color: #8a9098; max-width: 32ch; line-height: 1.65; }

/* Column headings */
.footer__col-heading {
  display: block;
  color: #fff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1rem; font-weight: 700;
 text-transform: uppercase;
  margin-bottom: 1.2rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Column links — fixed: was .footer ul li */
.footer__col li { margin-bottom: .65rem; font-size: .94rem; }
.footer__col a { color: #9aa0a6; transition: color .18s ease; }
.footer__col a:hover { color: #fff; }

.footer__contact li { display: flex; gap: .65rem; margin-bottom: .85rem; font-size: .94rem; color: #9aa0a6; }
.footer__contact a { color: #9aa0a6; transition: color .18s ease; }
.footer__contact a:hover { color: #fff; }
.footer__contact svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 3px; }

.footer__social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer__social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #cfd3d8; transition: .15s; }
.footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer__social svg { width: 19px; height: 19px; }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-block: 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.footer__bottom .orgnr { color: #7e848a; }
.footer__bottom-right { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.footer__bottom-right a { color: #9aa0a6; transition: color .18s ease; }
.footer__bottom-right a:hover { color: #fff; }
.footer__credit { color: #7e848a; }
.footer__credit a { color: #9aa0a6; }
.footer__credit a:hover { color: #fff; }

/* =====================================================================
   Simple page header (e.g. Karriere)
   ===================================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding-top: calc(76px + clamp(1.2rem, 3vw, 2rem));
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
  border-bottom: 3px solid var(--brand);
  overflow: hidden;
}
@media (max-width: 700px) { .page-hero { min-height: 360px; } }
/* Dark overlay so the white hero text stays readable over the photo */
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15,18,21,.76) 0%, rgba(15,18,21,.54) 48%, rgba(15,18,21,.26) 100%),
    linear-gradient(to top, rgba(15,18,21,.52) 0%, rgba(15,18,21,0) 55%);
}
.page-hero > .container { position: relative; z-index: 1; width: 100%; }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); margin-top: .8rem; }
.page-hero p { color: #d4d8dc; margin-top: .8rem; max-width: 56ch; }
.breadcrumb { font-size: .85rem; color: #c3c8cd; }
.breadcrumb a:hover { color: #fff; }

.simple { max-width: 760px; }
.simple h2 { margin: 2rem 0 .8rem; }
.simple p { color: var(--muted); margin-bottom: 1rem; }
.simple .callout { border: 1px solid var(--line); border-left: 4px solid var(--brand); background: var(--mist); padding: 1.4rem 1.6rem; margin: 1.5rem 0; }
.simple .callout b { color: var(--ink); }

/* =====================================================================
   About section — dark variant overrides
   ===================================================================== */
.section--ink .about h2   { color: #fff; }
.section--ink .about p    { color: #aeb4ba; }
.section--ink .value b    { color: #fff; }
.section--ink .value span { color: #9aa0a6; }
.section--ink .about__media img { border-color: rgba(255,255,255,.12); }

/* =====================================================================
   Testimonials — CSS-only auto-scroll marquee
   ===================================================================== */
.testimonials { overflow: hidden; }
.testimonials__track-wrap {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.testimonials__track {
  display: flex;
  gap: 1.4rem;
  width: max-content;
  animation: ticker 44s linear infinite;
  padding-block: .5rem;
}
.testimonials__track:hover { animation-play-state: paused; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonial {
  flex: none; width: 340px;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 4px solid var(--brand);
  padding: 1.6rem 1.8rem 1.6rem 1.5rem;
}
.testimonial__stars { color: var(--brand); font-size: .98rem; margin-bottom: .8rem; }
.testimonial__text  { font-size: .97rem; color: #8e959c; line-height: 1.72; margin-bottom: 1.2rem; }
.testimonial__author { display: flex; align-items: center; gap: .75rem; }
.testimonial__avatar {
  width: 42px; height: 42px; flex: none;
  background: rgba(125,129,54,.2);
  border: 1px solid rgba(125,129,54,.45);
  display: grid; place-items: center;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 700; color: #b6bd6a; font-size: 1.05rem;
}
.testimonial__info b    { display: block; color: #e0e3e6; font-size: .96rem; }
.testimonial__info span { font-size: .82rem; color: #545c64; }

/* =====================================================================
   FAQ — native <details>/<summary> with CSS-only animated reveal
   ===================================================================== */
.faq { max-width: 840px; margin-inline: auto; }
#faq .section-head { margin-inline: auto; text-align: center; }

.faq__item {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-left: 1rem;
}
.faq__item:first-child { border-top: 1px solid var(--line); }

/* Left accent bar — scales down from top when item opens */
.faq__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
details[open].faq__item::before { transform: scaleY(1); }

.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1.22rem; font-weight: 600; color: var(--ink);
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand-dark); }
details[open] .faq__q { color: var(--brand-dark); }

/* + icon — spring snap on open, instant on close */
.faq__q::after {
  content: "+"; flex: none;
  font-size: 1.45rem; font-weight: 300; line-height: 1;
  color: var(--brand); width: 1.5rem; text-align: center;
  transition: transform .34s cubic-bezier(.34,1.56,.64,1),
              color .2s ease;
}
details[open] .faq__q::after { transform: rotate(45deg); color: var(--brand-dark); }

/* Height reveal — JS animates pixel height; CSS below is no-JS fallback only */
.faq__body {
  overflow: hidden;
  height: 0;
  opacity: 0;
}
/* No-JS fallback: without JS the accordion opens instantly via height: auto */
details[open]:not(.is-animating) .faq__body {
  height: auto;
  opacity: 1;
}

.faq__a {
  padding: 0 2.2rem 1.3rem 0;
  color: var(--muted); font-size: .98rem; line-height: 1.72; max-width: 68ch;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1180px) {
  .nav__phone { display: none; }
}

@media (max-width: 1024px) {
  .services__grid { grid-template-columns: 1fr 1fr; }
  .projects__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }
  .site-header.open .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: .5rem clamp(1.1rem,4vw,2.5rem) 1.2rem;
  }
  .site-header.open .nav__links a { padding: .9rem .2rem; border-bottom: 1px solid var(--line); }
  .nav { position: relative; }

  /* Dropdown — inline in mobile nav */
  .nav__item--dropdown { position: static; }
  .nav__dropdown-panel {
    position: static; min-width: 0; width: 100%; opacity: 1; transform: none;
    box-shadow: none; border-top: none; border-left: 3px solid var(--brand);
    background: var(--mist); margin: 0 0 .4rem 0;
    display: none; pointer-events: auto; transition: none;
  }
  .nav__item--dropdown.is-open .nav__dropdown-panel { display: block; }
  .nav__dropdown-panel .nav__dropdown-item {
    white-space: normal;
    border-bottom: 1px solid var(--line);
    padding: .55rem .8rem; background: transparent;
  }
  /* ::before bar stays hidden inside the mobile panel (panel itself has the left border) */
  .nav__dropdown-panel .nav__dropdown-item::before { display: none; }
  .nav__dropdown-panel .nav__dropdown-item--accent { background: transparent; color: var(--brand-dark); }
  .nav__dropdown-panel .nav__dropdown-item:hover { background: var(--brand-tint); }

  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  /* On single-column layout flex:1 collapses — give map a fixed height */
  .contact__map { flex: none; min-height: 300px; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .services__grid, .projects__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* =====================================================================
   CleanLoop-modellen — infografikk (kun CleanLoop-siden)
   Egne farger (prosess + trafikklys-status) som bevarer betydningen.
   ===================================================================== */
.cl-info { --cl-blue:#1b4b8f; --cl-green:#3a9d3e; --cl-orange:#ef7d1a; --cl-red:#e0392f; --cl-yellow:#efa72c; }

.cl-flow { list-style:none; margin:0 0 clamp(2rem,4vw,3rem); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.cl-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.cl-step__label { display:block; width:100%; padding:.72rem .6rem; color:#fff; font-weight:700; font-size:1.08rem; line-height:1.15; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); }
.cl-flow .cl-step:first-child .cl-step__label { clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.cl-step--blue   .cl-step__label { background:var(--cl-blue); }
.cl-step--green  .cl-step__label { background:var(--cl-green); }
.cl-step--orange .cl-step__label { background:var(--cl-orange); }
.cl-step__icon { width:66px; height:66px; display:grid; place-items:center; color:var(--cl-blue); border:1px solid var(--line); background:#fff; }
.cl-step__icon svg { width:34px; height:34px; }
.cl-step__desc { font-size:.92rem; color:var(--muted); font-weight:600; }

.cl-cols { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,3.5vw,3rem); margin-top:clamp(1.5rem,3vw,2.5rem); align-items:start; }
.cl-panel h3 { font-size:1.4rem; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line-2); }
.cl-status { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.cl-status__item { border:1px solid var(--line); background:#fff; }
.cl-status__item b { display:block; color:#fff; padding:.5rem .3rem; font-size:1rem; text-align:center; }
.cl-status__item span { display:block; padding:.6rem .4rem; text-align:center; font-size:.85rem; color:var(--muted); }
.cl-status--green  b { background:var(--cl-green); }
.cl-status--yellow b { background:var(--cl-yellow); }
.cl-status--orange b { background:var(--cl-orange); }
.cl-status--red    b { background:var(--cl-red); }

.cl-benefits { display:grid; gap:.9rem; }
.cl-benefits li { display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--ink); font-size:1.02rem; }
.cl-benefits li svg { width:24px; height:24px; color:var(--cl-green); flex:none; }

.cl-packages { margin-top:clamp(2rem,4vw,3rem); }
.cl-packages > h3 { font-size:1.4rem; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line-2); }
.cl-pkgs { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.cl-pkg { border:1px solid var(--line); background:#fff; }
.cl-pkg__name { display:block; color:#fff; font-weight:700; font-size:1.3rem; padding:.7rem 1.1rem; }
.cl-pkg p { padding:1.1rem 1.2rem; color:var(--muted); display:flex; align-items:center; gap:.75rem; font-weight:500; }
.cl-pkg p svg { width:28px; height:28px; flex:none; }
.cl-pkg--basic .cl-pkg__name { background:var(--cl-blue); }   .cl-pkg--basic p svg { color:var(--cl-blue); }
.cl-pkg--pro   .cl-pkg__name { background:var(--cl-green); }  .cl-pkg--pro   p svg { color:var(--cl-green); }
.cl-pkg--ultra .cl-pkg__name { background:var(--cl-orange); } .cl-pkg--ultra p svg { color:var(--cl-orange); }

@media (max-width: 760px) {
  .cl-flow { grid-template-columns:1fr 1fr; }
  .cl-step__label { clip-path:none; }
  .cl-cols { grid-template-columns:1fr; }
  .cl-pkgs { grid-template-columns:1fr; }
}
@media (max-width: 460px) {
  .cl-flow { grid-template-columns:1fr; }
  .cl-status { grid-template-columns:1fr 1fr; }
}


/* =====================================================================
   CleanLoop-modellen — levende animasjoner (illustrasjoner)
   Respekterer prefers-reduced-motion.
   ===================================================================== */
.cl-ill { overflow: visible; }
.cl-step__icon svg { width: 42px; height: 42px; }
.cl-pkg p svg { width: 30px; height: 30px; }

/* Maaling: boblende vaeske */
@keyframes cl-slosh { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
.cl-liquid { animation: cl-slosh 2.8s ease-in-out infinite; }
@keyframes cl-rise { 0% { transform: translateY(3px); opacity: 0; } 25% { opacity: .85; } 100% { transform: translateY(-15px); opacity: 0; } }
.cl-bub { animation: cl-rise 2.6s ease-in infinite; }
.cl-bub2 { animation-delay: .9s; }
.cl-bub3 { animation-delay: 1.7s; }

/* Vurdering: sveipende maalernaal */
.cl-needle { transform-box: view-box; transform-origin: 24px 33px; animation: cl-sweep 3s ease-in-out infinite; }
@keyframes cl-sweep { 0%,100% { transform: rotate(-46deg); } 50% { transform: rotate(46deg); } }

/* Tiltak: vridende skiftenoekkel */
.cl-wrench { transform-box: fill-box; transform-origin: center; animation: cl-wiggle 2.4s ease-in-out infinite; }
@keyframes cl-wiggle { 0%,100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }

/* Oppfoelging: trendlinje tegnes + punkt */
.cl-trend { stroke-dasharray: 46; stroke-dashoffset: 46; animation: cl-draw 2.8s ease-in-out infinite; }
@keyframes cl-draw { 0% { stroke-dashoffset: 46; } 55%,100% { stroke-dashoffset: 0; } }
.cl-dot { transform-box: fill-box; transform-origin: center; animation: cl-pop 2.8s ease-in-out infinite; }
@keyframes cl-pop { 0%,48% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }

/* Basic: hake tegnes */
.cl-check { stroke-dasharray: 34; stroke-dashoffset: 34; animation: cl-draw2 2.6s ease-in-out infinite; }
@keyframes cl-draw2 { 0%,12% { stroke-dashoffset: 34; } 55%,100% { stroke-dashoffset: 0; } }

/* Pro: voksende soeyler */
.cl-bar { transform-box: fill-box; transform-origin: center bottom; animation: cl-grow 2.4s ease-in-out infinite; }
.cl-bar2 { animation-delay: .25s; }
.cl-bar3 { animation-delay: .5s; }
@keyframes cl-grow { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Ultra: roterende tannhjul */
.cl-gear { transform-box: fill-box; transform-origin: center; animation: cl-spin 7s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cl-ill, .cl-ill * { animation: none !important; }
  .cl-trend, .cl-check { stroke-dashoffset: 0 !important; }
  .cl-dot { opacity: 1 !important; transform: none !important; }
}


/* =====================================================================
   CleanLoop 4-stegs illustrasjonskort — levende mini-scener
   ===================================================================== */
.cl-steps { list-style:none; margin:1rem 0 clamp(2rem,4vw,3rem); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.cl-card { position:relative; background:#12161a; border:1px solid #232a30; padding:2.5rem 1.15rem 1.5rem; text-align:center; }
.cl-badge { position:absolute; top:-17px; left:50%; transform:translateX(-50%); width:34px; height:34px; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:700; font-size:1rem; box-shadow:0 0 0 4px #12161a, 0 0 18px 2px rgba(182,189,106,.5); }
.cl-scene { height:150px; background:#0c0f12; border:1px solid #222a30; display:grid; place-items:center; overflow:hidden; margin-bottom:1.1rem; padding:.85rem; }
.cl-card h3 { color:#fff; font-size:1.15rem; margin-bottom:.35rem; }
.cl-card p { color:#9aa2a8; font-size:.9rem; line-height:1.5; }

/* 1 - Maaling: prøveliste som skannes */
.cl-mlist { width:100%; display:grid; gap:.42rem; }
.cl-mrow { display:flex; align-items:center; gap:.5rem; padding:.42rem .55rem; background:#161b20; border:1px solid #232a30; font-size:.74rem; color:#c4ccd2; animation:cl-scan 3s ease-in-out infinite; }
.cl-mrow b { margin-left:auto; color:#fff; }
.cl-pip { width:7px; height:7px; background:#3a434b; flex:none; }
.cl-mrow:nth-child(2){ animation-delay:1s; }
.cl-mrow:nth-child(3){ animation-delay:2s; }
@keyframes cl-scan { 0%,100%{ border-color:#232a30; box-shadow:none; } 12%,22%{ border-color:#b6bd6a; box-shadow:0 0 12px rgba(182,189,106,.35); } }

/* 2 - Vurdering: maaler + status */
.cl-assess { display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.cl-gaugesvg { width:112px; height:auto; fill:none; stroke:#2b333a; stroke-width:5; stroke-linecap:round; }
.cl-needle2 { stroke:#b6bd6a; stroke-width:4; transform-box:view-box; transform-origin:40px 42px; animation:cl-sweep2 3s ease-in-out infinite; }
@keyframes cl-sweep2 { 0%,100%{ transform:rotate(-42deg); } 50%{ transform:rotate(42deg); } }
.cl-pill { font-size:.74rem; font-weight:700; color:#12161a; background:#b6bd6a; padding:.28rem .75rem; animation:cl-pulse 2.4s ease-in-out infinite; }
@keyframes cl-pulse { 0%,100%{ box-shadow:0 0 6px rgba(182,189,106,.3); } 50%{ box-shadow:0 0 18px rgba(182,189,106,.7); } }

/* 3 - Tiltak: rutenett som lyser opp */
.cl-grid16 { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:130px; }
.cl-cell { aspect-ratio:1; background:#1a2127; border:1px solid #262e35; animation:cl-lite 2.8s ease-in-out infinite; }
@keyframes cl-lite { 0%,100%{ background:#1a2127; border-color:#262e35; box-shadow:none; } 32%,46%{ background:rgba(125,129,54,.55); border-color:#b6bd6a; box-shadow:0 0 10px rgba(182,189,106,.55); } }

/* 4 - Oppfoelging: trend + fremdrift */
.cl-follow { width:100%; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.cl-trendsvg { width:100%; height:auto; fill:none; stroke:#b6bd6a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cl-trend2 { stroke-dasharray:130; stroke-dashoffset:130; filter:drop-shadow(0 0 4px rgba(182,189,106,.5)); animation:cl-draw3 3s ease-in-out infinite; }
@keyframes cl-draw3 { 0%{ stroke-dashoffset:130; } 55%,100%{ stroke-dashoffset:0; } }
.cl-barwrap { width:84%; height:8px; background:#1a2127; border:1px solid #262e35; }
.cl-barfill { display:block; height:100%; width:20%; background:var(--brand); box-shadow:0 0 10px rgba(182,189,106,.5); animation:cl-fill 3s ease-in-out infinite; }
@keyframes cl-fill { 0%{ width:18%; } 55%,100%{ width:96%; } }
.cl-followlabel { font-size:.74rem; color:#c4ccd2; font-weight:600; }

@media (max-width:900px){ .cl-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cl-steps{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .cl-mrow,.cl-needle2,.cl-pill,.cl-cell,.cl-trend2,.cl-barfill { animation:none !important; }
  .cl-trend2 { stroke-dashoffset:0 !important; }
  .cl-barfill { width:96% !important; }
}


/* =====================================================================
   CleanLoop-steg: fargekoding per steg + pil-bar over (overstyrer olivenglod)
   ===================================================================== */
.cl-flow  { margin: 0 0 .9rem; gap: 1rem; }
.cl-steps { margin: 0 0 clamp(2rem,4vw,3rem); }
.cl-card  { padding: 1.2rem 1.15rem 1.4rem; }
.cl-card p { text-align: center; }

.cl-card--blue   { --c:#4a8fe0; --cg:rgba(74,143,224,.5); }
.cl-card--green  { --c:#4bbe52; --cg:rgba(75,190,82,.5); }
.cl-card--orange { --c:#f5902f; --cg:rgba(245,144,47,.5); }

.cl-needle2 { stroke: var(--c); }
.cl-assess svg circle { fill: var(--c); }
.cl-pill { background: var(--c); }
.cl-trendsvg { stroke: var(--c); }
.cl-trend2 { filter: drop-shadow(0 0 4px var(--cg)); }
.cl-barfill { background: var(--c); box-shadow: 0 0 10px var(--cg); }

@keyframes cl-scan  { 0%,100%{ border-color:#232a30; box-shadow:none; } 12%,22%{ border-color:var(--c); box-shadow:0 0 12px var(--cg); } }
@keyframes cl-lite  { 0%,100%{ background:#1a2127; border-color:#262e35; box-shadow:none; } 32%,46%{ background:var(--cg); border-color:var(--c); box-shadow:0 0 10px var(--cg); } }
@keyframes cl-pulse { 0%,100%{ box-shadow:0 0 6px var(--cg); } 50%{ box-shadow:0 0 18px var(--c); } }


/* =====================================================================
   CleanLoop-steg: lyst tema (hvite kort i stedet for moerke)
   ===================================================================== */
.cl-card { background:#fff; border-color:var(--line); }
.cl-card p { color:var(--muted); }
.cl-scene { background:var(--mist); border-color:var(--line); }
.cl-mrow { background:#fff; border-color:var(--line); color:var(--text); }
.cl-mrow b { color:var(--ink); }
.cl-pip { background:var(--line-2); }
.cl-gaugesvg { stroke:var(--line-2); }
.cl-cell { background:#fff; border-color:var(--line); }
.cl-barwrap { background:#fff; border-color:var(--line); }
.cl-followlabel { color:var(--ink); }

@keyframes cl-scan { 0%,100%{ border-color:var(--line); box-shadow:none; } 12%,22%{ border-color:var(--c); box-shadow:0 0 12px var(--cg); } }
@keyframes cl-lite { 0%,100%{ background:#fff; border-color:var(--line); box-shadow:none; } 32%,46%{ background:var(--c); border-color:var(--c); box-shadow:0 0 10px var(--cg); } }


/* =====================================================================
   CleanFlue - fjernvarmeanlegg skjema (levende SVG)
   ===================================================================== */
.cf-diagram { background:#fff; border:1px solid var(--line); padding:clamp(1rem,3vw,2.2rem); margin-bottom:clamp(1.5rem,3vw,2.4rem); }
.cf-svg { width:100%; height:auto; display:block; }
.cf-label { font-family:"Figtree",system-ui,sans-serif; font-weight:700; font-size:15px; fill:#2f3a44; }

@keyframes cf-flame { 0%,100%{ transform:scaleY(1) translateY(0); opacity:.92; } 50%{ transform:scaleY(1.15) translateY(-3px); opacity:1; } }
.cf-flame { transform-box:fill-box; transform-origin:bottom center; }
.cf-flame1 { animation:cf-flame 1.1s ease-in-out infinite; }
.cf-flame2 { animation:cf-flame 1.45s ease-in-out infinite; }

@keyframes cf-flow { 0%{ transform:translateX(0); opacity:0; } 6%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateX(484px); opacity:0; } }
.cf-flow { animation:cf-flow 4s linear infinite; }
.cf-flow2 { animation-delay:1s; } .cf-flow3 { animation-delay:2s; } .cf-flow4 { animation-delay:3s; }

@keyframes cf-ash { 0%{ transform:translateY(-4px); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(22px); opacity:0; } }
.cf-ash { animation:cf-ash 2s ease-in infinite; }
.cf-ash2 { animation-delay:.7s; } .cf-ash3 { animation-delay:1.3s; }

@keyframes cf-out { 0%{ transform:translateY(0) scale(1); opacity:0; } 30%{ opacity:.6; } 100%{ transform:translateY(-30px) scale(1.5); opacity:0; } }
.cf-out { transform-box:fill-box; transform-origin:center; animation:cf-out 2.6s ease-out infinite; }
.cf-out2 { animation-delay:.9s; } .cf-out3 { animation-delay:1.7s; }

@keyframes cf-shimmer { 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.cf-media { animation:cf-shimmer 2.2s ease-in-out infinite; }

.cf-legend { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.cf-legend li { border-top:3px solid var(--line-2); padding-top:.85rem; font-size:.92rem; color:var(--muted); line-height:1.55; }
.cf-legend b { display:block; color:var(--ink); font-family:"Figtree",system-ui,sans-serif; font-size:1.05rem; margin-bottom:.25rem; }
.cf-legend li:nth-child(1){ border-top-color:#8aa0ab; }
.cf-legend li:nth-child(2){ border-top-color:#7fb0c4; }
.cf-legend li:nth-child(3){ border-top-color:#8bc34a; }
.cf-legend li:nth-child(4){ border-top-color:#ef7d1a; }

@media (max-width:760px){ .cf-legend{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .cf-legend{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .cf-flame,.cf-flow,.cf-ash,.cf-out,.cf-media { animation:none !important; }
  .cf-flow,.cf-ash,.cf-out { opacity:0 !important; }
}


/* =====================================================================
   CleanFlue skjema v2 - naermere referansen (rundet, blaagraa, tittel)
   ===================================================================== */
.cf-diagram { background:#fff; border:none; padding:clamp(.4rem,1.5vw,1rem); }
.cf-title { font-family:"Figtree",system-ui,sans-serif; font-weight:800; font-size:34px; fill:#37474f; }
.cf-label { fill:#37474f; }
@keyframes cf-flow { 0%{ transform:translateX(0); opacity:0; } 6%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateX(452px); opacity:0; } }


/* CleanFlue-skjema: sentrert overskrift */
#cleanflue-anlegg .section-head { text-align:center; margin-inline:auto; max-width:820px; }


/* =====================================================================
   Om oss - team, sitat, partnere  +  CleanFlue-note
   ===================================================================== */
.team { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.team__card { background:#fff; border:1px solid var(--line); padding:1.6rem; display:flex; flex-direction:column; }
.team__avatar { width:60px; height:60px; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:"Figtree",system-ui,sans-serif; font-weight:800; font-size:1.25rem; margin-bottom:1.1rem; }
.team__name { font-family:"Figtree",system-ui,sans-serif; font-weight:700; font-size:1.2rem; color:var(--ink); }
.team__role { color:var(--brand-dark); font-weight:600; font-size:.92rem; margin:.15rem 0 1rem; }
.team__contact { display:grid; gap:.45rem; margin-top:auto; }
.team__contact a { display:inline-flex; align-items:center; gap:.55rem; color:var(--ink); font-size:.96rem; }
.team__contact a:hover { color:var(--brand-dark); }
.team__contact svg { width:16px; height:16px; color:var(--brand); flex:none; }
.team__note { margin-top:1rem; color:var(--muted-2); font-size:.9rem; font-style:italic; }
.team-partners { margin-top:clamp(2rem,4vw,3rem); background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand); padding:clamp(1.4rem,3vw,2rem); }
.team-partners h3 { font-size:1.3rem; margin-bottom:.8rem; }
.team-partners p { color:var(--muted); }
.team-partners p + p { margin-top:.8rem; }
@media (max-width:900px){ .team{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .team{ grid-template-columns:1fr; } }

.pullquote { max-width:880px; margin-inline:auto; text-align:center; }
.pullquote > svg { width:46px; height:46px; color:var(--brand); display:block; margin:0 auto 1rem; }
.pullquote blockquote { font-family:"Figtree",system-ui,sans-serif; font-weight:700; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.3; letter-spacing:-.01em; color:#fff; }
.pullquote figcaption { margin-top:1.3rem; color:#b6bd6a; font-weight:600; }

.cf-note { max-width:820px; margin:0 auto clamp(1.4rem,3vw,2rem); text-align:center; color:var(--muted); font-size:1rem; line-height:1.6; }


/* Kvadratisk bilderamme (Kjeler - komplett anlegg) */
.about__media--square { aspect-ratio: 1 / 1; }
.about__media--square img { width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; }


/* Om oss - verdier / ansvarlig naeringsliv */
.policy { max-width: 880px; }
.policy p { color: var(--muted); }
.policy p + p { margin-top: 1rem; }
.value-chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.value-chips li { background: var(--brand); color: #fff; font-weight: 700; padding: .5rem 1.15rem; font-size: .98rem; }

/* Team-kort: ingen ikoner, litt strammere kontaktlinjer */
.team__contact a { gap: 0; font-size: .95rem; color: var(--muted); }
.team__contact a:hover { color: var(--brand-dark); }


/* Agentur/partner-stripe (Kjeler) */
.partner-strip { display:flex; align-items:center; justify-content:space-between; gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand); padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.2rem,3vw,2rem); }
.partner-strip__text p { color:var(--muted); margin-top:.55rem; max-width:56ch; }
.partner-strip__text b { color:var(--ink); }
.partner-strip__logo img { max-height:60px; width:auto; }
@media (max-width:700px){ .partner-strip{ flex-direction:column; align-items:flex-start; } }