/* ============================================================
   OLIVA PARK — designsystem
   1. Tokens          6. Hero / page-hero
   2. Base            7. Innholdskomponenter
   3. Layout          8. Kort og grids
   4. Header/nav      9. Galleri og lightbox
   5. Knapper        10. Kontakt, CTA, footer
   ============================================================ */

/* ---------- 1. TOKENS ----------
   Palett: en park i sol. Fargene harmonerer fordi de faktisk opptrer
   sammen i samme scene: gress, himmel, sollys, jord.
   Dypt lov er ankeret, oransje er merkevaren og handlingsfargen.
   ------------------------------------------------------------ */
:root {
  /* Dypt lovverk - anker */
  --forest: #24512f;
  --forest-deep: #1a3d23;
  --forest-soft: #3a6b42;

  /* Gress */
  --moss: #41702a;          /* tekstsikker gronn pa lys flate: 5.63:1 */
  --moss-light: #a5d16f;    /* aksent pa mork flate: 5.21:1 */
  --grass: #7cb342;         /* kun flater og dekor, aldri liten tekst */
  --leaf: #c5e1a5;          /* sollyst gress - fargeblokk */
  --leaf-soft: #dcecc7;

  /* Sollys */
  --sun: #f6c445;
  --sun-light: #fce9b6;     /* solflekk - fargeblokk */
  --blossom: #fce9b6;       /* alias: erstatter den gamle rosa */
  --blossom-soft: #fdf3d8;

  /* Himmel */
  --sky-blue: #8ecae6;
  --sky-light: #d6ecf7;     /* fargeblokk */

  /* Oransje - handlingsfarge */
  --orange: #e0722a;
  --orange-hover: #cf661f;
  --orange-text: #9e5323;
  --orange-deep: #9e5323;

  /* Systemfarger */
  --error: #8f2f21;
  --error-bg: #fbeae6;
  --error-ring: rgba(143, 47, 33, 0.16);

  /* Noytraler */
  --bone: #fdfaf2;
  --white: #ffffff;
  --ink: #15211a;
  --ink-soft: #566055;
  --line: #e7e1d3;

  /* Pa mork bakgrunn */
  --on-dark: #f7f4ea;
  --on-dark-soft: #c2d6b4;

  /* Bakoverkompatible aliaser */
  --spruce: var(--forest);
  --spruce-deep: var(--forest-deep);
  --spruce-soft: var(--forest-soft);
  --pine: var(--forest);
  --pine-deep: var(--forest-deep);
  --pine-soft: var(--forest-soft);
  --sage: var(--leaf);
  --mint: var(--leaf);
  --sand: var(--sun-light);
  --sky: var(--sky-light);
  --clay: var(--orange);
  --clay-deep: var(--orange-deep);
  --fern: var(--moss);
  --fern-light: var(--moss-light);
  --on-pine: var(--on-dark);
  --on-pine-soft: var(--on-dark-soft);

  /* Typografi */
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  /* Rytme */
  --section-y: clamp(48px, 8vw, 96px);
  --gap: clamp(14px, 2vw, 20px);
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
ul { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(1.8rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h3 { font-size: 1.08rem; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 3. LAYOUT ---------- */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

.section { padding: var(--section-y) 0; }
.section-tight { padding: clamp(32px, 5vw, 56px) 0; }

/* Fargeblokker — gir siden rytme */
.section-leaf { background: var(--leaf); }
.section-blossom { background: var(--blossom); }
.section-mint { background: var(--leaf); }
.section-sky { background: var(--blossom); }
.section-sand { background: var(--blossom); }
.section-blush { background: var(--blush); }
.section-tint { background: var(--mint); }
.section-white { background: var(--white); }

.section-pine {
  background: var(--pine);
  color: var(--on-pine);
}
.section-pine h1,
.section-pine h2,
.section-pine h3 { color: var(--on-pine); }
.section-pine p { color: var(--on-pine-soft); }

section[id] { scroll-margin-top: 88px; }

/* Scroll-animasjon */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(n+5) { transition-delay: 0.3s; }

/* ---------- 4. HEADER / NAV ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pine);
  color: var(--on-pine);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 5vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-logo { height: 20px; width: auto; }

nav.links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
}
.nav-item { position: relative; }

nav.links a.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--on-pine-soft);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
nav.links a.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1.5px;
  background: var(--fern-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}
nav.links a.nav-link:hover,
nav.links a.nav-link:focus-visible,
nav.links a.nav-link[aria-current="page"] { color: var(--on-pine); }
nav.links a.nav-link:hover::after,
nav.links a.nav-link:focus-visible::after,
nav.links a.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.nav-item:hover .caret,
.nav-item:focus-within .caret { transform: rotate(225deg) translateY(2px); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 226px;
  padding: 8px;
  display: grid;
  gap: 2px;
  background: var(--white);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px -18px rgba(21, 25, 26, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
}
.dropdown a:hover,
.dropdown a:focus-visible { background: var(--leaf-soft); color: var(--forest); }

.nav-toggle {
  display: none;
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle .bar {
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-pine);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle .bar:nth-child(1) { top: 12px; }
.nav-toggle .bar:nth-child(2) { top: 17px; }
.nav-toggle .bar:nth-child(3) { top: 22px; }
.nav-toggle.open .bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--pine);
  padding: 4px clamp(20px, 5vw, 48px) 24px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 14px 2px;
  text-decoration: none;
  color: var(--on-pine);
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(244, 242, 236, 0.14);
}
.mobile-menu .mobile-sub { display: flex; flex-direction: column; padding-left: 14px; }
.mobile-menu .mobile-sub a {
  font-size: 0.92rem;
  color: var(--on-pine-soft);
  padding: 11px 2px;
}

@media (max-width: 860px) {
  nav.links { display: none; }
  .nav-toggle { display: inline-block; }
}
@media (min-width: 861px) {
  .mobile-menu { display: none !important; }
}

/* ---------- 5. KNAPPER ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  background: var(--orange);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--orange-hover); transform: translateY(-1px); }

.btn-outline {
  display: inline-block;
  padding: 11.5px 24px;
  background: transparent;
  color: var(--on-pine);
  border: 1.5px solid rgba(244, 242, 236, 0.5);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: rgba(244, 242, 236, 0.12);
  border-color: var(--on-pine);
  transform: translateY(-1px);
}

/* ---------- 6. HERO / PAGE-HERO ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(400px, 56vh, 560px);
  overflow: hidden;
  background: var(--pine);
  color: var(--on-pine);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 44, 36, 0.55) 0%, rgba(22, 44, 36, 0.62) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 48px);
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 600;
  color: var(--on-pine);
  max-width: 17ch;
}
.hero-copy p {
  margin-top: 16px;
  max-width: 44ch;
  color: rgba(244, 242, 236, 0.86);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}
.hero-actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Fargeblokk-hero på undersider.
   Var edge-to-edge uten avrunding - eneste flate som ikke fulgte
   panel-spraket resten av siden bruker na. */
.page-hero {
  background: var(--leaf);
  padding: clamp(36px, 6vw, 64px) clamp(6px, 1vw, 10px) clamp(36px, 6vw, 60px);
  margin: clamp(10px, 1.6vw, 18px);
  border-radius: 28px;
}
.page-hero-sky { background: var(--blossom); }
.page-hero-sand { background: var(--blossom); }
.page-hero-blossom { background: var(--blossom); }
.page-hero-leaf { background: var(--leaf); }
.page-hero h1 { margin-top: 10px; }
.page-hero .lede {
  margin-top: 16px;
  max-width: 56ch;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  color: var(--ink-soft);
}

/* Bilde-hero (tjenester, om oss, prosjekt).
   margin-top: sto tidligere helt uten luft mot header, fordi <main>
   ikke har noen egen topp-avstand noe sted paa siden. */
.service-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(240px, 34vw, 400px);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--pine);
  color: var(--on-pine);
  margin-top: clamp(10px, 1.6vw, 18px);
}
.service-hero .hero-bg img { object-position: center 45%; }
.service-hero .hero-bg::after {
  background: linear-gradient(0deg, rgba(22, 44, 36, 0.85) 0%, rgba(22, 44, 36, 0.25) 60%, rgba(22, 44, 36, 0.1) 100%);
}
.service-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(24px, 4vw, 40px);
}
.service-hero h1 { color: var(--on-pine); font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.service-hero .breadcrumb { color: rgba(244, 242, 236, 0.75); }
.service-hero .breadcrumb a { color: inherit; }
.service-tag-num {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--fern-light);
}

/* ---------- 7. INNHOLDSKOMPONENTER ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fern);
}
.eyebrow::before { content: ""; width: 16px; height: 1.5px; background: currentColor; }
.eyebrow-on-dark { color: var(--fern-light); }

.breadcrumb {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-text); }
.prosjekt-breadcrumb { margin-bottom: 14px; }

.label {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fern);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(24px, 4vw, 36px);
}
.see-all {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orange-text);
}
.see-all:hover { color: var(--orange-deep); }
/* Pa pastellblokker har oransje tekst for lav kontrast (3.5-3.8:1).
   Der brukes dyp gronn i stedet: 7.0-7.6:1. */
.section-blossom .see-all,
.section-leaf .see-all,
.page-hero .see-all,
.section-blossom .service-row .num,
.section-leaf .service-row .num { color: var(--forest); }
.section-blossom .fagstripe-links a:hover,
.fagstripe-links a:hover { color: var(--forest); border-bottom-color: var(--forest); }

.lede { color: var(--ink-soft); }

/* To-kolonners intro */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 56px);
  align-items: start;
}
.intro-grid h2 { margin-top: 10px; }
.intro-grid p { margin-top: 0; color: var(--ink-soft); max-width: 56ch; }

/* Bilde + tekst */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.detail-media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy { display: flex; flex-direction: column; gap: 14px; }
.detail-copy p { color: var(--ink-soft); }
.detail-list-wrap { display: flex; flex-direction: column; gap: 12px; }
.detail-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fern-light);
}

/* ---------- 8. KORT OG GRIDS ---------- */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.ref-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ref-card:hover, .ref-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(21, 25, 26, 0.45);
}
.ref-card-media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.ref-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.ref-card:hover img, .ref-card:focus-visible img { transform: scale(1.05); }
.ref-caption { padding: 16px 18px 18px; }
.ref-caption .cat {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-text);
  line-height: 1.45;
}
.ref-caption .title {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.ref-caption .loc { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ink-soft); }

/* Tjenestekort med bilde */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.media-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.media-card:hover, .media-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(21, 25, 26, 0.45);
}
.media-card-img { display: block; aspect-ratio: 4/3; overflow: hidden; }
.media-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.media-card:hover .media-card-img img { transform: scale(1.05); }
.media-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  flex-grow: 1;
}
.media-card-body .num {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange-text);
}
.media-card-body p { font-size: 0.9rem; color: var(--ink-soft); flex-grow: 1; }
.media-card-body .arrow { font-size: 0.86rem; font-weight: 600; color: var(--fern); }
.media-card:hover .arrow { color: var(--orange-text); }

/* Tekstkort */
.simple-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.simple-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.simple-card:hover, .simple-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(21, 25, 26, 0.45);
}
.simple-card .num {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange-text);
}
.simple-card h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.simple-card p { font-size: 0.95rem; color: var(--ink-soft); }
.simple-card .arrow { font-size: 0.86rem; font-weight: 600; color: var(--fern); }
.simple-card:hover .arrow { color: var(--orange-text); }
.simple-card .tags {
  margin-top: 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.simple-card .tags li {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--pine);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Prosess (mørk seksjon) */
.process-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.process-head h2 { margin-top: 10px; max-width: 20ch; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.process-item { display: flex; flex-direction: column; gap: 6px; }
.process-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  color: var(--fern-light);
}
.process-item .num {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fern-light);
}
.process-item h3 { color: var(--on-pine); }
.process-item p { font-size: 0.9rem; color: var(--on-pine-soft); }

/* Andre prosjekter / tjenester */
.other-services {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid var(--line);
}
.other-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.other-links a {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--pine);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.other-links a:hover { background: var(--pine); color: var(--on-pine); }
.other-grid { margin-top: 18px; }

/* Prosjektside — intro */
.prosjekt-intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 48px);
}
.prosjekt-desc { flex: 1 1 340px; max-width: 60ch; color: var(--ink-soft); font-size: 1.02rem; }
.prosjekt-meta { display: flex; flex-direction: column; gap: 16px; }
.prosjekt-meta-item { display: flex; flex-direction: column; gap: 3px; }
.prosjekt-meta-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fern);
}
.prosjekt-meta-value { font-weight: 600; font-size: 0.96rem; max-width: 26ch; }

/* ---------- 9. GALLERI OG LIGHTBOX ---------- */
.service-gallery { margin-top: clamp(32px, 5vw, 48px); }
.service-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.service-gallery-grid .g-item {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.service-gallery-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.service-gallery-grid .g-item:hover img,
.service-gallery-grid .g-item:focus-visible img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 56px);
  background: rgba(16, 24, 20, 0.94);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(244, 242, 236, 0.3);
  background: rgba(244, 242, 236, 0.1);
  color: var(--on-pine);
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(244, 242, 236, 0.22); }
.lightbox-close {
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 42px;
  height: 42px;
  font-size: 1.3rem;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}
.lightbox-prev { left: clamp(8px, 3vw, 28px); }
.lightbox-next { right: clamp(8px, 3vw, 28px); }

/* ---------- 10. KONTAKT, CTA, FOOTER ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.contact-layout .intro h2 { margin-bottom: 10px; }
.contact-layout .intro p { color: var(--ink-soft); }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fern);
}
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row textarea { min-height: 140px; resize: vertical; }
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--fern);
  box-shadow: 0 0 0 3px rgba(92, 138, 112, 0.18);
}
.contact-form .btn { align-self: flex-start; }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-md);
  background: var(--white);
}
.contact-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fern);
  margin-bottom: 4px;
}
.contact-value { font-size: 1rem; font-weight: 500; text-decoration: none; }
a.contact-value:hover { color: var(--orange-text); }

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--r-lg);
  background: var(--sand);
}
.cta-band h2 { max-width: 22ch; }
.cta-band p { margin-top: 8px; max-width: 46ch; color: var(--ink-soft); }

footer.site {
  /* Ingen margin-top: den skapte en beige stripe mellom en fargeblokk
     og footeren. Footerens egen toppadding gir luften som trengs. */
  padding: clamp(48px, 6vw, 72px) 0 clamp(24px, 3vw, 32px);
  background: var(--pine);
  color: var(--on-pine);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 24px;
}
.footer-brand { display: inline-flex; align-items: center; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer.site nav a {
  text-decoration: none;
  color: var(--on-pine-soft);
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
footer.site nav a:hover { color: var(--on-pine); }
.footer-bottom {
  padding-top: 20px;
  border-top: 1px solid rgba(244, 242, 236, 0.15);
  font-size: 0.8rem;
  color: var(--on-pine-soft);
}

/* ---------- RESPONSIVT ---------- */
@media (max-width: 1000px) {
  .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-grid,
  .detail-grid,
  .simple-card-grid,
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ref-grid,
  .teaser-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cta-band { padding: 26px 22px; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 1.35rem; }
}

/* ============================================================
   11. NYE LAYOUTKOMPONENTER
   ============================================================ */

/* --- Delt hero: tekstpanel + bilde --- */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: clamp(440px, 68vh, 640px);
  background: var(--spruce);
  color: var(--on-dark);
}
.hero-panel {
  display: flex;
  align-items: center;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4.5vw, 64px);
}
.hero-panel-inner { max-width: 520px; margin-left: auto; width: 100%; }
.hero-panel h1 {
  margin-top: 16px;
  font-size: clamp(1.95rem, 3.9vw, 3.1rem);
  color: var(--on-dark);
  max-width: 15ch;
}
.hero-panel p {
  margin-top: 16px;
  max-width: 40ch;
  color: var(--on-dark-soft);
  font-size: clamp(0.95rem, 1.5vw, 1.04rem);
}
.hero-media { position: relative; overflow: hidden; min-height: 280px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Fagområde-stripe rett under hero --- */
.fagstripe { background: var(--leaf); }
.fagstripe-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 3vw, 36px);
  padding: 18px 0;
}
.fagstripe-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}
.fagstripe-links { display: flex; flex-wrap: wrap; gap: clamp(10px, 2.4vw, 26px); }
.fagstripe-links a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.fagstripe-links a:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* --- Tjenester som nummerert redaksjonell liste --- */
.service-list { border-top: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 34px;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding: clamp(20px, 3vw, 30px) clamp(0px, 1vw, 12px);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s ease;
}
.service-row:hover, .service-row:focus-visible { background: var(--blossom-soft); }
.service-row .num {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--moss);
}
.service-row h3 { font-size: clamp(1.15rem, 2.3vw, 1.6rem); font-weight: 600; }
.service-row p { color: var(--ink-soft); font-size: 0.95rem; }
.service-row .go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--moss);
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.service-row:hover .go {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  transform: translateX(3px);
}

/* --- Fremhevet prosjekt --- */
.ref-feature {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  margin-bottom: var(--gap);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ref-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(21, 25, 26, 0.5); }
.ref-feature-media { aspect-ratio: 21/9; overflow: hidden; }
.ref-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ref-feature:hover .ref-feature-media img { transform: scale(1.04); }
.ref-feature-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px);
}
.ref-feature-body .cat {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-text);
}
.ref-feature-body .loc { display: block; margin-top: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.ref-feature-body h3 { margin-top: 6px; font-size: clamp(1.25rem, 2.6vw, 1.8rem); }
.ref-feature .go-text { font-size: 0.9rem; font-weight: 600; color: var(--orange-text); white-space: nowrap; }

/* --- Prosess som tidslinje --- */
.process-grid .process-item { position: relative; padding-top: 30px; }
.process-grid .process-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: calc(-1 * clamp(20px, 3vw, 32px));
  height: 1px;
  background: rgba(243, 240, 231, 0.22);
}
.process-grid .process-item:last-child::before { right: 0; }
.process-grid .process-item::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--moss-light);
}
.process-item .process-icon { display: none; }

/* --- Fullbredde CTA --- */
.cta-full { background: var(--leaf); color: var(--ink); padding: clamp(48px, 7vw, 88px) 0; }
.cta-full-dark { background: var(--forest); color: var(--on-dark); }
.cta-full-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px);
}
.cta-full h2 { color: var(--ink); font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 17ch; }
.cta-full p { margin-top: 12px; max-width: 46ch; color: var(--ink-soft); }
.cta-full-dark h2 { color: var(--on-dark); }
.cta-full-dark p { color: var(--on-dark-soft); }

/* --- Utvidet footer --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(28px, 4vw, 40px);
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss-light);
  margin-bottom: 14px;
}
.footer-col nav { display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-col span { color: var(--on-dark-soft); font-size: 0.92rem; text-decoration: none; }
.footer-col a:hover { color: var(--on-dark); }
.footer-tagline { margin-top: 16px; max-width: 34ch; color: var(--on-dark-soft); font-size: 0.92rem; }

/* --- Responsivt for nye komponenter --- */
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { order: -1; aspect-ratio: 16/10; min-height: 0; }
  .hero-panel { padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 48px) clamp(34px, 6vw, 48px); }
  .hero-panel-inner { margin-left: 0; max-width: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .service-row { grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 14px; align-items: start; }
  .service-row h3 { grid-column: 1; grid-row: 1; }
  .service-row .go { grid-column: 2; grid-row: 1; width: 32px; height: 32px; }
  .service-row p { grid-column: 1 / 3; grid-row: 2; }
  .ref-feature-media { aspect-ratio: 4/3; }
  .process-grid .process-item::before { right: 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}



/* ---------- Skjematilstander: hint, feil, status ---------- */
.form-hint { font-size: 0.84rem; color: var(--ink-soft); }
.form-error { font-size: 0.84rem; font-weight: 500; color: var(--error); }
.form-row input.is-invalid,
.form-row textarea.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-ring);
}
.form-status {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
}
.form-status.is-error { background: var(--error-bg); color: var(--error); }
.form-status.is-ok { background: var(--leaf-soft); color: var(--forest); }

/* ============================================================
   13. HARMONISERING: seksjonsomfattende tokens
   Naar en seksjon har farge, definerer den sine egne verdier for
   skillelinje, dempet tekst og kontrollkant. Alle komponenter inni
   bruker allerede var(--line) og var(--ink-soft), sa de tilpasser
   seg automatisk i stedet for a dra med seg beige/gronngra toner
   som ikke horer hjemme pa flaten.
   ============================================================ */

/* Rosa blokk: varme toner. Kjolig gronngra tekst pa varm rosa
   gav 4.07:1 og sa skitten ut. Varm brun gir 5.08:1. */
.section-blossom,
.page-hero-blossom {
  --line: #e6cf95;
  --ink-soft: #6b5520;
  --surface: #fdf3d8;
  --surface-strong: #fef7e6;
}

.section-sky-light {
  --line: #a9d4e8;
  --ink-soft: #3d5a66;
  --surface: #e8f4fb;
  --surface-strong: #f1f9fd;
}

/* Lysegronn blokk: gronne toner */
.section-leaf,
.page-hero,
.page-hero-leaf,
.cta-full {
  --line: #a0bd85;
  --ink-soft: #46583e;
  --surface: #cbe0b8;
  --surface-strong: #dbeacd;
}

/* Beige grunnflate beholder sine egne */
.section,
.section-white { --surface: var(--white); }

/* Kontrollkanter folger seksjonen i stedet for global beige */
.service-row .go { border-color: var(--line); color: var(--forest); }
.service-row:hover, .service-row:focus-visible { background: var(--surface-strong); }
.service-row:hover .go { background: var(--orange); border-color: var(--orange); color: var(--ink); }

/* Fagstripen horer til hero-en, ikke til innholdet under.
   Dempet fra egen lysegronn blokk til en morkere hylle i samme
   familie som hero-panelet: farre fargebytter i forste skjermbilde. */
.fagstripe {
  background: var(--forest-deep);
  color: var(--on-dark);
  border-top: 1px solid rgba(246, 243, 236, 0.1);
}
.fagstripe-inner {
  /* padding-block, ikke shorthand: shorthand nullet sidepaddingen
     fra .wrap og teksten la inntil skjermkanten */
  padding-block: 18px;
  padding-inline: clamp(20px, 5vw, 48px);
  row-gap: 10px;
}
.fagstripe-label { color: var(--moss-light); }
.fagstripe-links a { color: var(--on-dark-soft); }
.fagstripe-links a:hover,
.fagstripe-links a:focus-visible { color: var(--on-dark); border-bottom-color: var(--moss-light); }

/* Seksjonshode: mer luft mellom overskrift og lenke naar den brytes */
.section-head { row-gap: 6px; }

/* Typografisk hierarki: tydeligere sprang mellom seksjonstittel og
   radtittel, de la for taett for */
.section-head h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); }
.service-row h3 { font-size: clamp(1.05rem, 2vw, 1.4rem); }

@media (max-width: 560px) {
  .fagstripe-inner { padding-block: 16px; padding-inline: clamp(20px, 5vw, 48px); gap: 6px 18px; }
  .section-head { row-gap: 10px; }
}

/* Fremhevet prosjekt skal lese som hovedsak, ikke som enda et kort.
   Pa mobil kollapser begge til full bredde, sa storrelse alene skiller
   dem ikke. Lysegront brodtekstfelt gir skillet uten a bryte paletten. */
.ref-feature {
  --line: #a0bd85;
  --ink-soft: #46583e;
}
.ref-feature-body { background: var(--leaf-soft); }
/* Tekst-oransje faller til 4.26:1 pa lysegront. Kategorien bruker
   dyp gronn her i stedet. */
.ref-feature-body .cat { color: var(--forest); }
.ref-feature .go-text { color: var(--forest); }
.ref-feature-body h3 { font-size: clamp(1.35rem, 3vw, 2rem); }




/* ============================================================
   14. LYS MERKEVARE: pastell dominerer, morkegronn rammer inn
   Tidligere var hero-panelet, fagstripen og prosess-seksjonen alle
   morkegronne. Sammen med header og footer ga det fem morke flater
   og et naer-svart forsteinntrykk. For et firma som leverer gronne
   uterom skal pastellene baere siden. Morkegronn brukes na kun som
   ramme oppe og nede.
   ============================================================ */

/* --- Hero: lysegront panel i stedet for morkegront --- */
.hero-split { background: var(--leaf); color: var(--ink); }
.hero-panel { --ink-soft: #46583e; }
.hero-panel h1 { color: var(--ink); }
.hero-panel p { color: #46583e; }
.hero-panel .eyebrow,
.hero-panel .eyebrow-on-dark { color: var(--forest); }
.hero-panel .eyebrow::before,
.hero-panel .eyebrow-on-dark::before { background: var(--forest); }

/* Outline-knapp trenger mork variant naar den star pa lys flate */
.hero-panel .btn-outline,
.hero-intro .btn-outline,
.section-leaf .btn-outline,
.section-pine .btn-outline,
.cta-full .btn-outline,
.section-blossom .btn-outline {
  color: var(--forest);
  border-color: rgba(35, 64, 47, 0.45);
}
.hero-panel .btn-outline:hover,
.hero-intro .btn-outline:hover,
.section-leaf .btn-outline:hover,
.section-pine .btn-outline:hover,
.cta-full .btn-outline:hover,
.section-blossom .btn-outline:hover {
  background: rgba(35, 64, 47, 0.08);
  border-color: var(--forest);
}

/* --- Fagstripe: horer fortsatt til hero, men i samme lyse familie --- */
.fagstripe {
  background: var(--leaf);
  color: var(--ink);
  border-top: 1px solid rgba(35, 64, 47, 0.18);
}
.fagstripe-label { color: var(--forest); }
.fagstripe-links a { color: var(--ink); }
.fagstripe-links a:hover,
.fagstripe-links a:focus-visible { color: var(--forest); border-bottom-color: var(--forest); }

/* --- Prosess: lysegronn seksjon i stedet for hel mork blokk --- */
.section-pine {
  background: var(--leaf);
  color: var(--ink);
  --line: #a0bd85;
  --ink-soft: #46583e;
}
.section-pine h1,
.section-pine h2,
.section-pine h3 { color: var(--ink); }
.section-pine p { color: #46583e; }
.section-pine .eyebrow-on-dark { color: var(--forest); }
.section-pine .eyebrow-on-dark::before { background: var(--forest); }
.process-item .num { color: var(--forest); }
.process-item h3 { color: var(--ink); }
.process-item p { color: #46583e; }
.process-grid .process-item::before { background: rgba(35, 64, 47, 0.28); }
.process-grid .process-item::after { background: var(--forest); }

/* --- CTA: rosa, ikke enda en gronn eller mork flate --- */
.cta-full {
  background: var(--blossom);
  --line: #ddb0a1;
  --ink-soft: #6d4c43;
}
.cta-full h2 { color: var(--ink); }
.cta-full p { color: #6d4c43; }

/* ============================================================
   15. KONTAKTSIDE
   ============================================================ */
.contact-hero { min-height: clamp(280px, 42vh, 420px); }
.contact-hero .hero-panel-inner h1 { margin-top: 12px; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.contact-main h2 { margin-bottom: 8px; }
.contact-main > p { color: var(--ink-soft); max-width: 52ch; }

.contact-aside { display: flex; flex-direction: column; gap: var(--gap); }
.contact-card {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-md);
  background: var(--white);
}
.contact-card h3 {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 16px;
}
.contact-card--leaf { background: var(--leaf); --ink-soft: #46583e; }
.contact-card--leaf h3 { color: var(--forest); }

/* Direkte kontakt */
.contact-lines { display: flex; flex-direction: column; gap: 18px; }
.contact-line { display: flex; flex-direction: column; gap: 2px; }
.contact-line .k {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.contact-line .v {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  word-break: break-word;
}
a.contact-line-link { text-decoration: none; }
a.contact-line-link .k { text-decoration: none; }
a.contact-line-link .v { color: var(--forest); }
a.contact-line-link:hover .v,
a.contact-line-link:focus-visible .v { color: var(--orange-text); text-decoration: underline; }

/* Hva skjer videre */
.next-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: step; }
.next-steps li {
  position: relative;
  padding-left: 40px;
  counter-increment: step;
}
.next-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-steps .step-title { display: block; font-weight: 650; font-size: 0.98rem; }
.next-steps .step-body { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--ink-soft); }

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

/* ============================================================
   16. GRONT-RUTENETT
   Beplantning og grontanlegg tidlig pa forsiden, sa park-inntrykket
   kommer med en gang og ikke bare gjennom grunnarbeidsbilder.
   ============================================================ */
.gront-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(32px, 5vw, 52px);
}
.gront-item { margin: 0; }
.gront-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform 0.5s ease;
}
.gront-item:hover img { transform: scale(1.03); }
.gront-item figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--moss);
}
@media (max-width: 720px) {
  /* To i forste rad, det tredje over full bredde. Alle tre vises,
     i stedet for a skjule ett slik at mobilbrukere gikk glipp av det. */
  .gront-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gront-item img { aspect-ratio: 1/1; }
  .gront-item:last-child { grid-column: 1 / -1; }
  .gront-item:last-child img { aspect-ratio: 16/9; }
  .gront-item figcaption { font-size: 0.68rem; }
}

/* ============================================================
   17. LIV: kurver, bevegelse og sollys
   Siden var stablede rektangler med harde kanter. En park er
   organisk, sa fargeblokkene kurver na opp over hverandre som
   myke koller, bildene far portalform, og lyset beveger seg.
   All bevegelse slas av under prefers-reduced-motion.
   ============================================================ */

/* --- Myke koller mellom fargeblokker --- */
.section-curve {
  position: relative;
  z-index: 1;
  border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0;
  margin-top: calc(-1 * clamp(20px, 3.5vw, 44px));
}
.section-curve-both {
  border-radius: clamp(28px, 5vw, 64px);
  margin-bottom: calc(-1 * clamp(20px, 3.5vw, 44px));
}

/* --- Sollys i hero --- */
.hero-split { position: relative; overflow: hidden; }
.hero-sun {
  position: absolute;
  top: -12%;
  right: 6%;
  width: clamp(200px, 26vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%,
    rgba(246, 196, 69, 0.62) 0%,
    rgba(246, 196, 69, 0.28) 38%,
    rgba(246, 196, 69, 0) 70%);
  animation: solPust 9s ease-in-out infinite alternate;
}
@keyframes solPust {
  from { transform: scale(1) translateY(0); opacity: 0.85; }
  to   { transform: scale(1.12) translateY(10px); opacity: 1; }
}

/* --- Parallakse pa heltebildet, drevet av scroll uten JS --- */
@supports (animation-timeline: view()) {
  .hero-media img {
    animation: heroDrift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes heroDrift {
    from { transform: scale(1.12) translateY(-3%); }
    to   { transform: scale(1.12) translateY(3%); }
  }
}

/* --- Rullende fagomradestripe --- */
.marquee {
  overflow: hidden;
  position: relative;
  padding-block: 16px;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(20px, 3vw, 44px);
  animation: rull 36s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.marquee-item:hover { color: var(--orange-text); }
.marquee-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
@keyframes rull {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Portalform pa plantebildene --- */
.gront-item img {
  border-radius: 999px 999px var(--r-md) var(--r-md) / 34% 34% var(--r-md) var(--r-md);
}
.gront-item:last-child img { border-radius: var(--r-lg); }

/* --- Rikere kort: loft, zoom og et streif av sollys --- */
.ref-card, .media-card, .simple-card, .ref-feature { position: relative; }
.ref-card::after, .media-card::after, .simple-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(120% 80% at 50% 0%, rgba(246, 196, 69, 0.22), transparent 62%);
}
.ref-card:hover::after, .media-card:hover::after, .simple-card:hover::after { opacity: 1; }
.ref-card:hover, .media-card:hover, .simple-card:hover, .ref-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 38px -22px rgba(21, 33, 26, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .hero-sun { animation: none; }
  .marquee-track { animation: none; }
  .hero-media img { animation: none; }
}

/* ============================================================
   18. HERO-SCENE
   Innfelt bilde med myke hjorner mot krem bakgrunn, tekst under.
   Erstatter det delte panelet, som la tekst og bilde side om side
   og gjorde forsteinntrykket firkantet.
   ============================================================ */
.hero-stage {
  position: relative;
  background: var(--bone);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.hero-photo {
  position: relative;
  margin: clamp(10px, 1.6vw, 18px);
  border-radius: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  /* Ikke aspect-ratio sammen med max-height: da krymper nettleseren
     BREDDEN for a bevare forholdet, og bildet blir en liten boks
     midt pa siden i stedet for a fylle skjermen. Fast hoyde i stedet. */
  height: clamp(340px, 62vh, 640px);
  background: var(--forest);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-intro {
  padding-top: clamp(28px, 4.5vw, 52px);
  max-width: 1200px;
}
.hero-intro h1 {
  margin-top: 14px;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.06;
}
.hero-intro p {
  margin-top: 18px;
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
}
.hero-intro .hero-actions { justify-content: flex-start; margin-top: 26px; }

/* Rund blaknapp nede til hoyre, som i referansen */
.scroll-cue {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 36px);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(21, 33, 26, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}
.scroll-cue svg { width: 22px; height: 22px; }
.scroll-cue:hover { background: var(--forest-deep); transform: translateY(3px); }

/* Fagstripen er na en rullende marquee i stedet for statisk rad */
.fagstripe {
  background: var(--sun-light);
  color: var(--ink);
  border-top: none;
}
.fagstripe .marquee-item a { text-decoration: none; color: inherit; }
.fagstripe .marquee-item a:hover { color: var(--orange-text); }

@media (max-width: 980px) {
  /* Under denne bredden kolliderer den runde knappen med CTA-ene.
     Den er en bekvemmelighet, ikke navigasjon, sa den utgar. */
  .scroll-cue { display: none; }
}
@media (max-width: 720px) {
  .hero-photo { height: clamp(300px, 54vh, 460px); }
  .hero-intro h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ============================================================
   19. FORSIDE (index.njk) — avrundede paneler
   Egne klasser, pavirker ingen andre sider. Samme radius-skala
   gjennomgaende: store paneler 28px, kort/rader 18px.
   Fargene er de godkjente, rolige pastellene: mykt gront #dcecc9
   og fersken #ffd9c2, ikke de delte --leaf/--blossom-tokenene som
   brukes andre steder (holder denne endringen isolert til forsiden).
   ============================================================ */
.home-hero-frame { background: var(--bone); padding-top: clamp(12px, 1.8vw, 20px); }
.home-hero {
  /* min-height + flex, IKKE fast height. Med fast height og absolutt-
     posisjonert innhold overflod knappene og fagomrade-lenkene ut over
     hverandre pa mobil, fordi teksten trengte mer plass enn den faste
     hoyden ga rom for. Na vokser panelet med innholdet i stedet. */
  position: relative;
  margin-inline: clamp(10px, 1.6vw, 18px);
  border-radius: 28px;
  overflow: hidden;
  min-height: clamp(400px, 58vh, 580px);
  display: flex;
  align-items: flex-end;
  background: var(--forest);
}
.home-hero img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.06) 70%);
}
.home-hero-sun {
  position: absolute; top: -14%; right: 8%;
  width: clamp(190px, 26vw, 420px); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(255,225,150,.5) 0%, rgba(255,225,150,.2) 40%, rgba(255,225,150,0) 70%);
  animation: home-solpust 12s ease-in-out infinite alternate;
}
@keyframes home-solpust { from { transform: scale(1) translateY(0); } to { transform: scale(1.15) translateY(14px); } }
.home-hero-inn {
  position: relative; z-index: 3; width: 100%;
  padding: clamp(26px, 4.5vw, 48px) clamp(22px, 4vw, 44px); color: #fff;
}
.home-hero-inn h1 { font-size: clamp(1.85rem, 4vw, 3rem); color: #fff; max-width: 16ch; }
.home-hero-under { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 18px; }
.home-hero-under p { max-width: 42ch; color: rgba(255,255,255,.92); font-size: clamp(.96rem, 1.4vw, 1.06rem); }
.home-hero-fag { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.home-hero-fag a { font-size: .82rem; color: rgba(255,255,255,.78); text-decoration: none; }
.home-hero-fag a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .home-hero-under { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .hero-actions .btn-outline { text-align: center; }
}

.home-panel { border-radius: 28px; padding-block: clamp(40px, 6vw, 72px); }
.home-panel-mint { background: #dcecc9; }
.home-panel-blush { background: #ffd9c2; }
.home-panel-dark { background: var(--forest); color: var(--on-dark); }
.home-panel-dark h2 { color: var(--on-dark); }
.home-panel-dark p { color: var(--on-dark-soft); }

/* items:center i stedet for start, og 4/3 i stedet for 3/4:
   den hoye, smale beskjaeringen laget et stort tomrom under teksten
   fordi bildet ble mye hoyere enn tekstblokken. */
.home-omoss-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(24px,4vw,52px); align-items: center; }
.home-omoss-grid p { color: #3c4a3c; font-size: clamp(1rem,1.5vw,1.08rem); max-width: 52ch; }
.home-omoss-grid p + p { margin-top: 15px; }
.home-omoss-bilde { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(18,33,26,.35); }
.home-omoss-bilde img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.home-omoss-bilde:hover img { transform: scale(1.04); }
@media (max-width: 820px) { .home-omoss-grid { grid-template-columns: 1fr; } }

.home-rad-list { display: flex; flex-direction: column; gap: 10px; }
.home-rad {
  position: relative; display: grid; align-items: center; gap: 6px 24px;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.15fr) 44px;
  padding: clamp(20px,2.6vw,28px) clamp(22px,2.8vw,30px);
  border-radius: 18px; background: var(--white); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.home-rad:hover, .home-rad:focus-visible {
  background: #dcecc9; border-color: transparent;
  transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(18,33,26,.35);
}
.home-rad h3 { font-size: clamp(1.05rem,1.8vw,1.28rem); }
.home-rad p { color: var(--ink-soft); font-size: .95rem; }
.home-rad-go {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--forest); font-size: 1.05rem; flex-shrink: 0;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.home-rad:hover .home-rad-go { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: translateX(4px); }
@media (max-width: 760px) {
  .home-rad { grid-template-columns: minmax(0,1fr) 40px; }
  .home-rad h3 { grid-column: 1; grid-row: 1; }
  .home-rad-go { grid-column: 2; grid-row: 1; width: 40px; height: 40px; }
  .home-rad p { grid-column: 1/-1; grid-row: 2; }
}

.home-trinn-rad { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,3vw,34px); margin-top: clamp(30px,4vw,50px); }
.home-spirelinje { position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; }
.home-spirelinje i { display: block; height: 100%; background: var(--moss-light); transform-origin: left; transform: scaleX(1); }
@supports (animation-timeline: view()) {
  .home-spirelinje i { transform: scaleX(0); animation: home-gro linear both; animation-timeline: view(); animation-range: entry 30% cover 62%; }
  @keyframes home-gro { to { transform: scaleX(1); } }
}
.home-trinn { position: relative; padding-top: 32px; }
.home-trinn::before { content: ""; position: absolute; top: 1px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--moss-light); box-shadow: 0 0 0 5px var(--forest); }
.home-trinn b { display: block; font-weight: 600; font-size: 1.02rem; color: #fff; }
.home-trinn p { margin-top: 6px; font-size: .92rem; }
@media (max-width: 820px) { .home-trinn-rad { grid-template-columns: 1fr 1fr; row-gap: 30px; } .home-spirelinje { display: none; } }
@media (max-width: 480px) { .home-trinn-rad { grid-template-columns: 1fr; } }

.home-cta-inn { display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; }
.home-cta-inn h2 { font-size: clamp(1.5rem,2.8vw,2.15rem); max-width: 18ch; }
.home-cta-inn p { margin-top: 12px; color: #6b3229; max-width: 44ch; }

/* ---------- 20. Forside: intro (tekst + bilde, på linje med panelene) ---------- */
.home-intro { background: var(--bone); padding-block: clamp(28px, 5vw, 64px) clamp(8px, 2vw, 24px); }
.home-intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.home-intro-text h1 { margin: 10px 0 18px; }
.home-intro-text > p { max-width: 46ch; margin: 0 0 24px; }
.home-intro .btn-outline { color: var(--forest); border-color: var(--forest); background: transparent; }
.home-intro .btn-outline:hover { background: var(--forest); color: #fff; }
.home-chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-chips a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #dcecc9; color: var(--forest); font-size: .9rem; text-decoration: none; transition: background .2s; }
.home-chips li:nth-child(even) a { background: #ffd9c2; }
.home-chips a:hover { background: var(--forest); color: #fff; }
.home-intro-media { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 4.2; background: var(--forest); }
.home-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; animation: home-zoom 18s ease-out both; }
.home-intro-badge { position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--forest); padding: 10px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.15); animation: home-flyt 5s ease-in-out infinite; }
.home-intro-text > * { animation: home-stig .8s both; }
.home-intro-text > *:nth-child(2) { animation-delay: .08s; }
.home-intro-text > *:nth-child(3) { animation-delay: .16s; }
.home-intro-text > *:nth-child(4) { animation-delay: .24s; }
.home-intro-text > *:nth-child(5) { animation-delay: .32s; }
@keyframes home-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes home-stig { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes home-flyt { 50% { transform: translateY(-5px); } }
@media (max-width: 820px) {
  .home-intro-grid { grid-template-columns: 1fr; }
  .home-intro-media { aspect-ratio: 4 / 3; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-intro-media img, .home-intro-badge, .home-intro-text > * { animation: none; }
}

/* ---------- 21. Forside: roligere intro og tettere panelrytme ---------- */
.home-intro { padding-block: clamp(32px, 5vw, 64px) 0; }
.home-intro-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
.home-intro-text { display: flex; flex-direction: column; justify-content: center; padding-block: 12px; }
.home-intro-text h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 20px; }
.home-intro-text > p { font-size: clamp(1.02rem, 1.4vw, 1.12rem); color: #3c4a3c; margin-bottom: 32px; }
.home-intro .hero-actions { justify-content: flex-start; margin-top: 0; }
.home-intro-media { aspect-ratio: 5 / 4; }
.home-intro + .section { padding-top: clamp(40px, 6vw, 72px); }
.home-omoss-grid { align-items: start; }
.home-panel .section-head { align-items: flex-end; margin-bottom: clamp(20px, 3vw, 28px); }
@media (max-width: 820px) {
  .home-intro-media { order: 0; aspect-ratio: 4 / 3; }
  .home-intro-text { padding-block: 0; }
}

/* ---------- 22. Forside: redaksjonell topp og jevn rytme ---------- */
.home-top { background: var(--bone); padding-top: clamp(40px, 7vw, 96px); }
.home-top-rad { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.home-top h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -0.03em; margin: 0; animation: home-stig .8s both; }
.home-top-side { animation: home-stig .8s .12s both; }
.home-top-side p { margin: 0 0 24px; max-width: 40ch; color: #3c4a3c; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; }
.home-top .hero-actions { justify-content: flex-start; margin: 0; }
.home-top .btn-outline { color: var(--forest); border-color: var(--forest); background: transparent; }
.home-top .btn-outline:hover { background: var(--forest); color: #fff; }
.home-top-bilde { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 21 / 9; background: var(--forest); }
.home-top-bilde img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; animation: home-zoom 18s ease-out both; }
.home-sek { padding-block: clamp(28px, 4vw, 48px); }
.home-top + .home-sek { padding-top: clamp(64px, 9vw, 120px); }
.home-sek:last-child { padding-bottom: clamp(56px, 8vw, 104px); }
.home-sek > .wrap > .section-head { margin-bottom: clamp(20px, 3vw, 28px); }
@media (max-width: 820px) {
  .home-top-rad { grid-template-columns: 1fr; align-items: start; }
  .home-top-bilde { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .home-top h1, .home-top-side, .home-top-bilde img { animation: none; } }
@media (min-width: 561px) { .home-sek .ref-feature-media { aspect-ratio: 16 / 7; } }

/* ---------- 23. Forside: bento-topp og bildekort ---------- */
.home-bento-sek { background: var(--bone); padding-top: clamp(16px, 2.4vw, 28px); }
.home-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: clamp(220px, 26vw, 330px) clamp(180px, 20vw, 250px); gap: 14px; }
.bento-tekst { grid-column: 1 / 7; grid-row: 1 / 3; background: #dcecc9; border-radius: 28px; padding: clamp(28px, 4.5vw, 60px); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.bento-tekst::before { content: ""; position: absolute; width: 340px; height: 340px; right: -110px; top: -110px; border-radius: 50%; background: #ffd9c2; opacity: .75; }
.bento-tekst > * { position: relative; animation: home-stig .8s both; }
.bento-tekst h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 20px; max-width: 9ch; }
.bento-tekst p { margin: 0 0 28px; max-width: 38ch; color: #33452f; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; animation-delay: .1s; }
.bento-tekst .hero-actions { justify-content: flex-start; margin: 0; animation-delay: .2s; }
.bento-tekst .btn-outline { color: var(--forest); border-color: var(--forest); background: transparent; }
.bento-tekst .btn-outline:hover { background: var(--forest); color: #fff; }
.bento-bilde { margin: 0; border-radius: 28px; overflow: hidden; background: var(--forest); animation: home-stig .9s both; }
.bento-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.bento-bilde:hover img { transform: scale(1.04); }
.bento-a { grid-column: 7 / 13; grid-row: 1; animation-delay: .1s; }
.bento-b { grid-column: 7 / 10; grid-row: 2; animation-delay: .2s; }
.bento-c { grid-column: 10 / 13; grid-row: 2; animation-delay: .3s; }
.bento-b img { object-position: center 30%; }
.home-bento-sek + .home-sek { padding-top: clamp(56px, 8vw, 104px); }

.fag-kort-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fag-kort { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--forest); transition: transform .3s, box-shadow .3s; }
.fag-kort:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(36,81,47,.14); }
.fag-kort-bilde { aspect-ratio: 4 / 3; overflow: hidden; }
.fag-kort-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.fag-kort:hover .fag-kort-bilde img { transform: scale(1.06); }
.fag-kort-tekst { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.fag-kort-tekst h3 { margin: 0; font-size: 1.05rem; }
.fag-kort-tekst span { color: #4a5a48; font-size: .92rem; line-height: 1.45; }

@media (max-width: 900px) {
  .home-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto 260px 200px; }
  .bento-tekst { grid-column: 1 / 3; grid-row: 1; }
  .bento-a { grid-column: 1 / 3; grid-row: 2; }
  .bento-b { grid-column: 1; grid-row: 3; }
  .bento-c { grid-column: 2; grid-row: 3; }
  .fag-kort-rad { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .home-bento { grid-template-rows: auto 220px 150px; } .fag-kort-tekst span { display: none; } }
@media (prefers-reduced-motion: reduce) { .bento-tekst > *, .bento-bilde { animation: none; } }
.bento-tekst h1 { max-width: 11ch; }
@media (max-width: 900px) { .bento-tekst::before { width: 200px; height: 200px; right: -90px; top: -110px; } }

/* ---------- 24. Lys meny (alle sider) ---------- */
header.site { background: rgba(253,250,242,.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); color: var(--forest); border-bottom: 1px solid rgba(36,81,47,.08); }
.nav-row { padding-block: 14px; }
.brand-logo { height: 22px; }
footer.site .brand-logo { height: 20px; }
nav.links a.nav-link { color: rgba(36,81,47,.72); }
nav.links a.nav-link:hover, nav.links a.nav-link:focus-visible, nav.links a.nav-link[aria-current="page"] { color: var(--forest); }
nav.links a.nav-link::after { background: var(--orange); }
.nav-cta { padding: 10px 20px; font-size: .88rem; margin-left: 6px; }
.nav-toggle .bar { background: var(--forest); }
.mobile-menu { background: var(--bone); }
.mobile-menu a { color: var(--forest); border-bottom-color: rgba(36,81,47,.1); }
.mobile-menu .mobile-sub a { color: rgba(36,81,47,.7); }

/* ---------- 25. Forside: system ---------- */
.home-bento-sek { padding-top: clamp(14px, 2vw, 24px); }
.bento-bilde { position: relative; }
.bento-bilde figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(253,250,242,.92); color: var(--forest); font-size: .8rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(6px); }
.bento-tekst h1 { font-weight: 700; }

.h-sek { padding-top: clamp(72px, 9vw, 128px); }
.h-sek-siste { padding-bottom: clamp(72px, 9vw, 128px); }
.h-sek h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; margin: 0; color: var(--forest); }
.h-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.h-head p { margin: 0; color: #4a5a48; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.6; max-width: 46ch; justify-self: end; }
.h-lenke { display: inline-block; margin-top: 8px; color: var(--forest); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--orange); }
.h-lenke:hover { color: var(--orange-text); }

/* Fagkort: høye bildekort med tekst over bildet */
.fag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fag { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; color: #fff; text-decoration: none; background: var(--forest); isolation: isolate; }
.fag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.fag::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,40,24,.82) 0%, rgba(20,40,24,.25) 45%, rgba(20,40,24,0) 70%); }
.fag:hover img { transform: scale(1.07); }
.fag-tekst { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.fag-nr { font-size: .78rem; font-weight: 600; opacity: .8; letter-spacing: .06em; }
.fag-tekst h3 { margin: 0; color: #fff; font-size: 1.2rem; line-height: 1.2; }
.fag-desc { font-size: .9rem; opacity: .85; line-height: 1.4; }
.fag-pil { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(253,250,242,.92); color: var(--forest); font-size: 1.05rem; transition: background .25s, color .25s, transform .25s; }
.fag:hover .fag-pil { background: var(--orange); color: var(--ink); transform: rotate(-45deg); }

/* Prosjekter: mosaikk */
.ref-mosaikk { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: repeat(2, clamp(220px, 24vw, 300px)); gap: 14px; }
.ref-flis { position: relative; display: block; border-radius: 28px; overflow: hidden; color: #fff; text-decoration: none; background: var(--forest); isolation: isolate; }
.ref-flis:first-child { grid-row: 1 / 3; }
.ref-flis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ref-flis::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,40,24,.78) 0%, rgba(20,40,24,0) 55%); }
.ref-flis:hover img { transform: scale(1.05); }
.ref-flis-tekst { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.ref-flis-kat { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.ref-flis-tekst h3 { margin: 0; color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.15; }
.ref-flis:first-child .ref-flis-tekst h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.ref-flis-sted { font-size: .88rem; opacity: .85; }

/* Om oss: bilde med mint flate bak */
.h-omoss { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.h-omoss-bilde { position: relative; margin: 0 0 0 0; padding: 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0; }
.h-omoss-bilde::before { content: ""; position: absolute; inset: clamp(40px, 5vw, 64px) 0 0 clamp(40px, 5vw, 64px); background: #dcecc9; border-radius: 28px; }
.h-omoss-bilde img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.h-omoss-tekst p { color: #4a5a48; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.65; max-width: 48ch; margin: 18px 0 0; }
.h-omoss-tekst .btn-outline { margin-top: 28px; }
.h-omoss-tekst .btn-outline, .h-cta .btn-outline { color: var(--forest); border-color: var(--forest); }
.h-omoss-tekst .btn-outline:hover { background: var(--forest); color: #fff; }

/* Slik jobber vi */
.home-panel-dark .h-trinn-tittel { color: #fff; max-width: 18ch; }
.trinn-nr { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--moss-light); margin-bottom: 6px; }

/* CTA: rosa flate med bilde */
.h-cta { display: grid; grid-template-columns: 1.1fr 1fr; background: #ffd9c2; border-radius: 28px; overflow: hidden; }
.h-cta-tekst { padding: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.h-cta-tekst p { color: #4a4036; margin: 16px 0 28px; max-width: 40ch; line-height: 1.6; }
.h-cta-bilde { margin: 0; min-height: 280px; }
.h-cta-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .fag-grid { grid-template-columns: 1fr 1fr; }
  .h-head { grid-template-columns: 1fr; }
  .h-head p { justify-self: start; }
  .ref-mosaikk { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px; }
  .ref-flis:first-child { grid-row: 1; grid-column: 1 / 3; }
  .h-omoss { grid-template-columns: 1fr; }
  .h-cta { grid-template-columns: 1fr; }
  .h-cta-bilde { order: -1; min-height: 220px; }
}
@media (max-width: 560px) {
  .fag { aspect-ratio: 4 / 5; }
  .fag-desc { display: none; }
  .fag-tekst { left: 16px; right: 16px; bottom: 16px; }
  .fag-tekst h3 { font-size: 1rem; }
  .fag-pil { width: 34px; height: 34px; top: 12px; right: 12px; }
  .ref-mosaikk { grid-template-columns: 1fr; grid-template-rows: 280px 200px 200px; }
  .ref-flis:first-child { grid-column: 1; }
}
@media (max-width: 860px) { .nav-cta { display: none; } }
.h-cta-bilde img { object-position: center 85%; }
.ref-flis::after { background: linear-gradient(to top, rgba(20,40,24,.85) 0%, rgba(20,40,24,.35) 40%, rgba(20,40,24,0) 65%); }
/* Bildeutsnitt: hold ansikter og himmel i bildet */
.bento-a img { object-position: center 60%; }
.bento-b img { object-position: 78% 20%; }
.h-omoss-bilde img { object-position: center 35%; }

/* ---------- 26. Undersider i forsidestil ---------- */
.sub-topp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: clamp(320px, 34vw, 440px); }
.sub-topp-tekst { position: relative; overflow: hidden; background: #dcecc9; border-radius: 28px; padding: clamp(26px, 4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.sub-topp-tekst::before { content: ""; position: absolute; width: 280px; height: 280px; right: -100px; top: -120px; border-radius: 50%; background: #ffd9c2; opacity: .75; }
.sub-topp-tekst > * { position: relative; animation: home-stig .8s both; }
.sub-topp-kjerne { animation-delay: .1s; }
.sub-sti { font-size: .86rem; color: rgba(36,81,47,.7); }
.sub-sti a { color: rgba(36,81,47,.7); text-decoration: none; }
.sub-sti a:hover { color: var(--forest); }
.sub-sti span { color: var(--forest); font-weight: 600; }
.sub-nr { display: block; color: var(--forest); margin-bottom: 10px; }
.sub-topp h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; color: var(--forest); margin: 0; max-width: 14ch; }
.sub-topp-kjerne p { margin: 18px 0 0; max-width: 42ch; color: #33452f; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; }
.sub-topp-bilde { margin: 0; border-radius: 28px; overflow: hidden; background: var(--forest); animation: home-stig .9s .15s both; }
.sub-topp-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; animation: home-zoom 18s ease-out both; }

.fag-grid-2 { grid-template-columns: 1fr 1fr; }
.fag-grid-2 .fag { aspect-ratio: 4 / 3; }
.fag-grid-2 .fag-tekst { left: 28px; right: 28px; bottom: 26px; }
.fag-grid-2 .fag-tekst h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.fag-grid-2 .fag-desc { max-width: 44ch; font-size: .98rem; }
.fag-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fag-grid-3 .fag { aspect-ratio: 4 / 5; }

.ref-rutenett { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ref-rutenett .ref-flis { aspect-ratio: 4 / 3; }
.ref-rutenett-3 { grid-template-columns: repeat(3, 1fr); }
.ref-rutenett-3 .ref-flis { aspect-ratio: 4 / 5; }

.h-omoss-snudd .h-omoss-bilde { order: 2; padding: 0 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px); }
.h-omoss-snudd .h-omoss-bilde::before { inset: clamp(40px, 5vw, 64px) clamp(40px, 5vw, 64px) 0 0; background: #ffd9c2; }

/* Tjenestedetalj: tekst + mint liste-kort */
.sub-detalj { align-items: start; gap: clamp(32px, 6vw, 88px); }
.sub-detalj .detail-copy p { color: #3c4a3c; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.65; }
.sub-detalj .detail-copy p:first-child { font-size: clamp(1.15rem, 1.7vw, 1.35rem); color: var(--forest); line-height: 1.5; }
.sub-detalj .detail-list-wrap { background: #dcecc9; border-radius: 28px; padding: clamp(26px, 3.5vw, 40px); }
.sub-detalj .label { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--forest); letter-spacing: 0; text-transform: none; }
.sub-detalj .detail-list li { color: #33452f; padding: 12px 0 12px 30px; border-top: 1px solid rgba(36,81,47,.12); }
.sub-detalj .detail-list { gap: 0; }
.sub-detalj .detail-list li::before { top: 1.15em; width: 10px; height: 10px; background: var(--orange); }

/* Prosjekt */
.prosjekt-desc { font-size: clamp(1.15rem, 1.7vw, 1.35rem); color: var(--forest); line-height: 1.55; max-width: 58ch; }
.service-gallery-grid { gap: 14px; }
.service-gallery-grid .g-item { border-radius: 22px; }

/* Kontakt */
.contact-card { border-radius: 28px; }
.contact-card h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.contact-card--leaf { background: #dcecc9; }
.contact-main h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; color: var(--forest); }

@media (max-width: 900px) {
  .sub-topp { grid-template-columns: 1fr; min-height: 0; }
  .sub-topp-bilde { aspect-ratio: 16 / 10; }
  .fag-grid-3, .ref-rutenett-3 { grid-template-columns: 1fr 1fr; }
  .h-omoss-snudd .h-omoss-bilde { order: 0; }
}
@media (max-width: 640px) {
  .fag-grid-2, .ref-rutenett, .ref-rutenett-3 { grid-template-columns: 1fr; }
  .fag-grid-2 .fag { aspect-ratio: 4 / 5; }
  .fag-grid-2 .fag-desc { display: block; }
  .fag-grid-3 { grid-template-columns: 1fr 1fr; }
  .sub-topp-tekst::before { width: 180px; height: 180px; right: -80px; top: -90px; }
}
@media (prefers-reduced-motion: reduce) { .sub-topp-tekst > *, .sub-topp-bilde, .sub-topp-bilde img { animation: none; } }
.sub-topp { min-height: 0; height: clamp(340px, 34vw, 440px); }
.sub-topp h1 { font-size: clamp(2rem, 4vw, 3.4rem); max-width: none; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 900px) { .sub-topp { height: auto; } }
.ref-rutenett .ref-flis:first-child { grid-row: auto; grid-column: auto; }
.ref-rutenett .ref-flis:first-child .ref-flis-tekst h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.sub-topp h1 { hyphens: manual; -webkit-hyphens: manual; }
/* Uten dekorsirkel: rolig mint flate */
.bento-tekst::before, .sub-topp-tekst::before { display: none; }

/* ---------- 27. Kontakt: samme to kolonner som toppen, ingen bokser ---------- */
.kontakt-sek { padding-top: clamp(56px, 7vw, 96px); }
.contact-grid { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.kontakt-kort { padding-right: clamp(0px, 3vw, 40px); }
.kontakt-kort h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; color: var(--forest); margin: 0; }
.kontakt-kort > p { color: #4a5a48; margin: 14px 0 0; line-height: 1.6; max-width: 46ch; }
.kontakt-kort .contact-form { gap: 22px; margin-top: 36px; }
.form-to { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kontakt-kort .form-row label, .form-valg legend { font-family: var(--sans); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--forest); }
.kontakt-kort .form-row input, .kontakt-kort .form-row textarea { background: #fff; border: 1.5px solid rgba(36,81,47,.14); border-radius: 14px; padding: 14px 16px; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.kontakt-kort .form-row input:focus, .kontakt-kort .form-row textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px #dcecc9; }
.kontakt-kort .form-row textarea { min-height: 160px; }
.form-valg { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-valg legend { padding: 0; margin-bottom: 10px; }
.valgfritt { font-weight: 400; color: #6b7a68; margin-left: 6px; }
.valg-rad { display: flex; flex-wrap: wrap; gap: 8px; }
.valg-rad label { position: relative; cursor: pointer; }
.valg-rad input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.valg-rad span { display: inline-block; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(36,81,47,.14); color: var(--forest); font-size: .92rem; font-weight: 500; transition: background .2s, border-color .2s; }
.valg-rad label:hover span { border-color: var(--forest); }
.valg-rad input:checked + span { background: #dcecc9; border-color: var(--forest); }
.valg-rad input:checked + span::before { content: "✓ "; }
.valg-rad input:focus-visible + span { box-shadow: 0 0 0 4px #dcecc9; }
.contact-form .kontakt-send { align-self: flex-start; padding: 15px 32px; font-size: 1rem; }

/* Høyre kolonne: ren tekst, skillelinjer, starter på bildets venstrekant */
.contact-aside { gap: 0; padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid rgba(36,81,47,.14); }
.contact-aside .contact-card { background: none; border-radius: 0; padding: 0; color: var(--forest); }
.contact-aside .contact-card + .contact-card { margin-top: 44px; }
.contact-aside .contact-card h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--forest); margin: 0 0 6px; }
.contact-aside .contact-lines, .contact-aside .next-steps { gap: 0; }
.contact-aside .contact-line, .contact-aside .next-steps li { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(36,81,47,.12); }
.contact-aside .contact-line .k { font-family: var(--sans); font-size: .82rem; letter-spacing: 0; text-transform: none; color: #6b7a68; }
.contact-aside .contact-line .v { color: var(--forest); font-weight: 600; }
.contact-aside a.contact-line-link .v { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; }
.contact-aside a.contact-line-link:hover .v { color: var(--orange-text); }
.contact-aside .next-steps li::before { top: 16px; background: #ffd9c2; color: var(--forest); font-weight: 700; }
.contact-aside .step-body { color: #4a5a48; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .kontakt-kort { padding-right: 0; }
  .contact-aside { padding-left: 0; border-left: 0; border-top: 1px solid rgba(36,81,47,.14); padding-top: 32px; }
}
@media (max-width: 560px) { .form-to { grid-template-columns: 1fr; } .contact-form .kontakt-send { align-self: stretch; } }
.contact-aside .contact-line:first-child { padding-top: 0; }
.kontakt-kart { margin-top: 24px; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: #dcecc9; }
.kontakt-kart iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-aside a.kontakt-adresse .v { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
/* Kart i sidens farger: Voyager-fliser tonet mot mint og bein */
.kontakt-kart { position: relative; z-index: 0; isolation: isolate; }
.kontakt-kart .leaflet-tile-pane { filter: sepia(.35) hue-rotate(45deg) saturate(.9) brightness(1.04) contrast(.95); }
.kontakt-kart.leaflet-container { background: #e7eedb; font-family: var(--sans); }
.kart-nal span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); border: 4px solid #fff; box-shadow: 0 0 0 0 rgba(224,114,42,.5), 0 4px 12px rgba(36,81,47,.3); animation: kart-puls 2.4s ease-out infinite; }
@keyframes kart-puls { 0% { box-shadow: 0 0 0 0 rgba(224,114,42,.45), 0 4px 12px rgba(36,81,47,.3); } 100% { box-shadow: 0 0 0 18px rgba(224,114,42,0), 0 4px 12px rgba(36,81,47,.3); } }
.kontakt-kart .leaflet-control-zoom { border: 0; box-shadow: 0 4px 14px rgba(36,81,47,.18); border-radius: 14px; overflow: hidden; margin: 0 14px 14px 0; }
.kontakt-kart .leaflet-control-zoom a { color: var(--forest); width: 36px; height: 36px; line-height: 36px; }
.kontakt-kart .leaflet-control-attribution { background: rgba(253,250,242,.85); font-size: 10px; border-top-left-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .kart-nal span { animation: none; } }
.kontakt-kart .leaflet-tile-pane { filter: grayscale(.75) sepia(.35) hue-rotate(45deg) saturate(1.3) brightness(1.06) contrast(.9); }
.bento-a img { object-position: center 70%; } .bento-c img { object-position: 45% 45%; }
.h-cta-bilde img { object-position: center 50%; }
.bento-a img { object-position: center 55%; }
.sub-topp-bilde img[src*="fagarbeider-sjoutsikt"] { object-position: center 57%; }
.bento-b img { object-position: center 38%; }
.bento-c img { object-position: 45% 60%; }
.footer-miljo { display: inline-block; margin-top: 22px; transition: opacity .2s; }
.footer-miljo img { display: block; width: 190px; height: auto; }
.footer-miljo:hover { opacity: .9; }