/* ============================================================
   Houeland — Meltzers gate 5 · digital salgsoppgave
   Structure mirrors esny.se (hero slider → object info + accordions →
   gallery grid → floorplan slider → map → USP band → footer),
   re-skinned in the Houeland brand.
   Brand: green #21422F (also body text), beige #FBFCF7,
          terracotta #7B3E2C, sand #D9D7CA  (no black)
   Type:  Sfizia (display) · Engravers Gothic (eyebrow) · Inter (body)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Sfizia';src:url('../assets/fonts/Sfizia-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Sfizia';src:url('../assets/fonts/Sfizia-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Sfizia';src:url('../assets/fonts/Sfizia-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Engravers Gothic';src:url('../assets/fonts/EngraversGothic-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --green:#21422F;
  --beige:#FBFCF7;
  --terracotta:#7B3E2C;
  --sand:#D9D7CA;
  --sand-soft:#EDEBE2;
  --green-08:rgba(33,66,47,.08);
  --green-12:rgba(33,66,47,.12);
  --green-15:rgba(33,66,47,.15);
  --green-40:rgba(33,66,47,.40);
  --green-65:rgba(33,66,47,.65);

  --f-display:'Sfizia',Georgia,serif;
  --f-eyebrow:'Engravers Gothic','Arial Narrow',sans-serif;
  --f-body:'Inter',system-ui,sans-serif;

  --maxw:1240px;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:74px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* NB: no `scroll-behavior:smooth` here — it fights Lenis and makes the page
   crawl when wheeling. Lenis owns smooth scroll; native fallback is instant. */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--f-body);background:var(--beige);color:var(--green);line-height:1.7;font-size:clamp(1rem,.4vw + .92rem,1.1rem);overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}

/* ---------- Type primitives ---------- */
.eyebrow{font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--terracotta);}
.eyebrow--light{color:var(--sand);}
.section-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.01em;margin-top:.6rem;}
.section-title--light{color:var(--beige);}
.section-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-head .section-title{margin-bottom:0;}
p + p{margin-top:1.1rem;}
.mask{display:block;overflow:hidden;}
.mask > span{display:block;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;padding:.95em 1.8em;border:1px solid var(--green);color:var(--green);border-radius:2px;cursor:pointer;background:none;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);}
.btn:hover{background:var(--green);color:var(--beige);}
.btn--sm{padding:.7em 1.2em;}
.btn--full{display:flex;width:100%;margin-top:1.1rem;}
.btn--light{border-color:var(--beige);color:var(--beige);}
.btn--light:hover{background:var(--beige);color:var(--green);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.4rem var(--pad);transition:padding .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);}
.site-header__logo{display:block;position:relative;}
.site-header__logo img{height:20px;width:auto;transition:height .5s var(--ease),opacity .5s var(--ease);}
.site-header__logo .logo-light{position:absolute;top:0;left:0;opacity:0;}
.site-header__nav{display:flex;gap:1.8rem;}
.site-header__nav a{font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;opacity:.85;transition:opacity .3s,color .5s var(--ease);}
.site-header__nav a:hover{opacity:1;}
/* dark state (over hero) */
.site-header.is-dark .logo-dark{opacity:1;}
.site-header.is-dark .logo-light{opacity:0;}
.site-header.is-dark .site-header__nav a{color:var(--beige);}
.site-header.is-dark .site-header__cta{border-color:var(--beige);color:var(--beige);}
.site-header.is-dark .site-header__cta:hover{background:var(--beige);color:var(--green);}
/* light/stuck state */
.site-header.is-stuck{background:rgba(251,252,247,.96);padding-top:.85rem;padding-bottom:.85rem;box-shadow:0 1px 0 var(--green-12);}
.site-header.is-stuck .logo-dark{opacity:0;}
.site-header.is-stuck .logo-light{opacity:1;}
.site-header.is-stuck .site-header__nav a{color:var(--green);}
.site-header.is-stuck .site-header__cta{border-color:var(--green);color:var(--green);}
.site-header.is-stuck .site-header__cta:hover{background:var(--green);color:var(--beige);}
@media(max-width:900px){.site-header__nav{display:none;}}
@media(max-width:520px){.site-header__cta{display:none;}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:580px;overflow:hidden;display:flex;align-items:flex-end;}
.hero__bg{position:absolute;inset:-2px;will-change:transform;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s linear;}
.hero__slide.is-active{opacity:1;}
.hero__slide img{width:100%;height:100%;object-fit:cover;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,66,47,.42) 0%,rgba(33,66,47,.05) 30%,rgba(33,66,47,.05) 50%,rgba(33,66,47,.6) 100%);}
.hero__content{position:relative;z-index:3;padding:0 var(--pad) clamp(3.5rem,8vw,7rem);color:var(--beige);max-width:var(--maxw);width:100%;margin-inline:auto;}
.hero__title{font-family:var(--f-display);font-weight:400;font-size:clamp(3rem,11vw,9rem);line-height:.92;letter-spacing:-.02em;margin:.4rem 0 1.2rem;}
.hero__title .mask > span{will-change:transform;}
.hero__sub{font-size:clamp(1rem,1.5vw,1.3rem);opacity:.94;margin-bottom:1.8rem;}
.hero__dots{position:absolute;z-index:3;left:var(--pad);bottom:1.6rem;display:flex;gap:.6rem;}
.hero__dots button{width:30px;height:2px;border:none;background:rgba(251,252,247,.35);cursor:pointer;padding:0;transition:background .3s;}
.hero__dots button.is-active{background:var(--beige);}
.hero__cue{position:absolute;right:var(--pad);bottom:clamp(3.5rem,8vw,7rem);z-index:3;}
.hero__cue-line{display:block;width:1px;height:56px;background:rgba(251,252,247,.4);position:relative;overflow:hidden;}
.hero__cue-line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--beige);animation:cue 1.9s var(--ease) infinite;}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}
@media(max-width:640px){.hero__cue{display:none;}}

/* ============================================================
   OBJECT INFO
   ============================================================ */
.objinfo{padding:clamp(4rem,9vw,7.5rem) 0;}
.objinfo__inner{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;}
.objinfo__mark{width:46px;height:auto;margin-bottom:1.4rem;}
.objinfo__addr{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.05;margin:.5rem 0 1.8rem;}
.spec{border-top:1px solid var(--green-15);}
.spec__row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--green-15);font-size:.98rem;}
.spec__row dt{color:var(--green-65);}
.spec__row dd{font-weight:500;text-align:right;}
.visning{margin-top:2rem;background:var(--sand-soft);border:1px solid var(--green-12);border-radius:3px;padding:1.5rem;}
.visning .eyebrow{color:var(--terracotta);}
.visning__when{font-family:var(--f-display);font-size:1.5rem;margin-top:.3rem;}
.energy{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;padding:0 .4em;background:var(--terracotta);color:var(--beige);font-family:var(--f-eyebrow);font-size:.78rem;letter-spacing:.05em;border-radius:2px;}

/* lead + accordions */
.lead{font-family:var(--f-display);font-size:clamp(1.3rem,2.4vw,1.95rem);line-height:1.42;color:var(--green);margin-bottom:clamp(2rem,4vw,3rem);max-width:38ch;}
.accordion{border-top:1px solid var(--green-15);}
.accordion__item{border-bottom:1px solid var(--green-15);}
.accordion__head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;padding:1.4rem 0;background:none;border:none;cursor:pointer;font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.6rem);color:var(--green);text-align:left;}
.accordion__icon{position:relative;width:16px;height:16px;flex:0 0 auto;}
.accordion__icon::before,.accordion__icon::after{content:"";position:absolute;background:var(--terracotta);transition:transform .4s var(--ease),opacity .4s var(--ease);}
.accordion__icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%);}
.accordion__icon::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%);}
.accordion__item.is-open .accordion__icon::after{transform:translateX(-50%) scaleY(0);opacity:0;}
.accordion__panel{height:0;overflow:hidden;transition:height .5s var(--ease);}
.accordion__body{padding:0 0 1.8rem;max-width:60ch;}
.accordion__body h4{font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;color:var(--terracotta);margin:1.4rem 0 .4rem;}
.accordion__body h4:first-child{margin-top:0;}
.accordion__body p{font-size:1rem;}
@media(max-width:820px){.objinfo__inner{grid-template-columns:1fr;}}

/* ============================================================
   FEATURE / USP full-width bands
   ============================================================ */
.band{position:relative;height:clamp(420px,72vh,760px);overflow:hidden;display:flex;align-items:flex-end;}
.band__media{position:absolute;inset:-8% 0;will-change:transform;}
.band__media img{width:100%;height:100%;object-fit:cover;}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(33,66,47,.55),rgba(33,66,47,0) 55%);}
.band__caption{position:relative;z-index:2;padding:var(--pad);max-width:50rem;}
.band__text{font-family:var(--f-display);font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.18;color:var(--beige);}

.usp{position:relative;height:clamp(440px,68vh,680px);overflow:hidden;display:flex;align-items:center;text-align:center;}
.usp__media{position:absolute;inset:-8% 0;will-change:transform;}
.usp__media img{width:100%;height:100%;object-fit:cover;}
.usp__overlay{position:absolute;inset:0;background:var(--green-65);}
.usp__content{position:relative;z-index:2;color:var(--beige);display:flex;flex-direction:column;align-items:center;gap:1.4rem;}
.usp__title{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,5vw,3.8rem);line-height:1.05;}

/* ============================================================
   GALLERY (grid → lightbox)
   ============================================================ */
.gallery{padding:clamp(4.5rem,10vw,8rem) 0;}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:24vw;gap:clamp(.6rem,1.2vw,1.1rem);}
.g{position:relative;overflow:hidden;border-radius:2px;cursor:zoom-in;margin:0;}
.g img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.g:hover img{transform:scale(1.05);}
.g--lg{grid-column:span 2;grid-row:span 2;}
.g--tall{grid-row:span 2;}
@media(max-width:900px){.gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw;}.g--lg{grid-column:span 2;grid-row:span 1;}.g--tall{grid-row:span 2;}}
@media(max-width:560px){.gallery__grid{grid-template-columns:1fr;grid-auto-rows:64vw;}.g--lg,.g--tall{grid-column:span 1;grid-row:span 1;}}

/* ============================================================
   PLANLØSNING (slider + sticky vertical label)
   ============================================================ */
.plan{position:relative;background:var(--sand-soft);padding:clamp(4.5rem,10vw,8rem) 0;}
.plan__label{position:absolute;left:max(1rem,calc((100vw - var(--maxw))/2 - 1.2rem));top:clamp(4.5rem,10vw,8rem);writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--terracotta);position:sticky;}
.plan__inner{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;}
.plan__list{list-style:none;margin-top:2rem;}
.plan__list li{padding:.9rem 0;border-top:1px solid var(--green-15);font-size:1.05rem;}
.plan__list li:last-child{border-bottom:1px solid var(--green-15);}
.plan__slider{}
.plan__viewport{overflow:hidden;background:#fff;border:1px solid var(--green-12);border-radius:3px;}
.plan__track{display:flex;transition:transform .55s var(--ease);}
.plan__slide{flex:0 0 100%;margin:0;cursor:zoom-in;padding:clamp(1rem,3vw,2.5rem);}
.plan__slide img{width:100%;height:auto;max-height:74vh;object-fit:contain;margin-inline:auto;}
.plan__nav{display:flex;align-items:center;gap:1.4rem;margin-top:1.2rem;}
.plan__arrow{width:46px;height:46px;border:1px solid var(--green);background:none;color:var(--green);border-radius:50%;cursor:pointer;font-size:1rem;transition:background .3s var(--ease),color .3s var(--ease);}
.plan__arrow:hover{background:var(--green);color:var(--beige);}
.plan__count{font-family:var(--f-eyebrow);letter-spacing:.13em;font-size:.74rem;color:var(--green-65);}
@media(max-width:820px){.plan__inner{grid-template-columns:1fr;}.plan__label{display:none;}}

/* ============================================================
   BELIGGENHET (map + panel)
   ============================================================ */
.location{padding:clamp(4.5rem,10vw,8rem) 0;}
.location__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:stretch;}
.location__map{min-height:clamp(360px,46vw,560px);border-radius:3px;overflow:hidden;border:1px solid var(--green-12);}
.map{width:100%;height:100%;background:var(--sand);}
.leaflet-container{font-family:var(--f-body);background:var(--sand);}
.location__panel{background:var(--green);color:var(--beige);border-radius:3px;padding:clamp(2rem,4vw,3.2rem);display:flex;flex-direction:column;}
.location__panel .eyebrow{color:var(--sand);}
.location__panel .section-title{color:var(--beige);}
.location__panel p{color:var(--sand);}
.nearby{list-style:none;margin-top:auto;padding-top:1.6rem;}
.nearby li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-top:1px solid rgba(217,215,202,.22);font-size:.96rem;}
.nearby li span:first-child{color:var(--beige);}
.nearby li span:last-child{font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:var(--sand);align-self:center;white-space:nowrap;}
@media(max-width:820px){.location__inner{grid-template-columns:1fr;}}

/* ============================================================
   FAKTA
   ============================================================ */
.facts{padding:clamp(4.5rem,10vw,8rem) 0;background:var(--beige);}
.facts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--green-15);}
.fact{padding:1.4rem 1.4rem 1.4rem 0;border-bottom:1px solid var(--green-15);}
.fact dt{font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:var(--terracotta);margin-bottom:.45rem;}
.fact dd{font-size:1.06rem;}
@media(max-width:760px){.facts__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.facts__grid{grid-template-columns:1fr;}}

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{background:var(--green);color:var(--beige);padding:clamp(5rem,12vw,9rem) 0;}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;}
.contact__mark{width:46px;height:auto;margin-bottom:1.6rem;}
.contact__lead{color:var(--sand);margin-top:1rem;}
.contact__cards{display:flex;flex-direction:column;gap:1.2rem;}
.agent{border:1px solid rgba(217,215,202,.3);border-radius:3px;padding:1.6rem 1.8rem;}
.agent h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;}
.agent__role{color:var(--sand);font-size:.92rem;margin-top:.2rem;}
.agent__tel{display:inline-block;margin-top:.9rem;font-family:var(--f-eyebrow);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;border-bottom:1px solid var(--sand);padding-bottom:.2rem;}
.agent__tel:hover{color:var(--sand);}
@media(max-width:820px){.contact__inner{grid-template-columns:1fr;}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--green);color:var(--sand);padding:2.5rem 0;border-top:1px solid rgba(217,215,202,.18);}
.site-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.site-footer__logo{height:42px;width:auto;}
.site-footer__meta{text-align:right;font-size:.82rem;}
.site-footer__fine{color:rgba(217,215,202,.6);margin-top:.4rem;max-width:34rem;}
@media(max-width:640px){.site-footer__inner{flex-direction:column;align-items:flex-start;}.site-footer__meta{text-align:left;}}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:900;background:rgba(33,66,47,.95);display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox img{max-width:90%;max-height:90vh;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.lightbox__close{position:absolute;top:1.6rem;right:2rem;background:none;border:none;color:var(--beige);font-size:2.6rem;line-height:1;cursor:pointer;}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:1px solid rgba(251,252,247,.5);background:none;color:var(--beige);border-radius:50%;font-size:1.2rem;cursor:pointer;transition:background .3s,color .3s;}
.lightbox__nav:hover{background:var(--beige);color:var(--green);}
.lightbox__prev{left:3vw;}
.lightbox__next{right:3vw;}
@media(max-width:640px){.lightbox__nav{width:42px;height:42px;}.lightbox__prev{left:1rem;}.lightbox__next{right:1rem;}}

/* ============================================================
   REVEAL + reduced motion
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(26px);}
.hero__title .mask > span{transform:translateY(110%);}
body.no-motion [data-reveal]{opacity:1;transform:none;}
body.no-motion .hero__title .mask > span{transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;}
  .hero__title .mask > span{transform:none;}
  .hero__cue-line::after{animation:none;}
}