/*
 * "Frisk" theme — lys og moderne (F4-644).
 * Mykt blå-tint hvit bakgrunn, dyp teal-blå accent, sans-serif og rundede
 * pill-CTAs. Speiler screenshot 002_moderne_frisk: horisontal split-header
 * med aktiv nav-item som pill, hero med tekst-venstre + stor rundet media-
 * plate høyre, stats-strimmel i bunn som rundede kort på surface.
 * Passer moderne bedrifter, utleie, konsulent — standard bruk.
 */
:root {
    --site-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --site-heading-font: var(--site-font);
    --site-text: #0f1720;
    --site-muted: #5b6472;
    --site-bg: #f6f8fd;
    --site-surface: #ffffff;
    --site-border: #e3e7f0;
    --site-stat-bg: #f0f4f7;    /* subtile blå-grå surface for stats-kort (uten border) */
    --site-accent: #0891b2;
    --site-accent-contrast: #ffffff;
    --site-maxw: 80rem;
    --site-space: 1rem;
    /* Task D (2026-07-05): overrides the shared 1.5x default in
       blocks-shared.css so Frisk keeps its 2x block-flow rhythm. */
    --block-flow-space: calc(var(--site-space) * 2);
    --site-radius: 20px;
}

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--site-font);
    color: var(--site-text);
    background: var(--site-bg);
    line-height: 1.55;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--site-heading-font);
    line-height: 1.1;
    letter-spacing: -.025em;
    font-weight: 800;
}

img { max-width: 100%; height: auto; border-radius: var(--site-radius); }

a { color: var(--site-accent); }

/* ============================================================
 * Header — horisontal split. Aktiv nav-item = accent pill.
 * ============================================================ */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space);
    max-width: 100%;
    margin: 0 auto;
    height: 80px;
    padding: 0 max(calc(var(--site-space) * 2), calc((100vw - var(--site-maxw)) / 2));
    background: var(--site-bg);
    border-bottom: 1px solid var(--site-border);
}
.site-header__brand {
    font-family: var(--site-font);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--site-text);
    line-height: 1;
}
.site-nav { display: flex; align-items: center; margin: 0 auto; }
.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav a {
    text-decoration: none;
    font-family: var(--site-font);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    color: var(--site-text);
    padding: .65rem 1.1rem;
    border-radius: 999px;
    transition: background-color .18s ease, color .18s ease;
}
.site-nav a:hover {
    background: color-mix(in srgb, var(--site-text) 6%, transparent);
}
.site-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--site-text) 8%, transparent);
    color: var(--site-text);
}

.site-main {
    max-width: var(--site-maxw);
    margin: 0 auto;
    padding: calc(var(--site-space) * 2) calc(var(--site-space) * 2) calc(var(--site-space) * 4);
}

.site-footer {
    max-width: 100%;
    margin: calc(var(--site-space) * 4) 0 0;
    padding: calc(var(--site-space) * 3) max(calc(var(--site-space) * 2), calc((100vw - var(--site-maxw)) / 2)) calc(var(--site-space) * 2);
    background: var(--site-surface);
    border-top: 1px solid var(--site-border);
    color: var(--site-muted);
    font-size: .95rem;
}
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: calc(var(--site-space) * 1.75); list-style: none; margin: 0 0 var(--site-space); padding: 0; }
.site-footer a { text-decoration: none; color: var(--site-text); }
.site-footer a:hover { color: var(--site-accent); }
.site-footer__legal { margin-top: var(--site-space); font-size: .85rem; }
.site-footer__legal-sep { margin: 0 .4em; color: var(--site-muted); }

/* ============================================================
 * Block layout basics
 * ============================================================ */
.block--hero,
.block--section,
.block--columns.columns--full,
.block[class*="bg--"] { margin-block: 0; }
.block > :first-child { margin-top: 0; }
.block > :last-child  { margin-bottom: 0; }
.block--hero .block__title { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 .5rem; font-weight: 800; }
.block--hero .block__intro { color: var(--site-muted); font-size: 1.15rem; }
.block--text :first-child { margin-top: 0; }

.hero__text > .block { margin-block: calc(var(--site-space) * 0.35); }
.hero__text > .block:first-child { margin-top: 0; }
.hero__text > .block:last-child  { margin-bottom: 0; }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { padding: var(--site-space); border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface); margin-block: .6rem; }
.news-item__title { margin: 0 0 .25rem; font-size: 1.2rem; }
.news-item__date { color: var(--site-muted); font-size: .9rem; }

/* ============================================================
 * Buttons — pill-shape (999px), fat weight, subtle animation
 * ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: var(--site-space);
    padding: .95rem 1.75rem;
    /* Transparent border så primary og ghost får identisk total-høyde
       (border-box + samme border-width = samme visuell-størrelse). */
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--site-text);
    color: #fff;
    text-decoration: none;
    font-family: var(--site-font);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease, background-color .18s ease;
}
.btn:hover { background: var(--site-accent); transform: translateY(-1px); }
.btn__icon { width: 1em; height: 1em; flex: none; }

.block--hero[class*="bg--"],
.block--hero.hero--has-bg,
.block--hero.hero--has-bg-video,
.block--section.section--full { width: 100vw; margin-left: calc(50% - 50vw); }

.block--columns.columns--full { position: relative; isolation: isolate; }
.block--columns.columns--full::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background-color: inherit;
    z-index: -1;
    pointer-events: none;
}

.bg--surface { background: var(--site-surface); }
.bg--muted   { background: color-mix(in srgb, var(--site-accent) 8%, var(--site-surface)); }
.bg--accent  { background: var(--site-accent); color: var(--site-accent-contrast); }
.bg--accent .hero__eyebrow, .bg--accent .hero__lead, .bg--accent a { color: var(--site-accent-contrast); }
.bg--dark    { background: var(--site-text); color: #f4f6fa; }
.bg--dark .hero__lead, .bg--dark a { color: #cdd5e2; }
.bg--dark .hero__eyebrow { color: var(--site-accent); }

.section--full { width: 100%; }
.section__inner { max-width: var(--site-maxw); margin-inline: auto; padding-inline: calc(var(--site-space) * 2); position: relative; z-index: 1; }
.pad--s { padding-block: calc(var(--site-space) * 1.5); }
.pad--m { padding-block: calc(var(--site-space) * 3); }
.pad--l { padding-block: calc(var(--site-space) * 5); }
/* Sidebar-first (architecture.md § Fire): the customer's Border Radius /
 * Hjørner controls own radius. No theme default — a bare bg section
 * renders with sharp corners unless the sidebar sets a value. */
.section--has-bg { background-image: var(--section-bg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.section--has-bg > * { position: relative; z-index: 1; }
.section--overlay-light::before,
.section--overlay-medium::before,
.section--overlay-dark::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); pointer-events: none; z-index: 0; border-radius: inherit; }
.section--overlay-medium::before { background: rgba(0,0,0,.5); }
.section--overlay-dark::before   { background: rgba(0,0,0,.7); }

.hero__bg-video,
.section__bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}
.hero--has-bg-video, .section--has-bg-video { position: relative; color: #fff; }
.hero--has-bg-video .hero__inner { position: relative; z-index: 1; }
.section--has-bg-video > :not(.section__bg-video) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .hero__bg-video, .section__bg-video { display: none; }
    .hero--has-bg-video { background-image: var(--hero-poster, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
    .section--has-bg-video { background-image: var(--section-poster, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
}

/* Secondary/ghost — accent + outline pill */
.btn--secondary { background: var(--site-accent); color: var(--site-accent-contrast); }
.btn--secondary:hover { background: color-mix(in srgb, var(--site-accent) 85%, black); }
.btn--ghost {
    background: transparent;
    color: var(--site-text);
    border: 1.5px solid var(--site-border);
    /* Samme padding som .btn så høyden matcher når de står side-om-side. */
    padding: .95rem 1.75rem;
}
.btn--ghost:hover {
    border-color: var(--site-text);
    background: transparent;
    color: var(--site-text);
    transform: translateY(-1px);
}
/* .block--button er inline-block; standard margin ovenfor/under forårsaker
   at knapper wrapper til stakkete rader. Sett vertikal margin til 0 —
   inline-flow beholder dem side-om-side, .block--text + .block--button-
   naboer får sin luft via en spesifikk regel. */
.block--button {
    display: inline-block;
    vertical-align: top;
    margin: 0 .5rem .5rem 0;
}
.block--text + .block--button { margin-top: var(--site-space); }
.btn--custom { background: var(--btn-bg, var(--site-accent)) !important; color: #fff !important; border: none !important; }
.btn--custom:hover { filter: brightness(0.92); }
.btn--sm { padding: .55rem 1.15rem; font-size: .9rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--site-space); align-items: center; }
.bg--accent .btn { background: #fff; color: var(--site-accent); }
.bg--accent .btn--ghost { background: transparent; color: var(--site-accent-contrast); border-color: color-mix(in srgb, var(--site-accent-contrast) 40%, transparent); }
.block--button .btn { margin-top: 0; }
.button--center { display: block; text-align: center; margin-right: 0; }
.button--right  { display: block; text-align: right;  margin-right: 0; }

/* ============================================================
 * Hero — screenshot 002 mønster: 2-col med tekst venstre, media høyre
 * (media får store rundede hjørner). eyebrow som accent-tint pill.
 * ============================================================ */
.block--hero { margin: 0; padding: 0; position: relative; }
.hero__inner {
    max-width: var(--site-maxw);
    margin-inline: auto;
    padding: calc(var(--site-space) * 3.5) calc(var(--site-space) * 2);
    position: relative;
    z-index: 1;
}
.hero--h-xl { min-height: 100vh; }
.hero--h-xl .hero__inner { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--site-space) * 4); }

.block--hero.radius--l,
.block--hero.radius--m,
.block--hero.radius--s {
    width: auto;
    max-width: var(--site-maxw);
    margin-inline: auto;
    overflow: hidden;
    border-radius: 32px;
}
.block--hero.radius--m { border-radius: 22px; }
.block--hero.radius--s { border-radius: 14px; }

body:has(.site-main > .block--hero:first-child) .site-main { padding-top: 0; }

.hero--has-bg { background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero--has-bg .hero__eyebrow { color: #fff; }
.hero--has-bg .hero__lead    { color: rgba(255,255,255,.85); }
.hero--has-bg .hero__title   { color: #fff; }
.hero--overlay-light::before,
.hero--overlay-medium::before,
.hero--overlay-dark::before  { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); pointer-events: none; z-index: 0; }
.hero--overlay-medium::before { background: rgba(0,0,0,.5); }
.hero--overlay-dark::before   { background: rgba(0,0,0,.7); }

/* Eyebrow som pill-chip med bullet-punkt (matcher screenshot 002) */
.hero__eyebrow,
.heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    background: color-mix(in srgb, var(--site-accent) 12%, transparent);
    color: var(--site-accent);
    padding: .55rem 1.05rem;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    font-family: var(--site-font);
}
.hero__eyebrow::before,
.heading__eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--site-accent);
    flex: none;
}

.hero__title {
    font-size: clamp(2.2rem, 4.6vw, 3.8rem);
    line-height: 1.05;
    margin: 0 0 calc(var(--site-space) * 1.25);
    font-weight: 800;
    letter-spacing: -.035em;
}
/* Overskrift i hero rendres via HeadingBlock som .heading__text — samme
   typografi som .hero__title. Størrelsen er skalert ned for å matche
   proporsjonene i screenshot 002. */
.block--hero .block--heading .heading__text {
    font-size: clamp(2.2rem, 4.6vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 800;
}
.hero__lead { font-size: 1.15rem; color: color-mix(in srgb, var(--site-text) 72%, transparent); margin: 0 0 var(--site-space); max-width: 40ch; line-height: 1.5; }

/* Accent-farget linje i overskrift via <em> (text_html-mønsteret F4-583).
   Overstyrer <em>-default (italic) — vi vil ha farge, ikke skråstilt tekst. */
.heading__text em,
.hero__title em,
.block__title em {
    font-style: normal;
    color: var(--site-accent);
}

/* Text-block inside hero styles itself normally — the earlier
   `.block--hero .block--text p { color, font-size, line-height, max-width:
   40ch }` override made a nice-looking ingress out of the box, but the
   customer had no sidebar control to widen, un-mute, or resize it. Once the
   seed paragraph was replaced with the customer's own copy, they were stuck
   with 40ch/muted forever. FriskStarterTemplate seeds `<p style="…max-width:
   52ch;margin:0 auto;">` inline for the templated ingress look — that
   inline style survives until the customer edits meaningfully, then normal
   text-block behavior takes over. Per architecture.md § Fire, tema-CSS
   should not impose visual constraints the customer can't unwind from the
   sidebar. */
.hero--centered .hero__inner { text-align: center; }
.hero--centered .hero__eyebrow,
.hero--centered .heading__eyebrow { }
.hero--centered .hero__lead { margin-inline: auto; }
.hero--centered .btn-group { justify-content: center; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: calc(var(--site-space) * 1.5); align-items: center; }
.hero--centered .hero__actions { justify-content: center; }
.hero__actions .block--button { margin: 0; }
.hero--media-right .hero__inner,
.hero--media-left .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--site-space) * 3.5);
    /* stretch (ikke center) så bildet fyller HELE hero-høyden fra topp til
       bunn, matcher screenshot 002-mønsteret der høyre-kolonnen er én
       massiv rundet foto-plate. */
    align-items: stretch;
    min-height: 640px;
}
.hero--media-right .hero__text,
.hero--media-left .hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.hero--media-left .hero__text { order: 2; }
.hero--media-left .hero__media { order: 1; }
.hero--media-right .hero__media,
.hero--media-left .hero__media {
    display: block;
    height: 100%;
    min-height: 100%;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 36px;
    display: block;
    /* Ingen aspect-ratio-lås — bildet strekker seg til hero__inner's høyde. */
}

/* Stats INNE i hero (frisk-mønsteret): kompakt 4-kort rad nederst i venstre
   kolonne. auto-fit gjør at 4 kortene fyller hele bredden, mens min-width er
   liten nok til at de aldri wrapper i en ~50% kolonne. */
.block--hero .block--stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin: 0;
}
.block--hero .block--stats .stat {
    background: var(--site-stat-bg);
    border: 0;
    border-radius: 16px;
    padding: .95rem 1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}
.block--hero .block--stats .stat__value { font-size: clamp(1.3rem, 2.2vw, 1.55rem); font-weight: 800; }
.block--hero .block--stats .stat__label { font-size: .82rem; }

/* Columns row + card */
.block--columns { display: grid; gap: calc(var(--site-space) * 1.25); align-items: stretch; }
.block--columns.cols-2 { grid-template-columns: repeat(2, 1fr); }
.block--columns.cols-3 { grid-template-columns: repeat(3, 1fr); }
.block--columns.cols-4 { grid-template-columns: repeat(4, 1fr); }
.block--column { margin-block: 0; min-width: 0; }
.block--card {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 22px;
    padding: calc(var(--site-space) * 1.75);
    display: flex;
    flex-direction: column;
    gap: calc(var(--site-space) * .6);
    overflow: hidden;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.block--card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--site-accent) 35%, var(--site-border)); box-shadow: 0 12px 28px rgba(15, 23, 32, .08); }
.block--card .card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(var(--site-space) * .5); }
.block--card .card__link { margin-top: auto; }
.block--card .card__image-wrap { position: relative; margin: calc(var(--site-space) * -1.75) calc(var(--site-space) * -1.75) var(--site-space); }
.block--card .card__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.block--card .card__icon-circle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: 56px; height: 56px; background: var(--site-accent); color: var(--site-accent-contrast); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--site-accent) 30%, transparent); }
.block--card .card__icon-circle svg { width: 28px; height: 28px; }
.block--card.card--has-image { padding-top: 0; }
.block--card.card--has-image .card__image-wrap { margin-top: 0; }
.card__icon { width: 40px; height: 40px; color: var(--site-accent); margin-bottom: calc(var(--site-space) * .25); background: color-mix(in srgb, var(--site-accent) 12%, transparent); padding: 8px; border-radius: 12px; }
.card__title { font-size: 1.25rem; line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.015em; }
.card__text { color: var(--site-muted); margin: 0; }
.card__link { margin-top: auto; padding-top: var(--site-space); color: var(--site-accent); text-decoration: none; font-weight: 600; align-self: flex-start; }
.card__link:hover { text-decoration: underline; }

.block--image .block__media { border-radius: 22px; }
.block--image                { display: block; margin-inline: 0; }

/* Sentrer .block--text som følger en sentrert overskrift i samme seksjon.
   Inline `style="text-align:center"` stripes av HtmlSanitizer, så vi må
   løse det via CSS. */
.block--section:has(> .block--heading.heading--center) > .block--text,
.section__inner:has(> .block--heading.heading--center) > .block--text {
    text-align: center;
    max-width: 62ch;
    margin-inline: auto;
}
.block--image .block__media  { display: block; width: 100%; height: auto; border-radius: 22px; }
.block--image.img--w-full    { max-width: 100%; }
.block--image.img--w-large   { max-width: 75%; }
.block--image.img--w-medium  { max-width: 50%; }
.block--image.img--w-small   { max-width: 25%; }
.block--image.img--w-natural { width: fit-content; max-width: 100%; }
.block--image.img--center { margin-inline: auto; }
.block--image.img--right  { margin-inline: auto 0; }
.block--image .block__caption { text-align: inherit; color: var(--site-muted); font-size: .9rem; }

.block--image .image__video-link { position: relative; display: block; line-height: 0; border-radius: inherit; }
.block--image .image__video-link .block__media { width: 100%; height: auto; display: block; }
.block--image .image__play-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;
    background: var(--site-accent); color: #fff; border-radius: 50%;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
    transition: transform 150ms ease;
}
.block--image .image__video-link:hover .image__play-button { transform: translate(-50%, -50%) scale(1.06); }
.block--image .image__play-icon { width: 36px; height: 36px; margin-left: 3px; }

.block--checklist { list-style: none; padding: 0; margin: var(--site-space) 0; }
.block--checklist .checklist__item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; color: var(--site-accent); }
.block--checklist .checklist__icon-wrap { display: inline-flex; flex: none; align-items: center; user-select: none; cursor: default; }
.block--checklist .checklist__icon { width: 1.3em; height: 1.3em; flex: none; margin-top: 0.15em; }
.block--checklist .checklist__text { flex: 1; color: var(--site-text); line-height: 1.5; outline: none; }

.block--gallery {
    list-style: none; padding: 0; margin: calc(var(--site-space) * 1.5) 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--site-space);
}
.block--gallery[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.block--gallery[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.block--gallery .block__item {
    margin: 0; list-style: none; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 18px;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
}
.block--gallery .block__media { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.block--gallery .block__item--empty { border: 2px dashed var(--site-border); background: transparent; }
@media (max-width: 600px) { .block--gallery, .block--gallery[data-columns="4"] { grid-template-columns: repeat(2, 1fr); } }

.block--gallery.gallery--style-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: calc(var(--site-space) * 2);
    padding-block: var(--site-space);
    background: var(--site-surface);
    grid-template-columns: none;
    border: 0;
}
.block--gallery.gallery--style-logos .block__item {
    flex: 0 0 auto;
    aspect-ratio: auto;
    background: none;
    border: 0;
    overflow: visible;
}
.block--gallery.gallery--style-logos .block__media {
    width: auto; height: auto; max-height: 48px; object-fit: contain;
    filter: grayscale(1); opacity: .55;
    transition: filter .25s ease, opacity .25s ease;
}
.block--gallery.gallery--style-logos .block__media:hover { filter: grayscale(0); opacity: 1; }

/* Heading */
.block--heading { display: block; margin: 0 0 var(--site-space); }
.heading--center { text-align: center; }
.heading--right { text-align: right; }
.heading__text { margin: 0; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.heading__text:is(h2) { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.heading__text:is(h3) { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.heading__text:is(h4) { font-size: 1.2rem; }

.block--team-member { text-align: center; max-width: 280px; margin-inline: auto; padding: var(--site-space); }
.team__photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto var(--site-space); }
.team__photo--placeholder { background: color-mix(in srgb, var(--site-muted) 18%, var(--site-surface)); }
.team__body { padding: 0; }
.team__name { margin: 0 0 .15em; font-size: 1.15rem; font-weight: 700; }
.team__role { margin: 0 0 var(--site-space); color: var(--site-muted); font-size: .9rem; }
.team__socials { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: calc(var(--site-space) * .6); }
.team__socials li { margin: 0; }
.team__socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--site-text); background: color-mix(in srgb, var(--site-muted) 18%, transparent); transition: background-color .15s ease, color .15s ease; }
.team__socials a:hover { background: var(--site-accent); color: var(--site-accent-contrast); }
.team__socials svg { width: 16px; height: 16px; }

.block--testimonial { text-align: center; padding-block: calc(var(--site-space) * 3); padding-inline: var(--site-space); max-width: 720px; margin-inline: auto; }
.testimonial__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--site-space); border: 3px solid var(--site-bg); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); display: block; }
.testimonial__rating { display: inline-flex; gap: 2px; margin-bottom: calc(var(--site-space) * .75); }
.testimonial__star { width: 18px; height: 18px; fill: var(--site-accent); }
.testimonial__star--empty { fill: color-mix(in srgb, var(--site-muted) 40%, transparent); }
.testimonial__quote { font-size: 1.35rem; line-height: 1.45; margin: 0 0 var(--site-space); font-weight: 500; }
.testimonial__quote::before { content: "\201C"; }
.testimonial__quote::after  { content: "\201D"; }
.testimonial__author { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.testimonial__name { font-weight: 700; }
.testimonial__role { color: var(--site-muted); font-size: .9rem; }

/* ============================================================
 * Stats — screenshot 002 mønster: rundede kort-pill på surface med
 * store tall øverst, lite label under. Boxed = default look.
 * ============================================================ */
.block--stats { display: flex; flex-wrap: wrap; gap: var(--site-space); justify-content: flex-start; margin: calc(var(--site-space) * 1.5) 0; }
.stats--center { justify-content: center; }
.stats--right  { justify-content: flex-end; }
.stat {
    background: var(--site-stat-bg);
    border: 0;
    border-radius: 18px;
    padding: 1.15rem 1.35rem;
    min-width: 130px;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}
.stat__icon { display: inline-flex; flex: none; color: var(--site-accent); }
.stat__icon svg { width: 32px; height: 32px; }
.stat__body { display: flex; flex-direction: column; gap: .15rem; }
.stat__value { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; line-height: 1.05; color: var(--site-text); letter-spacing: -.02em; }
.stat__label { font-size: .95rem; color: var(--site-muted); font-weight: 500; }

.block--stats.stats--boxed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Container-styling utility */
.bg--custom { background: var(--block-bg, transparent); }
.border--thin   { border: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent); }
.border--medium { border: 2px solid color-mix(in srgb, var(--site-text) 22%, transparent); }
.shadow--s { box-shadow: 0 1px 2px rgba(15, 23, 32, 0.04), 0 1px 3px rgba(15, 23, 32, 0.03); }
.shadow--m { box-shadow: 0 4px 12px rgba(15, 23, 32, 0.06), 0 2px 4px rgba(15, 23, 32, 0.04); }
.shadow--l { box-shadow: 0 18px 40px rgba(15, 23, 32, 0.10), 0 6px 14px rgba(15, 23, 32, 0.06); }

.block--fs-override :is(.heading__text, h1, h2, h3, h4, h5, h6, p, li) { font-size: inherit; }

/* Responsive */
@media (max-width: 820px) {
    .hero--media-right .hero__inner,
    .hero--media-left .hero__inner { grid-template-columns: 1fr; }
    .hero--media-left .hero__text,
    .hero--media-left .hero__media { order: 0; }
    .block--columns.cols-2,
    .block--columns.cols-3,
    .block--columns.cols-4 { grid-template-columns: 1fr !important; }
}

/* Mobile hamburger nav */
.site-header__menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: .5rem;
    margin: 0;
    color: inherit;
    cursor: pointer;
    line-height: 0;
}
.site-header__menu-toggle:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.site-header__menu-toggle svg { width: 28px; height: 28px; }
.site-header__menu-toggle__close { display: none; }
.site-header[data-nav-open] .site-header__menu-toggle__open { display: none; }
.site-header[data-nav-open] .site-header__menu-toggle__close { display: block; }

@media (max-width: 900px) {
    .site-header { position: relative; padding: 0 var(--site-space); height: 68px; }
    .site-header__brand { font-size: 1.15rem; }
    .site-header__menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--site-bg);
        border-top: 1px solid var(--site-border);
        padding: var(--site-space);
        z-index: 20;
    }
    .site-header[data-nav-open] .site-nav { display: block; }
    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-nav a {
        display: block;
        padding: .85rem 1rem;
        border-radius: 12px;
    }
}