/* Publiseringsutgaven av kundesiden: ren HTML og CSS, ingen JavaScript for innhold. Bygges av ../publiser.py. */
@font-face{font-family:Archivo;src:url(archivo.woff2) format("woff2");font-weight:500 800;font-stretch:62% 125%;font-display:swap}
:root{--navy:#0f1c2e;--navy2:#16273d;--navy3:#34485f;--bla:#2fa0d8;--bla-lys:#55b6e4;--bla-mork:#0b6f9e;--paa-aks:#0f1c2e;--p1:#d5dde8;--p2:#b9c5d4;--p3:#93a3b6;--p4:#c3cedb;--papir:#f6f4ef;--hvit:#fff;--tekst:#14202e;--dempet:#4b5563;--linje:#d9d5cc;--feil:#b3261e;
  --hf:Archivo,"Segoe UI",system-ui,sans-serif;--bf:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--w:min(1240px,100% - 48px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--bf);font-size:1.0625rem;line-height:1.6;color:var(--tekst);background:var(--papir);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--hf);font-weight:800;font-stretch:106%;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3.25rem)}
h3{font-size:1.5rem;line-height:1.15}
:focus-visible{outline:3px solid var(--bla);outline-offset:3px}
.hopp{position:absolute;left:12px;top:-60px;background:var(--hvit);color:var(--navy);padding:10px 16px;z-index:50;font-weight:700}
.hopp:focus{top:12px}
.w{width:var(--w);margin-inline:auto}

.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 26px;background:var(--bla);color:var(--paa-aks);font:700 1rem var(--hf);font-stretch:104%;text-decoration:none;border:0;cursor:pointer}
.knapp:hover{background:var(--bla-lys)}
.knapp.ut{background:none;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.knapp.ut:hover{background:rgba(255,255,255,.1)}

/* Topplinje */
.topp{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff}
.topp .w{display:flex;align-items:center;gap:32px;height:68px}
.topp .logo{display:flex;align-items:center;height:100%;margin-right:auto}
.topp .logo img{height:40px;width:auto}
.topp .logo b{font:800 1.25rem var(--hf)}
.topp nav{display:flex;gap:28px}
.topp nav a{text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 0;border-bottom:2px solid transparent}
.topp nav a:hover{border-color:var(--bla)}
.topp .knapp{min-height:42px;padding:8px 20px}

/* Åpning */
.apning{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--navy);color:#fff}
.apning-tekst{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px) clamp(40px,6vw,88px) max(24px,calc((100vw - 1240px)/2))}
.apning h1{font-size:clamp(2.6rem,4.7vw,4.5rem);line-height:.96;font-stretch:110%}
.apning h1 span{white-space:nowrap}
.apning h1 span{color:var(--bla)}
.apning .ingress{font-size:1.2rem;line-height:1.55;color:var(--p1);max-width:34em}
.apning .knapper{display:flex;flex-wrap:wrap;gap:12px}
.apning .figur{display:flex;align-items:baseline;gap:16px;padding-top:24px;border-top:1px solid var(--navy3);color:var(--p2)}
.apning .figur b{font:800 3rem/1 var(--hf);color:#fff;letter-spacing:-.03em}
.apning-bilde{position:relative;min-height:520px}
.apning-bilde img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 55%}

/* Faktalinje */
.fakta{background:var(--bla);color:var(--paa-aks)}
.fakta ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 40px;padding-block:16px;font:700 1.0625rem var(--hf);font-stretch:104%}

.blokk{padding-block:clamp(64px,9vw,128px)}
.hode{max-width:40em;margin-bottom:clamp(32px,5vw,64px)}
.hode p{margin-top:16px;color:var(--dempet);font-size:1.125rem}
.merke.bla{color:var(--bla)}
.tett{padding-top:0}
.merke{display:block;font:700 .85rem var(--hf);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:var(--bla-mork);margin-bottom:14px}

/* Tjenester: tre rader, bilde og tekst på vekselvis side */
.tj{display:grid;grid-template-columns:repeat(12,1fr);gap:0 48px;align-items:center;padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--linje)}
.tj:last-child{border-bottom:1px solid var(--linje)}
.tj img{grid-column:1 / 8;width:100%;aspect-ratio:3/2;object-fit:cover}
.tj div{grid-column:8 / 13}
.tj:nth-child(even) img{grid-column:6 / 13;grid-row:1}
.tj:nth-child(even) div{grid-column:1 / 6;grid-row:1}
.tj .nr{font:800 .95rem var(--hf);letter-spacing:.1em;color:var(--bla-mork)}
.tj h3{margin:10px 0 14px;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.tj p{color:var(--dempet);margin-bottom:22px}
.tj a{font:700 1rem var(--hf);text-decoration-thickness:2px;text-underline-offset:5px}
.tj a:hover{color:var(--bla-mork)}

/* Før og etter */
.for-etter{background:var(--navy);color:#fff}
.for-etter .hode p{color:var(--p2)}
.par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.par figure{position:relative}
.par img{width:100%;aspect-ratio:4/3;object-fit:cover}
.par figcaption{position:absolute;left:0;bottom:0;background:var(--navy);padding:12px 20px;font:700 1rem var(--hf)}
.par figure:last-child figcaption{background:var(--bla);color:var(--paa-aks)}

/* Slik går det til */
.steg{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;counter-reset:s}
.steg li{counter-increment:s;border-top:4px solid var(--navy);padding-top:20px}
.steg li::before{content:counter(s);display:block;font:800 3.5rem/1 var(--hf);letter-spacing:-.04em;color:var(--bla-mork);margin-bottom:14px}
.steg h3{margin-bottom:10px}
.steg p{color:var(--dempet)}

/* Jobber: asymmetrisk rutenett */
.jobber{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.jobber figure{position:relative;overflow:hidden;background:var(--navy);aspect-ratio:4/3}
.jobber img{width:100%;height:100%;object-fit:cover}
/* Tre jobber: to brede bilder og ett høyt */
.jobber.tre{grid-template-columns:repeat(12,1fr)}
.jobber.tre figure:nth-child(1),.jobber.tre figure:nth-child(2){grid-column:1 / 9;aspect-ratio:16/9}
.jobber.tre figure:nth-child(3){grid-column:9 / 13;grid-row:1 / 3;aspect-ratio:auto}
.jobber figcaption{position:absolute;left:0;bottom:0;max-width:90%;background:var(--navy);color:#fff;padding:10px 18px;font:600 .95rem var(--hf)}
.jobber figcaption small{color:var(--bla);margin-left:10px;font-size:inherit}

/* Vinter */
.vinter{position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;color:#fff;background:var(--navy)}
.vinter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vinter .w{position:relative;padding-block:48px}
.vinter .boks{max-width:560px;background:var(--navy);padding:clamp(24px,3vw,40px)}
.vinter h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:14px}
.vinter p{color:var(--p1);margin-bottom:24px}

/* Godt å vite */
.godt{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.godt img{width:100%;aspect-ratio:4/5;object-fit:cover;position:sticky;top:96px}
.godt h2{margin-bottom:28px}
details{border-top:1px solid var(--linje)}
details:last-of-type{border-bottom:1px solid var(--linje)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font:700 1.2rem var(--hf);font-stretch:102%}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:500;font-size:1.6rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding:0 40px 22px 0;color:var(--dempet)}

/* Kontakt */
.kontakt{background:var(--navy);color:#fff}
.kontakt .w{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:start}
.kontakt h2{margin-bottom:24px}
.kontakt .lead{color:var(--p1);margin-bottom:32px;max-width:28em}
.direkte a.tlf{display:block;font:800 clamp(2.4rem,5vw,3.6rem)/1 var(--hf);letter-spacing:-.03em;text-decoration:none;margin-bottom:12px}
.direkte a.tlf:hover{color:var(--bla)}
.direkte a:not(.tlf){color:#fff;text-underline-offset:4px}
.direkte address{font-style:normal;color:var(--p2);margin-top:20px;line-height:1.7}
.skjema{background:var(--hvit);color:var(--tekst);padding:clamp(24px,3.5vw,44px)}
.skjema h3{margin-bottom:6px}
.skjema .liten{color:var(--dempet);font-size:.95rem;margin-bottom:8px}
.skjema label{display:block;font-weight:600;font-size:.95rem;margin:18px 0 6px}
.skjema input:not([type=checkbox]),.skjema select,.skjema textarea{width:100%;padding:13px 14px;border:1px solid #8a93a0;border-radius:0;background:#fff;color:inherit;font:inherit;font-size:1rem}
.skjema textarea{min-height:110px;resize:vertical}
.skjema input:focus,.skjema select:focus,.skjema textarea:focus{outline:3px solid var(--bla);outline-offset:0;border-color:var(--navy)}
.skjema .to{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.skjema .samtykke{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin-top:22px;font-size:.95rem;color:var(--dempet)}
.skjema .samtykke input{margin-top:4px;width:20px;height:20px;flex:none}
.skjema .knapp{width:100%;margin-top:22px}
.skjema .knapp[disabled]{opacity:.6;cursor:wait}
.fella{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.feil{color:var(--feil);font-weight:600;margin-top:14px}
.feil:empty{display:none}
.takk h3{margin-bottom:12px}

/* Bunn */
.bunn{background:var(--navy2);color:var(--p4);font-size:.95rem;padding-block:48px 32px}
.bunn .kol{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.bunn b{display:block;color:#fff;margin-bottom:8px;font-family:var(--hf)}
.bunn a{color:#fff;text-underline-offset:3px}
.bunn .rad2{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:40px;padding-top:20px;border-top:1px solid var(--navy3)}
.bunn .kreditt{font-size:.85rem;color:var(--p3);max-width:60ch}
.bunn .laget{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--p3);text-decoration:none}
.bunn .laget:hover{color:#fff}
.bunn .laget img{height:22px;width:auto}

/* Personvern */
.tekstside{max-width:46em;padding-block:64px 96px}
.tekstside h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:24px}
.tekstside h2{font-size:1.5rem;margin:36px 0 10px}
.tekstside p,.tekstside li{margin-bottom:12px;color:#2b3745}
.tekstside ul{padding-left:1.2em}

/* Blokker med valgfri mørk bakgrunn (samme uttrykk som «Før og etter» og kontakt) */
.blokk.mork{background:var(--navy);color:#fff}
.mork .merke{color:var(--bla)}
.mork .hode p,.mork .tj p,.mork .steg p,.mork details p,.mork .tekstblokk p,.mork .tb p{color:var(--p4)}
.mork .tj,.mork .tj:last-child,.mork details,.mork details:last-of-type{border-color:var(--navy3)}
.mork .tj .nr{color:var(--bla)}
.mork .tj a:hover{color:var(--bla)}
.mork .steg li{border-top-color:#fff}
.mork .steg li::before{color:var(--bla)}
.mork .jobber figcaption{background:var(--navy2)}
.mork summary{color:#fff}

/* Tekst og bilde */
.tb{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(32px,5vw,64px);align-items:center}
.tb img{grid-column:1 / 8;width:100%;aspect-ratio:3/2;object-fit:cover}
.tb>div{grid-column:8 / 13}
.tb.hoyre img{grid-column:6 / 13;grid-row:1}
.tb.hoyre>div{grid-column:1 / 6;grid-row:1}
.tb .hode{margin-bottom:20px}
.tb p{margin-bottom:16px;color:var(--dempet)}
.tb .knapp{margin-top:8px;color:var(--navy)}
.tekstblokk{max-width:46em}
.tekstblokk .hode{margin-bottom:24px}
.tekstblokk p{margin-bottom:16px;color:var(--dempet)}

@media (max-width:960px){
  .topp nav{display:none}
  .apning{grid-template-columns:1fr}
  .apning-bilde{min-height:0;aspect-ratio:4/3;order:-1}
  .apning-tekst{padding:40px 24px 48px}
  .tj,.godt,.kontakt .w,.tb{grid-template-columns:1fr}
  .tb img,.tb.hoyre img,.tb>div,.tb.hoyre>div{grid-column:1;grid-row:auto}
  .tb>div{margin-top:24px}
  .tj img,.tj:nth-child(even) img{grid-column:1;grid-row:auto}
  .tj div,.tj:nth-child(even) div{grid-column:1;grid-row:auto;margin-top:20px}
  .par{grid-template-columns:1fr}
  .steg{grid-template-columns:1fr;gap:32px}
  .jobber.tre figure:nth-child(n){grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3}
  .godt img{position:static;aspect-ratio:16/10}
  .bunn .kol{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .skjema .to{grid-template-columns:1fr}
  .topp .w{gap:16px}
  .topp .knapp{padding:8px 12px;font-size:.9rem}
  .topp .logo img{height:34px}
  .bunn .kol{grid-template-columns:1fr}
  .vinter{min-height:520px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Fargetema fra kundens logo (publiser.py) */
:root{--navy:#122243;--navy2:#0f1c37;--navy3:#2a4172;--bla:#2ea0d8;--bla-lys:#59b3e0;--bla-mork:#1c6f98;--p1:#d9dee8;--p2:#b9c2d5;--p3:#8c9bba;--p4:#c2cadb;--paa-aks:#0b1220}