/* Rosendal — delt stilark. Én kilde for palett, typografi og komponenter. */

/* ---------- Fonter (selvhostet: ingen IP til Google, raskere mobil) ---------- */
@font-face{font-family:"Bodoni Moda";src:url("fonter/bodoni-moda-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonter/bodoni-moda-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonter/montserrat-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonter/montserrat-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonter/montserrat-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --krem:#fbf5ed;              /* sidebakgrunn */
  --krem-dyp:#f4e7d8;          /* tjeneste-seksjon */
  --sand:#e7d6c0;              /* om-seksjon */
  --sand-dyp:#d9c3a6;          /* kantlinjer på sand */
  --kanel:#472b1d;             /* merkefarge, tekst og mørke flater */
  --kanel-dyp:#331d12;         /* footer og topplinje */
  --kanel-lys:#6b4630;
  --vinrod:#4a1417;            /* mørkt fullbreddebånd */
  --kobber:#8c4522;            /* aksent, lenker på lys flate */
  --gull:#c69654;              /* aksent på mørk flate */
  --gull-dyp:#8a6524;          /* gulltone som holder kontrast mot lys flate */
  --gull-lys:#e0bd8c;          /* samme gull, lysnet for smaa tekster paa mork foto-flate */
  --hvit:#fff;
  --tekst:#3a2418;             /* brødtekst på lys flate */
  --tekst-damp:#6f5545;
  --tekst-lys:#f6ece0;         /* tekst på mørk flate */
  --tekst-lys-damp:#d2bda9;
  --display:"Bodoni Moda",Didot,"Times New Roman",Georgia,serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --topplinje:38px;            /* den tynne mørke stripa øverst */
  --topp:82px;                 /* selve headeren */
  --luft:104px;                /* seksjonsluft */
  --radius:2px;
}

/* ---------- Grunn ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--tekst);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.8;
  overflow-x:hidden;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
/* <figure> arver 40px marg fra nettleseren. Uten denne blir hvert kort smalere enn cella si. */
figure{margin:0}
a{color:inherit}
/* Toppen er fast, så hvert ankermål må skyves under den (topplinje + header + luft). */
section[id],div[id],main[id]{scroll-margin-top:136px}

/* Norsk limer ord sammen («Personvernerklæring» er ett ord på 19 tegn). Uten brytepunkt
   stikker glyffene ut av blokka og gir horisontal scroll ingen element-rect avslører. */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.12;
  overflow-wrap:break-word;hyphens:auto;color:var(--kanel)}
h1{font-size:clamp(2.7rem,7vw,5.2rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.005em}
h3{font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.22}
h4{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.dempet{color:var(--tekst-damp)}
.finskrift{font-size:.84rem;line-height:1.7}

.cont{width:100%;max-width:1220px;margin:0 auto;padding:0 26px}
.cont-smal{width:100%;max-width:820px;margin:0 auto;padding:0 26px}
.seksjon{padding:var(--luft) 0}
.seksjon-tett{padding:calc(var(--luft) * .62) 0}
.midt{text-align:center}
/* Bredde-begrensning som klasse, aldri inline: en inline-stil vinner over alle mobilreglene. */
.begrens{max-width:660px;margin-left:auto;margin-right:auto}
.mt-s{margin-top:14px}
.mt-m{margin-top:24px}
.mt-l{margin-top:44px}

/* Overtekst: liten, i kobber, aldri versaler (KI-kjennetegn) */
.overtekst{font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.16em;
  color:var(--kobber);margin:0 0 14px}
/* Alle flatene som er mørke i kraft av EGEN bakgrunn må stå her ved siden av `.baand-mork`.
   Kobber mot nesten svart er 2,3 i kontrast, altså nesten usynlig, og skjermbildet
   avslører det ikke i miniatyr. */
.baand-mork .overtekst,.baand-vin .overtekst,footer .overtekst,
.hero .overtekst,.sidetopp .overtekst,.anmeldelser .overtekst{color:var(--gull)}

/* Tynn strek som skiller overskrift fra innhold, som i referansens redaksjonelle rytme */
.strek{width:56px;height:1px;background:var(--kobber);border:0;margin:22px 0}
.midt .strek{margin-left:auto;margin-right:auto}

/* ---------- Juridiske sider ---------- */
.juridisk h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:46px 0 14px}
.juridisk h2:first-child{margin-top:0}
.juridisk ul{padding-left:20px;margin:0 0 1.1em}
.juridisk li{margin-bottom:9px}

/* ---------- Knapper ---------- */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.09em;
  padding:15px 30px;border-radius:999px;border:1px solid var(--kanel);
  background:var(--kanel);color:var(--tekst-lys);text-decoration:none;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.knapp:hover{background:var(--kanel-lys);border-color:var(--kanel-lys);transform:translateY(-1px)}
.knapp:focus-visible{outline:2px solid var(--kobber);outline-offset:3px}
.knapp-linje{background:transparent;color:var(--kanel);border-color:var(--kanel)}
.knapp-linje:hover{background:var(--kanel);color:var(--tekst-lys)}
.knapp-lys{background:var(--hvit);color:var(--kanel);border-color:var(--hvit)}
.knapp-lys:hover{background:var(--krem-dyp);color:var(--kanel);border-color:var(--krem-dyp)}
/* Footeren er mørk uten å bære .baand-mork, så begge selektorene må stå her. */
.baand-mork .knapp-linje,footer .knapp-linje{color:var(--tekst-lys);border-color:var(--gull)}
.baand-mork .knapp-linje:hover,footer .knapp-linje:hover{background:var(--gull);color:var(--kanel-dyp);border-color:var(--gull)}

/* Tekstlenke med understrek som vokser fram */
.lenke{color:var(--kobber);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(140,69,34,.35);transition:border-color .25s ease,color .25s ease}
.lenke:hover{border-bottom-color:var(--kobber)}
.baand-mork .lenke,footer .lenke{color:var(--gull);border-bottom-color:rgba(198,150,84,.4)}
.baand-mork .lenke:hover,footer .lenke:hover{border-bottom-color:var(--gull)}

/* ---------- Topplinje + header ---------- */
.topplinje{background:var(--kanel-dyp);color:var(--tekst-lys);
  min-height:var(--topplinje);display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0 4px;font-size:.78rem;letter-spacing:.08em;padding:8px 18px;
  text-align:center;line-height:1.5}
.topplinje a{color:var(--gull);text-decoration:none;border-bottom:1px solid rgba(198,150,84,.45);white-space:nowrap}
.topplinje a:hover{border-bottom-color:var(--gull)}

header{position:sticky;top:0;z-index:60;background:var(--krem);
  border-bottom:1px solid rgba(71,43,29,.14)}
.header-rad{display:flex;align-items:center;gap:24px;height:var(--topp)}
.merke{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex:none}
.merke b{font-family:var(--display);font-weight:400;font-size:1.62rem;color:var(--kanel);letter-spacing:.02em}
.merke span{font-size:.62rem;letter-spacing:.34em;color:var(--kobber);margin-top:5px}
nav{margin-left:auto}
nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--kanel);
  padding:6px 0;border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease}
nav a:hover{border-bottom-color:var(--kobber);color:var(--kobber)}
nav a[aria-current="page"]{border-bottom-color:var(--kanel)}
.header-cta{display:flex;align-items:center;gap:12px;flex:none}
.header-cta .knapp{padding:12px 24px;font-size:.8rem}
/* CTA-en som bor i mobilmenyens <ul> skal ikke stå dobbelt i desktop-toppen. */
nav .mobil-cta{display:none}
#menyknapp,.hamburger{display:none}
/* UU (WCAG 2.1.1): på mobil bryter etiketten menyen for musa, men `display:none` tar
   avkrysningsboksen ut av tabrekkefølgen, og da er menyen umulig å åpne med tastatur. Boksen gjøres
   nåbar der hamburgeren finnes, og BARE der: på PC står menyen åpen, og en fokuserbar boks der ville
   bare vært et usynlig tabstopp. Utseendet er uendret, fokusringen vises på hamburgeren. */
@media (max-width:900px){
  #menyknapp{display:block;position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
    margin:0;padding:0;border:0}
  #menyknapp:focus-visible ~ .header-rad .hamburger{outline:2px solid var(--kanel);outline-offset:6px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;background:var(--kanel-dyp)}
.hero-bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,19,11,.62) 0%,rgba(35,19,11,.44) 45%,rgba(35,19,11,.72) 100%)}
/* Overlegget males oppå vanlige barn i flyten, så alle direkte barn må heves. MEN:
   `.hero > *` har samme spesifisitet som `.hero-bilde` og står etter den, så uten
   :not() overstyrer den `position:absolute` og bakgrunnsbildet faller ned i flyten.
   Da kollapser hele heroen, og `overflow-x:hidden` på body skjuler beviset. */
.hero > *:not(.hero-bilde){position:relative;z-index:2}
.hero-innhold{width:100%;max-width:820px;padding:120px 26px}
.hero h1{color:var(--hvit);text-shadow:0 2px 30px rgba(20,10,5,.35)}
.hero p{color:var(--tekst-lys);font-size:1.02rem;letter-spacing:.03em;margin-top:18px}
.monogram{width:78px;height:78px;margin:0 auto 26px;border:1px solid rgba(246,236,224,.55);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.9rem;color:var(--tekst-lys)}
.hero .knapp{margin-top:32px}

/* Mindre sidetopp for undersidene */
.sidetopp{position:relative;overflow:hidden;background:var(--kanel-dyp);text-align:center}
.sidetopp-bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* .6 slapp gjennom de lyse partiene i ventesone-bildet, og ingressen laa paa 2,93:1. */
.sidetopp::after{content:"";position:absolute;inset:0;background:rgba(35,19,11,.76)}
.sidetopp > *:not(.sidetopp-bilde){position:relative;z-index:2}
.sidetopp-innhold{padding:96px 26px}
.sidetopp h1{color:var(--hvit);font-size:clamp(2.2rem,5.4vw,3.9rem)}
.sidetopp p{color:var(--tekst-lys-damp);max-width:620px;margin:16px auto 0}

/* ---------- Flater ---------- */
.flate-krem{background:var(--krem)}
.flate-krem-dyp{background:var(--krem-dyp)}
.flate-sand{background:var(--sand)}
.baand-mork{background:var(--kanel);color:var(--tekst-lys)}
.baand-vin{background:var(--vinrod);color:var(--tekst-lys)}
.baand-mork h1,.baand-mork h2,.baand-mork h3,.baand-vin h1,.baand-vin h2,.baand-vin h3{color:var(--tekst-lys)}
.baand-mork .strek,.baand-vin .strek,.anmeldelser .strek,.sidetopp .strek,footer .strek{background:var(--gull)}
.baand-mork .dempet,.baand-vin .dempet,.anmeldelser .dempet,.sidetopp .dempet{color:var(--tekst-lys-damp)}

/* ---------- Tjenestekort (bilde over, etikett med pil under) ---------- */
.kortgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kortgrid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.tjenestekort{display:block;text-decoration:none;color:inherit;background:transparent}
.tjenestekort .ramme{overflow:hidden;background:var(--sand)}
.tjenestekort img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.tjenestekort:hover img{transform:scale(1.045)}
.tjenestekort .etikett{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 2px 0;border-top:1px solid rgba(71,43,29,.22);margin-top:16px}
.tjenestekort .etikett h3{font-size:1.22rem}
.tjenestekort .pil{font-size:1.1rem;color:var(--kobber);transition:transform .3s ease}
.tjenestekort:hover .pil{transform:translateX(5px)}
.tjenestekort p{font-size:.92rem;color:var(--tekst-damp);margin-top:10px}

/* ---------- To spalter (tekst + bilde) ---------- */
.spalter{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.spalter-tekst-hoyre{grid-template-columns:1fr 1fr}
/* Tre portretter i høyre spalte blir for smale i en 50/50-deling. */
.spalter-portretter{grid-template-columns:.85fr 1.6fr;gap:52px}
/* Skjema mot en høy infokolonne: sentrering gir et stort tomrom over skjemaet. */
.spalter-topp{align-items:start}
.spalter img{width:100%;object-fit:cover}
.bilderamme{overflow:hidden;background:var(--sand)}
.bilderamme img{aspect-ratio:3/2}
.bilderamme-hoy img{aspect-ratio:4/5}

/* ---------- Anmeldelser ---------- */
/* Egen mørk bunnfarge, ikke bare overlegget: laster ikke fotoet, skal teksten fortsatt
   stå lesbart, og en kontrastmåler som leser backgroundColor skal se den ekte bunnen. */
.anmeldelser{position:relative;overflow:hidden;background:var(--kanel-dyp)}
.anmeldelser-bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* .7 slapp gjennom de lyse partiene i bildet, og gull-navnet i sitatkortet laa paa 2,93:1. */
.anmeldelser::after{content:"";position:absolute;inset:0;background:rgba(45,24,14,.84)}
.anmeldelser > *:not(.anmeldelser-bilde){position:relative;z-index:2}
.anmeldelser h2{color:var(--tekst-lys)}
.sitatkort{background:rgba(251,245,237,.07);border:1px solid rgba(198,150,84,.3);
  padding:32px 28px;backdrop-filter:blur(2px)}
.sitatkort p{color:var(--tekst-lys);font-family:var(--display);font-size:1.08rem;line-height:1.6}
.sitatkort .navn{font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;
  /* Gull paa glassflata over anmeldelsesbildet: --gull holder ikke der, --gull-lys gjor det.
     Samme monster som aftenhaugs --gull / --gull-paa-lys, bare motsatt vei. */
  color:var(--gull-lys);margin-top:18px}
.stjerner{color:var(--gull);letter-spacing:.22em;font-size:.9rem;margin-bottom:14px}

/* ---------- Teamkort ---------- */
.teamkort{position:relative;overflow:hidden;display:block}
.teamkort img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.teamkort:hover img{transform:scale(1.04)}
.teamkort figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  /* Navnet staar oeverst i figcaption, der gradienten var gjennomsiktig. Mork fra 22 prosent. */
  background:linear-gradient(180deg,rgba(35,19,11,0) 0%,rgba(35,19,11,.78) 22%,rgba(35,19,11,.92) 70%);
  color:var(--tekst-lys)}
.teamkort figcaption b{font-family:var(--display);font-weight:400;font-size:1.2rem;display:block}
.teamkort figcaption span{font-size:.76rem;letter-spacing:.12em;color:var(--tekst-lys-damp)}

/* ---------- 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}
/* Mellomrom bæres av HVERT element, aldri av gap på gruppa: gap gir ikke mellomrom
   etter siste element, så skjøten mellom gruppe 1 og 2 blir smalere enn resten. */
.rulle-gruppe > *{flex:none;margin-right:16px}
.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}
}
.rulle-flis{width:270px}
.rulle-flis img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ---------- Faktabokser / åpningstider ---------- */
.infokort{background:var(--krem);border:1px solid rgba(71,43,29,.16);padding:30px 28px}
.baand-mork .infokort,footer .infokort{background:rgba(251,245,237,.06);border-color:rgba(198,150,84,.28)}
.tidsrad{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid rgba(71,43,29,.12);font-size:.94rem}
.tidsrad:last-child{border-bottom:0}
.baand-mork .tidsrad,footer .tidsrad{border-bottom-color:rgba(198,150,84,.2)}
.tidsrad span:last-child{color:var(--tekst-damp)}
.baand-mork .tidsrad span:last-child,footer .tidsrad span:last-child{color:var(--tekst-lys-damp)}

/* Prisliste */
.prisrad{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:14px 0;border-bottom:1px solid rgba(71,43,29,.14)}
.prisrad:last-child{border-bottom:0}
.prisrad b{font-weight:500;font-size:.98rem}
.prisrad span{font-family:var(--display);font-size:1.08rem;color:var(--kobber);white-space:nowrap}

/* Pille (liten merkelapp) */
.pille{display:inline-block;font-size:.76rem;letter-spacing:.1em;padding:6px 14px;
  border-radius:999px;border:1px solid rgba(71,43,29,.28);color:var(--kanel);background:transparent}
.baand-mork .pille,.baand-vin .pille,footer .pille{border-color:rgba(198,150,84,.45);color:var(--gull)}

/* ---------- Skjema ---------- */
.skjema{display:grid;gap:18px}
.felt{display:flex;flex-direction:column;gap:8px}
.felt label{font-size:.82rem;letter-spacing:.08em;color:var(--tekst-damp);font-weight:500}
.felt input,.felt select,.felt textarea{font-family:var(--sans);font-size:.98rem;color:var(--tekst);
  background:var(--hvit);border:1px solid rgba(71,43,29,.22);border-radius:var(--radius);
  padding:14px 15px;width:100%;transition:border-color .25s ease,box-shadow .25s ease}
.felt textarea{min-height:132px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:0;border-color:var(--kobber);
  box-shadow:0 0 0 3px rgba(140,69,34,.13)}
.felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.skjema-feil{color:#8f2020;font-size:.88rem;margin:0}
.takk{background:var(--krem-dyp);border:1px solid rgba(140,69,34,.3);padding:34px 30px;text-align:center}
.takk h3{margin-bottom:10px}
.skjult{display:none !important}

/* ---------- Footer ---------- */
footer{background:var(--kanel-dyp);color:var(--tekst-lys-damp);padding:78px 0 0;position:relative;overflow:hidden}
footer h3 {font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em;line-height:1.12;color:var(--tekst-lys);margin-bottom:16px;font-size:.84rem;letter-spacing:.14em;font-weight:600}
.footer-rutenett{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;position:relative;z-index:2}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:11px;font-size:.92rem}
footer a{text-decoration:none;color:var(--tekst-lys-damp);transition:color .25s ease}
footer a:hover{color:var(--gull)}
footer .merke b{color:var(--tekst-lys)}
footer .merke span{color:var(--gull)}
.footer-bunn{margin-top:64px;padding:24px 0 30px;border-top:1px solid rgba(198,150,84,.22);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  font-size:.84rem;position:relative;z-index:2}
.spokelse{position:absolute;right:-14px;bottom:-34px;font-family:var(--display);
  font-size:clamp(5rem,13vw,11rem);color:rgba(246,236,224,.05);line-height:.85;
  letter-spacing:.02em;pointer-events:none;z-index:1;user-select:none}

/* ---------- Mobil ---------- */
@media (max-width:960px){
  :root{--luft:76px}
  .spalter,.spalter-tekst-hoyre,.spalter-portretter{grid-template-columns:1fr;gap:36px}
  .kortgrid-3{grid-template-columns:repeat(2,1fr);gap:20px}
  .footer-rutenett{grid-template-columns:1fr 1fr;gap:34px}
  /* Bildet skal alltid stå under teksten på smal skjerm, uansett rekkefølge i HTML-en. */
  .spalter .bilde-forst{order:2}
}

/* Toppen må kollapse FØR resten: merke + fire menypunkt + to knapper er bredere enn
   768 px, og desktop-toppen ga 799 px vannrett scroll på nettbrett. */
@media (max-width:900px){
  .header-rad{height:70px;gap:14px}
  .header-cta{display:none}
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:44px;height:44px;cursor:pointer;align-items:flex-end}
  .hamburger span{display:block;width:26px;height:1.5px;background:var(--kanel);
    transition:transform .3s ease,opacity .3s ease}
  #menyknapp:checked ~ .header-rad .hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  #menyknapp:checked ~ .header-rad .hamburger span:nth-child(2){opacity:0}
  #menyknapp:checked ~ .header-rad .hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  /* Ingen kantlinje på den LUKKEDE menyen: en 1px-kant gir nav en høyde over null,
     og da er «menyen er lukket» ikke lenger målbart på nav-høyden. */
  nav{position:absolute;left:0;right:0;top:100%;background:var(--krem);
    border-bottom:0;max-height:0;overflow:hidden;
    transition:max-height .35s ease;margin-left:0}
  #menyknapp:checked ~ .header-rad nav{max-height:76vh;overflow-y:auto;
    border-bottom:1px solid rgba(71,43,29,.14)}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 26px 26px}
  nav li{border-bottom:1px solid rgba(71,43,29,.1)}
  nav li:last-child{border-bottom:0}
  nav a{display:block;padding:16px 0;font-size:1rem}
  nav .mobil-cta{display:block;padding-top:20px}
  nav .mobil-cta .knapp{width:100%}
}

@media (max-width:760px){
  :root{--luft:68px}
  .kortgrid-3,.kortgrid-2{grid-template-columns:1fr;gap:26px}
  /* Tjenestekortene i én spalte er riktig uttrykk, men seks 4:3-bilder med brødtekst
     la 900 px på forsiden. Som i referansen viser mobilen bilde og etikett, ikke
     beskrivelsen. */
  .tjenestekort img{aspect-ratio:16/9}
  .tjenestekort p{display:none}
  .tjenestekort .etikett{padding-top:13px;margin-top:13px}
  /* Portrettene skal ikke stables i full bredde, det ville lagt tre skjermhøyder til forsiden.
     Høyere spesifisitet enn regelen over, ellers vinner den. */
  .kortgrid-3.tett-mobil{grid-template-columns:repeat(2,1fr);gap:14px}
  .felt-rad{grid-template-columns:1fr}
  .hero{min-height:min(78vh,640px)}
  .hero-innhold{padding:96px 22px}
  .sidetopp-innhold{padding:70px 22px}
  /* To spalter, med merkeblokka over begge: fire stablede blokker ble 1130 px footer. */
  .footer-rutenett{grid-template-columns:1fr 1fr;gap:30px 24px}
  .footer-rutenett > div:first-child{grid-column:1 / -1}
  .footer-bunn{margin-top:44px}
  .rulle-flis{width:200px}
  .sitatkort{padding:26px 22px}
}

@media (max-width:420px){
  .cont,.cont-smal{padding:0 18px}
  .merke b{font-size:1.42rem}
  .knapp{padding:14px 24px;font-size:.82rem}
}

/* UU (WCAG 1.3.1): nivået er semantikk, størrelsen er CSS. Disse overskriftene fikk
   riktig nivå i disposisjonen og beholder utseendet sitt her. Sesjon 17b. */
.som-h4{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em;line-height:1.12}