/* Holmestrand Internasjonale Montessoriskole, bygget 2026-09-18
   Fargene og skriftene kommer fra kunde.toml. Ikke rediger denne fila:
   den skrives over ved neste bygging. */

:root{
  --blekk:#16303D;
  --dempet:#5A727E;
  --flate:#FFFFFF;
  --papir:#F1F5F7;
  --linje:#DCE5EA;
  --aksent:#1F6F8B;
  --aksentflate:#E3F0F5;
  --vis:"Newsreader",Georgia,"Times New Roman",serif;
  --brod:"Public Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --signatur:#143C52;
  --bredde:1080px;
  /* ⭐ Skalaen, 14.09.2026. Fem stoerrelser under overskriftene, ikke ni.
     Foer sto det 13, 13.5, 14, 14.5, 15, 15.5 om hverandre, og ingen av
     dem var en beslutning. Naa er «liten» 15 og «mini» 13.5, og alt som
     er mindre enn broedtekst velger én av dem. */
  --t-mini:13.5px;
  --t-liten:15px;
  --t-brod:17px;
  --t-ingress:19px;
  --t-h3:calc(20px * 1.06);
  /* antikvaene ser mindre ut ved samme piksel; overskriftene skaleres. */
  --vis-faktor:1.06;
  /* Ett hjoernesystem: 10 px paa bilder og knapper, 14 paa det ene store
     bildet i den delte heroen. Ikke en tredje verdi. */
  --r:10px;
  --r-stor:14px;
  /* Én kurve og én varighet for alt som svarer paa musa. Den innebygde
     «ease» er for slapp til aa kjennes som et svar. */
  --ut:cubic-bezier(.23,1,.32,1);
  --fart:160ms;
}

*{box-sizing:border-box}
/* ⚠️ scroll-padding-top MAA staa her saa lenge .topp er sticky. Uten den
   lander overskriften bak topplinja hver gang noen bruker menyen. Paa
   telefon kan sidemenyen gi topplinja en linje til, derfor mer der. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (max-width:720px){html{scroll-padding-top:100px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--flate);
  color:var(--blekk);
  font:var(--t-brod)/1.6 var(--brod);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--aksentflate);color:var(--blekk)}

.inn{max-width:var(--bredde);margin:0 auto;padding:0 22px}

/* ⚠️ «smal» begrenser LESEBREDDEN, ikke spalten.
   Her sto det en gang max-width:660px paa selve .inn.smal. Da sentrerte de
   smale seksjonene seg selv mens de brede holdt seg til 1080-kolonnen, og de
   to delte ikke venstrekant: paa en 1400 px skjerm startet «Om gaarden» 210 px
   lenger inn enn helteksten rett over. Det ser ut som en feil, og det er det.
   Naa er spalten den samme overalt, og bare innholdet kappes. */
.inn.smal{max-width:var(--bredde)}
.inn.smal > *{max-width:660px}
/* Handlingsfeltet er det ene som SKAL staa midt paa. */
.handling .inn.smal > *{margin-left:auto;margin-right:auto}

/* ⭐ Sidehode paa bred skjerm, 14.09.2026. Tekst, tider og kontakt er
   lesebredde, altsaa 660 px, og paa 1440 sto de tre med 40 % tom flate til
   hoeyre mens lista og galleriet over og under fylte hele spalten. Naa
   staar overskriften i en egen kolonne til venstre og innholdet til hoeyre,
   slik en brosjyre settes. Venstrekanten er fortsatt felles: alle
   overskrifter begynner paa samme linje. Under 900 px stables det som foer. */
@media (min-width:900px){
  .blokk .inn.smal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    column-gap:56px;align-items:start}
  .blokk .inn.smal > h2,.blokk .inn.smal > h1{grid-column:1;margin-bottom:0}
  .blokk .inn.smal > :not(h2):not(h1){grid-column:2}
}

/* ⭐ Hierarkiet ligger i stoerrelse OG vekt OG skriftfamilie: overskriftene
   i visningsskriften, alt annet i broedskriften. Trinnene er minst 1,3
   fra hverandre (17, 20, 27 til 36, 34 til 56), saa ingen to nivaaer
   ligner. */
h1,h2,h3{font-family:var(--vis);font-weight:600;letter-spacing:-.015em;
  text-wrap:balance;margin:0}
h1{font-size:clamp(calc(34px * var(--vis-faktor)),calc(5.4vw * var(--vis-faktor)),calc(56px * var(--vis-faktor)));line-height:1.06;margin-bottom:18px}
h2{font-size:clamp(calc(27px * var(--vis-faktor)),calc(3.2vw * var(--vis-faktor)),calc(36px * var(--vis-faktor)));line-height:1.14;margin-bottom:24px}
/* Sider uten hero (personvern, undersider) faar sin foerste overskrift
   som h1, for maskinens skyld. Den skal SE ut som en h2. */
.blokk h1{font-size:clamp(calc(27px * var(--vis-faktor)),calc(3.2vw * var(--vis-faktor)),calc(36px * var(--vis-faktor)));line-height:1.14;margin-bottom:24px}
h3{font-size:var(--t-h3);line-height:1.25}
p{margin:0 0 16px;max-width:62ch;text-wrap:pretty}
a{color:inherit}

/* ── hopp til innholdet ──────────────────────────────────────────── */
/* Usynlig til noen bruker tastaturet, saa den foerste tabben ikke maa
   gjennom hele menyen. Ingen overgang: tastaturet skal svare med én gang. */
.hopp{position:absolute;left:16px;top:-120px;z-index:30;
  background:var(--blekk);color:var(--flate);font-weight:600;
  padding:12px 16px;border-radius:var(--r);text-decoration:none}
.hopp:focus{top:12px}

/* ── topp ────────────────────────────────────────────────────────── */
.topp{position:sticky;top:0;z-index:20;background:var(--flate);
  border-bottom:1px solid var(--linje)}
.baand{max-width:var(--bredde);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:24px}
.merke{font:600 20px var(--vis);text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.merke img{max-height:64px;width:auto}
/* ⚠️ Menyen kan brekke naar titlene er lange (personvernsiden har fem, og
   ingen «meny»-kortform). Da skal linje to ligge til hoeyre, inntil
   knappen, ikke henge igjen til venstre under linje én. */
.meny{display:flex;gap:0 20px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
/* ⭐ 44 px hoeye lenker, ogsaa i menyen: det er en tommel paa en telefon.
   Understreken ligger der hele tiden, gjennomsiktig, og faar farge naar
   musa kommer. Da hopper ingenting. */
.meny a{font-size:var(--t-liten);font-weight:500;color:var(--dempet);
  padding:10px 0;line-height:24px;
  text-decoration-line:underline;text-decoration-color:transparent;
  text-decoration-thickness:1.5px;text-underline-offset:6px}
.meny a:hover{color:var(--blekk);text-decoration-color:var(--aksent)}
/* ⭐ Hvilken side du staar paa. Uten dette ser alle fanene like ut, og en
 * meny som ikke sier hvor du er, er halvparten av en meny. */
.meny a.aktiv{color:var(--blekk);font-weight:600;text-decoration-color:var(--aksent)}
.topp .knapp{margin-left:auto}
.meny ~ .knapp{margin-left:0}
/* Menyknappen finnes bare paa telefon, og bare med JavaScript. */
.menyknapp{display:none;font:600 var(--t-liten)/22px var(--brod);color:var(--blekk);background:var(--papir);
  border:1px solid var(--linje);border-radius:var(--r);padding:10px 16px;min-height:44px;cursor:pointer}
.menyknapp:hover{border-color:var(--aksent)}
/* Paa telefon er ANKERMENYEN stoey. Nummeret er det folk skal ha.
 * ⛔️ MEN SIDEMENYEN MAA STAA. Skjulte vi den ogsaa, fantes det ingen vei
 *    til de andre sidene fra en telefon i det hele tatt, og de fleste
 *    kundene til kundene vaare er paa telefon. Regelen var skrevet den
 *    gangen et nettsted alltid var én side. */
@media (max-width:720px){
  .meny:not(.sider){display:none}
  /* ⚠️ `flex-wrap` MAA settes her. Uten den blir `width:100%` bare til at
   *    menyen krymper og legger seg oppetter hoeyre kant ved siden av
   *    knappen, i stedet for aa faa en egen linje. Sett i nettleseren. */
  .baand{flex-wrap:wrap;row-gap:0;padding:10px 18px;gap:16px}
  /* ⭐ Logoen mindre paa telefon, saa den og ringeknappen deler linje.
     Eier, 18.09.2026: «Om du gjør logoen litt mindre så blir ikke
     layouten på øverste rad ødelagt på mobil.» */
  .merke img{max-height:45px;max-width:min(58vw,220px)}
  .topp .knapp{order:2}
  .meny.sider{order:3;width:100%;margin-left:0;gap:0 20px;
    padding-top:4px;border-top:1px solid var(--linje);margin-top:8px}
  .meny.sider a{font-size:var(--t-liten)}
  .topp .knapp{margin-left:auto}
  /* ⭐ Med JavaScript: «Meny» til hoeyre, ringeknappen inni menyen.
     Eier, 18.09.2026: «Meny isteden for tlf nr på høyre side». */
  .topp.js .menyknapp{display:inline-flex;align-items:center;margin-left:auto;order:2}
  .topp.js .knapp.ring{display:none}
  .topp.js .meny{display:none}
  .topp.js.aapen .meny{display:flex;flex-direction:column;order:4;width:100%;margin:8px 0 0;gap:0;
    padding-top:6px;border-top:1px solid var(--linje)}
  .topp.js.aapen .meny a{padding:11px 0;font-size:var(--t-brod);border-bottom:1px solid var(--linje)}
  .topp.js.aapen .meny a:last-child{border-bottom:0}
  .topp.js.aapen .knapp.ring{display:inline-flex;order:5;width:100%;margin:10px 0 6px}
}

/* ── knapper ─────────────────────────────────────────────────────── */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--aksent);color:var(--flate);
  font:600 var(--t-liten)/22px var(--brod);text-decoration:none;
  padding:11px 20px;border-radius:var(--r);white-space:nowrap;
  /* 44 px er ikke pynt, det er en tommel paa en telefon. */
  min-height:44px;
}
.knapp,.meny a,.bunn a,.kontakt li a,.nytt-blokk h3 a,.nytt-stripe a{
  transition:color var(--fart) ease,background-color var(--fart) ease,
  box-shadow var(--fart) ease,text-decoration-color var(--fart) ease,
  filter var(--fart) ease,transform 120ms var(--ut)}
/* ⭐ Hover gaar MOT blekk, ikke mot lysere: da blir knappen moerkere paa
   de lyse settene og lysere paa «natt», og kontrasten mot teksten oeker
   begge steder. Nettlesere uten color-mix faar en lysning i stedet. */
.knapp:hover{filter:brightness(1.08)}
@supports (background:color-mix(in oklab,#000 50%,#fff)){
  .knapp:hover{filter:none;background:color-mix(in oklab,var(--aksent) 86%,var(--blekk))}
}
/* Trykket: knappen gir etter. Det er svaret paa at den hoerte deg. */
.knapp:active{transform:scale(.98)}
.knapp.mild{background:transparent;color:var(--blekk);
  box-shadow:inset 0 0 0 1.5px var(--linje)}
/* ⚠️ Ringen paa den milde knappen gaar via blekk, ikke linje: i «natt» er
   linja 1,4:1 mot flaten, og da saa knappen ut som loes tekst. Maalt
   14.09.2026 i handlingsfeltet. */
@supports (color:color-mix(in oklab,#000 50%,#fff)){
  .knapp.mild{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--blekk) 30%,transparent)}
  .knapp.mild:hover{background:color-mix(in oklab,var(--aksent) 10%,transparent)}
}
.knapp.mild:hover{filter:none;box-shadow:inset 0 0 0 1.5px var(--aksent)}
.knapper{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── hero ────────────────────────────────────────────────────────── */
/* ⚠️ Ikke 100vh. Da skyves selve sida ut av det foerste bildet folk ser. */
.hero{padding:96px 0 84px;background:var(--papir)}
/* Den ene «eyebrow»-linja paa hele sida. Én er stemme, én per seksjon er
   maskinskrift. */
.hero .over{font:600 13px/1.4 var(--brod);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aksent);margin:0 0 14px}
.hero .ingress{font-size:20px;line-height:1.55;color:var(--dempet);max-width:52ch;margin-bottom:0}
.hero.med-bilde{background-size:cover;background-position:center;
  color:#fff;padding:96px 0 88px;
  /* ⭐ Bildet er poenget. Et ekte bilde av stedet skal faa plass, ikke bare
     kikke fram bak teksten. Klemt mellom 440 og 640 px saa det aldri blir
     en hel skjerm (da skyves sida ut av synet) og aldri en tynn stripe. */
  display:flex;align-items:center;min-height:clamp(440px,58vh,640px)}
.hero.med-bilde .inn{width:100%}
.hero.med-bilde .ingress{color:rgba(255,255,255,.92)}
.hero.med-bilde .over{color:rgba(255,255,255,.9)}
/* ⚠️ Skyggen er ikke pynt: den holder teksten lesbar der bildet er lyst,
   selv etter overlegget. Lett nok til aa ikke synes som skygge. */
.hero.med-bilde h1,.hero.med-bilde .ingress,.hero.med-bilde .over{
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero.med-bilde .knapp.mild{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65)}
/* Paa et moerkt bilde er aksentfargen paa hover for svak. Hvit flate i stedet. */
.hero.med-bilde .knapp.mild:hover{color:#fff;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px #fff}
/* ⭐ Delt hero: tekst til venstre, bildet staaende til hoeyre. Ingen overlegg,
   ingen skygge; bildet faar vaere et bilde. 5:6 er telefonens hoeydeformat
   uten aa bli et taarn. Under 720 px legger bildet seg under teksten. */
.hero.delt{padding:80px 0 72px}
.hero.delt .inn.todelt{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);
  gap:56px;align-items:center}
.hero.delt .herobilde{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--r-stor);
  background:var(--linje)}
@media (max-width:720px){
  .hero{padding:56px 0 56px}
  .hero .ingress{font-size:18px}
  .hero.med-bilde{padding:72px 0 64px}
  .hero.delt{padding:44px 0 48px}
  .hero.delt .inn.todelt{grid-template-columns:1fr;gap:28px}
  .hero.delt .herobilde{aspect-ratio:4/3}
}

/* ── blokker ─────────────────────────────────────────────────────── */
/* ⭐ Ingen strek mellom seksjonene lenger. Fargen veksler (flate, papir,
   flate), og det ER skillet; en strek oppaa et fargeskifte er to skiller
   for én overgang. */
.blokk{padding:88px 0}
@media (max-width:720px){.blokk{padding:56px 0}}
/* ⚠️ «tonet» = --papir, ikke --flate. Klassen het en gang «flate» mens den
   satte papir-fargen, og da ble vekslingen satt i gang paa feil farge. */
.blokk.tonet{background:var(--papir)}
.blokk .ingress{font-size:var(--t-ingress);line-height:1.55;color:var(--dempet);
  margin:-6px 0 32px;max-width:56ch}
.fotnote{font-size:var(--t-liten);color:var(--dempet);margin:24px 0 0}
/* ⚠️ Her sto det en inntoning paa alle lazy-bilder. Den startet ved
   sidelast, ikke naar bildet kom, saa bildene langt nede spratt fram
   likevel, og i skjermbilder ble de fanget halvveis og saa bleke ut.
   Borte. Bildene har bakgrunnsfarge og fast format, saa de hopper ikke. */

/* ── rader: priser, tjenester ────────────────────────────────────── */
.rader{list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  /* To kolonner paa 1080, ikke tre. Tre gjorde prislista til et rutenett
     man leter i; to leses som en liste. */
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  column-gap:48px}
.rader li{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:16px 0;border-bottom:1px solid var(--linje)}
.rader .navn{font-weight:600}
.rader .navn small{display:block;font-weight:400;font-size:var(--t-liten);
  color:var(--dempet);margin-top:2px}
.rader .verdi{font-weight:600;color:var(--aksent);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── utvalg: to til fire kort ────────────────────────────────────── */
/* ⚠️ Kortene har bilde, det er hele forskjellen fra lista. Tre like hvite
   bokser med tekst i er det kjedeligste som finnes; med et ekte bilde
   oeverst er det en meny.
   ⭐ Uten ramme og bakgrunn fra 14.09.2026: bilde, tittel, én setning,
   rett paa flaten. Rammen gjorde det til «tre like kort», som er det
   foerste alle kjenner igjen som maskinlaget. Bildet gjoer jobben alene. */
.utvalg{display:grid;gap:36px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.utvalg.kort-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.utvalg.kort-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.utvalg .kort{display:block;color:inherit;text-decoration:none;min-width:0}
.bilde{overflow:hidden;border-radius:var(--r);background:var(--papir)}
.utvalg .bilde img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform 320ms var(--ut)}
.utvalg .kort h3{margin:16px 0 6px;transition:color var(--fart) ease}
.utvalg .kort p{font-size:var(--t-liten);color:var(--dempet);margin:0;max-width:none}
.utvalg .kort .verdi{display:block;margin:8px 0 0;font-weight:600;color:var(--aksent);
  font-variant-numeric:tabular-nums}
@media (max-width:900px){.utvalg.kort-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.utvalg,.utvalg.kort-3,.utvalg.kort-4{grid-template-columns:1fr;gap:32px}}

/* ── nytt: blokk eller stripe ────────────────────────────────────── */
/* Blokk: butikken som vil vise det nye stort. Samme form som utvalg,
   med dato oeverst i innholdet. Stripe: tre linjer, dato til venstre. */
.nytt-blokk{display:grid;gap:36px 24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.nytt-blokk .innlegg{min-width:0}
.nytt-blokk .bilde img{aspect-ratio:3/2;object-fit:cover;width:100%;
  transition:transform 320ms var(--ut)}
.nytt-blokk .innhold{padding:14px 0 0}
.nytt-blokk time,.nytt-stripe time{font-size:var(--t-mini);color:var(--dempet);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nytt-blokk h3{margin:6px 0 8px}
.nytt-blokk p{font-size:var(--t-liten);color:var(--dempet);margin:0;max-width:none}
.nytt-blokk h3 a,.nytt-stripe a{color:inherit;text-decoration-line:underline;
  text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1.5px}
.nytt-blokk h3 a:hover,.nytt-stripe a:hover{color:var(--aksent);text-decoration-color:var(--aksent)}
@media (max-width:900px){.nytt-blokk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.nytt-blokk{grid-template-columns:1fr;gap:32px}}
.nytt-stripe{list-style:none;margin:0;padding:0}
.nytt-stripe li{display:grid;grid-template-columns:11rem 1fr;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--linje);align-items:baseline}
.nytt-stripe strong{display:block}
.nytt-stripe .liten{display:block;font-size:var(--t-liten);color:var(--dempet);margin-top:2px}
@media (max-width:720px){.nytt-stripe li{grid-template-columns:1fr;gap:2px}}

/* ── aapningstider ───────────────────────────────────────────────── */
.tider{list-style:none;margin:0;padding:0}
.tider li{display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linje);
  font-variant-numeric:tabular-nums}
.tider li span:first-child{font-weight:600}
/* ⭐ Klokkeslettet er det folk kom for. Det staar i blekk, ikke dempet:
   dempet paa papir er 4,6:1 i «sjo», og det er tallet som skal leses. */
.tider li span:last-child{color:var(--blekk);white-space:nowrap}
/* Avvikende tider skal SES. Det er de folk kjoerer forgjeves paa.
   ⭐ Vanlig skrift i aksent, ikke versaler med sperring: den ene
   «eyebrow»-linja paa sida er heroens. */
.avvikstittel{font:600 var(--t-liten)/1.4 var(--brod);color:var(--aksent);
  margin:28px 0 4px}
.tider.avvik li{border-bottom-style:dashed}

/* ── standinn-figurer (17.09.2026) ──────────────────────────────────
   Tegnede figurer der et bilde mangler, i sidens egne farger. Klassene
   under er de figurene bruker (generator/standinn.py). Merket «bilde
   kommer» staar nede i hoeyre hjoerne, saa ingen tror det er ferdig. */
.si-aksent{fill:var(--aksent)}.si-blekk{fill:var(--blekk)}.si-flate{fill:var(--flate)}
.si-lys{fill:var(--aksentflate)}.si-papir{fill:var(--papir)}.si-dempet{fill:var(--dempet)}
.si-hud{fill:#E9B89A}.si-metall{fill:#B9C2C8}.si-hvit{fill:#fff}
.si-strek{fill:none;stroke:var(--blekk);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.standinn{position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--aksentflate);border-radius:var(--r);overflow:hidden}
.standinn .standinn-svg{width:100%;height:100%;display:block}
.standinn-merke{position:absolute;right:10px;bottom:8px;font:500 11px/1 var(--brod);
  letter-spacing:.06em;text-transform:uppercase;color:var(--dempet);
  background:rgba(255,255,255,.7);padding:4px 7px;border-radius:6px}
.hero.delt .herobilde.standinn{aspect-ratio:5/6;border-radius:var(--r-stor)}
.utvalg .bilde.standinn{aspect-ratio:4/3;margin:0}
.galleri .galleri-standinn{aspect-ratio:1/1;width:100%}
@media (max-width:720px){.hero.delt .herobilde.standinn{aspect-ratio:4/3}}

/* ── lysboksen (18.09.2026) ────────────────────────────────────────────
   Klikk paa et bilde i galleriet, kortene eller innleggene aapner det stort,
   med zoom. Knappen rundt bildet ser ut som bildet selv. */
.lysboks-aapne{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;
  font:inherit;color:inherit;text-align:inherit;border-radius:var(--r)}
.lysboks-aapne img{display:block}
.lysboks-aapne:focus-visible{outline:3px solid var(--aksent);outline-offset:3px}
.lysboks{position:fixed;inset:0;z-index:100;background:rgba(8,10,12,.94);
  display:flex;align-items:center;justify-content:center}
.lysboks[hidden]{display:none}
.lysboks-flate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lysboks-bilde{max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  object-fit:contain;cursor:zoom-in;touch-action:none;user-select:none;-webkit-user-drag:none;
  transform-origin:center center;transition:transform 120ms ease-out;border-radius:6px}
.lysboks.zoomet .lysboks-bilde{cursor:grab;transition:none}
.lysboks-lukk,.lysboks-forrige,.lysboks-neste{position:absolute;z-index:2;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lysboks-lukk:hover,.lysboks-forrige:hover,.lysboks-neste:hover{background:rgba(255,255,255,.24)}
.lysboks-lukk:focus-visible,.lysboks-forrige:focus-visible,.lysboks-neste:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lysboks-lukk{top:16px;right:16px}
.lysboks-forrige{left:12px;top:50%;transform:translateY(-50%)}
.lysboks-neste{right:12px;top:50%;transform:translateY(-50%)}
.lysboks-tekst{position:absolute;left:0;right:0;bottom:0;padding:14px 72px 18px;text-align:center;color:rgba(255,255,255,.85);
  font-size:var(--t-liten);pointer-events:none}
.lysboks-teller{display:block;font-family:var(--brod);font-size:var(--t-mini);letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:4px}
html.lysboks-aapen{overflow:hidden}
@media(max-width:720px){
  .lysboks-forrige,.lysboks-neste{top:auto;bottom:64px;transform:none}
  .lysboks-tekst{padding:14px 16px 18px}
}
@media(prefers-reduced-motion:reduce){.lysboks-bilde{transition:none}}

/* ── galleri ─────────────────────────────────────────────────────── */
/* ⚠️ Tre kolonner paa 1080, ikke fire. Med fire ble bildene 240 px smaa, og
   fem bilder ga én alene paa rad to. Kvadrat, ikke 4:3: kundenes egne
   bilder er telefonbilder i hoeydeformat, og 4:3 kappet motivet.
   Sett paa fuku-sushi 13.09.2026. */
.galleri{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.galleri figure{margin:0;display:flex;flex-direction:column;min-width:0}
.galleri img{border-radius:var(--r);aspect-ratio:1/1;object-fit:cover;width:100%;
  background:var(--papir)}
/* ⭐ RYTME, ikke et rutenett. Med fem bilder eller flere faar det foerste
   bildet to kolonner og to rader, og de fire neste legger seg rundt det.
   Fem bilder = fem celler, ingen tom rute. Under 720 px er det to
   kolonner, og da MAA spennet av: «span 2» i et smalt auto-fit lager en
   usynlig kolonne nummer to og siden scroller sidelengs. */
@media (min-width:720px){
  /* ⚠️ Det store bildet er kvadratisk som de smaa, bare dobbelt saa bredt.
     Foerste utgave lot det beholde sin egen hoeyde, og da bestemte et
     staaende telefonbilde radhoeyden for hele galleriet: 930 px hoeyt, og
     de smaa ved siden av fikk luft de ikke ba om. Sett 13.09.2026. */
  .galleri figure:first-child:nth-last-child(n+5){grid-column:span 2;grid-row:span 2}
}
/* ⭐ Fem bilder = fem celler. I tre kolonner blir det ett stort, to til
   hoeyre og to under, med en TOM rute nederst til hoeyre. I fire kolonner
   gaar det opp: det store paa to ganger to, og fire smaa i en firkant ved
   siden av.
   ⭐ Fire kolonner BARE naar det gaar opp, 14.09.2026: fem, ni, tretten
   bilder (4n+1). Med seks bilder ga fire kolonner ett bilde alene paa
   tredje rad med tre tomme ruter etter seg; i tre kolonner fyller seks
   bilder ni ruter noeyaktig. Sju og aatte gaar ikke opp i noen av dem,
   og da er tre kolonner, med stoerre bilder, det minste ondet.
   ⚠️ :has() er nytt (Chrome 105, Safari 15.4, Firefox 121). Eldre nettlesere
   faar tre kolonner og en tom rute, som er penere enn ingenting. */
@media (min-width:900px){
  .galleri:has(figure:first-child:nth-last-child(n+5):nth-last-child(4n+1)){grid-template-columns:repeat(4,1fr)}
}
/* ⭐ Paa telefon: to i bredden naar det er fire bilder eller flere.
   Én kolonne ga seks kvadrater paa 346 px etter hverandre, altsaa to
   skjermhoeyder med bilder foer aapningstidene. Under fire bilder er
   én kolonne fortsatt riktig: da er hvert bilde et poeng for seg.
   Er antallet odde, faar det siste bildet hele bredden, saa det ikke
   staar alene til venstre med en tom rute ved siden av. */
@media (max-width:719px){
  .galleri:has(figure:nth-child(4)){grid-template-columns:1fr 1fr;gap:12px 12px}
  .galleri:has(figure:nth-child(4)) figcaption{font-size:var(--t-mini);margin-top:6px}
  .galleri:has(figure:nth-child(4)) figure:last-child:nth-child(odd){grid-column:span 2}
}
.galleri figcaption{font-size:var(--t-liten);line-height:1.45;color:var(--dempet);margin-top:8px;
  text-wrap:pretty}

/* ── kontakt ─────────────────────────────────────────────────────── */
.kontakt{list-style:none;margin:0;padding:0}
.kontakt li{display:flex;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--linje)}
.kontakt li span{min-width:92px;color:var(--dempet);font-size:var(--t-liten);padding-top:2px}
.kontakt li a{color:var(--aksent);text-underline-offset:3px;text-decoration-thickness:1px;
  overflow-wrap:anywhere}
.kontakt li a:hover{color:var(--blekk)}

/* ── anmeldelser ─────────────────────────────────────────────────── */
/* ⭐ Ingen bokser, 14.09.2026. Tre like rammer med et sitat i hver er
   «tre like kort» én gang til. Naa er det sitatet selv som er formen: et
   stort anfoerselstegn i aksent, teksten i visningsskriften, og navnet
   under i broedskriften. Ett sitat faar ikke fylle hele bredden: 36 tegn
   per linje, saa det leses som et sitat og ikke som et avsnitt. */
.anmeldelser{display:grid;gap:40px 40px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sitat{margin:0;padding:0;min-width:0}
.sitat blockquote{margin:0 0 16px;font:400 var(--t-h3)/1.5 var(--vis);color:var(--blekk);
  max-width:36ch;text-wrap:pretty}
.sitat blockquote::before{content:"\201C";display:block;font:600 64px/.5 var(--vis);
  color:var(--aksent);margin:14px 0 18px;letter-spacing:0}
.sitat figcaption{font-size:var(--t-liten);font-weight:600}
.sitat figcaption span{display:block;font-weight:400;color:var(--dempet);
  font-size:var(--t-mini);margin-top:2px}

/* ── team ────────────────────────────────────────────────────────── */
/* Venstrestilt som resten av sida. Sentrerte kolonner var det ene stedet
   sida skiftet stemme. */
.team{display:grid;gap:36px 28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.person{min-width:0}
/* ⚠️ Sirkelen er aksentflate, ikke papir. Paa en tonet seksjon var papir
   paa papir usynlig, og forbokstaven sto og svevde. Sett 14.09.2026. */
.person img,.person .initial{width:96px;height:96px;border-radius:50%;object-fit:cover;
  margin:0 0 16px;background:var(--aksentflate);display:block}
/* ⭐ Uten bilde: en sirkel med forbokstaven, saa radene staar likt. */
.person .initial{display:grid;place-items:center;font:600 38px var(--vis);color:var(--aksent)}
.person h3{margin:0 0 2px}
.person .rolle{color:var(--dempet);font-size:var(--t-liten);font-weight:500;margin:0 0 8px}
.person p{font-size:var(--t-liten);color:var(--dempet);margin:0;max-width:32ch}
.person .lenker{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px}
.person .lenker a{color:var(--blekk);text-decoration:none;border-bottom:1px solid var(--linje);padding:6px 0;min-height:44px;display:inline-flex;align-items:center}
.person .lenker a:hover{border-bottom-color:var(--aksent)}
/* sted: kart og tekst side om side, 17.09.2026 */
.sted-rad{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.sted-rad{grid-template-columns:1fr 1fr}.sted-rad.uten-kart{grid-template-columns:1fr}}
.kontakt + .veibeskrivelse{margin-top:18px}
.kart{margin:0}
.kart img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1200/750;object-fit:cover;border-radius:var(--r-stor)}
.kart figcaption{font-size:var(--t-liten);color:var(--dempet);margin:6px 0 0}
.sted-tekst>p{margin:0 0 16px}
.sted-tekst dl{margin:0 0 20px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.sted-tekst dt{font-size:var(--t-liten);color:var(--dempet);font-weight:500;padding-top:2px}
.sted-tekst dd{margin:0}
@media(max-width:899px){.sted-rad{gap:24px}.sted-tekst dl{grid-template-columns:1fr;gap:2px}.sted-tekst dd{margin:0 0 8px}}
/* Paa telefon: bildet til venstre og teksten ved siden av, saa tre
   personer ikke blir tre skjermhoeyder. */
@media (max-width:719px){
  .team{gap:24px}
  .person{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:start}
  .person img,.person .initial{width:72px;height:72px;margin:0;grid-row:span 3}
  .person .initial{font-size:30px}
  .person p{max-width:none}
}

/* ── handling ────────────────────────────────────────────────────── */
.handling{padding:80px 0;background:var(--aksentflate);text-align:center}
@media (max-width:720px){.handling{padding:56px 0}}
.handling h2{margin-bottom:14px}
/* ⛔️ blekk, ikke dempet. Dempet paa aksentflate er 4,36:1 i «sjo», under
   kravet paa 4,5. Regnet 13.09.2026, for alle fire settene, og paa nytt
   14.09.2026 for fem. */
.handling p{margin-left:auto;margin-right:auto;color:var(--blekk);font-size:var(--t-ingress)}
.handling .knapper{justify-content:center;margin-top:24px}

/* ── bunn ────────────────────────────────────────────────────────── */
.bunn{padding:40px 0 28px;border-top:1px solid var(--linje);
  font-size:var(--t-liten);color:var(--dempet)}
.bunn .inn{display:flex;gap:22px;flex-wrap:wrap;
  justify-content:space-between;align-items:center}
.bunn strong{color:var(--blekk);font-family:var(--vis);font-size:18px}
.bunn .orgnr{font-size:var(--t-mini);margin-top:3px}
.bunn .hoyre{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.bunn a{color:var(--dempet);text-underline-offset:3px}
.bunn a:hover{color:var(--blekk)}
.bunn .knapp{color:var(--flate)}
.bunn .knapp:hover{color:var(--flate)}

/* ⭐ Nederste linje: personvern til venstre, signaturen til hoeyre.
 * ⛔️ HOLMESTRANDIT SINE EGNE FARGER, ikke kundens. #143C52 er det samme
 *    navy som paa holmestrandit.no, og det skal vaere likt hos hver eneste
 *    kunde uansett hvilket fargesett hun har valgt. Det er nettopp det som
 *    gjoer en signatur til en signatur. Den er liten og stille, saa den
 *    slaass ikke med flaten rundt. */
.bunn .bunnlinje{margin-top:20px;padding-top:14px;
  border-top:1px solid var(--linje);font-size:var(--t-mini)}
.bunn .bunnlinje .bygget{color:var(--dempet)}
/* ⭐ ORDMERKET, slik det staar paa holmestrandit.no: «Holmestrand» i navy,
   «IT» i gull. Eier, 13.09.2026: «Ikke logo men farge paa it.»
   ⭐ Gullet er DET LYSE fra merket, #D99521, paa eiers beskjed 13.09.2026:
   «Holmestrandit IT skal være gul.» Foerste utgave brukte den moerke
   teksttonen #8A5E12 for kontrastens skyld (2,9:1 mot 6:1 i 13 px), men
   det er navnet vaart, og det skal se ut som logoen. Derfor ett hakk
   stoerre og fet, saa det leses likevel. */
.bunn .bunnlinje a.hit{color:var(--signatur);font-weight:700;text-decoration:none;
  letter-spacing:-.01em;font-size:14px}
.bunn .bunnlinje a.hit b{color:#D99521;font-weight:700}
.bunn .bunnlinje a.hit:hover{text-decoration:underline;color:var(--signatur)}

/* ── mus og tastatur ─────────────────────────────────────────────── */
/* Bare paa ekte pekere: paa en telefon blir «hover» hengende etter
   trykket, og et bilde som staar og er forstoerret er en feil. */
@media (hover:hover) and (pointer:fine){
  .utvalg a.kort:hover .bilde img,.nytt-blokk .innlegg:has(a):hover .bilde img{transform:scale(1.03)}
  .utvalg a.kort:hover h3{color:var(--aksent)}
}
/* ⭐ Fokus for tastaturet, og bare for tastaturet. Lenker faar en ring i
   aksent (minst 4,4:1 mot papir og flate i alle fem settene). Knappene
   faar en dobbel ring, flate innerst og aksent ytterst, som synes paa
   alt: paa flaten, paa aksentflaten, og paa et moerkt bilde. En enkel
   aksentring paa en aksentknapp hadde vaert usynlig. */
a:focus-visible{outline:2px solid var(--aksent);outline-offset:3px;border-radius:3px}
.knapp:focus-visible{outline:0;box-shadow:0 0 0 3px var(--flate),0 0 0 5px var(--aksent)}
.knapp.mild:focus-visible{box-shadow:inset 0 0 0 1.5px var(--aksent),
  0 0 0 3px var(--flate),0 0 0 5px var(--aksent)}
.hero.med-bilde .knapp:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 0 5px #fff}
.hero.med-bilde .knapp.mild:focus-visible{box-shadow:inset 0 0 0 1.5px #fff,
  0 0 0 3px rgba(0,0,0,.55),0 0 0 5px #fff}
.utvalg a.kort:focus-visible{outline-offset:6px;border-radius:var(--r)}

/* ⭐ Den som har bedt om ro faar ro: ingen overganger, ingen forstoerring,
   ingen trykk. Fargeskiftene paa hover staar, de forklarer og beveger
   ikke. */
@media (prefers-reduced-motion:reduce){
  .knapp,.meny a,.bunn a,.kontakt li a,.nytt-blokk h3 a,.nytt-stripe a,
  .utvalg .bilde img,.nytt-blokk .bilde img,.utvalg .kort h3{transition:none}
  .knapp:active{transform:none}
  .utvalg a.kort:hover .bilde img,.nytt-blokk .innlegg:has(a):hover .bilde img{transform:none}
}