:root{--rose:#d9cecb;--taupe:#b4a9a5;--berry:#825c64;--gray:#737373;--charcoal:#545454;--ink:#454545;--cream:#f8f7f5;--sage:#c7c7bc}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Josefin Sans',Arial,sans-serif;color:var(--ink);background:#fff;font-size:18px;line-height:1.45}img{max-width:100%;display:block}a{color:inherit}.site-header{height:58px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(0,0,0,.03)}.home-mark img{width:32px;height:32px;border-radius:50%}.nav{display:flex;gap:34px;align-items:center}.nav a{text-decoration:none;color:#8b8989;font-size:15px}.nav a.active,.nav a:hover{color:#353535}.menu-btn{display:none;border:0;background:none;font-size:30px;color:#666;cursor:pointer}.hero{min-height:calc(100vh - 58px);background:var(--charcoal);position:relative;overflow:hidden}.hero-visual{height:68vh;min-height:465px;background:url('assets/hero.jpg') center 45%/cover no-repeat}.hero-top{height:30vh;min-height:205px;background:rgba(54,56,54,.78);position:relative}.hero-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-43%);width:min(315px,38vw)}.hero-kicker{position:absolute;left:8.5%;top:38px;color:#fff;font-size:15px;font-weight:600;line-height:1.35}.hero-kicker small{display:block;font-size:14px;font-weight:400;color:var(--rose)}.heart-word{display:inline-flex;align-items:flex-start;white-space:nowrap}.hero-kicker .heart-word img{width:10px;height:auto;margin:0 0 0 4px;transform:translateY(-2px)}.hero-photo{height:38vh;min-height:260px;background:transparent}.hero-message{min-height:32vh;background:var(--charcoal);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:38px 20px 55px;color:#fff}.hero-message .script-img{width:min(630px,72vw);margin-bottom:2px}.hero-message p{margin:3px 0;font-size:17px}.hero-message p:last-child{font-weight:600}.page-title{padding:42px 20px 22px;display:flex;justify-content:center}.page-title img{width:min(500px,80vw)}.gallery-strip{display:grid;grid-template-columns:2.2fr 1fr 1.25fr 1.2fr .9fr;gap:14px;width:100%;max-width:none;margin:0;padding:0}.gallery-strip img{width:100%;height:315px;object-fit:cover;box-shadow:8px 12px 18px rgba(0,0,0,.28)}.creative-copy{max-width:1170px;margin:30px auto 55px;display:grid;grid-template-columns:1fr 260px;gap:70px;align-items:center;padding:0 70px}.creative-copy h1,.creative-copy h3{font-size:31px;font-weight:400;margin:0 0 4px;color:#686b61}.creative-copy p{max-width:610px;margin:0;font-size:18px}.round-logo{width:220px;justify-self:end;filter:drop-shadow(9px 12px 9px rgba(0,0,0,.18))}.design-section{background:var(--rose);padding:75px 0 65px}.design-section .gallery-strip{grid-template-columns:2.2fr 1fr 1.25fr 1.2fr .9fr}.design-copy{max-width:1170px;margin:35px auto 0;display:grid;grid-template-columns:1fr 260px;gap:70px;align-items:center;padding:0 70px;color:var(--berry)}.design-copy h2,.design-copy h3{font-size:31px;font-weight:400;margin:0 0 8px}.design-copy p{max-width:620px;margin:0 0 24px}.about-wrap{background:var(--rose);min-height:calc(100vh - 58px);padding:0 20px 60px}.about-card{max-width:1540px;margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;background:#fff}.about-left{background:var(--taupe);display:grid;grid-template-rows:auto auto auto}.quote{padding:42px 60px 28px;text-align:center}.quote img{max-width:520px;margin:auto}.bio{background:var(--charcoal);color:#fff;padding:28px 80px 24px;font-size:21px}.bio p{margin:0 0 24px}.bio .last{display:flex;align-items:flex-end;gap:20px}.bio .last img{width:55px}.portrait-row{display:grid;grid-template-columns:190px 1fr;gap:25px;align-items:center;padding:28px 70px 22px;color:#fff}.portrait-row .portrait{width:180px;height:180px;object-fit:cover;border-radius:50%}.portrait-text{font-size:21px;font-weight:600}.signature{width:240px;margin:10px 0 0 auto}.about-right{padding:80px 90px 70px;display:flex;flex-direction:column;justify-content:center}.about-logo{width:min(560px,100%);margin:0 auto 70px}.contact-list{display:grid;grid-template-columns:58px 1fr;gap:16px 22px;align-items:center;font-size:26px}.contact-icon{display:block;width:52px;height:52px;background-image:url("assets/contact-icons.png");background-repeat:no-repeat;background-size:52px auto}.contact-mail{background-position:center top}.contact-instagram{background-position:center -59px}.contact-location{background-position:center bottom}.contact-list a{text-decoration:underline;text-underline-offset:4px}.site-footer{background:var(--charcoal);border-top:0;padding:25px 30px;text-align:center;color:#fff;font-size:13px}.to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(84,84,84,.9);color:#fff;font-size:24px;cursor:pointer;opacity:0;pointer-events:none;transition:.2s;z-index:30}.to-top.show{opacity:1;pointer-events:auto}
@media(max-width:800px){body{font-size:16px}.site-header{height:58px}.menu-btn{display:block}.nav{display:none;position:absolute;top:58px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 18px 16px;box-shadow:0 8px 15px rgba(0,0,0,.08)}.nav.open{display:flex}.nav a{padding:10px 0;width:100%;font-size:16px}.hero{min-height:auto}.hero-visual{height:435px;min-height:0;background-position:center}.hero-top{height:175px;min-height:0}.hero-kicker{left:26px;top:25px;font-size:11px}.hero-kicker small{font-size:10px}.hero-brand{width:160px;top:63%}.hero-photo{height:260px;min-height:0}.hero-message{min-height:240px;padding:34px 18px 45px;overflow:hidden}.hero-message .script-img{width:min(92vw,430px);max-width:100%;height:auto}.hero-message p{font-size:16px;max-width:320px}.page-title{padding:30px 15px 20px}.page-title img{width:340px}.gallery-strip,.design-section .gallery-strip{display:flex;gap:9px;overflow-x:auto;padding:0 16px 16px;scroll-snap-type:x mandatory}.gallery-strip img{flex:0 0 72vw;height:300px;scroll-snap-align:center}.creative-copy,.design-copy{grid-template-columns:1fr;gap:25px;padding:0 25px;margin-top:20px}.creative-copy{margin-bottom:42px}.round-logo{width:145px;justify-self:center}.design-section{padding:42px 0}.creative-copy h1,.design-copy h2,.design-copy h3{font-size:27px}.about-wrap{padding:0}.about-card{display:block}.quote{padding:30px 25px 20px}.bio{padding:28px 28px;font-size:17px}.portrait-row{grid-template-columns:120px 1fr;padding:25px;gap:18px}.portrait-row .portrait{width:115px;height:115px}.portrait-text{font-size:16px}.signature{width:160px}.about-right{padding:50px 30px}.about-logo{margin-bottom:45px}.contact-list{font-size:18px;grid-template-columns:42px 1fr;gap:14px}.contact-icon{width:40px;height:40px}.site-footer{padding-bottom:70px}}

/* v05 – desktop galleries */
@media(min-width:801px){
  .gallery-strip{gap:12px;overflow:visible}
  .gallery-strip img{height:330px;box-shadow:10px 14px 22px rgba(0,0,0,.32)}
  .ceramic-gallery{grid-template-columns:1.2fr 1fr 1.15fr 1fr 1fr .9fr .8fr}
  .design-section .design-gallery{grid-template-columns:1.25fr .9fr 1fr 1.2fr .9fr 1.15fr}
  .ceramic-gallery img:nth-child(1){object-position:center 56%}
  .ceramic-gallery img:nth-child(2){object-position:center 58%}
  .ceramic-gallery img:nth-child(3){object-position:center 57%}
  .ceramic-gallery img:nth-child(4){object-position:center 55%}
  .ceramic-gallery img:nth-child(5){object-position:center 52%}
  .ceramic-gallery img:nth-child(6){object-position:center 54%}
  .ceramic-gallery img:nth-child(7){object-position:center 48%}
  .design-gallery img:nth-child(1){object-position:center 50%}
  .design-gallery img:nth-child(2){object-position:center 50%}
  .design-gallery img:nth-child(3){object-position:center 58%}
  .design-gallery img:nth-child(4){object-position:center 48%}
  .design-gallery img:nth-child(5){object-position:center 50%}
  .design-gallery img:nth-child(6){object-position:center 48%}
  .round-logo{width:250px}
}

/* v08 – desktop: Om Meraki Design fylder hele siden */
@media (min-width:801px){
  .about-wrap{background:#fff;min-height:calc(100vh - 58px);padding:0;}
  .about-card{width:100%;max-width:none;min-height:calc(100vh - 58px);margin:0;grid-template-columns:1fr 1fr;}
  .about-left{min-height:calc(100vh - 58px);}
  .about-right{min-height:calc(100vh - 58px);padding:60px clamp(70px,7vw,145px);}
  .quote{padding-left:clamp(70px,7vw,145px);padding-right:clamp(70px,7vw,145px);}
  .bio{padding-left:clamp(70px,7vw,145px);padding-right:clamp(70px,7vw,145px);}
  .portrait-row{padding-left:clamp(70px,7vw,145px);padding-right:clamp(70px,7vw,145px);}
}

/* v09 – desktop finjustering af Om Meraki Design */
@media (min-width:801px){
  /* Giv overskriftsgrafikken mere tyngde, så den ikke svæver i feltet */
  .quote{display:flex;align-items:center;justify-content:center;padding-top:30px;padding-bottom:24px;}
  .quote img{width:min(610px,82%);max-width:none;}

  /* Centrér tekstblokken lodret i det mørke felt, men behold venstrestillet tekst */
  .bio{display:flex;flex-direction:column;justify-content:center;padding-top:30px;padding-bottom:30px;}

  /* Teksten starter en anelse under fotoets overkant; signaturen beholder sin placering */
  .portrait-row{align-items:center;}
  .portrait-row>div{align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
  .portrait-text{transform:translateY(8px);}
  .signature{margin-top:auto;margin-bottom:0;}

  /* Udnyt højresiden bedre og lad kontaktblokken flugte med logoets venstre kant */
  .about-right{align-items:center;padding-left:clamp(55px,5.5vw,110px);padding-right:clamp(55px,5.5vw,110px);}
  .about-logo{width:min(650px,92%);margin:0 auto 58px;}
  .contact-list{width:min(650px,92%);margin:0 auto;grid-template-columns:58px 1fr;}
}

/* v10 – desktop: portrættekst og kontaktblok */
@media (min-width:801px){
  /* Teksten skal stå ud for fotoet og begynde en anelse under fotoets overkant. */
  .portrait-row>div{position:relative;align-self:stretch;display:block;padding-top:10px;}
  .portrait-text{transform:none;}
  /* Signaturen bliver liggende nederst til højre i feltet. */
  .signature{position:absolute;right:0;bottom:0;margin:0;width:240px;}

  /* Kontaktoplysningerne samles direkte under logoets visuelle bredde. */
  .contact-list{width:min(500px,74%);margin:0 auto;grid-template-columns:58px 1fr;}
}

/* v11 – desktop: præcis placering af portrættekst og kontaktoplysninger */
@media (min-width:801px){
  /* Teksten skal reelt stå ud for portrættet – ikke oppe ved rækkens overkant. */
  .portrait-row>div{padding-top:38px;}

  /* Kontaktblokken flyttes mod højre, så den ligger visuelt under logoet. */
  .contact-list{
    width:min(500px,74%);
    margin-left:auto;
    margin-right:auto;
    transform:translateX(70px);
  }
}

/* v15 – mobil: kortere hero med reel beskæring af fotoet
   Fotoet beholder samme skala som før, mens selve billedfeltet bliver lavere.
   Dermed beskæres top/bund i stedet for at hele fotoet blot skaleres ned. */
@media (max-width:800px){
  .hero-visual{
    height:285px;
    min-height:0;
    background-size:auto 355px;
    background-position:center 58%;
    background-repeat:no-repeat;
  }

  .hero-top{
    height:175px;
    min-height:0;
  }

  .hero-photo{
    height:110px;
    min-height:0;
  }
}

/* v16 – mobil: samme højde som v15, kun fotoet flyttes ned */
@media (max-width:800px){
  .hero-visual{
    background-position:center calc(58% + 42px);
  }
}

/* v17 – mobil: Meraki Design-logo en anelse større */
@media (max-width:800px){
  .hero-brand{
    width:185px;
  }
}

/* v18 – mobil: swipe-gallerier og større runde Meraki-labels */
@media (max-width:800px){
  .gallery-strip,
  .design-section .gallery-strip{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 25px 20px;
    scroll-snap-type:x mandatory;
    scroll-padding-left:25px;
    -webkit-overflow-scrolling:touch;
  }

  .gallery-strip img{
    flex:0 0 84vw;
    width:84vw;
    height:300px;
    object-fit:cover;
    scroll-snap-align:start;
  }

  .round-logo{
    width:185px;
    max-width:185px;
    justify-self:center;
  }
}

/* v19 – mobil: Om Meraki Design */
@media (max-width:800px){

  /* Sørg for at siden aldrig bliver bredere end mobilen */
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }

  /* Citatgrafikken skal kunne ses i sin helhed */
  .quote{
    padding:30px 24px 24px;
    overflow:hidden;
  }
  .quote img{
    width:100%;
    max-width:520px;
    height:auto;
    margin:0 auto;
  }

  /* Det mørke tekstfelt får reel mobilbredde */
  .bio{
    width:100%;
    padding:32px 28px 30px;
    font-size:17px;
    overflow:hidden;
  }
  .bio p{
    max-width:100%;
  }
  .bio .last{
    display:flex;
    align-items:flex-end;
    gap:18px;
  }
  .bio .last img{
    flex:0 0 auto;
    width:52px;
  }

  /* Portræt og tekst stables på mobil */
  .portrait-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
    width:100%;
    padding:32px 28px 34px;
    text-align:center;
  }
  .portrait-row .portrait{
    width:155px;
    height:155px;
    flex:0 0 auto;
  }
  .portrait-row > div{
    width:100%;
    max-width:430px;
  }
  .portrait-text{
    width:100%;
    font-size:17px;
  }
  .signature{
    width:175px;
    max-width:55vw;
    margin:18px 0 0 auto;
  }

  /* Kontaktsektionen: behold udtrykket, men fjern unødigt meget luft */
  .about-right{
    width:100%;
    padding:42px 30px 48px;
  }
  .about-logo{
    width:min(500px,92%);
    margin:0 auto 38px;
  }
  .contact-list{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
}

/* v20 – mobil: centreret signatur og større logo i kontaktfeltet */
@media (max-width:800px){
  .signature{
    width:175px;
    max-width:55vw;
    margin:18px auto 0;
  }

  .about-logo{
    width:min(560px,100%);
    max-width:100%;
    margin:0 auto 38px;
  }
}

/* v21 – mobil: kontaktlogo markant større */
@media (max-width:800px){
  .about-logo{
    width:125%;
    max-width:none;
    align-self:center;
    margin:0 auto 38px;
    transform:translateX(-10%);
  }
}

/* v22 – mobil: kontaktikoner skaleres korrekt fra sprite */
@media (max-width:800px){
  .contact-icon{
    width:40px;
    height:40px;
    background-size:40px auto;
  }

  .contact-mail{
    background-position:center top;
  }

  .contact-instagram{
    background-position:center -45px;
  }

  .contact-location{
    background-position:center bottom;
  }
}

/* Klikbar mailadresse i footer */
.footer-mail,
.footer-mail:visited {
  color: inherit;
  text-decoration: none;
}
.footer-mail:hover,
.footer-mail:focus {
  text-decoration: underline;
}


/* SEO-overskrifter: tilgængelige for søgemaskiner/skærmlæsere, men ikke visuelt synlige */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* One-page navigation */
.onepage-section{scroll-margin-top:58px}