/* ==========================================================================
   Angus – delt stilark for alle sider.
   Erstatter CSS-en som tidligere var duplisert inline i hver HTML-fil, og
   mediaqueryene som matchet på inline-stiler (div[style*="padding:72px 64px"]).
   Layout styres nå av klasser, så det er trygt å endre en padding.
   ========================================================================== */

/* --- TOKENS --------------------------------------------------------------- */
:root{
  color-scheme:light only;

  --ink:#141410;
  --ink2:#2C2B26;
  --muted:#6E6D64;        /* var #76756C – mørknet for 4.5:1 mot --bg og --bg2 */
  --line:#E0DDD5;         /* dekorative skillelinjer – ikke komponentkanter */
  --field-line:#938E82;   /* kant på skjemafelt – WCAG 1.4.11 krever 3:1     */
  --placeholder:#76756C;  /* var #BDBCB5 (1.90:1) – nå 4.63:1 mot hvitt      */
  --bg:#FAFAF7;
  --bg2:#F2F0EA;
  --accent:#3D5A3E;
  --accent-dk:#2E4530;
  --accent-lt:#C8D8C9;
  --white:#FFFFFF;

  /* Tekst på mørke flater. 0.72 gir 4.92:1 mot --accent; 0.5 gir 5.34:1 mot --ink. */
  --on-dark:rgba(255,255,255,0.5);
  --on-accent:rgba(255,255,255,0.72);

  --pad-x:64px;
  --nav-h:64px;
}

/* --- RESET / BASE -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* Én global fokusregel dekker lenker, knapper, felt og hamburger. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.contact-left :focus-visible,.cta-dark :focus-visible{outline-color:var(--accent-lt)}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--accent);color:var(--white);
  padding:10px 16px;border-radius:4px;font-size:0.85rem;font-weight:500;
  transition:top 0.15s;
}
.skip-link:focus{top:12px}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Ankere må ikke havne under den klebrige menyen. */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* --- TYPOGRAFI ----------------------------------------------------------- */
/* Basis = tjenestesidens opprinnelige h1. Forsiden overstyrer under. */
h1{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2.4rem,4vw,3.5rem);line-height:1.12;
  color:var(--ink);letter-spacing:-0.02em;margin-bottom:24px;
  max-width:760px;
}
/* «Personvernerklæring» er ett ord på 356 px ved 320 px skjermbredde og
   sprengte spalta. overflow-wrap bryter bare når et ord ikke får plass i
   det hele tatt, og setter ingen bindestrek.

   hyphens:auto sto her først. Safari på iOS har norsk orddelingsordbok og
   delte «ansetter» til «anset-ter» i overskriften på forsiden – den deler
   ord for å fylle linjer pent, ikke bare når det er nødvendig. I en
   display-serif ser det galt ut. Derfor bare overflow-wrap. */
h1,h2{overflow-wrap:break-word}
h1 em{font-style:italic}
h1 .circled{
  font-style:italic;position:relative;display:inline-block;
  padding:8px 20px;border-radius:50%;
  outline:1.5px solid var(--accent);outline-offset:4px;
}
.hero--home h1{
  font-size:clamp(2.8rem,5vw,4.2rem);line-height:1.12;
  max-width:700px;margin-bottom:28px;
}
h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.6rem,2.5vw,2rem);line-height:1.2;
  color:var(--ink);letter-spacing:-0.01em;margin-bottom:24px;
}
.section-label{
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.section-label::before{content:'';width:16px;height:1px;background:var(--accent);flex-shrink:0}
.section-label--center{justify-content:center}
.body-text{font-size:0.95rem;line-height:1.75;color:var(--muted);font-weight:300}
.body-text + .body-text{margin-top:14px}

/* Små overskrifter inne i kort og lister. Var <div> – nå <h3>/<h4>. */
.micro-h{font-size:0.88rem;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.4}
.micro-p{font-size:0.82rem;color:var(--muted);line-height:1.6}
.item-h{font-size:0.9rem;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.4}
.item-p{font-size:0.85rem;color:var(--muted);line-height:1.6}
.serif-h{
  font-family:'Fraunces',serif;font-size:1.1rem;font-weight:400;
  color:var(--ink);margin-bottom:12px;line-height:1.3;
}
.num{
  font-family:'Courier Prime',monospace;font-size:0.68rem;
  color:var(--accent);flex-shrink:0;
}
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex-shrink:0;margin-top:7px;
}

/* --- LAYOUT-PRIMITIVER --------------------------------------------------- */
.section{padding:72px var(--pad-x)}
.band{border-bottom:1px solid var(--line)}
.band-top{border-top:1px solid var(--line)}

.grid-2{display:grid;grid-template-columns:1fr 1fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}

/* Skillelinjer mellom celler, uten kant på ytterkanten. */
.divided > * + *{border-left:1px solid var(--line)}


/* --- NAV ----------------------------------------------------------------- */
/* Sticky må sitte på <header>, ikke på .nav. Et sticky element fester seg bare
   innenfor forelderens boks, og header er nøyaktig like høy som .nav – da blir
   det ingen plass å feste seg i, og menyen skroller bort som om den var
   statisk. Med sticky på header er hele dokumentet ferdselsområdet.
   Sticky lager ikke containing block for position:fixed, så .mobile-menu
   ligger fortsatt i forhold til viewporten. */
header{position:sticky;top:0;z-index:100}
.nav{
  background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad-x);height:var(--nav-h);
}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
  font-size:0.82rem;font-weight:400;color:var(--muted);
  padding:7px 14px;border-radius:4px;
  transition:color 0.15s,background 0.15s;letter-spacing:0.01em;
}
.nav-links a:hover{color:var(--ink);background:var(--bg2)}
.nav-back{font-size:0.82rem;color:var(--muted);transition:color 0.15s}
.nav-back:hover{color:var(--ink)}
/* Må være minst like spesifikk som .nav-links a / .mobile-menu a (0,1,1),
   ellers arver knappen den grå lenkefargen og blir uleselig på grønt. */
.nav-links .nav-cta,.mobile-menu .nav-cta{
  background:var(--accent);color:var(--white);
  font-weight:500;border-radius:4px;
}
.nav-links .nav-cta:hover{background:var(--accent-dk);color:var(--white)}

.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:8px;background:none;border:none;
}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--ink)}

.mobile-menu{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:16px 20px;z-index:99;flex-direction:column;
}
.mobile-menu a{
  font-size:0.9rem;color:var(--muted);padding:12px 0;
  border-bottom:1px solid var(--line);display:block;
}
.mobile-menu a:last-child{border:none}
.mobile-menu .nav-cta{
  padding:12px 16px;margin-top:8px;text-align:center;border:none;
}

/* --- FAST HANDLINGSSTRIPE (MOBIL) ---------------------------------------- */
/* Bare på mobil. På desktop ligger de samme handlingene i toppmenyen, som nå
   følger med under skrolling.
   z-index 98 holder stripa under mobilmenyen (99) og navigasjonen (100), så
   en åpen meny aldri havner bak den. */
.mobile-cta{display:none}

@media(max-width:860px){
  .mobile-cta{
    display:flex;gap:10px;align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;z-index:98;
    background:var(--bg);border-top:1px solid var(--line);
    padding:10px var(--pad-x);
    /* Hjemknapp-stripa på nyere iPhone spiser ellers nederste rad. */
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    transition:transform 0.25s ease;
  }
  /* Legges på av skriptet når kontaktseksjonen er på skjermen – da peker
     knappene bare på noe brukeren allerede ser. */
  .mobile-cta.skjult{transform:translateY(110%)}
  .mobile-cta a{
    display:flex;align-items:center;justify-content:center;
    padding:12px 10px;border-radius:4px;
    font-size:0.85rem;font-weight:500;letter-spacing:0.01em;
  }
  /* Eneste handling i stripa, så den fyller bredden. «Ring» sto her før;
     telefonnummeret finnes fortsatt i teamkortene og kontaktseksjonen. */
  .mobile-cta__primary{flex:1;background:var(--accent);color:var(--white)}
  /* Uten dette dekker stripa de siste linjene i bunnteksten. */
  body{padding-bottom:78px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-cta{transition:none}
}

/* --- HERO ---------------------------------------------------------------- */
/* Forsiden åpner med ett helt skjermbilde: overskriften midt på og
   verdistripa som avslutning nederst, slik at «Hva vi gjør» først dukker
   opp når man blar. svh, ikke vh: på mobil krymper visningsflaten når
   adressefeltet er framme, og vh ville dyttet stripa under kanten. */
.forste-skjerm{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;
}
.forste-skjerm .hero{
  flex:1;display:flex;flex-direction:column;justify-content:center;
}

.hero{padding:100px var(--pad-x) 80px;max-width:1100px;border-bottom:1px solid var(--line)}
.hero-sub{
  font-size:1.05rem;line-height:1.7;color:var(--muted);
  max-width:520px;margin-bottom:44px;font-weight:300;
}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.btn-primary{
  background:var(--accent);color:var(--white);
  padding:13px 28px;font-size:0.88rem;font-weight:500;
  border-radius:4px;transition:background 0.15s;
  letter-spacing:0.01em;display:inline-block;
}
.btn-primary:hover{background:var(--accent-dk)}
.btn-ghost{
  color:var(--ink2);font-size:0.88rem;font-weight:400;
  /* --field-line, ikke --line: kanten er en komponentkant og trenger 3:1. */
  padding:13px 20px;border:1px solid var(--field-line);border-radius:4px;
  transition:border-color 0.15s,color 0.15s;display:inline-block;
}
.btn-ghost:hover{border-color:var(--ink2)}

/* Tekstlenke med tynn understrek, brukt nederst i seksjoner. */

/* --- «LES MER» ----------------------------------------------------------- */
/* Innholdet står komplett i HTML-en og foldes først sammen når skriptet
   kjører: uten JavaScript – og for søkemotorer – er dermed alt synlig.
   Knappen ser ut som .btn-ghost, men er en <button> som folder på stedet;
   kanten bruker --field-line fordi 3:1-kravet gjelder komponentkanter. */
.lesmer-rad{margin-top:28px}
.lesmer-knapp{
  display:none;background:none;cursor:pointer;font-family:inherit;
  color:var(--ink2);font-size:0.88rem;font-weight:400;
  padding:13px 20px;border:1px solid var(--field-line);border-radius:4px;
  transition:border-color 0.15s;
}
.lesmer-knapp.aktiv{display:inline-block}
.lesmer-knapp:hover{border-color:var(--ink2)}
.lesmer-knapp[aria-expanded="true"] .lesmer-knapp__mer,
.lesmer-knapp[aria-expanded="false"] .lesmer-knapp__mindre{display:none}
/* Samme avstand som mellom to .body-text – «+»-regelen når ikke inn i div-en. */
.lesmer-felt{margin-top:14px}
.lesmer-felt.foldet{display:none}

/* --- VERDISTRIPE --------------------------------------------------------- */
.valuestrip{list-style:none}
.valuestrip > li{padding:36px 48px;display:flex;gap:16px;align-items:flex-start}

/* --- TO-KOLONNERS SEKSJON ----------------------------------------------- */
/* Kolonnene er like høye som grid-celler. Gjør vi dem til flex-kolonner,
   kan «Les mer» skyves ned med margin-top:auto, og knappene står i linje
   selv om tekstene er ulikt lange. */
.two-col > *{padding:72px var(--pad-x);display:flex;flex-direction:column}
/* align-self, ikke align-items på foreldren: ellers krymper også lister og
   avsnitt til innholdsbredde, og skillelinjene i .numlist blir for korte. */
.two-col .lesmer-rad{margin-top:auto;padding-top:28px;align-self:flex-start}

/* --- KORT MED PRIKK ------------------------------------------------------ */

/* --- LØFT VED HOVER ----------------------------------------------------- */
/* Gjelder de fylte flisene – blokker som har egen bakgrunn og dermed leses
   som kort. Forsiden hadde slike kort før; nå er det bare tjenestesiden. Blokker som bare er skilt med linjer (.valuestrip, .roles,
   .steps) er ikke kort, og et løft der ville sett ut som en feil.

   position:relative står fast, ikke bare på hover: å bytte position ved
   hover tvinger en ny layoutberegning og gir et lite hopp. z-index løftes
   derimot bare ved hover, ellers klippes skyggen av nabofliser i grid med
   2px mellomrom. */
.cardgrid > li{
  position:relative;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.cardgrid > li:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(20,20,16,0.06);
  z-index:1;
}

/* Teamkortene har .reveal på seg selv, og .reveal.animate.visible setter
   transform:none med tre klasser. En hover-regel her ville tapt på
   spesifisitet, og å vinne den ville krevd at rekkefølgen i fila holdt seg
   – for skjørt. Skygge alene gir samme framheving uten å røre transform. */
.team-card{
  position:relative;
  transition:box-shadow 0.2s ease;
}
.team-card:hover{
  box-shadow:0 8px 24px rgba(20,20,16,0.06);
  z-index:1;
}

/* --- NUMMERERT LISTE ---------------------------------------------------- */
.numlist{list-style:none;display:flex;flex-direction:column;margin-top:8px}
.numlist > li{
  padding:20px 0;border-bottom:1px solid var(--line);
  display:flex;gap:16px;align-items:flex-start;
}
.numlist > li:last-child{border-bottom:none}
.numlist .num{margin-top:2px}
.numlist--tight > li{padding:18px 0}

/* --- SEKSJONSHODE MED EGEN PADDING -------------------------------------- */
.section-head{padding:64px var(--pad-x) 32px}
.narrow{max-width:600px}

/* --- KORTGRID (bg2-kort med 2px mellomrom) ------------------------------ */
.cardgrid{list-style:none;gap:2px;margin-top:32px}
.cardgrid > li{background:var(--bg2);padding:36px 32px}
.cardgrid .item-p{font-size:0.85rem;line-height:1.65}

/* --- ROLLELISTER (2×2-grid) --------------------------------------------- */
/* Kan ikke bruke .divided: i et 2-kolonners grid ville celle 3 fått en
   feilaktig venstrekant. Odde celler får høyrekant i stedet. */
.roles > *{padding:36px var(--pad-x)}
.roles > *:nth-child(odd){border-right:1px solid var(--line)}
.rolelist{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0}
.rolelist > li{font-size:0.88rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.rolelist > li::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--accent-lt);flex-shrink:0;
}

/* --- PROSESSTEG (4 kolonner med skiller) -------------------------------- */
.steps{list-style:none}
.steps > li{padding:0 40px;border-left:1px solid var(--line)}
.steps > li:first-child{padding-left:0;border-left:none}
.steps > li:last-child{padding-right:0}
.steps .serif-h{font-size:1rem;margin-bottom:10px}
.steps .item-p{font-size:0.84rem;line-height:1.65}
.steps .num{display:block;margin-bottom:12px}

/* --- DELT TOPP (TJENESTESIDEN) -------------------------------------------- */
/* Tekst til venstre, bilde til høyre. Bare her – forsidens hero er ren tekst
   med vilje, og det er den renheten som får resten av forsiden til å lande.
   En tjenesteside forklarer, og tåler et bilde som støtter forklaringen. */
.hero--split{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:56px;align-items:center;max-width:1400px;
  padding-top:72px;
}
.hero-bilde{
  aspect-ratio:4/5;overflow:hidden;background:var(--bg2);
}
.hero-bilde img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:860px){
  /* Stablet: teksten først, bildet under. Bildet skal ikke stå mellom
     overskriften og knappen på en telefon. */
  .hero--split{grid-template-columns:1fr;gap:36px;padding-top:40px}
  /* Samme 4:5 som på desktop. Et 4:3-utsnitt her beskar bildet ovenfra og
     kuttet hodene, siden object-fit:cover tar like mye av topp og bunn.
     Det lavere utsnittet hadde heller ingen hensikt: bildet ligger under
     knappen på mobil, så lavere bilde gjør ikke knappen lettere å nå. */
}

/* --- BILDESTRIPE ---------------------------------------------------------- */
/* Full bredde, som et pust mellom tekstseksjoner. aspect-ratio framfor fast
   høyde: utsnittet blir det samme på alle skjermbredder, og plassen er
   reservert før bildet har lastet. Fotoet er beskåret til 2,163:1 på forhånd,
   så CSS-en og fila har samme format og ingenting kuttes to ganger. */
.bildestripe{
  aspect-ratio:3.35/1;
  overflow:hidden;
  background:var(--bg2);
}
.bildestripe-hylle{border-bottom:1px solid var(--line)}
.bildestripe img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:860px){
  /* 3,35:1 blir en stripe på under 120 px på telefon. Der får stripa den
     gamle høyden i stedet, og cover beskjærer i bredden – vesken ligger
     innenfor det utsnittet. */
  .bildestripe{aspect-ratio:2.163/1}
}

/* --- TEAM ---------------------------------------------------------------- */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:48px}
.team-card{background:var(--bg2);overflow:hidden}
/* Bildefeltet holder samme høyde med og uten portrett, så layouten ikke
   flytter seg når bildene byttes inn. */
/* Bildet fyller ikke kortet. I full bredde ble hvert portrett 655×819 på
   desktop, og to slike side om side tok hele skjermen – da er det bildene
   man ser, ikke menneskene og kontaktinfoen.

   Nå ligger bildet innfelt med samme venstremarg som teksten under, så
   kortet leser som et visittkort framfor en plakat. aspect-ratio holder
   utsnittet likt på alle skjermbredder, og reserverer plassen før bildet
   har lastet. */
.team-photo{
  width:min(460px,66%);
  aspect-ratio:4/5;
  margin:40px auto 0;
  background:var(--accent-lt);
  overflow:hidden;
}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Sentrert fordi bildet er sentrert. Står teksten til venstre mens
   bildet ligger midt i kortet, får kortet to akser og ser uryddig ut. */
.team-body{padding:28px 40px;text-align:center}
.team-name{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:400;color:var(--ink)}
.team-role{font-size:0.8rem;color:var(--muted);letter-spacing:0.03em;margin:4px 0 20px}
.team-contact{
  font-size:0.82rem;color:var(--accent);
  display:block;margin-bottom:6px;
}
.team-contact:last-child{margin-bottom:0}
.team-contact:hover{text-decoration:underline}

/* --- FAQ SOM SAMTALEVINDU ------------------------------------------------ */
/* Spørsmålene ligger som knapper under vinduet. Trykk viser spørsmålet som
   melding, deretter svaret. Ett om gangen – nytt trykk erstatter forrige.
   Uten JavaScript står vinduet der med spørsmålene synlige som tekst, så
   innholdet er aldri utilgjengelig. */
.mac-section{border-bottom:1px solid var(--line);padding:72px var(--pad-x);background:var(--bg2)}
.mac-head{max-width:900px;margin:0 auto;text-align:center}
.mac-head h2{margin-bottom:0}
.mac-head .body-text{max-width:440px;margin:16px auto 0}

.mac-desktop{
  max-width:900px;margin:44px auto 0;border-radius:18px;
  overflow:hidden;position:relative;
  background:linear-gradient(145deg,var(--accent-dk) 0%,var(--accent) 45%,#6B8F6C 100%);
  box-shadow:0 30px 80px rgba(20,20,16,0.25);
}
.mac-menubar{
  display:flex;align-items:center;gap:18px;padding:8px 18px;
  background:rgba(255,255,255,0.12);backdrop-filter:blur(10px);
  font-size:0.7rem;color:rgba(255,255,255,0.92);
}
.mac-menubar .mac-brand{font-weight:600;letter-spacing:0.02em}
.mac-menubar .mac-dim{opacity:0.72}
.mac-menubar .mac-time{margin-left:auto}
.mac-stage{padding:36px 36px 76px;display:flex;justify-content:center}

.mac-window{
  background:var(--white);border-radius:12px;width:100%;max-width:620px;
  box-shadow:0 20px 50px rgba(0,0,0,0.28);overflow:hidden;
}
.mac-titlebar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:#FCFCFA;
}
.mac-dot{width:11px;height:11px;border-radius:50%}
.mac-dot.r{background:#FF5F57}
.mac-dot.y{background:#FEBC2E}
.mac-dot.g{background:#28C840}
.mac-title{
  margin:0 auto;transform:translateX(-22px);
  font-size:0.74rem;color:var(--muted);font-weight:500;
}

.mac-chat{
  padding:22px 20px;display:flex;flex-direction:column;gap:13px;min-height:250px;
}
.chat-intro{
  align-self:flex-start;max-width:82%;padding:12px 16px;
  border-radius:14px;border-bottom-left-radius:4px;
  background:var(--bg2);color:var(--muted);
  font-size:0.84rem;line-height:1.55;font-style:italic;
}
.chat-msg{
  max-width:80%;padding:12px 16px;border-radius:14px;
  font-size:0.86rem;line-height:1.55;
  opacity:0;transform:translateY(10px);
  transition:opacity 0.4s ease,transform 0.4s ease;
}
.chat-msg.visible{opacity:1;transform:translateY(0)}
/* 0.6 opacity ga for svak kontrast på det grønne boblene. Egne verdier per
   bakgrunn i stedet, så avsenderetiketten holder 4.5:1 begge steder. */
.chat-msg .chat-who{
  display:block;font-size:0.66rem;font-weight:600;letter-spacing:0.05em;
  text-transform:uppercase;margin-bottom:5px;
}
.chat-msg.from-them{
  align-self:flex-end;background:var(--accent);color:var(--white);
  border-bottom-right-radius:4px;
}
.chat-msg.from-them .chat-who{color:var(--on-accent)}
.chat-msg.from-us{
  align-self:flex-start;background:var(--bg2);color:var(--ink);
  border-bottom-left-radius:4px;
}
.chat-msg.from-us .chat-who{color:var(--muted)}

.chat-typing{
  align-self:flex-start;background:var(--bg2);
  border-radius:14px;border-bottom-left-radius:4px;
  padding:14px 18px;display:none;gap:5px;
}
.chat-typing.on{display:flex}
.chat-typing span{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:typingBlink 1.2s infinite;
}
.chat-typing span:nth-child(2){animation-delay:0.2s}
.chat-typing span:nth-child(3){animation-delay:0.4s}
@keyframes typingBlink{0%,80%,100%{opacity:0.3}40%{opacity:1}}

.chat-qbar{border-top:1px solid var(--line);padding:16px 18px;background:#FCFCFA}
.chat-qbar-label{
  font-family:'Courier Prime',monospace;font-size:0.66rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.chat-qs{display:flex;flex-wrap:wrap;gap:8px}
.chat-q{
  border:1px solid var(--field-line);background:var(--white);border-radius:20px;
  padding:9px 15px;font-family:inherit;font-size:0.79rem;color:var(--ink);
  cursor:pointer;transition:border-color 0.18s ease,color 0.18s ease,
  background 0.18s ease,transform 0.18s ease;line-height:1.3;text-align:left;
}
.chat-q:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.chat-q[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--white)}

.mac-dock{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;padding:8px 14px;border-radius:16px;
  background:rgba(255,255,255,0.22);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.25);
}
.dock-icon{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.92);
  transition:transform 0.18s ease;position:relative;
}
.dock-icon:hover{transform:translateY(-7px) scale(1.12)}
.dock-icon svg{
  width:18px;height:18px;stroke:var(--accent);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* Rent dekorativ etikett – navnet ligger i aria-label på lenken. */
.dock-icon::after{
  content:attr(data-label);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%);background:rgba(20,20,16,0.9);color:#fff;
  font-size:0.66rem;padding:5px 9px;border-radius:5px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity 0.18s ease;
}
.dock-icon:hover::after,.dock-icon:focus-visible::after{opacity:1}

@media(max-width:860px){
  .mac-section{padding:56px var(--pad-x)}
  .mac-desktop{margin-top:32px}
  .mac-stage{padding:22px 12px 68px}
  .mac-chat{min-height:230px;padding:16px 13px}
  .chat-msg,.chat-intro{max-width:90%}
  .chat-q{font-size:0.74rem;padding:8px 13px}
  .mac-dock{gap:8px;padding:6px 10px}
  .dock-icon{width:30px;height:30px}
  /* Menylinja er ren pynt og blir trang på små skjermer. */
  .mac-menubar .mac-dim{display:none}
}

@media(prefers-reduced-motion:reduce){
  .chat-msg{transition:none;opacity:1;transform:none}
  .chat-typing span{animation:none}
  .chat-q:hover,.dock-icon:hover{transform:none}
}

/* --- TALL ---------------------------------------------------------------- */
.stats-head{
  padding:48px var(--pad-x) 32px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
}
.stats > *{padding:40px 40px 36px}
.stat--accent{background:var(--accent)}
.stat__n{
  font-family:'Fraunces',serif;font-size:3.2rem;font-weight:300;
  color:var(--ink);line-height:1;margin-bottom:16px;
}
/* Bare suffikset "/10" skal være lite. Tallet foran ligger også i en <span>
   (for opptellingen), så en regel på .stat__n span ville krympet tallet også. */
.stat__suffix{font-size:1.5rem;color:var(--muted)}
.stat--accent .stat__n{color:var(--white)}
.stat--accent .stat__suffix{color:rgba(255,255,255,0.6)}
.stat__k{font-size:0.82rem;font-weight:500;color:var(--ink);margin-bottom:4px}
.stat--accent .stat__k{color:var(--white)}
.stat__note{font-size:0.76rem;color:var(--muted);font-style:italic}
.stat--accent .stat__note{color:var(--on-accent)}
.stat__svg{width:82px;height:auto;display:block;margin-bottom:18px}

/* --- KONTAKT ------------------------------------------------------------- */
.contact-left{padding:72px var(--pad-x);border-right:1px solid var(--line);background:var(--ink)}
.contact-left .section-label{color:var(--accent-lt)}
.contact-left .section-label::before{background:var(--accent-lt)}
.contact-left h2{color:var(--white)}
.contact-left .body-text{color:var(--on-dark)}
.contact-people{margin-top:40px;display:flex;flex-direction:column;list-style:none}
.cperson{padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.cperson:last-child{border-bottom:none}
.cperson-name{
  font-family:'Courier Prime',monospace;font-size:0.72rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent-lt);margin-bottom:4px;
}
.cperson-val{font-size:1rem;font-weight:400;color:var(--white);display:block}
.cperson-val:hover{text-decoration:underline}
.cperson-val--sm{font-size:0.85rem;color:var(--on-dark)}
.contact-right{padding:72px var(--pad-x);background:var(--bg)}

.cform{display:flex;flex-direction:column;gap:2px}
.cgroup{display:flex;flex-direction:column}
.cgroup label{
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);padding:12px 0 6px;
}
.req{color:var(--accent)}
.cgroup input,.cgroup textarea,.cgroup select{
  border:1px solid var(--field-line);border-radius:4px;
  padding:11px 14px;font-family:'DM Sans',sans-serif;
  font-size:0.9rem;color:var(--ink);background:var(--white);
  transition:border-color 0.15s,box-shadow 0.15s;resize:none;
}
.cgroup input:focus,.cgroup textarea:focus,.cgroup select:focus{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);
}
.cgroup input::placeholder,.cgroup textarea::placeholder{color:var(--placeholder)}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.csubmit{
  margin-top:8px;background:var(--accent);color:var(--white);
  border:none;padding:14px 28px;font-family:'DM Sans',sans-serif;
  font-size:0.88rem;font-weight:500;cursor:pointer;border-radius:4px;
  transition:background 0.15s;letter-spacing:0.01em;
  display:flex;align-items:center;justify-content:space-between;
}
.csubmit:hover{background:var(--accent-dk)}
.form-note{font-size:0.74rem;color:var(--muted);margin-top:10px}
.form-note a{color:var(--accent);border-bottom:1px solid var(--accent-lt)}
.honeypot{position:absolute;left:-9999px}

/* --- MØRK CTA ------------------------------------------------------------ */
.cta-dark{padding:72px var(--pad-x);background:var(--ink)}
.cta-dark .section-label{color:var(--accent-lt)}
.cta-dark .section-label::before{background:var(--accent-lt)}
.cta-dark h2{color:var(--white);margin-bottom:16px}
.cta-dark p{
  font-size:0.95rem;line-height:1.75;color:var(--on-dark);
  margin-bottom:36px;font-weight:300;
}

/* Variant der håndtrykket ligger bak teksten. Bildet er dekorativt: det
   fader inn fra høyre med en maske, så venstresida – der teksten står –
   blir like mørk og lesbar som en vanlig .cta-dark. Uten mask-image faller
   nettleseren tilbake til bildet på 30 % opasitet, som fortsatt holder. */
.cta-photo{position:relative;overflow:hidden;padding-top:104px;padding-bottom:104px}
.cta-photo-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  opacity:0.3;
  -webkit-mask-image:linear-gradient(100deg,transparent 8%,rgba(0,0,0,0.4) 42%,#000 78%);
          mask-image:linear-gradient(100deg,transparent 8%,rgba(0,0,0,0.4) 42%,#000 78%);
  pointer-events:none;
}
.cta-photo-inner{position:relative;max-width:600px}
/* Litt lysere brødtekst her: 0.5 hvit holder mot ren --ink, men ikke mot
   de lyseste flatene i fotoet. */
.cta-photo p{color:rgba(255,255,255,0.78)}

/* --- ARTIKKELSIDE (personvern) ------------------------------------------ */
.prose{max-width:720px;margin:0 auto;padding:72px 24px 96px}
.prose .updated{
  font-size:0.78rem;color:var(--muted);font-family:'Courier Prime',monospace;
  letter-spacing:0.04em;margin-bottom:48px;
}
.prose h2{font-weight:400;font-size:1.25rem;margin:40px 0 12px}
.prose p,.prose li{font-size:0.95rem;line-height:1.75;color:var(--muted);font-weight:300}
.prose ul{padding-left:20px;margin-top:8px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-lt)}

/* --- ENKEL MIDTSTILT SIDE (takk / 404) ---------------------------------- */
.centered{
  min-height:calc(100vh - var(--nav-h) - 140px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px;
}
.centered h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:20px}
.centered p{
  font-size:1rem;line-height:1.7;color:var(--muted);
  font-weight:300;max-width:440px;margin-bottom:32px;
}

/* --- FOOTER -------------------------------------------------------------- */
.site-footer{
  padding:40px var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:var(--bg);border-top:1px solid var(--line);
}
.footer-logo img{height:24px;width:auto;display:block;opacity:0.85}
.footer-social{display:flex;gap:14px;align-items:center}
.footer-social a{color:var(--muted);display:flex;align-items:center;transition:color 0.2s}
.footer-social a:hover{color:var(--accent)}
.footer-social svg{width:23px;height:23px;display:block}
.footer-right{
  font-size:0.78rem;color:var(--muted);
  font-family:'Courier Prime',monospace;letter-spacing:0.04em;
  text-align:right;line-height:1.8;
}
.footer-right a:hover{color:var(--ink)}

/* --- SCROLL-REVEAL ------------------------------------------------------ */
/* .reveal er synlig som standard; JS legger på .animate. Feiler skriptet,
   vises alt innhold likevel. */
.reveal{opacity:1;transform:none}
.reveal.animate{opacity:0;transform:translateY(16px);transition:opacity 0.5s ease,transform 0.5s ease}
.reveal.animate.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:0.1s}
.reveal-d2{transition-delay:0.2s}
.reveal-d3{transition-delay:0.3s}
.reveal-d4{transition-delay:0.4s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal.animate{opacity:1!important;transform:none!important;transition:none!important}
  .cardgrid > li,.team-card,.skip-link{transition:none!important}
  .cardgrid > li:hover{transform:none!important}
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important}
}

/* --- MOBIL -------------------------------------------------------------- */
@media(max-width:860px){
  :root{--pad-x:20px}

  .hamburger{display:flex}
  .mobile-menu.open{display:flex}
  /* Hele toppmenyen skjules på mobil, CTA-en inkludert: handlingsstripa
     nederst dekker den, og to «Ta kontakt» samtidig er dobbelt opp.
     Lenkene finnes fortsatt i hamburgermenyen. */
  .nav-links a{display:none}

  .hero{padding:48px var(--pad-x)}
  h1{font-size:2.2rem}
  .hero--home h1{font-size:2.3rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{text-align:center}

  .section{padding:40px var(--pad-x)}

  /* Alle flerkolonners grids blir én kolonne, med vannrette skiller. */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .divided > * + *{border-left:none}
  .divided > *:not(:last-child){border-bottom:1px solid var(--line)}

  .valuestrip > li{padding:28px var(--pad-x)}
  .two-col > *{padding:40px var(--pad-x)}

  .team-grid{grid-template-columns:1fr}
  /* Samme venstremarg som teksten under, så bilde og navn står i flukt. */
  .team-photo{width:min(300px,78%);margin:28px auto 0}
  .team-body{padding:24px var(--pad-x)}

  .section-head{padding:40px var(--pad-x) 24px}
  .cardgrid > li{padding:28px var(--pad-x)}

  /* Stablede rollelister: én skillelinje mellom hver, ingen sidekanter. */
  .roles > *{padding:28px var(--pad-x);border:none}
  .roles > *:not(:last-child){border-bottom:1px solid var(--line)}

  .steps{gap:28px}
  .steps > li,.steps > li:first-child,.steps > li:last-child{padding:0;border-left:none}

  /* Var flex-row med space-between – for trangt på 390px. */
  .stats-head{padding:32px var(--pad-x) 24px;flex-direction:column;align-items:flex-start;gap:12px}
  .stats > *{padding:28px var(--pad-x)}

  .contact-left{padding:40px var(--pad-x);border-right:none}
  .contact-right{padding:40px var(--pad-x)}
  .crow{grid-template-columns:1fr}
  .cta-dark{padding:48px var(--pad-x)}
  /* På smal skjerm står teksten over hele bredden, så sidemasken hjelper
     ikke. Bildet fader inn nedenfra i stedet, og litt svakere. */
  .cta-photo{padding-top:56px;padding-bottom:72px}
  .cta-photo-bg{
    opacity:0.22;
    -webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 85%);
            mask-image:linear-gradient(to bottom,transparent 12%,#000 85%);
  }

  .prose{padding:48px var(--pad-x) 64px}
  .prose h1{font-size:2.4rem;line-height:1.15;margin-bottom:12px;max-width:none}

  .site-footer{padding:28px var(--pad-x);flex-direction:column;gap:14px;text-align:center}
  .footer-right{text-align:center}
  .footer-social{justify-content:center}
}

@media(max-width:480px){
  /* .hero--home h1 må gjentas: den er mer spesifikk (0,1,1) enn h1 (0,0,1),
     så en ren h1-regel her ville blitt overkjørt uansett rekkefølge. */
  h1{font-size:1.9rem}
  .hero--home h1{font-size:2.3rem}
}