/* =========================================================
   Loci Fastigheter — statisk klon av wapps.se/demo/loci
   Typsnitt: Cabin (rubriker/UI) + Roboto (brödtext)
   ========================================================= */

:root{
  --brand:#296694;
  --brand-dark:#1f4f73;
  --ink:#000;
  --muted:#555;
  --white:#fff;
  --field-bg:#f4f4f4;
  --field-bg-focus:#ececec;
  --line:rgba(0,0,0,.12);
  --header-h:126px;
  --header-h-scrolled:86px;
  --container:1500px;
  --gutter:90px;
  --font-head:'Cabin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:32px;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:700;
  margin:0 0 20px;
  color:var(--ink);
  letter-spacing:normal;
}
h1{font-size:62px;line-height:1.24}
h2{font-size:44px;line-height:1.23}
h3{font-size:30px;line-height:1.3}
h4{font-size:18px;line-height:1.5}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
/* Sektioner som också bär .container måste sätta sin vertikala luft med
   padding-top/padding-bottom. En `padding`-kortform nollar sidopaddingen
   ovan och drar innehållet ut i skärmkanten. */

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--brand);color:#fff;padding:12px 20px;
  font-family:var(--font-head);font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--white);
  height:var(--header-h);
  display:flex;align-items:center;
  transition:height .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  height:var(--header-h-scrolled);
  box-shadow:0 1px 12px rgba(0,0,0,.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  width:100%;
}
.logo{display:block;flex:0 0 auto}
.logo img{
  height:70px;width:auto;
  transition:height .3s var(--ease);
}
.site-header.is-scrolled .logo img{height:56px}

.main-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:34px;
}
.main-nav a{
  font-family:var(--font-head);
  font-size:16px;font-weight:700;line-height:1;
  color:var(--ink);
  position:relative;
  padding:4px 0;
  display:inline-block;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;
  height:2px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Hamburger */
.nav-toggle{
  display:none;
  background:none;border:0;padding:10px;cursor:pointer;
  width:44px;height:44px;
}
.nav-toggle span{
  display:block;height:2px;width:24px;background:var(--ink);
  margin:5px auto;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Fullscreen mobile menu */
.mobile-nav{
  position:fixed;inset:0;z-index:999;
  background:rgba(20,20,20,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s var(--ease);
}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav ul{list-style:none;margin:0;padding:0;text-align:center}
.mobile-nav li{margin:0 0 22px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-nav.is-open li{opacity:1;transform:none}
.mobile-nav.is-open li:nth-child(1){transition-delay:.08s}
.mobile-nav.is-open li:nth-child(2){transition-delay:.14s}
.mobile-nav.is-open li:nth-child(3){transition-delay:.2s}
.mobile-nav.is-open li:nth-child(4){transition-delay:.26s}
.mobile-nav.is-open li:nth-child(5){transition-delay:.32s}
.mobile-nav a{
  font-family:var(--font-head);font-weight:700;
  font-size:30px;line-height:1.4;color:#fff;
}
.mobile-nav a:hover{color:#bcd4e6}

main{padding-top:var(--header-h)}
body.no-scroll{overflow:hidden}

/* ---------------------------------------------------------
   CTA — Salient "arrow-animation"
   --------------------------------------------------------- */
.cta{display:inline-block;vertical-align:top}
.cta .link_wrap{
  display:inline-block;position:relative;
  font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.5;
}
.cta--filled .link_wrap{
  background:var(--brand);
  border-radius:200px;
  padding:20px 40px;
  transition:background-color .35s var(--ease);
}
.cta--filled:hover .link_wrap{background:var(--brand-dark)}
.cta .link_text{
  display:inline-block;position:relative;
  padding:0 0 0 40px;
  color:var(--white);
}
.cta--plain .link_text{color:var(--brand)}
.cta .link_text > .text{
  display:block;
  animation:ctaArrowTextStart .45s cubic-bezier(.23,.46,.4,1) forwards;
}
.cta .line{
  height:1px;width:25px;position:absolute;left:0;top:50%;display:block;
  background:currentColor;color:inherit;
  transform-origin:left;
  transform:translateY(calc(-50% + .5px));
  animation:ctaArrowLineStart .45s cubic-bezier(.23,.46,.4,1) forwards;
}
.cta--filled .line{background:#fff}
.cta--plain .line{background:var(--brand)}
.cta .next-arrow{
  position:absolute;left:25px;top:50%;width:6px;overflow:visible;
  transform:translateY(calc(-50% + .5px));
  animation:ctaArrowSVGStart .45s cubic-bezier(.23,.46,.4,1) forwards;
}
.cta .next-arrow polyline{
  stroke:currentColor;stroke-dashoffset:140px;stroke-dasharray:140px;
  animation:ctaArrowEnd .45s cubic-bezier(.23,.46,.4,1) forwards;
}
.cta--filled .next-arrow polyline{stroke:#fff}
.cta--plain .next-arrow polyline{stroke:var(--brand)}

.cta a:hover .link_text > .text,
.cta a:focus-visible .link_text > .text{animation:ctaArrowTextEnd .45s cubic-bezier(.23,.46,.4,1) forwards}
.cta a:hover .line,
.cta a:focus-visible .line{animation:ctaArrowLineEnd .45s cubic-bezier(.23,.46,.4,1) forwards}
.cta a:hover .next-arrow,
.cta a:focus-visible .next-arrow{animation:ctaArrowSVGEnd .45s cubic-bezier(.23,.46,.4,1) forwards}
.cta a:hover .next-arrow polyline,
.cta a:focus-visible .next-arrow polyline{animation:ctaArrowStart .45s cubic-bezier(.23,.46,.4,1) forwards}

@keyframes ctaArrowSVGStart{0%{transform:translateY(calc(-50% + .5px)) translateX(0)}100%{transform:translateY(calc(-50% + .5px)) translateX(-3px)}}
@keyframes ctaArrowSVGEnd{0%{transform:translateY(calc(-50% + .5px)) translateX(-3px)}100%{transform:translateY(calc(-50% + .5px)) translateX(0)}}
@keyframes ctaArrowTextStart{0%{transform:translateX(6px)}100%{transform:translateX(0)}}
@keyframes ctaArrowTextEnd{0%{transform:translateX(0)}100%{transform:translateX(6px)}}
@keyframes ctaArrowStart{0%{stroke-dashoffset:140px;stroke-dasharray:140px}100%{stroke-dasharray:140px;stroke-dashoffset:10px}}
@keyframes ctaArrowEnd{0%{stroke-dashoffset:10px;stroke-dasharray:150px 150px}40%{opacity:1}100%{opacity:0;stroke-dashoffset:-53px;stroke-dasharray:1px 150px}}
@keyframes ctaArrowLineStart{0%{transform-origin:left;transform:scaleX(1.2) translateY(calc(-50% + .5px))}100%{transform:scaleX(1) translateY(calc(-50% + .5px))}}
@keyframes ctaArrowLineEnd{0%{transform-origin:right;transform:scaleX(1) translateY(calc(-50% + .5px))}50%{transform-origin:right;transform:scaleX(0) translateY(calc(-50% + .5px))}51%{transform-origin:left}100%{transform:scaleX(1.2) translateY(calc(-50% + .5px));transform-origin:left}}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  padding-top:calc(100vw * .15);
  padding-bottom:calc(100vw * .13);
  overflow:hidden;
  background:#d1d1ca;
  display:flex;align-items:flex-end;
}
.hero__bg{
  position:absolute;inset:-10% 0 -10% 0;
  background-image:url('../img/karlshamn-hero.jpg');
  background-image:image-set(url('../img/karlshamn-hero.webp') type('image/webp'), url('../img/karlshamn-hero.jpg') type('image/jpeg'));
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  will-change:transform;
  z-index:0;
}
.hero__overlay{position:absolute;inset:0;background:#0a0a0a;opacity:.5;z-index:1}
.hero .container{position:relative;z-index:2}
.hero__inner{max-width:660px}
/* balance jämnar ut raderna i stället för att lämna ett ensamt ord sist.
   Webbläsare som inte kan det bryter som vanligt — rubriken ryms ändå. */
.hero h1{color:var(--white);margin:0 0 30px;max-width:18ch;text-wrap:balance}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---------------------------------------------------------
   Om-sektionen
   --------------------------------------------------------- */
.about{
  padding-top:calc(100vw * .06);
  padding-bottom:calc(100vw * .06);
}
.about__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;
}
.about__body{max-width:100%;padding:clamp(12px,calc((100vw - 180px) * .02),30px) 0}
.about__media{
  min-height:300px;align-self:stretch;
  background-image:url('../img/pilvagen-8/pilvagen-8-om.jpg');
  background-image:image-set(url('../img/pilvagen-8/pilvagen-8-om.webp') type('image/webp'), url('../img/pilvagen-8/pilvagen-8-om.jpg') type('image/jpeg'));
  background-size:cover;background-position:center center;
  overflow:hidden;
}
.about h2{color:var(--brand);max-width:450px}
.about__copy{max-width:500px}
.about__copy p{margin:0 0 27px}
.about__copy p:last-of-type{margin-bottom:0}
.about__cta{margin-top:27px}
/* Linjen och citatet delar bredd med flit – de läses som ett block.
   Ändras den ena måste den andra följa med. 360px är satt så citatet
   ryms på två rader i stället för att lämna "hyresgäster." ensam. */
.about__rule{border:0;border-top:1px solid var(--line);margin:53px 0 45px;width:360px;max-width:100%;margin-right:auto}

.testimonial{margin:0;max-width:360px}
.testimonial blockquote{margin:0}
.testimonial p{
  font-family:var(--font-head);
  font-size:18px;line-height:30px;color:var(--ink);
  margin:0 0 22px;
}
.testimonial__person{display:flex;align-items:center;gap:16px}
.testimonial__name{
  font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.3;display:block;
}
.testimonial__title{
  font-family:var(--font-head);font-weight:700;font-size:14px;line-height:1.3;
  color:var(--muted);display:block;
}

/* ---------------------------------------------------------
   Fastigheter
   --------------------------------------------------------- */
.properties__head{padding-bottom:5%;text-align:center}
.properties__head h2{color:var(--brand);margin:0 auto;max-width:50%}

.properties__grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  padding:0 20px;
}
.property-card{
  position:relative;display:flex;flex-wrap:wrap;
  min-height:500px;padding:11%;overflow:hidden;
  transition:transform .65s cubic-bezier(.05,.2,.1,1),box-shadow .65s cubic-bezier(.05,.2,.1,1);
}
.property-card__bg{
  position:absolute;top:0;left:0;height:100.2%;width:100.2%;
  background-image:url('../img/fastighet.jpg');
  background-image:image-set(url('../img/fastighet.webp') type('image/webp'), url('../img/fastighet.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;
  transform:scale(1);
  transition:transform 1s ease;
  z-index:1;
}
/* Kort med egen bild. Standardbilden ovan ligger kvar på de objekt som
   ännu inte har fotograferats. */
.property-card--pilvagen-6 .property-card__bg{
  background-image:url('../img/pilvagen-6/pilvagen-6-card.jpg');
  background-image:image-set(url('../img/pilvagen-6/pilvagen-6-card.webp') type('image/webp'), url('../img/pilvagen-6/pilvagen-6-card.jpg') type('image/jpeg'));
}
.property-card--pilvagen-8 .property-card__bg{
  background-image:url('../img/pilvagen-8/pilvagen-8-card.jpg');
  background-image:image-set(url('../img/pilvagen-8/pilvagen-8-card.webp') type('image/webp'), url('../img/pilvagen-8/pilvagen-8-card.jpg') type('image/jpeg'));
}
.property-card--fabriksvagen-33 .property-card__bg{
  background-image:url('../img/fabriksvagen-33/fabriksvagen-33-card.jpg');
  background-image:image-set(url('../img/fabriksvagen-33/fabriksvagen-33-card.webp') type('image/webp'), url('../img/fabriksvagen-33/fabriksvagen-33-card.jpg') type('image/jpeg'));
}
.property-card--ostersjovagen-13-27 .property-card__bg{
  background-image:url('../img/ostersjovagen-13-27/ostersjovagen-13-27-card.jpg');
  background-image:image-set(url('../img/ostersjovagen-13-27/ostersjovagen-13-27-card.webp') type('image/webp'), url('../img/ostersjovagen-13-27/ostersjovagen-13-27-card.jpg') type('image/jpeg'));
}
.property-card--solvesborgsvagen-34 .property-card__bg{
  background-image:url('../img/solvesborgsvagen-34/solvesborgsvagen-34-card.jpg');
  background-image:image-set(url('../img/solvesborgsvagen-34/solvesborgsvagen-34-card.webp') type('image/webp'), url('../img/solvesborgsvagen-34/solvesborgsvagen-34-card.jpg') type('image/jpeg'));
}
.property-card__bg::before,
.property-card__bg::after{
  position:absolute;bottom:0;left:0;width:100%;height:85%;
  display:block;z-index:10;content:'';
  background:linear-gradient(to bottom,rgba(15,15,15,0),rgba(15,15,15,.75) 100%);
  transition:opacity .65s cubic-bezier(.05,.2,.1,1);
}
.property-card__bg::after{opacity:0}
.property-card__inner{
  position:relative;z-index:10;width:100%;align-self:flex-end;
  color:#fff;text-align:left;
}
.property-card__inner h2,
.property-card__inner h3{color:#fff;margin:0;font-size:25px;line-height:1.25}
.property-card__heading{
  transition:opacity .65s cubic-bezier(.05,.2,.1,1),transform .65s cubic-bezier(.05,.2,.1,1);
}
.property-card__desc{
  color:#fff;line-height:1.5em;max-width:100%;
  opacity:0;position:absolute;bottom:0;left:0;margin-top:10px;
  transform:translateY(20px);
  transition:opacity .18s cubic-bezier(.05,.2,.1,1),transform .18s cubic-bezier(.05,.2,.1,1);
  font-size:16px;
}
/* Ledigt objekt: pillern ligger över bilden, ovanför gradienten men under
   klickytan så hela kortet fortfarande är en enda länk. */
.property-card__badge{
  position:absolute;top:22px;left:22px;z-index:15;
  display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:8px 16px 8px 13px;
  background:var(--white);border-radius:200px;
  font-family:var(--font-head);font-weight:700;
  font-size:13px;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);
  box-shadow:0 6px 18px rgba(10,25,40,.28);
  transition:transform .65s cubic-bezier(.05,.2,.1,1);
}
.property-card__dot{
  width:8px;height:8px;border-radius:50%;
  background:#2e9e5b;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(46,158,91,.55);
  animation:vacant-pulse 2.4s ease-out infinite;
}
@keyframes vacant-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,158,91,.55)}
  70%{box-shadow:0 0 0 7px rgba(46,158,91,0)}
  100%{box-shadow:0 0 0 0 rgba(46,158,91,0)}
}
.property-card.is-vacant:hover .property-card__badge,
.property-card.is-vacant:focus-within .property-card__badge{transform:translateY(-3px)}

.property-card__link{position:absolute;inset:0;z-index:20}
.property-card__link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.property-card:hover,
.property-card:focus-within{
  transform:translateY(-10px);
  box-shadow:0 25px 55px rgba(0,0,0,.22);
}
.property-card:hover .property-card__bg,
.property-card:focus-within .property-card__bg{
  transform:scale(1.2);
  transition:transform 9s cubic-bezier(.1,.2,.7,1);
}
.property-card:hover .property-card__bg::before,
.property-card:focus-within .property-card__bg::before{opacity:0}
.property-card:hover .property-card__bg::after,
.property-card:focus-within .property-card__bg::after{opacity:1}
.property-card:hover .property-card__heading,
.property-card:focus-within .property-card__heading{transform:translateY(-60px)}
.property-card:hover .property-card__desc,
.property-card:focus-within .property-card__desc{
  opacity:1;transform:translateY(0);
  transition:opacity .65s cubic-bezier(.05,.2,.1,1) .15s,transform .65s cubic-bezier(.05,.2,.1,1) .15s;
}

/* ---------------------------------------------------------
   Sidhuvud för undersidor
   --------------------------------------------------------- */
.page-head{padding-top:40px}
.page-head h1{margin:0 0 24px}
.page-head .lead{max-width:64ch;color:var(--muted)}

/* ---------------------------------------------------------
   Formulär
   --------------------------------------------------------- */
.form-section{padding:0 0 120px}
.form-section h2{margin:0 0 47px}

.gform{margin:0}
.form-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px 26px;
}
.field{display:flex;flex-direction:column;grid-column:span 3}
.field--third{grid-column:span 2}
.field--full{grid-column:1 / -1}

.field > label{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.field__hint{font-size:16px;line-height:1.5;color:var(--ink);margin:16px 0 30px}
.req{color:#b3261e;margin-left:2px}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  color:var(--ink);
  background:var(--field-bg);
  border:1px solid transparent;
  border-radius:4px;
  padding:9px 14px;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{height:192px;min-height:120px;resize:vertical;line-height:1.6;padding:12px 14px}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23444' stroke-width='1.8' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:44px;
}
.field input::placeholder,
.field textarea::placeholder{color:#888;opacity:1}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;background:var(--field-bg-focus);
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(41,102,148,.15);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12);
}

.char-count{font-size:14px;line-height:1.4;color:var(--muted);margin:8px 0 27px}

.consent{
  grid-column:1 / -1;
  display:flex;align-items:flex-start;gap:10px;
  margin-top:22px;
}
.consent input[type="checkbox"]{
  width:15px;height:15px;margin:7px 0 0;flex:0 0 auto;accent-color:var(--brand);
}
.consent label{
  font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.5;
  color:var(--brand);
}

.field-error{
  display:block;font-family:var(--font-body);font-size:14px;line-height:1.4;
  color:#b3261e;margin-top:6px;
}

.form-actions{grid-column:1 / -1;margin-top:6px}
.btn{
  display:inline-block;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.5;
  color:#fff;background:var(--brand);
  border-radius:200px;padding:14px 22px;
  transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(41,102,148,.28)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}

.form-status{
  grid-column:1 / -1;
  margin-top:20px;padding:16px 20px;border-radius:6px;
  font-size:16px;line-height:1.6;
}
.form-status[hidden]{display:none}
.form-status--error{background:#fdecea;color:#8c1d18;border:1px solid #f2b8b5}
.form-status--ok{background:#e8f2e8;color:#1e4620;border:1px solid #b7d7b9}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
  background:var(--brand);
  color:var(--white);
  padding:70px 0 80px;
  font-size:18px;line-height:32px;
}
.site-footer h4{color:var(--white);font-size:18px;margin:0 0 26px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}
.site-footer a{color:var(--white)}
.site-footer a:hover{text-decoration:underline}
.site-footer p{margin:0}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 8px}

.footer-bottom{
  margin-top:56px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
}

/* ---------------------------------------------------------
   Fastighetssida
   --------------------------------------------------------- */
.property-head{padding-top:40px}

.breadcrumb{margin:0 0 22px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  font-family:var(--font-head);font-size:15px;line-height:1.4}
.breadcrumb li+li::before{content:'/';margin-right:8px;color:#aaa}
.breadcrumb a{color:var(--brand);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current]{color:var(--muted)}

.property-status{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 14px;padding:8px 16px 8px 13px;
  background:rgba(46,158,91,.12);border-radius:200px;
  font-family:var(--font-head);font-weight:700;
  font-size:13px;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  color:#1d6b3d;
}
.property-status__dot{width:8px;height:8px;border-radius:50%;background:#2e9e5b;flex:0 0 auto}
/* Uthyrd: samma pill, neutral färg. Texten bär betydelsen, inte bara färgen. */
.property-status--taken{background:rgba(0,0,0,.07);color:#555}
.property-status--taken .property-status__dot{background:#999}

.property-intro{padding-top:14px}
/* Bilden i introt och faktarutan under delar spaltmall, så deras kanter
   ligger i linje hela vägen ner. Ändras den ena måste den andra följa med. */
.property-intro__grid,
.property-body__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:60px;
}
.property-intro__grid{align-items:center}
.property-intro h1{margin:0 0 18px}
.property-intro__lead{font-size:20px;line-height:34px;color:var(--muted);margin:0}
.property-intro__media{margin:0;overflow:hidden;border-radius:4px}
.property-intro__media img{
  width:100%;height:100%;aspect-ratio:4/3;
  object-fit:cover;object-position:center 72%;
}

/* Bildgalleri på fastighetssidan. Byggt för 1–4 bilder: den stora bilden
   ligger överst och resten som miniatyrer i en rad under. Finns bara en bild
   faller raden bort av sig själv och galleriet ser ut som förut. Alla ytor
   öppnar samma lightbox, så det finns bara ett sätt att se bilden större. */
.property-gallery{margin:0;display:flex;flex-direction:column;gap:10px}
.property-gallery__frame{
  position:relative;display:block;width:100%;
  margin:0;padding:0;border:0;overflow:hidden;
  background:#e9edf1;border-radius:4px;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.property-gallery__frame img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 55%;
  transition:transform .8s var(--ease);
}
.property-gallery__stage img{aspect-ratio:4/3}
.property-gallery__frame:hover img,
.property-gallery__frame:focus-visible img{transform:scale(1.045)}

/* Pillen är galleriets enda synliga löfte om att bilden går att öppna.
   Med flera bilder räknar den dem ("4 bilder"), med en enda säger den
   bara "Visa större" — ett antal på ett är ingen upplysning. */
.property-gallery__hint{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:200px;
  background:rgba(12,18,24,.6);color:#fff;
  font-family:var(--font-head);font-weight:700;
  font-size:13px;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  transition:background .45s var(--ease);
}
.property-gallery__hint svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.property-gallery__stage:hover .property-gallery__hint,
.property-gallery__stage:focus-visible .property-gallery__hint{background:var(--brand)}

.property-gallery__thumbs{
  display:flex;gap:10px;margin:0;padding:0;list-style:none;
}
.property-gallery__thumbs li{flex:1 1 0;min-width:0}
.property-gallery__thumb{height:clamp(84px,9.5vw,138px)}

/* ---------------------------------------------------------
   Lightbox
   --------------------------------------------------------- */
/* Byggs av main.js först när en bild öppnas. Markupen i sidan är alltså
   fullt begriplig utan JavaScript — då är bilderna bara bilder. */
.lightbox{
  /* Över sidhuvud (1000) och cookie-bannern (1200) — annars ligger de kvar
     ovanpå bilden när den öppnas. */
  position:fixed;inset:0;z-index:1500;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(8,12,16,.95);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
/* Webbläsarens egna [hidden]{display:none} ligger i UA-stilarket och förlorar
   mot display:flex ovan, hur specifik den än är. Utan den här raden blir
   box.hidden = true verkningslöst och en genomskinlig ruta ligger kvar över
   hela sidan efter att lightboxen stängts och äter varje klick.
   pointer-events täcker de 350 ms som uttoningen håller på. */
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__figure{
  margin:0;display:flex;flex-direction:column;gap:16px;
  max-width:100%;max-height:100%;
}
.lightbox__figure picture{display:contents}
.lightbox__figure img{
  max-width:100%;max-height:calc(100vh - 190px);
  width:auto;height:auto;margin:0 auto;
  object-fit:contain;border-radius:4px;
}
.lightbox__caption{
  display:flex;align-items:baseline;justify-content:center;gap:14px;
  flex-wrap:wrap;max-width:80ch;margin:0 auto;
  color:rgba(255,255,255,.78);font-size:15px;line-height:1.5;text-align:center;
}
.lightbox__count{
  font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:13px;letter-spacing:.06em;flex:0 0 auto;
}
.lightbox__btn{
  position:absolute;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.lightbox__btn:hover{background:rgba(255,255,255,.24)}
.lightbox__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lightbox__close{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lightbox__nav{top:50%;margin-top:-26px}
.lightbox__nav--prev{left:clamp(10px,2.5vw,28px)}
.lightbox__nav--next{right:clamp(10px,2.5vw,28px)}
.lightbox__nav--prev:hover{transform:translateX(-3px)}
.lightbox__nav--next:hover{transform:translateX(3px)}

.property-body{padding-top:64px;padding-bottom:110px}
.property-body__grid{align-items:start}
.property-body h2{font-size:28px;line-height:1.3;color:var(--brand);margin:0 0 18px}
.property-body__text p{max-width:60ch}
.property-body__cta{margin-top:34px}

/* Delytorna per lokal, när en adress rymmer flera. Samma ljusa ruta som
   faktarutan, men i två spalter under brödtexten. */
.property-units{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  margin:32px 0 26px;
}
.property-unit{
  background:#f4f6f8;border-left:3px solid var(--brand);border-radius:4px;
  padding:22px 24px;
}
.property-unit h3{font-size:18px;line-height:1.4;margin:0 0 14px;color:var(--brand)}
.property-unit dl{margin:0}
.property-unit dl > div{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(0,0,0,.08);
}
.property-unit dl > div:last-child{border-bottom:0;padding-bottom:0}
.property-unit dt{font-size:15px;line-height:1.45}
.property-unit dd{
  margin:0;font-family:var(--font-head);font-weight:700;
  font-size:15px;line-height:1.45;white-space:nowrap;
}
.property-unit dl > div:last-child dt,
.property-unit dl > div:last-child dd{color:var(--brand)}

.property-facts{
  background:#f4f6f8;border-left:3px solid var(--brand);border-radius:4px;
  padding:28px 30px;
}
.property-facts h2{font-size:20px;margin:0 0 18px}
.property-facts dl{margin:0}
.property-facts dl > div{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid rgba(0,0,0,.08);
}
.property-facts dl > div:last-child{border-bottom:0;padding-bottom:0}
.property-facts dt{font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.5}
.property-facts dd{margin:0;font-size:16px;line-height:1.5;color:var(--muted);text-align:right}

@media (max-width:999px){
  .property-intro__grid,
  .property-body__grid{grid-template-columns:1fr;gap:36px}
  .property-intro__lead{max-width:none}
  .property-intro__media img{aspect-ratio:16/10}
  .property-gallery__stage img{aspect-ratio:16/10}
  .property-body{padding-top:48px;padding-bottom:80px}
}
@media (max-width:690px){
  .property-head{padding-top:28px}
  .property-intro__lead{font-size:18px;line-height:30px}
  .property-intro__media img{aspect-ratio:4/3}
  .property-gallery__stage img{aspect-ratio:4/3}
  .property-gallery__hint{right:10px;bottom:10px;font-size:12px;padding:8px 13px}
  .property-body{padding-top:36px;padding-bottom:70px}
  .property-facts{padding:22px 22px}
  .property-facts dl > div{flex-direction:column;gap:2px}
  .property-units{grid-template-columns:1fr;gap:16px}
  .property-facts dd{text-align:left}
}

/* ---------------------------------------------------------
   Juridisk text (integritetspolicy)
   --------------------------------------------------------- */
/* Artikeln följer containern så texten börjar i linje med h1; radlängden
   hålls nere på barnen i stället för att centrera hela blocket. */
.legal{max-width:var(--container);margin:0 auto;padding-bottom:110px}
.legal > *{max-width:820px}
.legal__lead{font-size:20px;line-height:34px}
.legal h2{font-size:28px;line-height:1.3;margin:52px 0 16px;color:var(--brand)}
.legal h3{font-size:20px;line-height:1.35;margin:30px 0 10px}
.legal p{margin:0 0 18px}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal a{text-decoration:underline}
.legal__toc{
  margin:36px 0 8px;padding:26px 30px;
  background:#f4f6f8;border-left:3px solid var(--brand);border-radius:4px;
}
.legal__toc ol{margin:0;padding-left:20px}
.legal__toc li{margin:0 0 8px;font-size:17px}
.legal__toc li:last-child{margin-bottom:0}
.legal__updated{margin-top:48px;font-size:16px;color:var(--muted)}

/* ---------------------------------------------------------
   Cookie-samtycke
   --------------------------------------------------------- */
.footer-legal{margin-top:26px!important;font-size:16px;line-height:30px}
.footer-legal a{text-decoration:underline;text-underline-offset:2px}

.cookie-consent{
  position:fixed;left:50%;bottom:clamp(16px,3vw,28px);
  transform:translateX(-50%);
  z-index:1200;
  width:min(680px,calc(100vw - 32px));
  background:var(--white);
  border:1px solid rgba(0,0,0,.1);
  border-radius:10px;
  box-shadow:0 20px 60px rgba(10,25,40,.28);
  padding:22px 26px;
  animation:cc-in .4s var(--ease) both;
}
@keyframes cc-in{
  from{opacity:0;transform:translate(-50%,16px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.cookie-consent__inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookie-consent__text{
  flex:1 1 300px;
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  color:#333;margin:0;
}
.cookie-consent__text a{color:var(--brand);text-decoration:underline}
.cookie-consent__actions{display:flex;gap:10px;flex-shrink:0}
.cookie-consent__btn{padding:11px 20px;font-size:14px;white-space:nowrap}
.btn-ghost{
  background:transparent;color:var(--brand);
  box-shadow:inset 0 0 0 1px rgba(41,102,148,.4);
}
.btn-ghost:hover{
  background:rgba(41,102,148,.07);color:var(--brand-dark);
  box-shadow:inset 0 0 0 1px rgba(41,102,148,.6);
}
/* display:flex på klassen slår ut webbläsarens [hidden]-regel, så panelen
   skulle annars stå öppen trots att JS sätter options.hidden = true. */
.cookie-consent__options[hidden]{display:none}
.cookie-consent__options{
  width:100%;display:flex;flex-direction:column;gap:14px;
  margin-top:4px;padding-top:18px;
  border-top:1px solid rgba(0,0,0,.1);
}
.cc-opt{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  font-family:var(--font-body);font-size:14px;line-height:1.5;color:#555;
  cursor:pointer;margin:0;
}
.cc-opt strong{
  font-family:var(--font-head);color:var(--ink);display:block;margin-bottom:2px;
}
.cc-opt input{
  flex-shrink:0;width:18px;height:18px;margin-top:2px;
  accent-color:var(--brand);cursor:pointer;
}
.cc-opt input:disabled{cursor:not-allowed;opacity:.6}

@media (max-width:690px){
  .cookie-consent{padding:18px 20px;width:calc(100vw - 24px);bottom:12px}
  .cookie-consent__actions{width:100%;flex-wrap:wrap;gap:8px}
  .cookie-consent__btn{flex:1 1 auto;padding:11px 14px}
  .legal{padding-bottom:70px}
  .legal__lead{font-size:18px;line-height:30px}
  .legal h2{font-size:23px;margin:40px 0 14px}
  .legal h3{font-size:18px}
  .legal__toc{padding:20px 22px}
}

/* ---------------------------------------------------------
   Reveal-animationer
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="50"]{transition-delay:.05s}
.reveal[data-delay="100"]{transition-delay:.1s}
.reveal[data-delay="150"]{transition-delay:.15s}
.reveal[data-delay="800"]{transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  .property-card__dot{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__bg{transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------
   Responsivt
   --------------------------------------------------------- */
@media (max-width:1300px){
  :root{--gutter:60px}
  h1{font-size:52px}
  h2{font-size:38px}
  .property-card__inner h2,.property-card__inner h3{font-size:21px}
  .about__grid{gap:60px}
}

@media (max-width:1099px){
  .properties__grid{grid-template-columns:repeat(2,1fr)}
  .property-card{min-height:420px}
  .hero__inner{max-width:75%}
}

@media (max-width:999px){
  :root{--header-h:93px;--header-h-scrolled:93px;--gutter:40px}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .logo img{height:56px}
  .site-header.is-scrolled .logo img{height:56px}
  h1{font-size:42px}
  h2{font-size:32px}
  .hero{padding-top:calc(100vw * .28);padding-bottom:calc(100vw * .2)}
  .hero__inner{max-width:100%}
  .about{padding-top:70px;padding-bottom:70px}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__media{min-height:340px}
  .about h2{max-width:none}
  .about__rule,.testimonial,.about__copy{max-width:100%;width:100%}
  .properties__head h2{max-width:100%}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .field,.field--third{grid-column:span 1}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:690px){
  :root{--gutter:24px}
  body{font-size:17px;line-height:30px}
  h1{font-size:34px}
  h2{font-size:27px}
  .hero{padding-top:120px;padding-bottom:70px}
  .hero__bg{
    background-image:url('../img/karlshamn-hero-sm.jpg');
    background-image:image-set(url('../img/karlshamn-hero-sm.webp') type('image/webp'), url('../img/karlshamn-hero-sm.jpg') type('image/jpeg'));
  }
  .hero__actions{flex-direction:column;align-items:stretch;gap:14px}
  .cta{display:block}
  .cta--filled .link_wrap{display:block;text-align:left;padding:18px 30px}
  .properties__grid{grid-template-columns:1fr;padding:0}
  .property-card__desc{max-width:100%}
  .property-card{min-height:360px;padding:32px}
  .property-card__badge{top:18px;left:18px;font-size:12px;padding:7px 14px 7px 11px}
  .property-card__inner h2,.property-card__inner h3{font-size:24px}
  .property-card__heading,
  .property-card:hover .property-card__heading,
  .property-card:focus-within .property-card__heading{transform:none}
  .property-card__desc{
    position:static;opacity:1;transform:none;
    margin:10px 0 0;font-size:16px;line-height:1.5;
  }
  .property-card__bg::after{opacity:1}
  .property-card__bg::before{opacity:0}
  .form-grid{grid-template-columns:1fr}
  .field input[type="text"],.field input[type="email"],
  .field input[type="tel"],.field select{padding:13px 14px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .site-footer{padding:56px 0 60px}
  .mobile-nav a{font-size:24px}
  .form-section{padding:24px 0 80px}
  .page-head{padding-top:40px}
  /* Pilarna flyttar ner under bilden i stället för att ligga över den —
     på en liten skärm äter de annars upp själva motivet. */
  .lightbox{padding:64px 16px 96px}
  .lightbox__figure img{max-height:calc(100vh - 260px)}
  .lightbox__btn{width:46px;height:46px}
  .lightbox__nav{top:auto;bottom:24px;margin-top:0}
  .lightbox__nav--prev{left:calc(50% - 58px)}
  .lightbox__nav--next{right:calc(50% - 58px)}
}