/* Centi Gruppen, centigruppen.no
   Rolig og lyst uttrykk: én skrift i vekt 400, få størrelser, flater over hele bredden,
   firkantede blokker og Centis solnedgang som eneste aksent. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Merkefargene: marineblå som i Centi CRM og Centi-oransje som i CentiSales, nesten motsatt på fargesirkelen */
  --navy: #17365d;
  --orange: #f5820d;
  /* Nøytrale ved siden av merkefargene: svart, grått og hvitt */
  --black: #111214;

  --white: #ffffff;
  --soft: #efefef;
  --subtle: #f7f7f7;
  --block: #dddddd;
  --dark: var(--navy);
  --deep: #0b1d38;
  --ink: #121315;
  --ink-2: #474b50;
  --muted: #5d6166;
  --muted-d: #aab8cc;
  --line: #e4e4e4;
  --line-d: #2b4a72;
  --sun: var(--orange);
  /* oransje til tekst og ikoner på lys bunn; den lyse oransjen kan ikke leses på hvitt */
  --sun-ink: #a95400;
  --error: #b42318;
  --field: #8b8f95;

  --t-sm: 0.8125rem; --l-sm: 1.125rem;
  --t-base: 1rem; --l-base: 1.625rem;
  --t-lg: 1.125rem; --l-lg: 1.625rem;
  --t-xl: 1.5rem; --l-xl: 2rem;
  --t-2xl: 1.625rem; --l-2xl: 2.125rem;

  --header-height: 60px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* fjæren fra «animated-hero» (stivhet 50, demping 10, masse 1) over 1000 ms */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.053, 0.177, 0.332, 0.492, 0.638, 0.762, 0.86, 0.933, 0.984, 1.017, 1.035, 1.042, 1.043, 1.039, 1.033, 1.026, 1.019, 1.013, 1.008, 1); }
}
@media (min-width: 1024px) {
  :root {
    --header-height: 68px;
    --t-lg: 1.25rem; --l-lg: 1.75rem;
    --t-xl: 1.75rem; --l-xl: 2.25rem;
    --t-2xl: 2.25rem; --l-2xl: 2.875rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-base);
  line-height: var(--l-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--t-2xl); line-height: var(--l-2xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-xl); line-height: var(--l-xl); letter-spacing: -0.02em; }
h3 { font-size: var(--t-lg); line-height: var(--l-lg); letter-spacing: -0.015em; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; transition: color 160ms ease, background-color 160ms ease; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
:focus-visible { outline: 2px solid var(--sun-ink); outline-offset: 4px; border-radius: 2px; }
.surface-dark :focus-visible, .surface-black :focus-visible, .site-footer :focus-visible, [data-theme="dark"] :focus-visible { outline-color: var(--sun); }
::selection { background: #fdd9b5; color: var(--ink); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.lead { color: var(--muted); max-width: 38rem; }

.wrap { width: calc(100% - 32px); max-width: 1280px; margin-inline: auto; }
@media (min-width: 761px) { .wrap { width: calc(100% - 96px); } }
@media (min-width: 1201px) { .wrap { width: calc(100% - 160px); } }

.skip-link {
  position: fixed; top: 12px; left: 16px; z-index: 30;
  padding: 12px 20px; background: var(--white); color: var(--ink);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  translate: 0 -220%;
}
.skip-link:focus { translate: 0 0; }

/* ---------- Flater ---------- */

.surface { padding-block: 80px; }
@media (min-width: 761px) { .surface { padding-block: 112px; } }
@media (min-width: 1001px) { .surface { padding-block: 144px; } }
.surface.follows { padding-top: 0; }
.surface-grey { background: var(--soft); --muted: #575b60; }
.surface-dark, .surface-black { color: var(--white); --muted: var(--muted-d); --ink-2: #c5d0de; }
.surface-dark { background: var(--dark); }
.surface-black { background: var(--black); --muted: #a3a8ad; --ink-2: #c9ccd0; --line-d: #2c2e31; }

.grid12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; }
@media (min-width: 761px) {
  .grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-head { grid-column: span 2; }
  .col-body { grid-column: span 4; }
}
@media (min-width: 1001px) {
  .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-head { grid-column: span 4; }
  .col-body { grid-column: span 8; }
}

.head { display: grid; gap: 16px; margin-bottom: 40px; }
@media (min-width: 761px) { .head { margin-bottom: 56px; } }
.head p:not(.eyebrow) { color: var(--muted); max-width: 34rem; }
/* Etiketten over overskriften har samme ord som lenken dit, så man ser at man har kommet riktig */
.eyebrow { justify-self: start; margin-bottom: -4px; color: var(--sun-ink); font-size: var(--t-sm); line-height: var(--l-sm); letter-spacing: 0.02em; }
.surface-dark .eyebrow, .surface-black .eyebrow { color: var(--sun); }
.col-head .head { margin-bottom: 0; }

/* ---------- Knapper og lenker ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 6px 20px;
  border: 0; border-radius: 4px;
  font-family: inherit; cursor: pointer;
  gap: 10px;
  font-size: var(--t-base); line-height: 1.4;
  transition: color 160ms ease, background-color 160ms ease, transform 200ms var(--ease-out);
}
.btn-icon { flex: none; width: 16px; height: 16px; transition: translate 200ms var(--ease-out); }
.btn:hover .btn-icon { translate: 3px 0; }
.btn:active { transform: scale(0.98); }
.btn-ink { background: var(--navy); color: var(--white); }
.btn-ink:hover { background: var(--deep); }
.btn-plain { background: transparent; color: var(--ink); }
.btn-plain:hover { background: rgba(0, 0, 0, 0.05); color: var(--sun-ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(18, 19, 21, 0.28); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: #f7993f; }
.btn:disabled { cursor: progress; opacity: 0.6; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.text-link { color: var(--sun-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover { color: var(--ink); }

/* ---------- Topplinjen (etter «header-2» fra 21st.dev) ----------
   En stripe av mørkt, uskarpt glass som flyter øverst. Når skriptet kjører og man er helt øverst, er den
   gjennomsiktig over den mørke toppen. Teksten er hvit hele tiden, så topplinjen bytter aldri farge.
   Glasset ligger på ::before. backdrop-filter på selve stripen ville låst den faste mobilmenyen inne i den. */

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; color: var(--white); }
.site-header .bar {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  width: calc(100% - 16px); max-width: 1040px; min-height: var(--header-height);
  margin-top: 8px; padding-inline: 12px 6px; border-radius: 12px;
  transition: width 400ms var(--ease-out), max-width 400ms var(--ease-out), margin 400ms var(--ease-out), padding 400ms var(--ease-out);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-color: rgba(11, 29, 56, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
@media (min-width: 761px) { .site-header .bar { width: calc(100% - 48px); margin-top: 12px; padding-inline: 16px 8px; } }
@media (min-width: 1024px) { .site-header .bar { gap: 0 16px; } }
@media (scripting: enabled) {
  .site-header:not([data-scrolled]) .bar { width: calc(100% - 32px); max-width: 1280px; margin-top: 0; padding-inline: 0; }
  .site-header:not([data-scrolled]) .bar::before { background-color: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (scripting: enabled) and (min-width: 761px) { .site-header:not([data-scrolled]) .bar { width: calc(100% - 96px); } }
@media (scripting: enabled) and (min-width: 1201px) { .site-header:not([data-scrolled]) .bar { width: calc(100% - 160px); } }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 26px; height: 26px; flex: none; fill: currentColor; }
.brand-name { display: grid; font-size: var(--t-sm); line-height: 1rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand-name span + span { color: var(--muted-d); }
.site-header :focus-visible { outline-color: var(--sun); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: 6px 12px; border-radius: 6px; line-height: 1.5; white-space: nowrap; }
.site-nav a:hover { background: rgba(255, 255, 255, 0.1); }
.site-nav a[aria-current="page"]:not(.nav-cta) { color: var(--sun); }
.site-nav a.nav-cta { margin-left: 10px; padding-inline: 14px; background: var(--white); color: var(--ink); }
.site-nav a.nav-cta:hover { background: #e4e4e4; }
@media (min-width: 1024px) { .site-nav a:not(.nav-cta) { padding-inline: 10px; } }

/* Menyknappen: to streker som glir sammen til et kryss */
.nav-toggle {
  display: none; place-items: center; width: 40px; height: 40px; margin-left: auto; margin-right: -4px;
  border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; overflow: visible; }
.toggle-line { transform-box: fill-box; transform-origin: center; transition: translate 300ms var(--ease-out), rotate 300ms var(--ease-out); }
.nav-toggle[aria-expanded="true"] .toggle-line:first-child { translate: 0 4px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] .toggle-line:last-child { translate: 0 -4px; rotate: -45deg; }

/* Mobil: menyen dekker hele skjermen bak stripen, og siden bak står stille (html.menu-open).
   Uten JavaScript står topplinjen i flyten med menyen åpen. */
@media (max-width: 1023px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed; inset: 0; z-index: -2;
    display: flex; flex-direction: column; margin: 0;
    padding: calc(var(--header-height) + 48px) 24px max(32px, env(safe-area-inset-bottom));
    background: var(--deep); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms;
  }
  .nav-toggle[aria-expanded="true"] + .site-nav { opacity: 1; visibility: visible; transition: opacity 250ms ease; }
  .site-nav ul { flex: 1; flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line-d); }
  .site-nav li:last-child { margin-top: auto; padding-top: 32px; border: 0; }
  .site-nav a { padding: 14px 0; border-radius: 0; font-size: var(--t-xl); line-height: var(--l-xl); }
  .site-nav a:hover { background: transparent; color: var(--sun); }
  .site-nav a.nav-cta { margin: 0; padding: 12px 16px; border-radius: 6px; text-align: center; font-size: var(--t-base); line-height: 1.5; }
  .site-nav a.nav-cta:hover { color: var(--ink); }
  .nav-toggle[aria-expanded="true"] + .site-nav li { animation: menuIn 420ms var(--ease-out) both; }
  .site-nav li:nth-child(2) { animation-delay: 40ms; }
  .site-nav li:nth-child(3) { animation-delay: 80ms; }
  .site-nav li:nth-child(4) { animation-delay: 120ms; }
  .site-nav li:nth-child(5) { animation-delay: 160ms; }
}
@media (max-width: 1023px) and (scripting: none) {
  .site-header { position: static; background: var(--deep); }
  .site-header .bar { width: calc(100% - 32px); margin-top: 0; padding-inline: 0; }
  .bar::before { display: none; }
  .nav-toggle { display: none; }
  .site-nav { position: static; flex-basis: 100%; padding: 0 0 20px; background: none; opacity: 1; visibility: visible; }
}
html.menu-open { overflow: hidden; }
@keyframes menuIn { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Toppen: bølgene fra kant til kant, mørke øverst og tonet ut i hvitt bak teksten ---------- */

.hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) max-content; min-height: max(100svh, 600px); }
.hero-media { position: absolute; inset: 0; container-type: size; }
.hero-art {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  /* reserve for bølgene: de samme fire fargene, snudd som lerretet (mørkt øverst og lyst nederst) */
  background: linear-gradient(180deg, #0b1d38 0%, #17365d 38%, #4a6f9c 70%, #e8eef6 100%);
  /* toner ut i hvitt nederst, bak teksten */
  -webkit-mask-image: linear-gradient(#000 50%, transparent 96%);
  mask-image: linear-gradient(#000 50%, transparent 96%);
}
.hero-art svg { position: absolute; left: 50%; top: 36%; width: min(86%, 80cqh); height: auto; translate: -50% -50%; overflow: visible; fill: var(--white); }
/* «Gruppen» dempet i bølgenes lyse blåtone. Helt dekkende: partikkelmotoren ser bort fra gjennomsiktighet. */
.hero-art .hero-name-2 { fill: #c3d2e6; }
/* Bølgene (waves.js) er snudd, så de er mørke under topplinjen og lyse nederst. De tones inn når første bilde er tegnet. */
.hero-art canvas.waves { position: absolute; inset: 0; width: 100%; height: 100%; scale: 1 -1; opacity: 0; transition: opacity 600ms ease; }
.hero-art[data-waves="on"] canvas.waves { opacity: 1; }
/* Flytende merke (liquid-logo.js): lerretet dekker feltet og byttes inn når første bilde er tegnet (i ro er de like) */
.hero-art canvas.liquid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.hero-art[data-gl="on"] canvas.liquid { opacity: 1; }
.hero-art[data-gl="on"] svg { opacity: 0; }
.hero-copy { position: relative; grid-row: 2; display: grid; justify-items: start; gap: 24px; padding-bottom: 48px; }
.hero-copy h1 { max-width: 22em; font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -0.035em; }
.hero-copy .muted { color: var(--ink-2); }
/* Byene i toppteksten skifter (site.js). Uten skriptet og ved redusert bevegelse står «fire byer i Norge.» */
.rotator-words { display: none; }
[data-rotator="on"] .rotator-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-rotator="on"] .rotator-words { display: inline-grid; clip-path: inset(0 -0.25em); color: var(--sun-ink); }
.rotator-words > span { grid-area: 1 / 1; opacity: 0; translate: 0 100%; transition: translate 1000ms var(--ease-spring), opacity 400ms ease; }
.rotator-words > span[data-state="in"] { opacity: 1; translate: 0 0; }
.rotator-words > span[data-state="out"] { translate: 0 -100%; }
.rotator-words > span[data-state="wait"] { transition: none; }
@media (min-width: 761px) { .hero-copy { gap: 32px; padding-bottom: 64px; } }
@media (min-width: 1024px) { .hero-art svg { left: 60%; width: min(58%, 100cqh); } }

/* ---------- Merkevarene vi selger for: en rad som glir forbi (site.js slår den på) ---------- */

.partners { padding-block: 8px 48px; }
@media (min-width: 761px) { .partners { padding-block: 16px 64px; } }
.partners-inner { display: grid; grid-template-areas: "title toggle" "marquee marquee"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
@media (min-width: 761px) { .partners-inner { grid-template-areas: "title marquee toggle"; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 40px; } }
.partners-title { grid-area: title; max-width: 16ch; color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); letter-spacing: 0; }
.marquee { grid-area: marquee; overflow: hidden; }
.marquee-track { --logo-scale: 0.8; display: flex; flex-wrap: wrap; align-items: center; row-gap: 24px; min-height: 48px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .marquee-track { --logo-scale: 1; min-height: 64px; } }
.marquee-track li { flex: none; padding-right: 56px; }
@media (min-width: 761px) { .marquee-track li { padding-right: 80px; } }
/* Logoene står i merkevarenes egne farger. Høydene er satt for øyet, så de veier omtrent like mye. */
.marquee-track img { display: block; width: auto; height: calc(var(--logo-h) * var(--logo-scale)); }
.logo-bahnhof { --logo-h: 58px; }
.logo-allente { --logo-h: 29px; }
.logo-phonero { --logo-h: 41px; }
.logo-fasade-fiks { --logo-h: 38px; }
.logo-drm { --logo-h: 40px; }
[data-marquee="on"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
[data-marquee="on"] .marquee-track { flex-wrap: nowrap; width: max-content; animation: marquee var(--marquee-duration, 30s) linear infinite; }
[data-marquee="on"]:hover .marquee-track { animation-play-state: paused; }
[data-marquee="on"][data-paused] .marquee-track { animation-play-state: paused; }
/* Stopp/start (WCAG 2.2.2): vises bare når raden glir */
.marquee-toggle {
  grid-area: toggle; display: none; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
[data-marquee="on"] + .marquee-toggle { display: grid; }
.marquee-toggle:hover { border-color: var(--muted-d); color: var(--ink); }
.marquee-toggle svg { width: 14px; height: 14px; }
@keyframes marquee { to { translate: -50% 0; } }

/* ---------- Hva vi gjør: fire kort med samme oppbygning ---------- */

.services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1001px) {
  .services { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .service { grid-column: span 6; }
  .service-wide { grid-column: span 8; }
  .service-dark { grid-column: span 4; }
}
.service { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 8px; background: var(--white); }
@media (min-width: 761px) { .service { gap: 16px; padding: 32px; } }
.service-icon { width: 28px; height: 28px; margin-bottom: 16px; color: var(--sun-ink); }
.service h3 { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em; }
.service .btn { justify-self: start; margin-top: 8px; }
.service p { max-width: 36rem; color: var(--ink-2); }
.service-sun { background: var(--sun); }
.service-sun .service-icon, .service-sun p { color: var(--ink); }
.service-dark { background: var(--dark); color: var(--white); }
.service-dark p { color: #c5d0de; }
.service-dark .text-link { color: var(--sun); }
.service-dark .text-link:hover { color: var(--white); }
.service .service-stat { font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }

/* ---------- Steg ---------- */

.steps { display: grid; gap: 32px; max-width: 40rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .steps { grid-column: 3 / span 4; } }
@media (min-width: 1001px) { .steps { grid-column: 6 / span 7; gap: 40px; } }
.steps h3 { display: grid; grid-template-columns: 32px minmax(0, 1fr); }
.steps .no { color: var(--sun); font-variant-numeric: tabular-nums; }
.steps p { margin-top: 8px; padding-left: 32px; color: var(--muted); }

/* ---------- Det vi står for: verdiene ruller som kort med foto bak (etter «Card Carousel» fra 21st.dev) ---------- */

.shine { color: var(--sun); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .reveal-on [data-reveal-state="in"] .shine {
    background-image: linear-gradient(110deg, var(--sun) 40%, #fff1df 50%, var(--sun) 60%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: shine 1800ms ease-in-out 600ms both;
  }
}
@keyframes shine { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }

/* Uten skript er dette en rad man blar sidelengs i, med ett kort midt på om gangen.
   Skriptet legger på dybden (--d = avstand fra midten i antall kort), løkken, knappene og byttet. */
.carousel { --card: 280px; --gap: 16px; }
@media (min-width: 761px) { .carousel { --card: 360px; --gap: 32px; } }
.carousel-track {
  position: relative; display: flex; gap: var(--gap); margin: 0; padding: 8px calc(50% - var(--card) / 2) 28px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.carousel-track:focus-visible { outline-offset: -2px; }
.carousel-card { flex: none; width: var(--card); scroll-snap-align: center; }
.carousel[data-carousel="on"] .carousel-card { transform: perspective(1200px) translateZ(calc(var(--d, 0) * -250px)); opacity: calc(1 - var(--d, 0) * 0.25); }
.carousel[data-carousel="on"] .carousel-track { scrollbar-width: none; }
.carousel[data-carousel="on"] .carousel-track::-webkit-scrollbar { display: none; }

/* Bildet fyller kortet, og teksten står nederst over en mørk toning */
.value-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--black); }
.value-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.value-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 18, 20, 0) 20%, rgba(17, 18, 20, 0.72) 52%, rgba(17, 18, 20, 0.95) 100%); }
.value-text { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 10px; padding: 24px; }
@media (min-width: 761px) { .value-text { padding: 28px; } }
.value-text .no { color: var(--sun); font-size: var(--t-sm); line-height: var(--l-sm); font-variant-numeric: tabular-nums; }
.value-text h3 { font-size: var(--t-xl); line-height: var(--l-xl); letter-spacing: -0.02em; }
.value-text p { color: #d5d7da; }

.carousel-controls { display: none; }
.carousel[data-carousel="on"] .carousel-controls { display: flex; justify-content: center; align-items: center; gap: 8px; }
.carousel-controls button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-d); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer;
  transition: background-color 160ms ease;
}
.carousel-controls button:hover { background: rgba(255, 255, 255, 0.08); }
.carousel-controls svg { width: 18px; height: 18px; }
.carousel-toggle { margin-left: 8px; }
.carousel-toggle .icon-play, .carousel-toggle[data-state="stopped"] .icon-pause,
.marquee-toggle .icon-play, .marquee-toggle[data-state="stopped"] .icon-pause { display: none; }
.carousel-toggle[data-state="stopped"] .icon-play, .marquee-toggle[data-state="stopped"] .icon-play { display: block; }
.carousel-dots { display: flex; }
.carousel-dots button { width: 24px; height: 24px; border: 0; border-radius: 0; background: transparent; }
.carousel-dots button:hover { background: transparent; }
.carousel-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.carousel-dots button[aria-current="true"]::before { background: var(--white); transform: scale(1.25); }
.credit { margin-top: 24px; color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); }

/* ---------- Avdelinger: byene som en enkel liste ---------- */

.cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.cities li { display: grid; gap: 6px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: var(--t-xl); line-height: var(--l-xl); letter-spacing: -0.02em; }
@media (min-width: 761px) { .cities li { font-size: var(--t-2xl); line-height: var(--l-2xl); letter-spacing: -0.025em; } }
.cities .no { color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- Rader (jobb) ---------- */

.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 20px 12px; border-bottom: 1px solid var(--line); }
@media (min-width: 521px) { .rows li { padding: 24px 16px; } }
.rows li:hover { background: var(--subtle); }
.rows .row-title { font-size: var(--t-lg); line-height: var(--l-lg); letter-spacing: -0.015em; }
.rows .row-meta { color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); font-variant-numeric: tabular-nums; }
.rows-after { margin-top: 32px; }

/* ---------- Spørsmål (trekkspill) ---------- */

.faq { display: grid; align-content: start; }
.faq details { border-bottom: 1px solid #d4d4d4; }
.faq details:first-child { border-top: 1px solid #d4d4d4; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 14px 0;
  font-size: var(--t-lg); line-height: var(--l-lg); letter-spacing: -0.015em;
  list-style: none; cursor: pointer; transition: color 160ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sun-ink); }
.faq summary svg { flex: none; width: 22px; height: 22px; rotate: -90deg; transition: rotate 200ms var(--ease-out); }
.faq details[open] summary svg { rotate: 0deg; }
.faq details > div { display: grid; gap: 10px; padding: 0 0 22px; }
@media (min-width: 761px) { .faq details > div { padding-right: 40px; } }
.faq details p { color: var(--muted); max-width: 40rem; }

/* ---------- Kontakt og bunn ---------- */

.contact-head { display: grid; gap: 16px; align-content: start; }
.contact-title { font-size: var(--t-2xl); line-height: var(--l-2xl); letter-spacing: -0.025em; }
.contact-head p:not(.eyebrow) { color: var(--muted); max-width: 30rem; }
.contact-person { display: grid; align-content: start; justify-items: start; gap: 6px; }
.contact-person .role { color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); }
.contact-person h3 { margin-bottom: 10px; }
.contact-person a { max-width: 100%; overflow-wrap: anywhere; }
.contact-person a:hover { color: var(--sun); }
@media (min-width: 761px) {
  .contact-head { grid-column: 1 / -1; }
  .contact-person { grid-column: span 3; }
}
@media (min-width: 1001px) {
  .contact-head { grid-column: span 6; }
  .contact-person { grid-column: span 3; padding-top: 10px; }
}

/* Bunnen (etter «footer-01» fra 21st.dev): om oss, to kolonner med lenker, kontakt og en linje med selskapet */
.site-footer { --muted-d: #a3a8ad; --line-d: #2c2e31; background: var(--black); color: var(--white); padding: 0 0 28px; }
.site-footer .wrap { border-top: 1px solid var(--line-d); padding-top: 56px; }
.footer-top { display: grid; gap: 40px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-about, .footer-contact { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-contact { grid-column: auto; }
}
@media (min-width: 1001px) {
  .footer-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px 32px; }
  .footer-about { grid-column: auto; }
}
.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { width: 104px; }
.footer-about p { color: var(--muted-d); max-width: 34ch; }
.footer-heading { margin-bottom: 14px; color: var(--muted-d); font-size: var(--t-sm); line-height: var(--l-sm); }
.footer-group ul { display: grid; justify-items: start; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-group a:hover, .footer-group a[aria-current="page"] { color: var(--sun); }
.footer-contact { display: grid; align-content: start; justify-items: start; gap: 18px; font-style: normal; }
.footer-contact .footer-heading { margin-bottom: -4px; }
.footer-person { display: grid; justify-items: start; gap: 6px; }
.footer-person p { color: var(--muted-d); font-size: var(--t-sm); line-height: var(--l-sm); }
.footer-line { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; overflow-wrap: anywhere; }
.footer-line svg { flex: none; width: 16px; height: 16px; color: var(--muted-d); }
a.footer-line:hover { color: var(--sun); }
.footer-legal { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line-d); color: var(--muted-d); font-size: var(--t-sm); line-height: var(--l-sm); }
@media (min-width: 1024px) { .footer-legal { margin-top: 80px; } }

/* ---------- Undersider ---------- */

/* Øverst står bølgene som stillbilde (tegnet fra shaderen på forsiden), tonet ut i hvitt bak overskriften */
.page-head, .notfound {
  background: linear-gradient(180deg, transparent 18%, var(--white) 84%), url("/assets/bolger.webp") center top / cover no-repeat, var(--deep);
}
.page-head { --muted: #575b60; padding-block: calc(var(--header-height) + 112px) 40px; }
@media (min-width: 1001px) { .page-head { padding-block: calc(var(--header-height) + 168px) 56px; } }
.page-head h1 { max-width: 24ch; }
.page-head .lead { margin-top: 16px; color: var(--ink-2); }
.page-head + .surface { padding-top: 48px; }
@media (min-width: 1001px) { .page-head + .surface { padding-top: 56px; } }
.page-body .grid12 { row-gap: 56px; }
@media (min-width: 761px) { .page-body .aside { order: -1; position: sticky; top: calc(var(--header-height) + 16px); align-self: start; } }
.aside { display: grid; align-content: start; justify-items: start; gap: 12px; }
.aside h2 { font-size: var(--t-lg); line-height: var(--l-lg); letter-spacing: -0.015em; }
.aside p:not(.aside-heading) { color: var(--muted); }
.aside-heading { color: var(--sun-ink); font-size: var(--t-sm); line-height: var(--l-sm); }
.aside ul { display: grid; justify-items: start; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.aside a { overflow-wrap: anywhere; }
.aside a:hover { color: var(--sun-ink); }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 64px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; font-size: var(--t-base); line-height: var(--l-base); font-weight: 500; letter-spacing: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--sun-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose a:hover { color: var(--ink); }
.prose .meta { color: var(--muted); font-size: var(--t-sm); }

/* Ledelsen på /om-oss (blanding av «Image Accordion» og «Team Section» fra 21st.dev). Til bildene kommer står
   initialene i en rund ramme på bølgene. Uten skript og på smale skjermer står de som kort. På brede skjermer
   setter site.js data-team="on", og panelet man holder musen over, fokuserer i eller trykker på, vokser. */
.team { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.member {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; padding: 24px; border-radius: 12px; color: var(--white);
  /* virker bare når panelene står på rad. Står her så verdien ikke endres når trekkspillet slås på eller vinduet krysser 761 px */
  flex: 1 1 0; min-width: 0;
}
.member[data-active] { flex-grow: 2.4; }
.member-art { position: absolute; inset: 0; z-index: -1; background: url("/assets/bolger.webp") 15% 0 / cover no-repeat, var(--deep); }
.member:nth-child(2) .member-art { background-position: 55% 0; }
.member:nth-child(3) .member-art { background-position: 90% 0; }
.member-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 29, 56, 0) 0%, rgba(11, 29, 56, 0.35) 45%, rgba(11, 29, 56, 0.9) 100%); }
.member-art img { width: 100%; height: 100%; object-fit: cover; }
.member-initials {
  position: absolute; top: 24px; left: 24px; z-index: 1;
  display: grid; place-items: center; width: 88px; height: 88px;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(255, 255, 255, 0.1);
  font-size: var(--t-xl); letter-spacing: 0.04em;
  transition: width 700ms var(--ease-out), height 700ms var(--ease-out);
}
.member-info { display: grid; justify-items: start; gap: 6px; }
.member .role { color: #c9d5e4; font-size: var(--t-sm); line-height: var(--l-sm); }
.member h3 { font-size: var(--t-xl); line-height: var(--l-xl); letter-spacing: -0.02em; }
.member-contact { display: grid; justify-items: start; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.member-contact a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; overflow-wrap: anywhere; }
.member-contact a:hover { color: var(--sun); }
.member-contact svg { flex: none; width: 16px; height: 16px; }
.member :focus-visible { outline-color: var(--sun); }
@media (min-width: 761px) {
  [data-team="on"] { display: flex; gap: 12px; height: 460px; }
  [data-team="on"] .member { min-height: 0; padding: 28px; cursor: pointer; transition: flex-grow 700ms var(--ease-out); }
  [data-team="on"] .member[data-active] { cursor: auto; }
  [data-team="on"] .member[data-active] .member-initials { width: 120px; height: 120px; }
  [data-team="on"] .member-contact { opacity: 0; transition: opacity 250ms ease; }
  [data-team="on"] .member-contact a { white-space: nowrap; }
  [data-team="on"] .member[data-active] .member-contact { opacity: 1; transition-delay: 250ms; }
}

/* Nøkkeltall: tallet står øverst, forklaringen under */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin: 0; }
@media (min-width: 1001px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding-top: 20px; border-top: 1px solid #d4d4d4; }
.stats dd { margin: 0; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.stats dt { max-width: 22ch; color: var(--muted); }

/* «Hvem vi er» med bildet av Drammen */
.about { display: grid; gap: 40px; }
@media (min-width: 1001px) { .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.about-photo { max-width: 28rem; margin: 0; }
@media (min-width: 1001px) { .about-photo { max-width: none; } }
.about-photo img { width: 100%; border-radius: 8px; background: var(--soft); }
.about-photo figcaption { margin-top: 12px; color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); }

/* To kort videre: jobb og samarbeid */
.paths { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.path { display: grid; align-content: start; justify-items: start; gap: 10px; height: 100%; padding: 28px; border-radius: 12px; background: var(--soft); transition: background-color 200ms ease; }
@media (min-width: 761px) { .path { padding: 36px; } }
.path:hover { background: var(--block); }
.path-label { color: var(--sun-ink); font-size: var(--t-sm); line-height: var(--l-sm); }
.path-title { font-size: var(--t-xl); line-height: var(--l-xl); letter-spacing: -0.02em; }
.path-text { max-width: 34rem; color: var(--ink-2); }
.path .btn-icon { width: 22px; height: 22px; margin-top: 20px; color: var(--sun-ink); }
.path:hover .btn-icon { translate: 4px 0; }
.path-dark { --muted: var(--muted-d); --ink-2: #c5d0de; background: var(--dark); color: var(--white); }
.path-dark:hover { background: #1f4778; }
.path-dark:focus-visible { outline-color: var(--sun); }
.path-dark .path-label, .path-dark .btn-icon { color: var(--sun); }
.callout { padding: 20px 22px; background: var(--soft); }
.summary { padding: 24px; background: var(--soft); }
.summary h2 { font-size: var(--t-lg); line-height: var(--l-lg); }
.summary ul { margin: 12px 0 0; }
/* Faktaliste: etikett over teksten på mobil, ved siden av på bredere skjermer. */
.facts { display: grid; gap: 4px 24px; margin-bottom: 0; }
.facts dt { color: var(--ink); font-weight: 500; }
.facts dd { margin: 0 0 14px; color: var(--ink-2); }
@media (min-width: 761px) {
  .facts { grid-template-columns: 10rem minmax(0, 1fr); }
  .facts dd { margin-bottom: 18px; }
}
.callout p { color: var(--ink); }

/* ---------- Skjemaene på /jobb og /samarbeid (skjema.js viser ett steg av gangen) ---------- */

.form { max-width: 40rem; }
.form[hidden], .form [hidden], .form-done[hidden] { display: none; }
.step > legend:focus, .form-done:focus { outline: none; }
@media (scripting: none) { .form { display: none; } }
.step, .choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.step > legend { display: grid; gap: 8px; padding: 0; font-size: var(--t-xl); line-height: var(--l-xl); letter-spacing: -0.02em; }
.step-no { color: var(--sun-ink); font-size: var(--t-sm); line-height: var(--l-sm); letter-spacing: 0; }
.field { display: grid; gap: 8px; margin-top: 28px; }
.field > label, .choice > legend { padding: 0; color: var(--ink); }
.optional, .hint { color: var(--muted); }
.hint { font-size: var(--t-sm); line-height: var(--l-sm); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--field); border-radius: 4px;
  background: var(--white); color: var(--ink);
  font: inherit;
  transition: border-color 160ms ease;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* Selve rundknappen er usynlig, men kan fortsatt velges med tastatur og skjermleser. Etiketten er knappen man ser. */
.choices input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choices label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--field); border-radius: 4px; cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.choices label:hover { border-color: var(--ink); }
.choices input:checked + label { border-color: var(--navy); background: var(--navy); color: var(--white); }
.choices input:focus-visible + label { outline: 2px solid var(--sun-ink); outline-offset: 2px; }
.choice[aria-invalid="true"] .choices label { border-color: var(--error); }
.field-error { color: var(--error); font-size: var(--t-sm); line-height: var(--l-sm); }
.field-error:empty { display: none; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.review { margin-top: 28px; }
.review dd { overflow-wrap: anywhere; white-space: pre-line; }
.step > .hint { margin-top: 20px; }
.step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.form-status { margin-top: 16px; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: var(--error); }
.form-done { display: grid; justify-items: start; gap: 16px; max-width: 40rem; }
.form-done p { color: var(--ink-2); }

.notfound { display: grid; align-content: end; min-height: 100svh; padding-block: calc(var(--header-height) + 40px) 96px; }
.notfound .wrap { display: grid; justify-items: start; gap: 28px; }

/* ---------- Innrulling (site.js setter .reveal-on på <html> når alt er klart) ---------- */

.reveal-on [data-reveal] { transition-delay: var(--reveal-delay, 0ms); }
.reveal-on [data-reveal="lift"], .reveal-on [data-reveal="action"] {
  transition-property: opacity, translate;
  transition-duration: 1000ms;
  transition-timing-function: var(--ease-out);
}
.reveal-on [data-reveal="action"] { transition-duration: 600ms; transition-timing-function: var(--ease-soft); }
.reveal-on [data-reveal="lift"]:not([data-reveal-state="in"]) { opacity: 0; translate: 0 40px; }
.reveal-on [data-reveal="action"]:not([data-reveal-state="in"]) { opacity: 0; translate: 0 24px; }
.reveal-on [data-reveal="words"] .w {
  display: inline-block;
  transition: opacity 700ms var(--ease-soft), filter 700ms var(--ease-soft);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--w, 0ms));
}
.reveal-on [data-reveal="words"]:not([data-reveal-state="in"]) .w { opacity: 0; filter: blur(10px); }
.reveal-init [data-reveal], .reveal-init [data-reveal] .w { transition: none !important; }
@media print {
  .site-header { position: static; color: var(--ink); }
  .bar::before { display: none; }
  .reveal-on [data-reveal], .reveal-on [data-reveal] .w { opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on [data-reveal], .reveal-on [data-reveal] .w { opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .reveal-on .shine { animation: none !important; background: none !important; color: var(--sun) !important; }
  a, .btn, .btn-icon, .faq summary, .faq summary svg, .hero-art canvas.waves { transition: none; }
  .site-header .bar, .bar::before, .toggle-line, .site-nav, .nav-toggle[aria-expanded="true"] + .site-nav { transition: none; }
  .member, .member-initials, .member-contact, [data-team="on"] .member, [data-team="on"] .member-contact, .path { transition: none; }
  .btn:active { transform: none; }
  .nav-toggle[aria-expanded="true"] + .site-nav li { animation: none; }
}