/* Engvoll Bakeri, felles stilark. Porteføljemal 08. Alle stier er relative. */

@font-face{font-family:"Engvoll Display";src:url("fonter/display.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Engvoll Brod";src:url("fonter/brod.woff2") format("woff2");
  font-weight:300 800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --krem:#fefaef;        /* sidebunn */
  --sand:#f5f0e1;        /* kort og felt på krem */
  --sand-lys:#f0e7ce;    /* felt inne i mørke flater */
  --gronn:#165007;       /* all tekst, alle konturer */
  --gronn-mork:#2d402d;  /* mørke flater: uttalelse, footer */
  --gronn-lys:#b2d99a;   /* lyse grønne flater og bånd */
  --sage:#91c085;        /* sekundær grønn, konturer på mørkt */
  --gul:#ffce70;         /* pille-CTA og den varme seksjonen */
  --hvit:#fff;
  --topp-h:76px;
  --kant:1px solid rgba(25,89,8,.28);
  --rund:26px;
  --maks:1260px;
  --puls:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id],div[id],main[id]{scroll-margin-top:calc(var(--topp-h) + 24px)}

body{
  margin:0;background:var(--krem);color:var(--gronn);
  font-family:"Engvoll Brod",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- Typografi ---------- */
h1,h2,h3,.display{
  font-family:"Engvoll Display",Georgia,"Times New Roman",serif;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 100;
  font-weight:400;line-height:1;letter-spacing:-.04em;margin:0;
}
h1{font-size:clamp(2.7rem,7.6vw,5.4rem)}
h2{font-size:clamp(2.1rem,5.4vw,4.1rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.025em}
.gigant{font-size:clamp(2.5rem,6.6vw,5rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* Referansens overtekst i versaler. Beholdt med vilje, den bærer rytmen i designet. */
.overtekst{
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  margin:0 0 1.6rem;
}

/* ---------- Struktur ---------- */
.ramme{width:min(100% - 40px,var(--maks));margin-inline:auto}
.seksjon{padding:clamp(64px,9vw,128px) 0}
.seksjon-tett{padding:clamp(48px,6vw,88px) 0}
.midtstilt{text-align:center}
.leder{font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:56ch}
.midtstilt .leder{margin-inline:auto}

.flate-mork{background:var(--gronn-mork);color:var(--gronn-lys)}
.flate-gronn{background:var(--gronn-lys)}
.flate-gul{background:var(--gul)}
.flate-sand{background:var(--sand)}

/* ---------- Knapper ---------- */
.pille{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-width:174px;padding:1.15rem 2.3rem;border-radius:50%/50%;
  background:var(--gul);color:var(--gronn);text-decoration:none;border:0;
  font-size:1rem;font-weight:500;cursor:pointer;
  transition:transform .3s var(--puls),background .3s var(--puls),box-shadow .3s var(--puls);
}
.pille:hover{transform:translateY(-2px) scale(1.03);background:#ffd98d;box-shadow:0 10px 26px rgba(25,89,8,.16)}
.pille:focus-visible{outline:2px solid var(--gronn);outline-offset:3px}
.pille-linje{background:transparent;border:1px solid currentColor;color:inherit}
.pille-linje:hover{background:rgba(25,89,8,.07);box-shadow:none}
.flate-mork .pille-linje,footer .pille-linje{color:var(--gronn-lys)}
.flate-mork .pille-linje:hover,footer .pille-linje:hover{background:rgba(178,217,154,.14)}

/* Pil-lenke med understrek som vokser */
.pil-lenke{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:500;
  font-size:1.06rem;padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--puls);
}
.pil-lenke:hover{background-size:100% 1px}
.pil-lenke svg{transition:transform .35s var(--puls)}
.pil-lenke:hover svg{transform:translateX(5px)}

/* Ellipse-knapp, referansens signaturform */
.ellipse{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:34px;border-radius:50%;border:1px solid currentColor;background:transparent;
  color:inherit;cursor:pointer;transition:background .3s var(--puls),transform .3s var(--puls);
}
.ellipse:hover{background:var(--gul);border-color:var(--gul);color:var(--gronn);transform:scale(1.06)}
.ellipse:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ellipse[disabled]{opacity:.35;cursor:default}
.ellipse[disabled]:hover{background:transparent;border-color:currentColor;color:inherit;transform:none}
.flate-gronn .ellipse:hover,.flate-mork .ellipse:hover{color:var(--gronn)}

/* ---------- Topp ---------- */
.topp{
  position:sticky;top:0;z-index:60;background:var(--krem);
  border-bottom:var(--kant);
}
.topp-inner{
  width:min(100% - 40px,1500px);margin-inline:auto;height:var(--topp-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.merke{
  font-family:"Engvoll Display",Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:1.42rem;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  position:absolute;left:50%;transform:translateX(-50%);
}
.merke .prikk{padding:0 .18em}
.topp-inner{position:relative}
.topp nav ul{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.topp nav a{text-decoration:none;font-size:1rem;position:relative}
.topp nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:currentColor;
  transition:width .3s var(--puls);
}
.topp nav a:hover::after{width:100%}
.topp-hoyre{display:flex;align-items:center;gap:2.1rem;margin-left:auto}
.topp-hoyre a{text-decoration:none;font-size:1rem}
.meny-boks{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.hamburger{display:none}
.mobil-cta{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate}
.hero > *{position:relative;z-index:2}
.hero-foto{
  margin-top:26px;border-radius:var(--rund) var(--rund) 0 0;overflow:hidden;
}
.hero-foto img{width:100%;height:clamp(300px,52vw,460px);object-fit:cover}
.hero-tekst{padding:clamp(44px,7vw,72px) 0 clamp(8px,2vw,16px);text-align:center}
.hero-tekst h1{margin-bottom:1.6rem;text-wrap:balance}
.hero-blad{display:none}

/* ---------- Rullebånd ---------- */
.rullebaand{overflow:hidden;padding:15px 0;border-block:var(--kant)}
.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:52px}
.rulle-punkt{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;font-size:.98rem}
.rulle-punkt svg{flex:none}
.rullebaand[data-rulle-klar] .rulle-spor{animation:rulle var(--rulle-varighet) linear infinite}
.rullebaand[data-rulle-klar]:hover .rulle-spor{animation-play-state:paused}
@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}
}

/* ---------- Uttalelse (mørk flate) ---------- */
.uttalelse{text-align:center;padding:clamp(80px,12vw,168px) 0}
.uttalelse .gigant{max-width:19ch;margin-inline:auto;color:var(--gronn-lys)}
.uttalelse .pille{margin-top:clamp(34px,5vw,54px)}
/* Merkene skalerer med teksten: em, ikke px. Ellers krymper de til prikker
   når overskriften vokser til 80 px på store skjermer. */
.korn{display:inline-block;width:.62em;height:.62em;vertical-align:-.06em;margin:0 .14em}

/* ---------- Rader med hårstrek ---------- */
.rader{border-top:var(--kant)}
.rad{border-bottom:var(--kant)}
.rad summary{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(22px,3vw,34px) 0;cursor:pointer;list-style:none;
}
.rad summary::-webkit-details-marker{display:none}
.rad summary h3,.rad summary h2{
  font-size:clamp(1.7rem,4.4vw,3.2rem);letter-spacing:-.04em;
  transition:opacity .3s var(--puls);
}
.rad summary:hover h3,.rad summary:hover h2{opacity:.62}
.rad summary:focus-visible{outline:2px solid var(--gronn);outline-offset:4px}
.rad-svar{padding:0 0 clamp(24px,3vw,36px);max-width:62ch}
.rad[open] summary .ellipse{background:var(--gul);border-color:var(--gul)}
.rad summary .ellipse svg{transition:transform .35s var(--puls)}
.rad[open] summary .ellipse svg{transform:rotate(90deg)}

/* ---------- Todelt seksjon (bilde + tekst) ---------- */
.todelt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.todelt-foto{border-radius:var(--rund);overflow:hidden}
.todelt-foto img{width:100%;height:100%;min-height:340px;object-fit:cover}
.todelt-tekst h2{margin-bottom:1.2rem}
.todelt-tekst .pil-lenke{margin-top:1.5rem}
.todelt.speilvendt .todelt-foto{order:2}

/* Buet tekst, referansens signatur */
.bue{display:block;width:280px;height:132px;margin-top:clamp(30px,5vw,54px)}
.bue text{font-size:11.5px;letter-spacing:.08em;font-weight:600;fill:currentColor}
.midtstilt .bue{margin-inline:auto}

/* ---------- Kortrutenett ---------- */
.kortgrid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.kortgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.kortgrid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,36px)}
.vare{text-align:center}
.vare-flate{
  background:var(--sand);border-radius:var(--rund);padding:clamp(18px,2.4vw,30px);
  overflow:hidden;transition:transform .4s var(--puls);
}
.vare:hover .vare-flate{transform:translateY(-6px)}
/* height:auto er ikke pynt: width/height-attributtene på <img> er presentasjonshint,
   så uten den vinner height="933" over aspect-ratio og kortet blir meterhøyt. */
.vare-flate img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.vare h3{margin-top:1.1rem;font-size:1.16rem}
.vare p{margin-top:.35rem;font-size:.96rem;opacity:.8}

/* ---------- Trekkspill-piller ---------- */
.trekkspill{display:flex;flex-direction:column;gap:12px}
.trekk{background:var(--sage);border-radius:20px;overflow:hidden}
.trekk summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.15rem 1.35rem;cursor:pointer;list-style:none;font-size:1.08rem;font-weight:500;
}
.trekk summary::-webkit-details-marker{display:none}
.trekk summary:focus-visible{outline:2px solid var(--gronn);outline-offset:-3px}
.trekk-tegn{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--gronn);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .35s var(--puls);
}
.trekk[open] .trekk-tegn{transform:rotate(45deg)}
.trekk-svar{padding:0 1.35rem 1.25rem;font-size:1rem}

/* ---------- Sitatkarusell ---------- */
.ord-topp{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(28px,4vw,44px)}
.ord-styring{display:flex;gap:12px;flex:none}
.ord-spor{
  display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
}
.ord-spor::-webkit-scrollbar{display:none}
.ord-kort{
  flex:none;width:min(88vw,760px);scroll-snap-align:start;
  display:grid;grid-template-columns:1fr 1fr;border-radius:var(--rund);overflow:hidden;background:var(--sand);
}
.ord-foto{position:relative}
.ord-foto img{width:100%;height:100%;min-height:330px;object-fit:cover}
.ord-navn{
  position:absolute;left:16px;bottom:16px;background:var(--gronn-mork);color:var(--gronn-lys);
  padding:.45rem 1rem;border-radius:50%/50%;font-size:.93rem;
}
.ord-sitat{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.ord-sitat blockquote{
  margin:0;font-family:"Engvoll Display",Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.16;letter-spacing:-.02em;
}
.ord-sitat .overtekst{margin:1.7rem 0 .25rem;font-size:.72rem}

/* ---------- Skjema ---------- */
.skjema{display:grid;gap:1.05rem}
.felt{display:grid;gap:.42rem}
.felt label{font-size:.92rem;font-weight:500}
.felt input,.felt select,.felt textarea{
  font:inherit;font-size:1rem;color:var(--gronn);background:var(--hvit);
  border:1px solid rgba(25,89,8,.3);border-radius:14px;padding:.85rem 1rem;width:100%;
  transition:border-color .25s var(--puls),box-shadow .25s var(--puls);
}
.felt textarea{min-height:140px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{
  outline:none;border-color:var(--gronn);box-shadow:0 0 0 3px rgba(25,89,8,.13);
}
.felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.skjema-feil{color:#8a2b06;font-size:.93rem;margin:0}
.takk{
  background:var(--gronn-lys);border-radius:var(--rund);padding:clamp(26px,4vw,44px);text-align:center;
}
.takk h3{margin-bottom:.7rem}

/* ---------- Faktakort ---------- */
.fakta{display:grid;gap:1.5rem}
.fakta-rad{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1.5rem;border-bottom:var(--kant)}
.fakta-rad:last-child{border-bottom:0;padding-bottom:0}
.fakta-rad svg{flex:none;margin-top:3px}
.fakta-rad strong{display:block;font-weight:600}

.tabell{width:100%;border-collapse:collapse;font-size:1rem}
.tabell th,.tabell td{text-align:left;padding:.72rem 0;border-bottom:var(--kant)}
.tabell th{font-weight:600}

/* ---------- Footer ---------- */
footer{background:var(--krem);padding:0 0 clamp(30px,4vw,52px)}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(16px,2vw,26px)}
.footer-kort{
  background:var(--gronn-mork);color:var(--gronn-lys);border-radius:var(--rund);
  padding:clamp(30px,4vw,52px);position:relative;overflow:hidden;min-height:430px;
  display:flex;flex-direction:column;
}
.footer-topp{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,3vw,48px)}
.footer-kort a{color:var(--gronn-lys)}
.footer-lenker{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.footer-lenker a{text-decoration:none;font-size:1.06rem}
.footer-lenker a:hover{text-decoration:underline}
.nyhetsbrev{display:flex;background:var(--sand-lys);border-radius:14px;overflow:hidden;max-width:370px}
.nyhetsbrev input{
  font:inherit;font-size:1rem;flex:1;min-width:0;border:0;background:transparent;color:var(--gronn);
  padding:.9rem 1rem;
}
.nyhetsbrev input::placeholder{color:rgba(25,89,8,.6)}
.nyhetsbrev input:focus{outline:none}
.nyhetsbrev:focus-within{outline:2px solid var(--gronn);outline-offset:2px}
.nyhetsbrev button{
  flex:none;width:66px;border:0;background:var(--sage);color:var(--gronn);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .3s var(--puls);
}
.nyhetsbrev button:hover{background:var(--gronn-lys)}
.nyhetsbrev-svar{margin:.8rem 0 0;font-size:.95rem}
.sosial{display:flex;gap:12px;margin-top:1.6rem}
.sosial a{
  width:40px;height:40px;border-radius:50%;background:var(--sage);color:var(--gronn-mork);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s var(--puls),background .3s var(--puls);
}
.sosial a:hover{transform:translateY(-3px);background:var(--gronn-lys)}
.spokelse{
  margin-top:auto;padding-top:2.4rem;font-family:"Engvoll Display",Georgia,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:clamp(2.6rem,7.4vw,5.4rem);line-height:.9;letter-spacing:.01em;
  color:rgba(178,217,154,.16);user-select:none;white-space:nowrap;
}
.footer-foto{border-radius:var(--rund);overflow:hidden;position:relative;min-height:430px}
.footer-foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.footer-merkelapp{
  position:absolute;left:16px;bottom:16px;z-index:2;background:var(--krem);color:var(--gronn);
  padding:.45rem 1rem;border-radius:50%/50%;font-size:.93rem;
}
.footer-bunn{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  padding-top:clamp(22px,3vw,32px);font-size:.92rem;
}
.footer-bunn a{text-decoration:none}
.footer-bunn a:hover{text-decoration:underline}

/* ---------- Sidetopp for undersider ---------- */
.sidetopp{padding:clamp(52px,7vw,104px) 0 clamp(32px,4vw,56px)}
.sidetopp h1{max-width:16ch;text-wrap:balance}
.sidetopp .leder{margin-top:1.5rem}
.jus{max-width:74ch}
.jus h2{margin:2.6rem 0 1rem;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.jus h2:first-of-type{margin-top:0}
.jus ul{padding-left:1.2rem;margin:0 0 1.05em}
.jus li{margin-bottom:.4rem}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .todelt,.footer-topp,.footer-grid,.felt-rad,.kortgrid-2{grid-template-columns:1fr}
  .kortgrid-4,.kortgrid-3{grid-template-columns:repeat(2,1fr)}
  .todelt.speilvendt .todelt-foto{order:0}
  .todelt-foto img{min-height:260px}
  .ord-kort{width:min(88vw,560px);grid-template-columns:1fr}
  .ord-foto img{min-height:260px}
  .footer-kort,.footer-foto{min-height:0}
  .footer-foto{aspect-ratio:4/3}
}

@media (max-width:760px){
  :root{--topp-h:64px}
  .topp-inner{width:min(100% - 28px,100%)}
  .ramme{width:min(100% - 28px,var(--maks))}

  .hamburger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;cursor:pointer;order:-1;
  }
  .hamburger span,.hamburger::before,.hamburger::after{
    content:"";display:block;width:21px;height:1.6px;background:var(--gronn);
    transition:transform .3s var(--puls),opacity .25s var(--puls);
  }
  #menyknapp:checked ~ .hamburger::before{transform:translateY(6.6px) rotate(45deg)}
  #menyknapp:checked ~ .hamburger span{opacity:0}
  #menyknapp:checked ~ .hamburger::after{transform:translateY(-6.6px) rotate(-45deg)}

  .topp nav{
    position:absolute;top:var(--topp-h);left:0;right:0;background:var(--krem);
    border-bottom:var(--kant);max-height:0;overflow:hidden;
    transition:max-height .4s var(--puls);
  }
  #menyknapp:checked ~ nav{max-height:340px}
  .topp nav ul{flex-direction:column;align-items:flex-start;gap:0;padding:6px 0 18px}
  .topp nav li{width:100%}
  .topp nav a{display:block;padding:.85rem 14px;font-size:1.08rem}
  .topp nav a::after{display:none}
  .mobil-cta{display:block}
  .topp-hoyre .kun-desktop{display:none}
  .merke{font-size:1.24rem}

  .hero-tekst{padding-top:clamp(34px,7vw,48px)}
  .hero-foto img{height:clamp(280px,74vw,420px)}
  .kortgrid-4,.kortgrid-3{grid-template-columns:repeat(2,1fr)}
  .rulle-gruppe > *{margin-right:34px}
  .ord-topp{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .spokelse{font-size:clamp(2.1rem,11vw,3.4rem)}
  .footer-bunn{flex-direction:column}
}

@media (max-width:460px){
  .kortgrid-4,.kortgrid-3{grid-template-columns:1fr}
  /* Pillene holdes kompakte også her: referansens CTA er alltid en liten ellipse,
     og en fullbreddepille med 50% radius blir en avlang kapsel som ikke er samme form. */
  .pille{padding:1.05rem 1.9rem;min-width:0}
}

/* ---------- Hero, fullbredde fra 901 px ---------- */
@media (min-width:901px){
  .hero{min-height:74vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .hero > .hero-foto{
    position:absolute;inset:0;margin:0;border-radius:0;z-index:1;
  }
  .hero > .hero-foto img{width:100%;height:100%}
  /* Krem-slør: holder overskriften grønn og lesbar uansett hvor lyst eller mørkt
     bildet er akkurat der. Et mørkt slør ville krevd hvit tekst, og hvit tekst på
     et lyst matbilde faller under kontrastkravet. */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:1;
    /* Midtstoppet paa .38 laa nettopp der overskriften staar, og de morkeste partiene i
       matbildet tok den gronne h1-en til 1,55:1 paa 12 prosent av pikslene. */
    background:linear-gradient(180deg,rgba(254,250,239,.7) 0%,rgba(254,250,239,.62) 45%,rgba(254,250,239,.68) 100%);
  }
  .hero-tekst{padding:clamp(56px,7vw,96px) 0}
  .hero-tekst h1{max-width:14ch;margin-inline:auto}
}