/* Haldervik, delt stilark. Én kilde for palett, typografi og komponenter.
   Alle stier er relative, malen serveres under /nettsidemaler/haldervik/. */

:root{
  --hvit:#ffffff;
  --sand:#f0eee9;
  --is:#e5ebff;
  --blekk:#17171c;
  --grafitt:#2e2e2e;
  --tekst:#212121;
  --tekst-svak:#737387;
  --tekst-lys-svak:#9696a1;
  --aksent:#4c6ee6;
  --linje:#e4e2dd;
  --linje-mork:#3a3a42;

  --runding:22px;
  --runding-liten:8px;
  --topp-hoyde:72px;

  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Bricolage Grotesque",var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hvit);color:var(--tekst);
  font-family:var(--sans);font-size:18px;line-height:1.4;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Ankermål må klare den sticky toppen */
section[id],div[id]{scroll-margin-top:calc(var(--topp-hoyde) + 24px)}

/* ---------- Typografi ---------- */
h1,h2,h3,h4{margin:0;font-weight:400}
.h-display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,9vw,96px);line-height:1.02;letter-spacing:-.02em;color:var(--tekst);
}
.h-display-m{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,7.4vw,72px);line-height:1.05;letter-spacing:-.02em;color:var(--tekst);
}
.h-stor{font-size:clamp(30px,4.6vw,48px);line-height:1.08;letter-spacing:-.01em}
.h-mellom{font-size:clamp(26px,3.4vw,32px);line-height:1.12;letter-spacing:-.01em}
.h-kort{font-size:clamp(20px,2.2vw,24px);line-height:1.2;letter-spacing:-.005em}
.etikett{font-size:16px;color:var(--tekst-svak);margin:0 0 20px}
.ingress{font-size:18px;line-height:1.4;margin:0}
.smaa{font-size:14px;line-height:1.4;color:var(--tekst-svak)}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

/* ---------- Flater og rammer ---------- */
.ramme{max-width:1360px;margin:0 auto;padding:0 40px;width:100%}
.ramme-smal{max-width:840px;margin:0 auto;padding:0 40px;width:100%}
.flate{padding:80px 0}
.flate-luft{padding:144px 0}
.flate-sand{background:var(--sand)}
.flate-is{background:var(--is)}
.flate-mork{background:var(--grafitt);color:var(--hvit)}
.flate-blekk{background:var(--blekk);color:var(--hvit)}
.flate-mork .h-stor,.flate-mork .h-mellom,.flate-mork .h-kort,
.flate-blekk .h-stor,.flate-blekk .h-mellom,.flate-blekk .h-kort{color:var(--hvit)}
.flate-mork .etikett,.flate-blekk .etikett{color:var(--tekst-lys-svak)}

/* ---------- Knapper ---------- */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 24px;border-radius:9999px;
  font:inherit;font-size:16px;line-height:1.2;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.knapp-mork{background:var(--blekk);color:var(--hvit)}
.knapp-mork:hover{background:#33333d}
.knapp-lys{background:var(--hvit);color:var(--blekk)}
.knapp-lys:hover{background:#e9e9ee}
.knapp-linje{background:transparent;color:var(--tekst);border-color:#c9c6c0}
.knapp-linje:hover{border-color:var(--tekst);background:rgba(0,0,0,.03)}
.flate-mork .knapp-linje,.flate-blekk .knapp-linje,footer .knapp-linje{
  color:var(--hvit);border-color:var(--linje-mork);
}
.flate-mork .knapp-linje:hover,.flate-blekk .knapp-linje:hover,footer .knapp-linje:hover{
  border-color:var(--hvit);background:rgba(255,255,255,.08);
}
.knapp:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--aksent);outline-offset:3px}

/* Tekstlenke med understrek, Cohere-grepet ved siden av pilleknappen */
.lenke-strek{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;
  font-size:16px;transition:opacity .18s ease;
}
.lenke-strek:hover{opacity:.6}
.knapperad{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}

/* Piller (nøkkelord, tagger) */
.pille{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:9999px;
  border:1px solid var(--linje);font-size:14px;color:var(--tekst);background:var(--hvit);
}
.flate-mork .pille,.flate-blekk .pille,footer .pille{
  background:transparent;border-color:var(--linje-mork);color:var(--hvit);
}

/* ---------- Topp ---------- */
.topp{
  position:sticky;top:0;z-index:60;background:var(--hvit);
  border-bottom:1px solid var(--linje);
}
.topp-ramme{
  max-width:1360px;margin:0 auto;padding:0 40px;
  height:var(--topp-hoyde);display:flex;align-items:center;gap:32px;position:relative;
}
.ordmerke{
  font-family:var(--display);font-size:24px;letter-spacing:-.02em;
  text-decoration:none;color:var(--tekst);margin-right:auto;
  display:inline-flex;align-items:center;min-height:44px;
}
.topp nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.topp nav a{
  text-decoration:none;font-size:16px;color:var(--tekst);
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;transition:border-color .18s ease;
}
.topp nav a:hover,.topp nav a[aria-current="page"]{border-bottom-color:var(--tekst)}
.topp-hoyre{display:flex;align-items:center;gap:16px}
.topp-tlf{
  text-decoration:none;font-size:16px;display:inline-flex;align-items:center;
  min-height:44px;white-space:nowrap;
}
.topp-tlf:hover{text-decoration:underline}
.meny-boks{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hamburger{display:none}
.mobil-cta{display:none}

/* ---------- Rullebånd. Fasit: .claude/skills/nettside/rullebaand.md ---------- */
.rullebaand{overflow:hidden}
.rulle-spor{display:flex;width:max-content;will-change:transform}
.rulle-gruppe{display:flex;align-items:center;flex:none}
.rulle-gruppe>*{flex:none;margin-right:30px}
.rulle-tekst{white-space:nowrap}
.rullebaand[data-rulle-klar] .rulle-spor{animation:rulle var(--rulle-varighet) linear infinite}
.rullebaand[data-rulle-klar]:hover .rulle-spor{animation-play-state:paused}
.rullebaand[data-rulle-retning="hoyre"] .rulle-spor{animation-direction:reverse}
@keyframes rulle{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rullebaand[data-rulle-klar] .rulle-spor{animation:none}
  .rulle-spor>[data-rulle-gruppe][aria-hidden="true"]{display:none}
}
/* Ordmerker i tillitsbåndet */
.merke{
  font-family:var(--display);font-size:22px;letter-spacing:-.01em;
  color:var(--tekst-svak);white-space:nowrap;
  /* Ingen `opacity` her. Kundenavnene er innhold, og `--tekst-svak` ligger paa 4,63:1 mot hvit,
     altsaa 0,13 over kravet. En dus paa .85 spiste hele marginen og tok dem ned til 3,48:1. */
}
.rulle-gruppe>.merke{margin-right:56px}
/* Bildebånd */
.rulle-bilde{width:420px;height:420px;border-radius:var(--runding);object-fit:cover}

/* ---------- Skjema ---------- */
.skjema-kort{background:var(--hvit);border-radius:var(--runding);padding:40px}
.felt{margin-bottom:20px}
.felt label{display:block;font-size:16px;margin-bottom:8px;color:var(--tekst)}
.felt input,.felt select,.felt textarea{
  width:100%;font:inherit;font-size:16px;color:var(--tekst);
  background:var(--hvit);border:1px solid var(--linje);border-radius:var(--runding-liten);
  padding:12px 14px;min-height:48px;transition:border-color .18s ease;
}
.felt input:hover,.felt select:hover,.felt textarea:hover{border-color:#bdbab4}
.felt textarea{min-height:132px;resize:vertical}
.felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.samtykke{display:flex;align-items:flex-start;gap:12px;margin:24px 0}
.samtykke input{width:20px;height:20px;min-height:20px;flex:none;margin-top:2px;accent-color:var(--blekk)}
.samtykke label{font-size:14px;line-height:1.45;color:var(--tekst-svak)}
.skjema-feil{color:#b3261e;font-size:14px;margin:0 0 16px;display:none}
.skjema-feil[data-vis]{display:block}
.takk{display:none;text-align:left}
.takk[data-vis]{display:block}
.takk-merke{
  width:52px;height:52px;border-radius:50%;background:var(--blekk);color:var(--hvit);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:24px;
}

/* ---------- Kort og rutenett ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.kort-bilde{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--runding-liten)}
.kort h3{margin-top:16px}
.kort-lenke{text-decoration:none;display:block;transition:opacity .18s ease}
.kort-lenke:hover{opacity:.72}

/* Tjenesteliste, Cohere-mønsteret: ett stort bilde + linjer ved siden */
.tjenesteliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linje)}
.tjenesteliste li{border-bottom:1px solid var(--linje)}
.tjenesteliste a{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:24px 0;text-decoration:none;transition:padding-left .18s ease,opacity .18s ease;
}
.tjenesteliste a:hover{padding-left:8px;opacity:.7}
.tjenesteliste .navn{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.005em}
.tjenesteliste .om{font-size:16px;color:var(--tekst-svak);text-align:right;max-width:46%}

/* Mørkt bånd med bilde ved siden */
.mork-blokk{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mork-blokk img{width:100%;border-radius:var(--runding);object-fit:cover;aspect-ratio:4/3}

/* Nøkkeltall */
.tall-rad{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:56px}
.tall .verdi{font-family:var(--display);font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.02em}
.tall .om{font-size:16px;color:var(--tekst-lys-svak);margin-top:12px}

/* Sitat */
.sitat-blokk{display:grid;grid-template-columns:1fr 240px;gap:64px;align-items:end}
.sitat-blokk img{width:240px;height:560px;object-fit:cover;border-radius:var(--runding-liten)}

/* Tidslinje på om-siden */
.tid{border-radius:var(--runding);padding:56px;margin-bottom:32px}
.tid-lys{background:var(--hvit)}
.tid-mork{background:var(--blekk);color:var(--hvit)}
.tid-mork .h-mellom{color:var(--hvit)}
.tid .aar{font-size:14px;color:var(--tekst-svak);margin-bottom:12px}
.tid-mork .aar,.tid-mork p{color:#d5d5dc}
.tid img{width:100%;border-radius:var(--runding-liten);margin-top:32px;aspect-ratio:5/4;object-fit:cover}

/* Portretter */
.portrett img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--runding-liten)}
.portrett .navn{margin-top:16px;font-size:18px}
.portrett .rolle{font-size:16px;color:var(--tekst-lys-svak)}

/* Juridisk tekst */
.jus h2{margin:48px 0 16px;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em}
.jus h2:first-of-type{margin-top:32px}
.jus ul{padding-left:20px;margin:0 0 16px}
.jus li{margin-bottom:8px}

/* ---------- Footer ---------- */
footer{background:var(--blekk);color:var(--hvit);padding:80px 0 40px}
@media (max-width:860px){footer{padding:48px 0 32px}.footer-bunn{margin-top:40px}}
footer a{color:var(--hvit);text-decoration:none}
footer a:hover{text-decoration:underline}
.footer-topp{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-ordmerke{font-family:var(--display);font-size:28px;letter-spacing:-.02em;margin-bottom:16px;display:block}
footer h3{font-size:14px;color:var(--tekst-lys-svak);margin-bottom:16px;font-weight:400}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:12px;font-size:16px}
.footer-bunn{
  margin-top:64px;padding-top:24px;border-top:1px solid var(--linje-mork);
  display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;
  font-size:14px;color:var(--tekst-lys-svak);
}
.footer-bunn a{color:var(--tekst-lys-svak)}

/* ---------- Mobil ---------- */
@media (max-width:1024px){
  .ramme,.ramme-smal,.topp-ramme{padding:0 24px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .mork-blokk,.sitat-blokk{gap:40px}
  .tall-rad{grid-template-columns:repeat(2,1fr);gap:32px}
  .tid{padding:40px}
}

@media (max-width:860px){
  .topp nav a,.topp-tlf{font-size:16px}
  .topp nav{
    position:absolute;top:var(--topp-hoyde);left:0;right:0;
    background:var(--hvit);border-bottom:0 solid var(--linje);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .topp nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .topp nav li{border-bottom:1px solid var(--linje)}
  .topp nav li:last-child{border-bottom:0}
  .topp nav a{min-height:52px;width:100%}
  .topp nav a:hover,.topp nav a[aria-current="page"]{border-bottom-color:transparent;opacity:.65}
  #menyknapp:checked ~ nav{max-height:80vh;border-bottom-width:1px}
  .hamburger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;cursor:pointer;flex:none;
  }
  .hamburger span{position:relative;display:block;width:22px;height:1.5px;background:var(--tekst)}
  .hamburger span::before,.hamburger span::after{
    content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--tekst);
    transition:transform .22s ease,top .22s ease;
  }
  .hamburger span::before{top:-7px}
  .hamburger span::after{top:7px}
  #menyknapp:checked ~ .topp-hoyre .hamburger span{background:transparent}
  #menyknapp:checked ~ .topp-hoyre .hamburger span::before{top:0;transform:rotate(45deg)}
  #menyknapp:checked ~ .topp-hoyre .hamburger span::after{top:0;transform:rotate(-45deg)}
  .topp-tlf{width:44px;justify-content:center;flex:none}
  .tlf-nr{display:none}
  .mobil-cta{display:inline-flex}
  .skjul-mobil{display:none}
  .grid-3,.grid-2,.mork-blokk,.sitat-blokk,.felt-rad{grid-template-columns:1fr}
  .grid-3,.grid-2{gap:32px}
  .sitat-blokk img{display:none}
  .flate{padding:48px 0}
  .flate-luft{padding:56px 0}
  .skjema-kort{padding:28px 24px}
  .tjenesteliste a{flex-direction:column;gap:6px;padding:20px 0}
  .tjenesteliste .om{text-align:left;max-width:100%}
  .rulle-bilde{width:260px;height:260px}
  .merke{font-size:18px}
  .rulle-gruppe>.merke{margin-right:36px}
  .footer-topp{grid-template-columns:1fr 1fr;gap:32px}
  .knapperad{gap:16px;margin-top:24px}
}

@media (max-width:560px){
  .ramme,.ramme-smal,.topp-ramme{padding:0 20px}
  .grid-4{grid-template-columns:1fr}
  .tall-rad{grid-template-columns:1fr 1fr;gap:24px}
  .footer-topp{grid-template-columns:1fr 1fr}
  .footer-topp>div:first-child{grid-column:1 / -1}
  .tid{padding:28px 24px}
  .knapperad .knapp{width:100%}
  .topp-hoyre{gap:8px}
  .mobil-cta.knapp{padding:10px 16px}
}

/* ---------- Sideseksjoner ---------- */
.topp-tlf{gap:8px}
.hero{padding:150px 0 72px}
.hero-ingress{max-width:660px;margin-top:24px}

.bildeflate{padding-bottom:40px}
.bildeflate-rad{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.bildeflate-bred,.bildeflate-smal{width:100%;height:560px;object-fit:cover}

.tillit-tekst{margin-bottom:40px}
.lofter{margin-top:56px}
.lofter p{margin-top:12px}

.tjeneste-blokk{margin-top:56px;align-items:center}
.tjeneste-bilde{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--runding)}

.baand-bilder{margin-top:40px}

.sitat{margin:40px 0 24px;max-width:920px}
.sitat-navn{color:var(--tekst-svak)}

.prosjekter{margin-top:40px}
.prosjekter .smaa{margin:16px 0 8px}

.cta-blokk{max-width:760px}
.cta-blokk .ingress{margin-top:20px}

footer .smaa{color:var(--tekst-lys-svak)}
.footer-adresse{margin-top:8px}

/* Om-siden */
.om-hero{padding:150px 0 56px}
.om-hero .ingress{max-width:660px;margin-top:24px}
.om-bilde{width:100%;max-width:660px;border-radius:var(--runding);aspect-ratio:3/4;object-fit:cover}
.tidslinje{margin-top:48px}
.folk{margin-top:48px}
.stort-sitat{max-width:1000px}
.stort-sitat .kilde{font-size:16px;color:var(--tekst-svak);margin-bottom:24px}

/* Kontaktsiden */
.kontakt-blokk{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
.kontakt-punkter{list-style:none;margin:32px 0 0;padding:0}
.kontakt-punkter li{display:flex;gap:12px;padding:14px 0;border-top:1px solid rgba(23,23,28,.12);font-size:18px}
.kontakt-punkter li:last-child{border-bottom:1px solid rgba(23,23,28,.12)}
.kontakt-punkter .hake{flex:none;color:var(--blekk)}
.kontaktkort{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.kontaktkort h3,.kontaktkort h2{font-size:16px;color:var(--tekst-svak);margin-bottom:8px}
.kontaktkort p{font-size:18px}

@media (max-width:1024px){
  .kontakt-blokk{gap:40px}
}

@media (max-width:860px){
  .hero,.om-hero{padding:56px 0 40px}
  .bildeflate-rad{grid-template-columns:1fr}
  .bildeflate-smal{display:none}
  .bildeflate-bred{height:300px}
  .lofter{margin-top:32px}
  .tjeneste-blokk{gap:28px}
  .baand-bilder{margin-top:28px}
  .sitat{margin:24px 0 16px}
  .prosjekter{margin-top:28px}
  .kontakt-blokk,.kontaktkort{grid-template-columns:1fr}
  .kontaktkort{gap:24px}
  .om-bilde{aspect-ratio:4/5}
  .tidslinje,.folk{margin-top:32px}
}

/* Sammenhengende sandflate: seksjoner som fortsetter uten nytt topp-luftrom */
.flate-fort{padding:0 0 80px}
@media (max-width:860px){ .flate-fort{padding:0 0 48px} }

/* Heroene er sentrert, som i referansen. Seksjonsoverskrifter ellers står til venstre. */
.hero,.om-hero{text-align:center}
.hero .hero-ingress,.om-hero .ingress{margin-left:auto;margin-right:auto}
.hero .knapperad,.om-hero .knapperad{justify-content:center}
.om-hero .h-display-m{max-width:14ch;margin-left:auto;margin-right:auto}
.flate-fort .om-bilde{margin-left:auto;margin-right:auto}
@media (max-width:560px){
  .hero .knapperad,.om-hero .knapperad{flex-direction:column;align-items:stretch}
  /* Understreken skal foelge teksten, ikke hele bredden, ellers leses den som en skillelinje */
  .hero .knapperad .lenke-strek,.om-hero .knapperad .lenke-strek{align-self:center}
}

/* Små luft-hjelpere. Inline-stiler brukes ikke, de vinner over alle mobilregler. */
.luft-12{margin-top:12px}
.luft-20{margin-top:20px}
.luft-24{margin-top:24px}
.luft-48{margin-top:48px}
.knapp-bred{width:100%}