/* ServFix forside: ett løfte, ett produktbilde, tre scener, én knapp.
   Identitet 1.0, retning C «Hele veien» (D-HQ.119): logo, farger og Figtree kommer byte-identisk fra ServFix-repoet
   (docs/servfix-2.0/ServFix-brand) og ligger i brand/ og icons/. Fargene under er bare navn på --sf-variablene. Ingen eksterne avhengigheter. */
:root {
  --blekk: var(--sf-text);
  --natt: var(--sf-dark-bg);
  --natt-flate: var(--sf-dark-surface);
  --papir: var(--sf-bg);
  --papir-mork: var(--sf-surface-muted);
  --ok: var(--sf-button-primary-bg);
  --ok-mork: var(--sf-button-primary-bg-hover);
  --aksent-mork: var(--sf-brand-violet-light);
  --linje: var(--sf-border);
  --dempet: var(--sf-text-secondary);
  --lys-dempet: var(--sf-text-on-dark-secondary);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 17px/1.6 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--blekk); background: var(--papir); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sf-link); }
a:hover { color: var(--sf-link-hover); }
a:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.hero a:focus-visible, .avslutning a:focus-visible, .topp a:focus-visible, .bunn a:focus-visible { outline-color: var(--sf-focus-on-dark); box-shadow: 0 0 0 5px var(--natt); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .75rem 1rem; z-index: 20; }
.skip:focus { left: 0; }

.rad { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
h1, h2 { font-weight: 700; letter-spacing: -.025em; margin: 0 0 1rem; }
h1 { font-size: clamp(2.3rem, 8vw, 4.6rem); line-height: 1.04; max-width: 14ch; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.12; }
p { margin: 0 0 1rem; max-width: 38rem; }
.liten { font-size: .92rem; color: var(--lys-dempet); }

/* Topplinje */
.topp { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 1.25rem; background: var(--natt); border-bottom: 1px solid var(--natt-flate); }
/* Logoen: servfix-logo-on-dark.svg, 28 px høy i headeren (README i merkevarepakken: 28–32 px, luft rundt minst prikkens høyde). */
.logo { display: inline-flex; align-items: center; padding: .4rem 0; border-radius: 4px; }
.logo img { height: 28px; width: auto; }

/* Knapper */
.knapp { display: inline-block; min-height: 48px; padding: .75rem 1.6rem; background: var(--ok); color: var(--sf-button-primary-text); font: inherit; font-weight: 600; text-align: center; text-decoration: none; border: 2px solid var(--ok); border-radius: 6px; }
.knapp:hover { background: var(--ok-mork); border-color: var(--ok-mork); }
.knapp-liten { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; background: var(--papir); color: var(--natt); border-color: var(--papir); }
.knapp-liten:hover { background: #fff; color: var(--natt); border-color: #fff; }
.knapp-lys { background: var(--papir); color: var(--natt); border-color: var(--papir); font-size: 1.1rem; }
.knapp-lys:hover { background: #fff; color: var(--natt); border-color: #fff; }

/* Hero: mørk topp, produktbildet bryter ut nedover i full bredde */
.hero { background: var(--natt); color: var(--sf-text-on-dark); padding: 3rem 0 0; }
.hero .ingress, .avslutning .ingress { font-size: 1.2rem; color: var(--lys-dempet); }
.hero-knapp { margin: 1.75rem 0 0; }
/* Stemningsbilde i hero (2026-10-15): bare på bred skjerm, ved siden av løftet. Illustrasjon, ikke et ekte verksted. */
.hero-stemning { display: none; }
.hero-bilde { margin: 2.5rem 0 0; padding-bottom: 0; }
.hero-bilde .vindu { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
.hero-bilde figcaption { font-family: var(--mono); font-size: .8rem; color: var(--lys-dempet); padding-top: .7rem; padding-bottom: 1.25rem; }

/* Produktutsnitt. Bildefilene er uendret; beskjæring skjer med CSS, slik at navn og e-post fra testdata ikke vises.
   På smal skjerm kan utsnittet dras sideveis i stedet for å bli skrevet i mikroskopisk størrelse. */
.vindu { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
/* Utsnittet styres av fire tall i kildebildets piksler (bildene er 1440 brede): --x og --y er øvre venstre hjørne,
   --w og --h størrelsen. Venstre kant beholdes, og bildet vises så stort at teksten kan leses. */
.bred { --min: 0; min-width: var(--min); overflow: hidden; background: #fff; border: 1px solid var(--linje); border-radius: 8px; box-shadow: 0 18px 40px -18px rgba(31, 27, 77, .45); aspect-ratio: var(--w) / var(--h); }
.bred img { width: calc(1440 / var(--w) * 100%); max-width: none; margin-left: calc(var(--x) / var(--w) * -100%); margin-top: calc(var(--y) / var(--w) * -100%); }
/* Arkivtabellen uten sidemeny: dato, kunde, anlegg, status og Last ned. På mobil vises den i lesbar størrelse og kan dras sideveis. */
.bred-hero, .bred-filter { --x: 250; --y: 25; --w: 1160; --h: 380; --min: 62rem; }
.bred-hero { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 -2px 0 0 var(--aksent-mork); }
/* Gjennomgangen: kortet med de tre utfallsvalgene, uten sidemeny og tom flate */
.bred-gjennomgang { --x: 250; --y: 20; --w: 400; --h: 310; }
.hero .bred-hero { border-color: var(--natt-flate); }
.hint { font-size: .85rem; color: var(--dempet); margin: .6rem 0 0; }
.hero .hint { color: var(--lys-dempet); }

/* Scener */
.scene { padding: 3.5rem 0; }
.scene-mork { background: var(--papir-mork); }
.scene-rad { display: grid; gap: 2rem; align-items: center; }
.scene-nr { font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dempet); margin-bottom: .6rem; }
.telefon { justify-self: center; width: min(100%, 21rem); }
.skjerm { overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid var(--linje); box-shadow: 0 18px 40px -18px rgba(31, 27, 77, .45); }
.skjerm img { width: 100%; }
.skjerm-avvik { aspect-ratio: 390 / 632; }
.skjerm-avvik img { margin-top: -17.44%; }

/* Avslutning: kveldshimmel bak teksten, dempet så teksten alltid har kontrast (2026-10-15) */
.avslutning { background: var(--natt); color: var(--sf-text-on-dark); padding: 4rem 0 4.5rem; }
.avslutning-bilde { background-image: linear-gradient(90deg, rgba(31, 27, 77, .94) 0%, rgba(31, 27, 77, .86) 55%, rgba(31, 27, 77, .55) 100%), url("bilder/06-kveldshimmel-800.webp"); background-size: cover; background-position: 70% 60%; }
@media (min-width: 48rem) { .avslutning-bilde { background-image: linear-gradient(90deg, rgba(31, 27, 77, .94) 0%, rgba(31, 27, 77, .82) 50%, rgba(31, 27, 77, .35) 100%), url("bilder/06-kveldshimmel-1600.webp"); } }
.avslutning a { color: #fff; }
.avslutning .knapp-lys { color: var(--natt); }
.avslutning .knapp-lys:hover { color: var(--natt); }

.bunn { background: var(--natt); color: var(--lys-dempet); padding: 1.5rem 0 2.5rem; font-size: .9rem; border-top: 1px solid var(--natt-flate); }
.bunn p { margin: .3rem 0; }
.bunn a { color: #fff; display: inline-block; padding: .6rem 0; }

@media (min-width: 48rem) {
  body { font-size: 18px; }
  .rad { padding: 0 2rem; }
  .hero { padding: 6rem 0 0; }
  .hero-bilde { margin-top: 3.5rem; }
  .scene { padding: 6rem 0; }
  .scene-rad { grid-template-columns: 1fr 1.3fr; gap: 4rem; }
  .scene-stabel { grid-template-columns: 1fr; gap: 2.5rem; }
  .scene-omvendt { grid-template-columns: 1.3fr 1fr; }
  .scene-omvendt .scene-tekst { order: 2; }
  .scene-omvendt .telefon { justify-self: start; }
  .telefon { width: min(100%, 22rem); }
  .bred-hero, .bred-filter { --min: 0; }
  .bred-hero { --x: 0; --y: 0; --w: 1440; --h: 640; }
  .hint { display: none; }
  .avslutning { padding: 6rem 0; }
}
@media (min-width: 64rem) {
  .hero-topp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
  .hero-topp h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
  .hero-stemning { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 46% 62%; border-radius: 10px; border: 1px solid var(--natt-flate); }
}