/* =====================================================================
   Artisan Takst Bygg og Eiendom AS
   Brand: deep forest/pine green + sage accents (sampled from logo/mockup)
   Type: Hanken Grotesk (sans) — ExtraBold headings + regular body, self-hosted
   ===================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* Brand greens — TRIAL: re-anchored on the NEW logo (#56905a, OKLCH H~146, higher chroma)
     so the deep greens read as the logo's green. Lightness kept (contrast preserved); only
     hue+chroma shift toward the logo. REVERT: restore each "was" value (original palette,
     anchored on #2C5233 / #9CC289 from the previous logo/mockup). */
  --forest-950: oklch(0.27 0.058 146);   /* was oklch(0.27 0.045 152) */
  --forest-900: oklch(0.32 0.066 146);   /* was oklch(0.32 0.052 152) */
  --forest-800: oklch(0.37 0.076 146);   /* was oklch(0.37 0.060 152) */
  --forest-700: oklch(0.42 0.086 146);   /* primary brand — was oklch(0.42 0.067 152) */
  --forest-600: oklch(0.49 0.095 146);   /* primary hover / links — was oklch(0.49 0.078 151) */
  --forest-500: oklch(0.57 0.101 146);   /* = logo green — was oklch(0.57 0.088 150) */
  --sage-400:   oklch(0.77 0.080 138);   /* logo sage */
  --sage-300:   oklch(0.84 0.082 126);   /* logo light sage */
  --sage-200:   oklch(0.92 0.046 140);
  --sage-100:   oklch(0.962 0.022 145);
  --sage-50:    oklch(0.982 0.011 150);

  /* Neutrals, faintly green-tinted (never warm/cream) */
  --ink:    oklch(0.24 0.018 152);   /* headings */
  --body:   oklch(0.37 0.015 152);   /* body text — high contrast on light */
  --muted:  oklch(0.47 0.013 152);   /* secondary text */
  --line:   oklch(0.90 0.012 150);   /* hairlines */
  --bg:     #ffffff;  /* page background (pure white) */
  --surface: #ffffff;
  --surface-alt: oklch(0.978 0.006 150);
  --header-bg: var(--surface);            /* white header / menu */
  --header-line: oklch(0.92 0.008 150);   /* header hairline */
  --hero-stripe: var(--bg);  /* hero panel background — off-white (flattened to one page color). Revert to white: #ffffff. */

  /* Semantic */
  --color-primary: var(--forest-700);
  --color-primary-hover: var(--forest-600);
  --cta-bg: oklch(0.50 0.10 146);   /* TRIAL: brighter primary-CTA green (#39723f, 5.75:1 on white). REVERT: set to var(--forest-700) and restore the .btn--primary:hover line below. */
  --on-primary: #fff;
  --color-link: var(--forest-600);

  /* Typography */
  /* Headings. Montserrat trial — REVERT by swapping back to the commented Hanken line below (+ remove the Montserrat @font-face in fonts.css). */
  --font-display: "Montserrat", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* --font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-300: 0.8125rem;
  --fs-350: 0.9rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
  --fs-700: clamp(1.55rem, 1.28rem + 1.25vw, 2.1rem);
  --fs-800: clamp(1.65rem, 1.3rem + 1.6vw, 2.35rem);
  --fs-900: clamp(1.95rem, 1.4rem + 2.5vw, 3.1rem);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --section-y: clamp(2.75rem, 2rem + 2.8vw, 4.5rem);
  --section-y-tight: clamp(0.875rem, 0.625rem + 0.8vw, 1.375rem);  /* compact spacing — all content sections */
  --container: 1270px; /* 1190px content area + 40px gutters each side */
  --pad-inline: clamp(1.25rem, 0.7rem + 2.6vw, 2.5rem);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows (forest-tinted) */
  --shadow-sm: 0 1px 2px rgba(24, 48, 33, 0.06), 0 1px 1px rgba(24, 48, 33, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(24, 48, 33, 0.16), 0 2px 6px -2px rgba(24, 48, 33, 0.08);
  --shadow-lg: 0 22px 48px -16px rgba(20, 44, 30, 0.28), 0 6px 16px -8px rgba(20, 44, 30, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --t-fast: 0.18s;
  --t-med: 0.32s;

  /* z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  overflow-anchor: none;  /* stops scroll-anchoring from fighting the shrinking sticky header (see main.js) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--forest-600);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ----------------------------- Typography ----------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); line-height: 1.2; font-weight: 700; }
p { text-wrap: pretty; }
strong { font-weight: 700; }

/* ----------------------------- Utilities ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3.5rem;
  z-index: var(--z-modal);
  background: var(--forest-700); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm);
  font-weight: 600; transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: 0 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--fs-350); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--forest-600);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 1.85rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sage-400), var(--forest-600));
}

.section-head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head p { margin-top: 0.85rem; font-size: var(--fs-500); color: var(--muted); }
.section-head--left { margin-inline: 0; text-align: left; }

/* ----------------------------- Buttons ----------------------------- */
.btn {
  --btn-bg: var(--cta-bg);                /* TRIAL brighter CTA; was var(--forest-700) */
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body); font-weight: 650; font-size: var(--fs-400);
  line-height: 1; letter-spacing: 0.03em; text-transform: uppercase;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer; text-align: center;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.btn .icon { width: 1.15rem; height: 1.15rem; }
.btn--primary { box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--forest-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }  /* TRIAL: rest is brighter now, so hover darkens; was var(--color-primary-hover) */
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--forest-700); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--forest-600); background: var(--sage-50); transform: translateY(-2px); }

.btn--outline { background: transparent; color: var(--forest-700); border-color: var(--forest-700); }
.btn--outline:hover { background: var(--forest-700); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--on-dark:hover { background: #fff; color: var(--forest-800); border-color: #fff; transform: translateY(-2px); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-350); }
.btn--block { width: 100%; }

/* ----------------------------- Header ----------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  --logo-cap: 95px;                                /* portion of the logo that sits IN the bar — this + --header-pad sets the bar height */
  --logo-h: clamp(80px, 4.375rem + 5.6vw, 168px);  /* full (vertical) logo size; grow this freely — bar height stays put, the extra dips onto the hero */
  --logo-h-h: clamp(42px, 2.2rem + 1.4vw, 58px);   /* horizontal lockup height (shown once the bar settles) */
  --header-pad: calc(clamp(0.8rem, 0.4rem + 1vw, 1.35rem) - 5px);
  --logo-dip: max(0px, calc(var(--logo-h) - var(--logo-cap)));  /* logo height beyond --logo-cap dips onto the hero (0 when the logo is small, e.g. mobile) */
  --logo-bar-h: min(var(--logo-h), var(--logo-cap));  /* in-bar height of the brand box; the vertical logo overhangs below = the dip */
  --logo-w-v: calc(var(--logo-h) * 1.5314);        /* vertical footprint width (viewBox 296.05:193.32) */
  --logo-w-h: calc(var(--logo-h-h) * 5.1392);      /* horizontal footprint width (viewBox 458.89:89.29) */
  --logo-w: var(--logo-w-v);                        /* active brand width — vertical at the top */
  --logo-out-scale: 0.6;                            /* vertical logo scales down as it fades out (beat 1) */
  --logo-swap-delay: 0.22s;                         /* horizontal fades in only after the vertical has gone (beat 2) */
  --logo-in-dur: 1.4s;                              /* horizontal fade-in duration — slow reveal (paired with linear easing so it's perceived evenly, not front-loaded) */
  overflow: visible;
  background: var(--header-bg);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.site-header.is-scrolled {
  --logo-h: clamp(62px, 3.6rem + 1.6vw, 84px);
  --header-pad: clamp(0.5rem, 0.42rem + 0.25vw, 0.68rem);
  --logo-dip: 0px;
  box-shadow: 0 8px 24px -18px rgba(20,44,30,0.45);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: var(--header-pad);
  transition: padding-block var(--t-med) var(--ease-out-quart);
}
.brand {
  position: relative; z-index: 1; flex: 0 0 auto; display: block;
  width: var(--logo-w); height: var(--logo-bar-h);
  transition: width var(--t-med) var(--ease-out-quart), height var(--t-med) var(--ease-out-quart);
}
/* Two lockups share one box and crossfade on scroll: the tall vertical logo at the top
   (overhanging onto the hero), the wide horizontal logo once the bar settles. The inactive
   one fades to 0; the global reduced-motion rule makes the swap instant. */
.brand__logo {
  position: absolute; left: 0; top: 0; width: auto; display: block;
  transition: opacity var(--t-med) var(--ease-out-quart),
              transform var(--t-med) var(--ease-out-quart),
              height var(--t-med) var(--ease-out-quart);
}
.brand__logo--vertical { height: var(--logo-h); transform-origin: left center; }  /* extends below --logo-bar-h = the hero dip */
.brand__logo--horizontal {
  height: var(--logo-h-h); top: 50%; transform: translateY(-50%); opacity: 0;
}
/* Crossfade applies at ALL widths now. Beat 1: the vertical lockup scales down and fades
   out. Beat 2 (delayed): the horizontal fades in (linear) once the vertical is gone. */
.site-header.is-scrolled { --logo-w: var(--logo-w-h); }
.is-scrolled .brand__logo--vertical   { opacity: 0; transform: scale(var(--logo-out-scale)); }
.is-scrolled .brand__logo--horizontal { opacity: 1; transition-delay: var(--logo-swap-delay); transition-duration: var(--logo-in-dur); transition-timing-function: linear; }
/* On narrow phones the wide (~5:1) horizontal lockup is sized down so it fits beside the
   "Meny" toggle without overflowing (at the desktop size it would be ~216px wide). Bumped
   +30% per request: the lockup is absolutely positioned inside .brand, so this enlarges the
   logo only – the bar height stays driven by --logo-bar-h (the vertical logo). */
@media (max-width: 767px) {
  .site-header { --logo-h-h: clamp(36.4px, 10.4vw, 52px); }  /* was clamp(28px, 8vw, 40px) – +30% */
}
/* Reduced motion: durations are zeroed globally; also drop the stagger so the swap is instant. */
@media (prefers-reduced-motion: reduce) {
  .site-header { --logo-swap-delay: 0s; }
}

.primary-nav { display: flex; align-items: center; }
.primary-nav__list { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.4vw, 2rem); }
.primary-nav__list > li > a:not(.btn) {
  font-size: var(--fs-350); font-weight: 600; color: var(--ink);
  padding: 0.4rem 0; position: relative; letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease-out);
}
.primary-nav__list > li > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--forest-600); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.primary-nav__list > li > a:not(.btn):hover { color: var(--forest-600); }
.primary-nav__list > li > a:not(.btn):hover::after { transform: scaleX(1); }
.primary-nav__list > li > a[aria-current="page"] { color: var(--forest-700); }
.primary-nav__list > li > a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; align-items: center; gap: 0.55rem;
  background: transparent; border: 1.5px solid var(--line);
  padding: 0.5rem 0.85rem; border-radius: var(--r-sm);
  font-size: var(--fs-350); font-weight: 600; color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { display: inline-grid; gap: 4px; width: 18px; }
.nav-toggle__bars span { height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }

/* ----------------------------- Hero ----------------------------- */
.hero { position: relative; overflow: clip; background: var(--hero-stripe); }
.hero__inner { position: relative; padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.hero__media { margin: 0; display: none; }   /* hidden by default — shown side-by-side only where it fits (min-width block below); never stacked */
.hero__media img { display: block; width: 100%; height: clamp(220px, 52vw, 360px); object-fit: cover; object-position: 60% center; }
.hero__content { max-width: 38rem; }
.hero__title { margin-top: 0.5rem; font-size: clamp(1.8rem, 1.25rem + 2vw, 2.5rem); hyphens: auto; text-wrap: pretty; overflow-wrap: break-word; }
.hero__lead { margin-top: 1.15rem; font-size: var(--fs-500); color: var(--ink); max-width: 34rem;
  /* white glow — keeps the dark lead legible where it sits over the hero photo */
  text-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 14px rgba(255,255,255,0.8), 0 0 26px rgba(255,255,255,0.55); }

.trust-points { margin-top: 1.6rem; display: grid; gap: 0.7rem; }
.trust-points li { display: flex; align-items: center; gap: 0.7rem; font-weight: 550; color: var(--ink); }
.icon--check { width: 1.4rem; height: 1.4rem; color: var(--forest-600); }

.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ----------------------------- Services ----------------------------- */
.services { padding-block: var(--section-y-tight); background: var(--bg); }
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0; }
.service:nth-child(n) { border-left: 1px solid var(--line); }   /* vertical divider between columns (from mobile up) */
.service:nth-child(2n+1) { border-left: 0; }                    /* no divider on the first card of each row */
.service:nth-child(5) { grid-column: 1 / -1; }                  /* odd 5th card spans both columns in the 2-up grid */
.service { position: relative; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.85rem 0.7rem; }
.service:hover .service__title { color: var(--forest-700); }
.service__link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.service__link:focus-visible { outline-offset: -3px; }
.service__icon { color: var(--forest-700); transition: transform var(--t-med) var(--ease-out), color var(--t-fast); }
.service__icon .icon { width: 2.9rem; height: 2.9rem; }
.service:hover .service__icon { transform: translateY(-4px); color: var(--forest-600); }
.service__title { font-size: var(--fs-500); transition: color var(--t-fast) var(--ease-out); }
.service__desc { color: var(--muted); font-size: var(--fs-350); max-width: 22rem; }
/* Vertical hairline dividers between service columns: border-left on every card,
   cleared on the first card of each row — applied per breakpoint below. */

/* ----------------------------- Why / Trust ----------------------------- */
.why { padding-block: 0.5rem var(--section-y-tight); background: var(--bg); }  /* reduced top padding above the panels */
.why__inner { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); align-items: stretch; }
.why__content { background: var(--surface-alt); border-radius: var(--r-md); padding: clamp(1.6rem, 1.1rem + 2vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.why__content .section-head { margin-bottom: 0; }
.why__content h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.15; }
.checklist { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--fs-400); line-height: 1.35; color: var(--ink); font-weight: 500; }
.checklist .icon--check { width: 0.98rem; height: 0.98rem; margin-top: 0.18rem; }

/* Photo + green panel as one flush, equal-height rounded block */
.why__showcase { display: grid; grid-template-columns: 1fr; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.why__photo { aspect-ratio: 16 / 10; }
.why__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why__panel { background: var(--forest-800); color: #fff; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.why__panel-icon { color: var(--sage-300); line-height: 0; }
.why__panel-icon .icon { width: 2.6rem; height: 2.6rem; fill: none; stroke: currentColor; }
.why__panel h3 { color: #fff; font-size: var(--fs-600); }
.why__panel p { color: oklch(0.92 0.02 150); font-size: var(--fs-400); max-width: 30rem; }
.why__panel .btn { margin-top: 0.9rem; align-self: start; }

/* ----------------------------- Pricing ----------------------------- */
.pricing { padding-block: var(--section-y-tight); }
.pricing .section-head { margin-bottom: 1.25rem; }       /* tighter gap below the subtitle → card */
.pricing .section-head p { margin-top: 0.35rem; }        /* tighter gap between "Priser" and subtitle */
.pricing .section-head h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }  /* same reduced scale as the "Derfor velger kunder oss" heading */
.pricing__card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.pricing__tables { display: grid; grid-template-columns: 1fr; }
.pricing__tables .price-table + .price-table { border-top: 1px solid var(--line); }  /* separator when stacked */
.price-table { width: 100%; border-collapse: collapse; }
/* caption is .sr-only — visually hidden, kept for screen readers */
.price-table thead th {
  text-align: left; font-size: var(--fs-350); font-weight: 700; color: var(--ink);
  padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--line);
}
.price-table thead th:last-child { text-align: right; }
.price-table tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.price-table tbody td { text-align: right; font-weight: 650; color: var(--forest-700); white-space: nowrap; }
.price-table tbody th, .price-table tbody td {
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--line); font-size: var(--fs-400);
}
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: none; }

.pricing__foot { border-top: 1px solid var(--line); padding: 0.9rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pricing__note { color: var(--muted); font-size: var(--fs-350); max-width: 40rem; margin: 0; }

/* ----------------------------- Contact ----------------------------- */
.contact { padding-block: var(--section-y-tight); background: var(--bg); }
.contact__inner { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: start; }
.contact__intro h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }  /* same reduced scale as the other section headings */
.contact__lead { margin-top: 1.1rem; font-size: var(--fs-500); color: var(--muted); max-width: 32rem; }
.contact__details { margin-top: 1.8rem; display: grid; gap: 1rem; }
.contact__details li { display: flex; align-items: center; gap: 0.85rem; font-weight: 550; color: var(--ink); }
.contact__details .icon { width: 1.4rem; height: 1.4rem; color: var(--forest-600); }
.contact__details a:hover { color: var(--forest-600); text-decoration: underline; text-underline-offset: 3px; }

.contact-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-md); display: grid; gap: 1.1rem;
}
.field { display: grid; gap: 0.4rem; }
.field-row { display: grid; gap: 1.1rem; }
.field label { font-size: var(--fs-350); font-weight: 600; color: var(--ink); }
.field label span { color: var(--forest-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font-size: var(--fs-400);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--forest-600);
  box-shadow: 0 0 0 3px oklch(0.49 0.095 146 / 0.18);   /* TRIAL: match forest-600; was oklch(0.49 0.078 151 / 0.18) */
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field [aria-invalid="true"] { border-color: oklch(0.55 0.17 25); }
.field-error { display: none; margin-top: 0.1rem; font-size: var(--fs-300); font-weight: 600; color: oklch(0.52 0.17 25); }
.field-error[data-show] { display: block; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn__spinner {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  display: none; animation: spin 0.7s linear infinite;
}
.btn[data-loading] .btn__spinner { display: inline-block; }
.btn[data-loading] { opacity: 0.85; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status { font-size: var(--fs-350); font-weight: 600; min-height: 1.2em; }
.form-status[data-state="ok"] { color: var(--forest-600); }
.form-status[data-state="error"] { color: oklch(0.52 0.17 25); }
.form-fineprint { font-size: var(--fs-300); color: var(--muted); }

/* ----------------------------- Footer ----------------------------- */
.site-footer { background: var(--bg); padding-top: clamp(0.85rem, 0.5rem + 0.9vw, 1.5rem); }
.site-footer__cards {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.25rem);
}
.footer-card { border-radius: var(--r-lg); padding: clamp(0.85rem, 0.7rem + 0.5vw, 1.1rem); }

/* Left: dark info card — tight stacked text */
.footer-card--info {
  background: oklch(0.27 0.006 250); color: oklch(0.9 0.004 250);
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; line-height: 1.25;
  padding-left: clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem);   /* extra left inset for the text (card box unchanged) */
}
.footer-card__org { color: #fff; font-weight: 650; font-size: var(--fs-400); }
.footer-card__orgnr { font-size: var(--fs-350); color: oklch(0.78 0.004 250); }
/* Service area line: names the municipalities served (local-SEO + genuinely useful to visitors). */
.footer-card__areas {
  margin-top: 0.35rem; max-width: 34ch;
  font-size: var(--fs-300); line-height: 1.45; color: oklch(0.74 0.004 250);
}
.footer-card__phone {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem;
  color: #fff; font-weight: 650; font-size: var(--fs-500);
}
.footer-card__phone .icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.footer-card__phone:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Mobile (stacked, full-width card): centre the info card's content. align-items+text-align
   centre the stacked items (incl. the inline-flex phone), and the left inset is reset to the
   symmetric base padding so the centring is true to the card, not offset right. Above 800px the
   card is the narrow left column beside the certs and keeps its left-aligned, left-inset text. */
@media (max-width: 799px) {
  .footer-card--info {
    align-items: center;
    text-align: center;
    padding-left: clamp(0.85rem, 0.7rem + 0.5vw, 1.1rem);
  }
}

/* Right: green certifications card — logos clustered, kept short */
.footer-card--creds { background: var(--forest-700); display: flex; align-items: center; }
.footer-creds {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly;
  gap: clamp(1rem, 0.5rem + 1.4vw, 2rem); width: 100%;
}
.footer-creds img { display: block; width: auto; filter: brightness(0) invert(1); }
.footer-creds__bvn  { height: 2.73rem; }   /* outer logos scaled +30% */
.footer-creds__nito { height: 1.5rem; }
.footer-creds__bmtf { height: 1.6rem; }
.footer-creds__ffv  { height: 2.99rem; }   /* outer logos scaled +30% */
/* Phones (cert panel as a 2×2 spread to the panel edges, matching the mockup): a 2-column grid
   guarantees exactly two logos per row (no 3+1 wrap), `justify-content: space-between` pushes the
   columns out to the panel's left/right edges, and `justify-self` aligns the left column flush-left
   and the right column flush-right. Content-sized columns (max-content) mean the wide BVN never
   overflows a fixed half-column at narrow widths. `order` puts them in the requested spots. Above
   560px the cards sit side by side and the four return to one balanced row (original DOM order,
   boosted outer two). Heights are per-logo, so every logo keeps its exact scale. */
@media (max-width: 559px) {
  .footer-creds {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    align-items: center;
    column-gap: 0;                                                  /* space-between owns the middle gap */
    padding-inline: clamp(0px, calc((100% - 18rem) / 2), 1.5rem);   /* breathing room at the panel's outer edges; grows with width, 0 when narrow so the logos never overflow (18rem ≈ the two columns' combined width) */
  }
  .footer-creds li:nth-child(1) { order: 1; justify-self: start; }  /* BVN      -> row 1 left  */
  .footer-creds li:nth-child(4) { order: 2; justify-self: end;   }  /* Fagrådet -> row 1 right */
  .footer-creds li:nth-child(3) { order: 3; justify-self: start; }  /* BMTF     -> row 2 left  */
  .footer-creds li:nth-child(2) { order: 4; justify-self: end;   }  /* NITO     -> row 2 right */
}

/* Bottom line — slim, centered on the page background */
.site-footer__bar { padding-block: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); }
.site-footer__bar p { text-align: center; font-size: var(--fs-300); color: var(--muted); }
.site-footer__sep { margin-inline: 0.65rem; color: var(--line); }
.site-footer__bar a { color: var(--forest-600); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__bar a:hover { color: var(--forest-700); }
/* Mobile: force a break after the brand name so the colophon reads as two tidy centered
   lines (brand / slogan + Personvern) instead of wrapping mid-phrase after "trygghet". */
.site-footer__brk { display: none; }
@media (max-width: 767px) {
  .site-footer__brk { display: inline; }
  .site-footer__sep--first { display: none; }  /* the line break replaces this separator */
}

/* ----------------------------- Reveal motion ----------------------------- */
html.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ----------------------------- Mobile sticky CTA ----------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; gap: 0.6rem;
  padding: 0.6rem clamp(0.75rem, 4vw, 1.25rem);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -16px rgba(20, 44, 30, 0.5);
  transition: transform var(--t-med) var(--ease-out);
}
.mobile-cta[data-hidden] { transform: translateY(120%); }
.mobile-cta__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.8rem 0.5rem; border-radius: var(--r-sm);
  font-weight: 650; font-size: var(--fs-350); border: 1.5px solid transparent;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.mobile-cta__btn .icon { width: 1.1rem; height: 1.1rem; }
.mobile-cta__btn--primary { background: var(--cta-bg); color: #fff; }  /* TRIAL brighter CTA; was var(--forest-700) */
.mobile-cta__btn--ghost { background: var(--surface); color: var(--forest-700); border-color: var(--forest-700); }

/* ----------------------------- First-visit privacy notice ----------------------------- */
/* Slim bottom bar. Hidden by default (no-JS never sees it); main.js reveals it only on
   first visit and sets --cta-h so it stacks above the mobile call/book bar. */
.privacy-notice {
  position: fixed; left: 0; right: 0; bottom: var(--cta-h, 0px); z-index: var(--z-overlay);
  background: color-mix(in oklab, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px -18px rgba(20, 44, 30, 0.55);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--t-med) var(--ease-out), visibility var(--t-med) var(--ease-out);
}
.privacy-notice[data-show] { transform: translateY(0); visibility: visible; }
.privacy-notice__inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-block: 0.85rem;
}
.privacy-notice__text {
  margin: 0; flex: 1 1 22rem; min-width: 0;
  font-size: var(--fs-350); line-height: 1.45; color: var(--body);
}
.privacy-notice__text a { color: var(--color-link); font-weight: 600; }
.privacy-notice__actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .privacy-notice { transition: none; }
}

/* ----------------------------- Legal / policy pages ----------------------------- */
.legal-header { background: var(--header-bg); border-bottom: 1px solid var(--header-line); }
.legal-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
.legal-brand { display: inline-flex; }
.legal-brand img { height: 54px; width: auto; display: block; }
.legal-back { font-weight: 600; font-size: var(--fs-350); color: var(--color-link); white-space: nowrap; }
.legal-back:hover { text-decoration: underline; }

.legal { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(3rem, 2rem + 4vw, 5rem); background: var(--bg); }
.legal__inner { max-width: 720px; }
.legal h1 { font-size: var(--fs-800); }
.legal__updated { margin-top: 0.45rem; color: var(--muted); font-size: var(--fs-350); }
.legal__lead { margin-top: 1.3rem; font-size: var(--fs-500); color: var(--body); }
.legal section { margin-top: 2rem; }
.legal h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); margin-bottom: 0.55rem; }
.legal p { color: var(--body); }
.legal p + p { margin-top: 0.8rem; }
.legal address { font-style: normal; line-height: 1.75; }
.legal ul { margin-top: 0.6rem; padding-left: 1.25rem; list-style: disc; display: grid; gap: 0.4rem; }
.legal li { color: var(--body); }
.legal a { color: var(--color-link); }
.legal-todo { background: #fff3cd; color: #7a5b00; padding: 0.05em 0.4em; border-radius: 3px; font-weight: 600; }

/* ===================================================================
   Responsive — mobile-first enhancements
   =================================================================== */

/* Small screens: 2-up contact form fields (services are already 2-up from base) */
@media (min-width: 540px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* Tablet */
@media (min-width: 800px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .service:nth-child(5) { grid-column: auto; }   /* undo the 2-up full-width span at 3-up+ */
  .service:nth-child(n) { border-left: 1px solid var(--line); }
  .service:nth-child(3n+1) { border-left: 0; }
  .pricing__tables { grid-template-columns: 1fr 1fr; }
  .pricing__tables .price-table:first-child { border-right: 1px solid var(--line); }
  .pricing__tables .price-table + .price-table { border-top: 0; }
  .why__showcase { grid-template-columns: 1fr 1fr; }
  .why__photo { aspect-ratio: auto; }
  .contact__inner { grid-template-columns: 0.85fr 1.15fr; }
  .site-footer__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* Desktop: full nav + cinematic hero */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .why__inner { grid-template-columns: 0.82fr 1.18fr; }
}

/* Hero photo side-by-side only where it fits (>=800px): full-height, locked to the right edge of
   the 1190px area, fading into the grey on its left so the text reads over it. Below this it's
   hidden entirely (text-only hero) — never stacked on top. */
@media (min-width: 800px) {
  .hero__media {
    display: block;
    position: absolute; top: 0; bottom: 0; margin: 0; z-index: 1;
    left: calc((100% - min(100%, var(--container))) / 2 + var(--pad-inline));
    right: calc((100% - min(100%, var(--container))) / 2 + var(--pad-inline));
  }
  .hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: right top; border-radius: 0 var(--r-md) var(--r-md) 0; }
  .hero__media::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(95deg,
      var(--hero-stripe) 22%,
      color-mix(in oklab, var(--hero-stripe) 75%, transparent) 48%,
      color-mix(in oklab, var(--hero-stripe) 33%, transparent) 67%,
      transparent 83%);
  }
  .hero__inner {
    position: relative; z-index: 2; width: 100%;
    padding-block: clamp(4rem, 3rem + 1.5vw, 5.25rem) clamp(1.75rem, 1.25rem + 1.3vw, 2.4rem);
  }
  .hero__content { max-width: 34rem; }
}

/* 5-up services stay gated to 1200px — below that they overflow at 960–1100px (3-up holds). */
@media (min-width: 1200px) {
  .services__grid { grid-template-columns: repeat(5, 1fr); }
  .service:nth-child(n) { border-left: 1px solid var(--line); }
  .service:nth-child(5n+1) { border-left: 0; }
}

/* Mobile nav collapse */
@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav__list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem var(--pad-inline) 1.25rem;
    clip-path: inset(0 0 100% 0); opacity: 0;
    transition: clip-path var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
    pointer-events: none;
  }
  .primary-nav { position: static; }
  .site-header__inner { position: relative; }
  .primary-nav__list[data-open] { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .primary-nav__list > li { width: 100%; }
  .primary-nav__list > li > a:not(.btn) {
    display: block; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--sage-100);
    font-size: var(--fs-500);
  }
  .primary-nav__list > li > a:not(.btn)::after { display: none; }
  .primary-nav__cta { margin-top: 1rem; }
  .primary-nav__cta .btn { width: 100%; }
}

/* Phones: surface the persistent call/book bar */
@media (max-width: 720px) {
  .mobile-cta { display: flex; }
}

/* Mobile-view-only refinements (phone / 2-up layout, below the 800px tablet breakpoint) */
@media (max-width: 799px) {
  .service__title { font-size: var(--fs-400); }                       /* slightly smaller service headlines */
  .pricing__tables .price-table:nth-child(2) thead { display: none; } /* one Tjeneste/Pris header for the stacked price list */
  .hero__actions { justify-content: center; }                         /* center the two hero buttons */
}

/* ----------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
}