/* =========================================================================
   Skedevi — style.css
   Inga externa beroenden. Systemfonter, se docs/beslut.md punkt 7.
   ========================================================================= */

:root{
  --paper:      #faf7f1;
  --paper-tint: #f1ece2;
  --ink:        #22271f;
  --ink-soft:   #5b635a;
  --green:      #33463a;
  --green-dp:   #26352b;
  --green-lt:   #6d8574;
  --barn:       #8c4436;
  --line:       rgba(34,39,31,.13);
  --line-lt:    rgba(250,247,241,.22);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1160px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --r: 3px;
  --shadow: 0 1px 2px rgba(34,39,31,.05), 0 8px 28px -12px rgba(34,39,31,.22);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.14; margin:0; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.sr{
  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{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:var(--paper); padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--green-lt); outline-offset:3px; border-radius:2px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------------------------------------------------------------- nav --- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__brand{ text-decoration:none; display:flex; flex-direction:column; justify-content:center; line-height:1.1; margin-right:auto; min-height:44px; }
.nav__brand-name{ font-family:var(--serif); font-size:1.3rem; color:var(--paper); transition:color .35s; }
.nav__brand-sub{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(250,247,241,.66); transition:color .35s;
}
.nav__menu{ display:flex; align-items:center; gap:1.75rem; }
.nav__menu a{
  text-decoration:none; font-size:.86rem; letter-spacing:.03em;
  color:rgba(250,247,241,.88); transition:color .25s; white-space:nowrap;
}
.nav__menu a:hover{ color:#fff; }
.nav__cta{
  border:1px solid var(--line-lt); padding:.5rem 1.05rem; border-radius:var(--r);
  transition:background .25s, border-color .25s, color .25s;
}
.nav__cta:hover{ background:var(--paper); border-color:var(--paper); color:var(--green)!important; }
.nav__toggle{
  /* 44x44 minimum — knappen låg på 40x41 och är den viktigaste träffytan på
     telefon, eftersom hela menyn sitter bakom den. */
  display:none; background:none; border:0; cursor:pointer; padding:.75rem; margin:-.75rem;
  min-width:44px; min-height:44px;
}
.nav__bars{ display:block; width:24px; }
.nav__bars i{
  display:block; height:1.5px; background:var(--paper); margin:5px 0;
  transition:transform .3s, opacity .3s, background .35s;
}

/* fäst läge efter scroll */
.nav.is-stuck{ background:var(--paper); border-bottom-color:var(--line); box-shadow:0 1px 20px -8px rgba(34,39,31,.3); }
.nav.is-stuck .nav__brand-name{ color:var(--ink); }
.nav.is-stuck .nav__brand-sub{ color:var(--ink-soft); }
.nav.is-stuck .nav__menu a{ color:var(--ink-soft); }
.nav.is-stuck .nav__menu a:hover{ color:var(--ink); }
.nav.is-stuck .nav__cta{ color:var(--green); border-color:rgba(51,70,58,.4); }
.nav.is-stuck .nav__cta:hover{ background:var(--green); border-color:var(--green); color:var(--paper)!important; }
.nav.is-stuck .nav__bars i{ background:var(--ink); }

@media (max-width:860px){
  .nav__toggle{ display:block; }
  .nav__menu{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.25rem; display:none; box-shadow:var(--shadow);
  }
  .nav__menu.is-open{ display:flex; }
  .nav__menu a{ color:var(--ink)!important; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__cta{ border:0; margin-top:.75rem; text-align:center; background:var(--green); color:var(--paper)!important; padding:.9rem; }
  .nav__cta:hover{ background:var(--green-dp); color:var(--paper)!important; }
  .nav.is-open .nav__bars i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav__bars i:nth-child(2){ opacity:0; }
  .nav.is-open .nav__bars i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav.is-open .nav__bars i{ background:var(--ink); }
}

/* --------------------------------------------------------------- hero --- */
.hero{ position:relative; min-height:min(94svh,880px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; }
/* Drönarfilmen ligger exakt ovanpå stillbilden och tonas in när den börjat
   spela (klassen sätts av script.js). Misslyckas den, eller får den aldrig
   starta, ligger stillbilden kvar och inget syns hända. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  opacity:0; transition:opacity .9s ease;
}
.hero__video.is-playing{ opacity:1; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,28,22,.62) 0%, rgba(21,28,22,.18) 32%, rgba(21,28,22,.5) 68%, rgba(21,28,22,.86) 100%),
    linear-gradient(90deg, rgba(21,28,22,.5) 0%, rgba(21,28,22,0) 65%);
}
.hero__body{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:9rem var(--pad) 2rem; color:var(--paper);
}
.hero__eyebrow{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(250,247,241,.8); margin:0 0 1.35rem;
}
.hero__title{ font-size:clamp(2.5rem,7.2vw,4.6rem); margin:0 0 1.15rem; text-wrap:balance; }
.hero__lead{ max-width:34rem; font-size:clamp(1.02rem,1.6vw,1.2rem); color:rgba(250,247,241,.92); margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__facts{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) 2.75rem; display:flex; flex-wrap:wrap; gap:2.5rem;
  color:var(--paper);
}
.hero__facts div{ display:flex; flex-direction:column; }
.hero__facts strong{ font-family:var(--serif); font-size:1.7rem; font-weight:400; line-height:1.1; }
.hero__facts span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,247,241,.68); margin-top:.2rem; }

/* ------------------------------------------------------------ knappar --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.92rem 1.7rem; border-radius:var(--r); text-decoration:none; cursor:pointer;
  font-size:.9rem; letter-spacing:.05em; border:1px solid transparent;
  transition:background .22s, color .22s, border-color .22s, transform .22s;
  font-family:var(--sans);
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--green); color:var(--paper); }
.btn--solid:hover{ background:var(--green-dp); }
.btn--ghost{ border-color:var(--line-lt); color:var(--paper); backdrop-filter:blur(2px); }
.btn--ghost:hover{ background:rgba(250,247,241,.13); }
.btn--outline{ border-color:rgba(51,70,58,.35); color:var(--green); background:transparent; }
.btn--outline:hover{ background:var(--green); border-color:var(--green); color:var(--paper); }
.btn--full{ width:100%; }
.sec--dark .btn--solid{ background:var(--paper); color:var(--green); }
.sec--dark .btn--solid:hover{ background:#fff; }

/* ------------------------------------------------------------ sektion --- */
.sec{ padding:clamp(4rem,9vw,7.5rem) 0; }
.sec--tint{ background:var(--paper-tint); }
.sec--dark{ background:var(--green); color:rgba(250,247,241,.9); }
.sec--dark h2,.sec--dark h3{ color:var(--paper); }
.sec--dark .eyebrow{ color:var(--green-lt); }

.eyebrow{
  font-size:.71rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--barn); margin:0 0 .9rem;
}
.h2{ font-size:clamp(1.95rem,4.2vw,3rem); margin:0 0 1.4rem; text-wrap:balance; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--ink-soft); }
.sec--dark .lead{ color:rgba(250,247,241,.82); }
.wide{ max-width:44rem; }
.muted{ color:var(--ink-soft); }
.sec--dark .muted{ color:rgba(250,247,241,.7); }
.small{ font-size:.9rem; }
.note{
  margin:2.75rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:.92rem; max-width:44rem;
}

/* -------------------------------------------------- platsen: fyra stopp --- */
.stops{
  display:grid; gap:1.25rem; margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  counter-reset:stop;
}
.stop{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:1.9rem 1.5rem 1.6rem;
}
.stop::before{
  counter-increment:stop; content:counter(stop);
  position:absolute; top:1.1rem; right:1.25rem;
  font-family:var(--serif); font-size:.95rem; color:var(--line);
}
/* streckad linje mellan stoppen på breda skärmar */
.stop:not(:last-child)::after{
  content:""; position:absolute; top:3.3rem; right:-1.25rem; width:1.25rem;
  border-top:1px dashed rgba(34,39,31,.28);
}
@media (max-width:1000px){ .stop:not(:last-child)::after{ display:none; } }
.stop--ours{ border-color:rgba(51,70,58,.34); box-shadow:var(--shadow); }
.stop--ours::before{ color:var(--green-lt); }
.stop__mark{ display:block; width:38px; height:38px; margin-bottom:1.15rem; color:var(--green); }
.stop__mark svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.stop h3{ font-size:1.24rem; margin-bottom:.45rem; }
.stop p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* --------------------------------------------------------------- split --- */
.split{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; grid-template-columns:1fr; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; align-items:center; }
  .split--rev .split__text{ order:2; }
  .split--form{ align-items:start; }
}
.split__media{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.fig{ margin:0; overflow:hidden; border-radius:var(--r); background:var(--paper-tint); }
.fig img{ width:100%; height:100%; object-fit:cover; }
.fig--tall{ grid-column:1 / -1; aspect-ratio:16/10; }
.fig:not(.fig--tall){ aspect-ratio:1/1; }
.split--rev .split__media,
.split--form .split__media{ grid-template-columns:1fr; }
.fig--placeholder{ aspect-ratio:4/3; }

.ph{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.4rem; padding:2rem;
  border:1px dashed var(--line-lt); border-radius:var(--r);
  background:rgba(250,247,241,.05); color:rgba(250,247,241,.82);
}
.ph svg{ width:64px; height:48px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.6; margin-bottom:.5rem; }
.ph p{ margin:0; font-size:.9rem; max-width:24rem; }
.ph strong{ font-family:var(--serif); font-weight:400; font-size:1.05rem; }

.ticks{ margin:1.6rem 0; display:grid; gap:.6rem; }
.ticks li{ position:relative; padding-left:1.7rem; font-size:.95rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.38rem;
  border-left:1.5px solid var(--green-lt); border-bottom:1.5px solid var(--green-lt);
  transform:rotate(-45deg);
}
.ticks--light li::before{ border-color:var(--paper); opacity:.75; }

/* --------------------------------------------------------------- kort --- */
.cards{
  display:grid; gap:1.25rem; margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
.card{
  display:flex; flex-direction:column; padding:2rem 1.75rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
}
.card--lead{ border-color:rgba(51,70,58,.4); box-shadow:var(--shadow); }
.card--soft{ background:transparent; }
.card__kicker{
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--barn); margin:0 0 .8rem;
}
.card--soft .card__kicker,.card:not(.card--lead) .card__kicker{ color:var(--ink-soft); }
.card--lead .card__kicker{ color:var(--barn); }
.card__title{ font-size:1.4rem; margin-bottom:1rem; }
.card__price{ display:flex; flex-direction:column; margin:0 0 1.4rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.card__price strong{ font-family:var(--serif); font-weight:400; font-size:2.05rem; line-height:1.1; }
.card__price span{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem; }
.card__list{ display:grid; gap:.55rem; margin:0 0 1.9rem; font-size:.92rem; color:var(--ink-soft); }
.card__list li{ position:relative; padding-left:1.1rem; }
.card__list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--green-lt); }
.card .btn{ margin-top:auto; }

/* ------------------------------------------------------------ galleri --- */
.gallery{
  margin-top:3rem; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.gallery__item{
  padding:0; border:0; cursor:pointer; background:var(--paper-tint);
  overflow:hidden; border-radius:var(--r); aspect-ratio:4/3;
}
.gallery__item--wide{ grid-column:span 2; aspect-ratio:auto; }
@media (max-width:560px){ .gallery__item--wide{ grid-column:span 1; aspect-ratio:4/3; } }
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1), filter .35s;
}
.gallery__item:hover img{ transform:scale(1.045); filter:brightness(1.03); }

/* --------------------------------------------------------- praktiskt --- */
.facts{
  margin-top:3rem; display:grid; gap:2.25rem 2.75rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.fact h3{ font-size:1.14rem; margin-bottom:.5rem; }
.fact p{ margin:0; font-size:.94rem; color:var(--ink-soft); }

/* ---------------------------------------------------------- kontakt --- */
.contact{ display:grid; gap:.75rem; margin-top:2.25rem; }
.contact__row{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  padding:1rem 1.15rem; border:1px solid var(--line-lt); border-radius:var(--r);
  transition:background .22s, border-color .22s;
}
.contact__row:hover{ background:rgba(250,247,241,.08); border-color:rgba(250,247,241,.4); }
.contact__ico{ flex:0 0 22px; color:var(--green-lt); }
.contact__ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact__row span:last-child{ display:flex; flex-direction:column; }
.contact__row strong{ font-weight:500; color:var(--paper); font-size:.98rem; }
.contact__row em{ font-style:normal; font-size:.82rem; color:rgba(250,247,241,.62); }

/* ------------------------------------------------------------ formulär --- */
.form{
  background:var(--paper); color:var(--ink); border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.25rem); box-shadow:var(--shadow);
}
.form__row{ display:grid; gap:.4rem; margin-bottom:1.05rem; }
.form__row--2{ grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .form__row--2{ grid-template-columns:1fr; } }
.form label{ display:grid; gap:.4rem; }
.form label > span{
  font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft);
}
.form label b{ color:var(--barn); }
.form input,.form select,.form textarea{
  width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  padding:.72rem .85rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s, box-shadow .2s;
}
.form textarea{ resize:vertical; min-height:6.5rem; }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--green-lt); box-shadow:0 0 0 3px rgba(109,133,116,.18);
}
.form input:user-invalid{ border-color:var(--barn); }
.form__hint{ font-size:.82rem; color:var(--ink-soft); margin:0 0 1.1rem; }
.form__hint a{ color:var(--green); }

/* --------------------------------------------------------------- foot --- */
.foot{ background:var(--green-dp); color:rgba(250,247,241,.68); padding:3.25rem 0 2.5rem; font-size:.9rem; }
.foot__inner{ display:flex; flex-wrap:wrap; gap:1.75rem 3rem; align-items:baseline; }
.foot__name{ font-family:var(--serif); font-size:1.3rem; color:var(--paper); margin:0 0 .2rem; }
.foot__sub{ margin:0; }
.foot__links{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-left:auto; align-items:center; }
/* Minst 44 px hög träffyta: fötterna på en telefon träffar med tummen, inte
   med en muspekare. Länkarna var 24 px höga. Negativ margin gör att den
   större ytan inte flyttar layouten. */
.foot__links a{ color:rgba(250,247,241,.82); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; }
.foot__links a:hover{ color:var(--paper); text-decoration:underline; }
.foot__legal{ width:100%; margin:0; padding-top:1.75rem; border-top:1px solid rgba(250,247,241,.14); font-size:.82rem; color:rgba(250,247,241,.5); }

/* ----------------------------------------------------------- lightbox --- */
.lightbox{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  background:rgba(18,24,19,.94); padding:clamp(1rem,5vw,3.5rem);
  animation:fade .22s ease;
}
.lightbox[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } }
.lightbox__fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:1rem; align-items:center; }
.lightbox__fig img{ max-height:78svh; width:auto; border-radius:var(--r); }
.lightbox__fig figcaption{ color:rgba(250,247,241,.75); font-size:.88rem; text-align:center; }
.lightbox__close,.lightbox__nav{
  position:absolute; background:none; border:0; color:rgba(250,247,241,.75);
  cursor:pointer; line-height:1; transition:color .2s;
}
.lightbox__close:hover,.lightbox__nav:hover{ color:#fff; }
.lightbox__close{ top:1.1rem; right:1.4rem; font-size:2.4rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:3.4rem; padding:1rem; }
.lightbox__nav--prev{ left:.25rem; }
.lightbox__nav--next{ right:.25rem; }
body.is-locked{ overflow:hidden; }

/* --------------------------------------------------- reduced motion --- */
/* Respektera OS-inställningen "minska rörelse": stäng av övergångar,
   animationer och mjuk scroll för den som blir illamående av rörelse. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}