/* ==========================================================================
   LommaFoil — delat stilbibliotek
   Ersätter de inline <style>-block som tidigare låg duplicerade i varje sida.
   Ändra här, inte per sida.
   ========================================================================== */

:root{
  /* Färg — varumärket oförändrat */
  --carbon:#0c2b3a; --paper:#ffffff; --canvas:#e4eef2; --mist:#eef5f8;
  --ash:#bcd2db; --smoke:#6f8f9c; --slate:#3c5b67; --graphite:#123c4f;
  --mint:#79d6e6;

  /* Typsnitt — två familjer. Monospace utgår helt. */
  --font-display:'Anton', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Radie — tre värden, inte tretton.
     sm = knappar och fält · md = kort och paneler · pill = äkta piller */
  --r-sm:4px;
  --r-md:10px;
  --r-pill:999px;

  /* Avstånd — 8-punktsskala */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --max:1200px;
  --ease:cubic-bezier(.2,.6,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  background:var(--canvas); color:var(--carbon);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--s-5)}
section{padding-block:var(--s-8)}
.section-tight{padding-top:0}
a{color:inherit}
img{max-width:100%}

/* Fokus — synligt och konsekvent på allt som kan nås med tangentbord */
:focus-visible{outline:3px solid var(--carbon);outline-offset:2px;border-radius:2px}
.inverted :focus-visible,.hero :focus-visible{outline-color:var(--mint)}

.skip-link{
  position:absolute;top:-100px;left:var(--s-4);z-index:100;
  background:var(--paper);color:var(--carbon);padding:14px 20px;
  border-radius:var(--r-sm);text-decoration:none;font-weight:600;
}
.skip-link:focus{top:var(--s-4)}

/* --------------------------------------------------------------------------
   Typografi
   Display används i gemener och bara på h1/h2. Versaler reserveras för
   småetiketter, där de bär funktion snarare än volym.
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--font-display); font-weight:400;
  line-height:1.04; letter-spacing:-.015em; text-wrap:balance;
}
.display-xl{font-size:clamp(46px,8.4vw,104px)}
.display-lg{font-size:clamp(34px,5.2vw,62px)}
.display-md{font-size:clamp(30px,4.2vw,50px)}
.h-sec{
  font-family:var(--font-body); font-size:clamp(22px,2.6vw,30px);
  font-weight:600; line-height:1.2; letter-spacing:-.015em;
}
.body-lg{font-size:18px;line-height:1.6;color:var(--slate)}
.lead{font-size:20px;line-height:1.6;color:var(--carbon)}

/* Småetikett med streck — ersätter de tidigare mintgröna pillren */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--smoke);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ash);flex:none}
.eyebrow + .display,.eyebrow + .h-sec{margin-top:var(--s-4)}

.inverted .eyebrow{color:var(--ash)}
.inverted .eyebrow::before{background:rgba(255,255,255,.3)}
.hero .eyebrow{color:rgba(255,255,255,.92)}
.hero .eyebrow::before{background:rgba(255,255,255,.55)}

/* Liten etikett utan streck — formulärlabels, fotrubriker, legender */
.label{
  font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke);
}

/* Avståndshjälpare — ersätter de tidigare inline-marginalerna */
.mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)}
.measure{max-width:60ch}
.measure-sm{max-width:46ch}
.nums{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
header{
  height:8rem; display:flex; align-items:center;
  position:sticky; top:0; z-index:50; pointer-events:none;
}
.navwrap{
  max-width:var(--max); margin:0 auto; padding:0 var(--s-5); width:100%;
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-4); position:relative;
}
.nav-pill{
  pointer-events:auto; background:var(--paper); border-radius:var(--r-pill);
  padding:14px 28px; display:flex; gap:var(--s-5); align-items:center;
}
.nav-pill a{
  text-decoration:none; font-weight:500; color:var(--slate); font-size:16px;
  transition:color .18s var(--ease);
}
.nav-pill a:hover{color:var(--carbon)}
.brand{
  pointer-events:auto; display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; background:var(--paper); border-radius:var(--r-md);
  padding:3px 16px 3px 8px; box-shadow:0 4px 18px -6px rgba(9,28,40,.28);
}
.brand-icon{height:46px;width:auto;display:block}
.brand-name{
  font-family:var(--font-display); font-size:20px; line-height:1;
  letter-spacing:-.01em; color:var(--carbon);
}
.nav-book{pointer-events:auto}
.nav-actions{display:flex;align-items:center;gap:var(--s-3);pointer-events:auto}
.nav-toggle{
  display:none; align-items:center; justify-content:center; gap:5px;
  flex-direction:column; background:var(--paper); border:none;
  border-radius:var(--r-md); width:48px; height:48px; cursor:pointer;
  box-shadow:0 4px 18px -6px rgba(9,28,40,.28);
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--carbon);
  border-radius:var(--r-pill); transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   Knappar — mintgrönt reserveras för det som faktiskt kan klickas
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block; background:var(--carbon); color:var(--paper);
  border:none; border-radius:var(--r-sm); padding:16px 24px;
  font-family:var(--font-body); font-size:16px; font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{background:var(--graphite)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.btn-ghost{background:transparent;border:1.5px solid var(--slate);color:var(--slate)}
.btn-ghost:hover{background:var(--paper)}
.btn-accent{background:var(--mint);color:var(--carbon);font-weight:600}
.btn-accent:hover{background:#fff}
.btn-full{width:100%;text-align:center;font-size:18px;padding:18px}

/* Textlänk med understruken kant — sekundär åtgärd bredvid en knapp */
.btn-link{
  display:inline-block; color:var(--paper); text-decoration:none;
  font-size:16px; font-weight:500; padding:4px 2px;
  border-bottom:1px solid rgba(255,255,255,.45);
  transition:border-color .18s var(--ease);
}
.btn-link:hover{border-bottom-color:#fff}

/* --------------------------------------------------------------------------
   Hero (index)
   -------------------------------------------------------------------------- */
.hero{
  position:relative; margin-top:-8rem; min-height:78vh; min-height:78dvh;
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; padding:0;
}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--carbon)}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(7,24,34,.58) 0%, rgba(7,24,34,.12) 34%,
    rgba(7,24,34,.58) 72%, rgba(7,24,34,.94) 100%);
}
.hero-inner{
  width:100%; padding-top:calc(8rem + var(--s-5)); padding-bottom:var(--s-7);
  color:var(--paper);
}
.hero h1{margin-top:var(--s-4);color:var(--paper)}
.hero .sub{
  max-width:46ch; margin-top:var(--s-4);
  color:rgba(255,255,255,.9); font-size:18px; line-height:1.6;
}
.hero .sub a{color:var(--mint)}
.hero-cta{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-5)}

/* Faktarad — ersätter de tre tidigare displayblocken */
.hero-facts{
  list-style:none; display:flex; flex-wrap:wrap;
  column-gap:var(--s-5); row-gap:var(--s-2);
  margin-top:var(--s-5); padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.22);
  font-size:12.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;
}
.hero-facts li{padding-right:var(--s-5);border-right:1px solid rgba(255,255,255,.28)}
.hero-facts li:last-child{padding-right:0;border-right:0}
/* Raden bryts på smal skärm — då skulle avdelarna hänga löst, så de tas bort */
@media (max-width:760px){
  .hero-facts li{padding-right:0;border-right:0}
}

/* Låg liggande skärm: krymp hero så att knappen aldrig hamnar under viken */
@media (min-width:901px) and (max-height:820px){
  .hero{min-height:74vh;min-height:74dvh}
  .hero-inner{padding-bottom:var(--s-5)}
  .hero h1{font-size:clamp(44px,6.4vw,76px)}
  .hero .sub{font-size:16px;margin-top:var(--s-3)}
  .hero-cta{margin-top:var(--s-4)}
  .hero-facts{margin-top:var(--s-4);padding-top:var(--s-3)}
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.intro-lead{font-size:20px;line-height:1.6;color:var(--carbon);margin-top:var(--s-5)}
.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-5)}
.intro-cta{margin-top:var(--s-6)}

/* --------------------------------------------------------------------------
   Kort — numret bär sekvensen, rubriken är det enda feta
   -------------------------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-5)}
.card-grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--paper); border:1px solid #dbe6ea; border-radius:var(--r-md);
  padding:var(--s-6); display:grid; grid-template-columns:auto 1fr; gap:var(--s-4);
  align-items:start;
}
.card .step{
  font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--slate);
  font-variant-numeric:tabular-nums; padding-top:3px; text-transform:uppercase;
}
.card h3{font-size:18px;font-weight:600;letter-spacing:-.012em;margin-bottom:var(--s-2)}
.card p{color:var(--slate);line-height:1.6;font-size:15.5px}

/* --------------------------------------------------------------------------
   Inverterad sektion — den mjuka 64px-toppen är borttagen
   -------------------------------------------------------------------------- */
.inverted{background:var(--carbon);color:var(--paper)}
.inverted .body-lg{color:var(--ash)}
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:stretch;margin-top:var(--s-6)}
.price-photo{
  border-radius:var(--r-md); overflow:hidden; align-self:stretch;
  min-height:360px; box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
}
.price-photo img{width:100%;height:100%;object-fit:cover;display:block}
.price-big{
  font-family:var(--font-display); font-size:clamp(58px,8vw,100px);
  line-height:1.05; letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}
.price-big span{font-size:.45em;color:var(--ash)}
.price-list{list-style:none;font-variant-numeric:tabular-nums}
.price-list li{
  padding:var(--s-4) 0; border-bottom:1px solid var(--graphite);
  display:flex; justify-content:space-between; gap:var(--s-4); font-size:15.5px;
}
.price-list li span:last-child{
  color:var(--ash); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; text-align:right; white-space:nowrap;
}
.price-note{margin-top:var(--s-3);font-size:14px;color:var(--ash);line-height:1.55}

/* --------------------------------------------------------------------------
   Bokning — kalender och formulär
   -------------------------------------------------------------------------- */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-5);align-items:start}
.cal{background:var(--paper);border:1px solid #dbe6ea;border-radius:var(--r-md);padding:var(--s-6)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-5)}
.cal-head p{font-weight:600;font-size:17px;letter-spacing:-.01em}
.cal-head button{
  background:var(--mist); border:none; border-radius:var(--r-sm);
  width:40px; height:40px; font-size:18px; cursor:pointer; color:var(--carbon);
  transition:background .18s var(--ease);
}
.cal-head button:hover{background:var(--canvas)}
.cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow span{
  font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--smoke);
  text-align:center; padding:6px 0; text-transform:uppercase;
}
.cal-days button{
  aspect-ratio:1; border:none; border-radius:var(--r-sm); background:var(--mist);
  font-family:var(--font-body); font-size:14px; color:var(--ash); cursor:default;
  font-variant-numeric:tabular-nums; transition:background .15s var(--ease),color .15s var(--ease);
}
.cal-days button.avail{background:var(--mint);color:var(--carbon);font-weight:600;cursor:pointer}
.cal-days button.avail:hover{background:var(--carbon);color:var(--mint)}
.cal-days button.selected{background:var(--carbon);color:var(--mint)}
.cal-days .pad{visibility:hidden}
.cal-legend{display:flex;gap:var(--s-5);margin-top:var(--s-5)}
.cal-legend span{
  font-size:11.5px; font-weight:500; color:var(--smoke);
  display:flex; align-items:center; gap:var(--s-2);
}
.dot{width:11px;height:11px;border-radius:var(--r-pill);display:inline-block;flex:none}
.dot-free{background:var(--mint)}
.dot-busy{background:var(--mist);border:1px solid var(--ash)}
.slots{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.slots button{
  border:1.5px solid var(--ash); background:transparent; border-radius:var(--r-sm);
  padding:10px 16px; font-family:var(--font-body); font-size:14px; font-weight:500;
  color:var(--carbon); cursor:pointer; font-variant-numeric:tabular-nums;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.slots button.selected,.slots button:hover{background:var(--carbon);color:var(--paper);border-color:var(--carbon)}
.slots-empty{font-size:14px;color:var(--smoke)}

.form{background:var(--paper);border:1px solid #dbe6ea;border-radius:var(--r-md);padding:var(--s-6)}
.form label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); margin:var(--s-5) 0 var(--s-2);
}
.form input[type=text],.form input[type=email],.form input[type=tel]{
  width:100%; border:1.5px solid var(--ash); border-radius:var(--r-sm);
  padding:14px 16px; font-family:var(--font-body); font-size:16px;
  background:var(--paper); color:var(--carbon);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.form input:hover{border-color:var(--smoke)}
.form input:focus{border-color:var(--carbon);outline:none;box-shadow:0 0 0 3px rgba(12,43,58,.12)}
.summary{
  background:var(--mist); border-radius:var(--r-md); padding:var(--s-5);
  margin-top:var(--s-5); font-variant-numeric:tabular-nums;
}
.summary div{display:flex;justify-content:space-between;gap:var(--s-4);padding:6px 0;font-size:14px}
.summary .total{border-top:1px solid var(--ash);margin-top:var(--s-2);padding-top:var(--s-3);font-weight:600;font-size:16px}
.summary .dep{color:var(--slate)}
.check{display:flex;gap:var(--s-3);align-items:flex-start;margin:var(--s-5) 0;font-size:14px;color:var(--slate);line-height:1.5}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--carbon);flex:none}
.check label{
  margin:0; font-family:var(--font-body); font-size:14px;
  text-transform:none; letter-spacing:normal; color:var(--slate); font-weight:400;
}
.pay-note{font-size:13px;color:var(--smoke);margin-top:var(--s-4);line-height:1.6}
.confirm{
  background:var(--mist); border:1px solid var(--mint); border-left:3px solid var(--mint);
  border-radius:var(--r-md); padding:var(--s-5); margin-top:var(--s-5);
  font-size:14px; line-height:1.6; display:none;
}

/* --------------------------------------------------------------------------
   Presentkort
   -------------------------------------------------------------------------- */
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-5);align-items:start}
.gift-opts{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-2)}
.gift-opts button{
  border:1.5px solid var(--ash); background:var(--paper); border-radius:var(--r-sm);
  padding:14px 20px; font-family:var(--font-body); font-weight:500; font-size:16px;
  cursor:pointer; font-variant-numeric:tabular-nums;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.gift-opts button.selected{background:var(--carbon);color:var(--paper);border-color:var(--carbon)}
.gift-card-visual{
  background:var(--carbon); color:var(--paper); border-radius:var(--r-md);
  padding:var(--s-7); aspect-ratio:16/10; display:flex; flex-direction:column;
  justify-content:space-between;
}
.gift-card-visual .gv-title{
  font-family:var(--font-display); font-size:clamp(30px,3.6vw,44px);
  line-height:1.08; letter-spacing:-.015em;
}
.gift-card-visual .gv-amt{color:var(--mint);font-variant-numeric:tabular-nums}
.gift-card-visual .label{color:rgba(255,255,255,.75)}

/* --------------------------------------------------------------------------
   Villkorsremsa / CTA-remsa
   -------------------------------------------------------------------------- */
.terms-strip{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-5); flex-wrap:wrap; background:var(--paper);
  border:1px solid #dbe6ea; border-radius:var(--r-md);
  padding:var(--s-6) var(--s-7); margin-top:var(--s-5);
}
.terms-strip p{color:var(--slate);max-width:600px;line-height:1.6;margin-top:var(--s-2)}

/* --------------------------------------------------------------------------
   Film
   -------------------------------------------------------------------------- */
.video-showcase{
  margin-top:var(--s-5); border-radius:var(--r-md); overflow:hidden;
  background:#000; line-height:0; box-shadow:0 24px 60px -30px rgba(11,38,52,.5);
}
.video-showcase video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.video-caption{margin-top:var(--s-3);font-size:13px;color:var(--slate);line-height:1.55}

/* --------------------------------------------------------------------------
   Reklamsidan
   -------------------------------------------------------------------------- */
.hero-flat{padding-block:var(--s-5) var(--s-6)}
.hero-media{
  background:var(--carbon); border-radius:var(--r-md); aspect-ratio:21/9;
  position:relative; overflow:hidden; margin-top:var(--s-6); max-width:100%;
}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.media-badge{
  position:absolute; bottom:var(--s-4); right:var(--s-4);
  background:rgba(12,43,58,.72); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 12px;
  border-radius:var(--r-pill);
}
.figure{margin-top:var(--s-6)}
.figure img{display:block;width:100%;border-radius:var(--r-md)}
.figure figcaption{margin-top:var(--s-3);font-size:13px;color:var(--slate);line-height:1.55}
.inverted .figure figcaption{color:var(--ash)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-5)}
.price-card{
  background:var(--paper); border:1px solid #dbe6ea; border-radius:var(--r-md);
  padding:var(--s-6); display:flex; flex-direction:column;
}
.price-card.featured{background:var(--carbon);color:var(--paper);border-color:var(--carbon)}
.price-card.featured .price-list li{border-color:var(--graphite)}
.price-card .label{display:block;margin-bottom:var(--s-2)}
.price-card.featured .label{color:var(--ash)}
.price-card .amt{
  font-family:var(--font-display); font-size:clamp(34px,4vw,48px);
  line-height:1.05; letter-spacing:-.015em; margin:var(--s-2) 0 var(--s-5);
  font-variant-numeric:tabular-nums;
}
.price-card.featured .amt{color:var(--mint)}
.price-card .price-list{flex-grow:1}
.price-card .price-list li{
  padding:var(--s-3) 0; border-bottom:1px solid var(--ash);
  font-size:15px; line-height:1.5; display:block; color:var(--slate);
}
.price-card.featured .price-list li{color:var(--ash)}
.price-card .price-list li:last-child{border-bottom:none}
.chip-grid{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.chip{
  background:var(--paper); border:1px solid #dbe6ea; border-radius:var(--r-pill);
  padding:12px 20px; font-weight:500; font-size:15px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-group{margin-top:var(--s-6)}
.faq-group-title{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:var(--s-3);
}
.faq-item{
  background:var(--paper); border:1px solid #dbe6ea; border-radius:var(--r-md);
  margin-bottom:var(--s-2); overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:var(--s-5); font-weight:600;
  font-size:16.5px; line-height:1.4; display:flex; justify-content:space-between;
  align-items:center; gap:var(--s-5); letter-spacing:-.01em;
  transition:background .15s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; font-size:22px; line-height:1; color:var(--smoke); flex-shrink:0;
  font-weight:400;
}
.faq-item[open] summary::after{content:"–";color:var(--carbon)}
.faq-item summary:hover{background:var(--mist)}
.faq-a{padding:0 var(--s-5) var(--s-5);color:var(--slate);line-height:1.65;max-width:860px}
.faq-a p+p{margin-top:var(--s-3)}
.faq-a ul{margin:var(--s-3) 0 0 var(--s-5)}
.faq-a li{margin-bottom:6px}
.faq-a a{color:var(--graphite)}
.video-embed{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:#000; margin-top:var(--s-5); box-shadow:0 24px 60px -30px rgba(11,38,52,.5);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cta-strip{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-5);
  flex-wrap:wrap; background:var(--paper); border:1px solid #dbe6ea;
  border-radius:var(--r-md); padding:var(--s-6) var(--s-7); margin-top:var(--s-5);
}
.cta-strip p{color:var(--slate);max-width:600px;line-height:1.6;margin-top:var(--s-2)}

/* --------------------------------------------------------------------------
   Villkorssidan
   -------------------------------------------------------------------------- */
.terms-wrap{max-width:900px;margin:0 auto;padding:0 var(--s-5)}
.terms-wrap h1{
  font-family:var(--font-display); font-weight:400; line-height:1.06;
  letter-spacing:-.015em; font-size:clamp(40px,6.4vw,68px); margin:var(--s-5) 0 var(--s-3);
}
.updated{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.terms-card{
  background:var(--paper); border:1px solid #dbe6ea; border-radius:var(--r-md);
  padding:clamp(24px,5vw,56px); margin:var(--s-5) 0 var(--s-6);
}
.terms-card h2{
  font-size:18px; font-weight:600; letter-spacing:-.012em; margin:var(--s-6) 0 var(--s-3);
}
.terms-card h2:first-child{margin-top:0}
.terms-card h2 span{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:6px;
}
.terms-card p{color:var(--slate);margin-bottom:var(--s-3);line-height:1.65}
.terms-card ul{color:var(--slate);margin:0 0 var(--s-3) var(--s-5);line-height:1.65}
.terms-card li{margin-bottom:6px}

/* --------------------------------------------------------------------------
   Sidfot
   -------------------------------------------------------------------------- */
footer{background:var(--carbon);color:var(--paper);padding:var(--s-8) 0 var(--s-6);margin-top:var(--s-8)}
footer .foot-grid{display:flex;justify-content:space-between;gap:var(--s-7);flex-wrap:wrap}
footer .label{color:var(--smoke)}
footer a{color:var(--paper)}
footer .foot-grid p:last-child{margin-top:var(--s-2);line-height:1.8;font-size:15px}
.foot-mark{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-6);flex-wrap:wrap}
.foot-emblem{height:96px;width:auto;display:block}
.foot-brand{
  font-family:var(--font-display); font-size:clamp(44px,7vw,84px);
  line-height:1.05; letter-spacing:-.015em; color:var(--paper);
}
.foot-brand span{color:var(--mint)}
.copyright{
  margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--graphite);
  font-size:13px; color:var(--smoke); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s-2);
}
.footer-simple{margin-top:0}
.footer-simple .container{
  max-width:var(--max); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s-2); color:var(--smoke); font-size:13px;
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  section{padding-block:var(--s-7)}
  .book-grid,.gift-grid,.price-row,.intro-cols{grid-template-columns:1fr}
  .card-grid,.card-grid-2,.pricing-grid{grid-template-columns:1fr}
  .nav-pill{display:none}
  .nav-toggle{display:flex}
  .nav-pill.open{
    display:flex; flex-direction:column; align-items:stretch; gap:var(--s-1);
    position:absolute; top:calc(100% + var(--s-3)); left:var(--s-5); right:var(--s-5);
    border-radius:var(--r-md); padding:var(--s-3);
    box-shadow:0 16px 40px -12px rgba(9,28,40,.35); z-index:60;
  }
  .nav-pill.open a{padding:14px 18px;border-radius:var(--r-sm);font-size:16px}
  .nav-pill.open a:hover{background:var(--mist)}
  /* Hero dras upp 8rem under den fasta headern. Utan en höjd hamnar
     innehållet bakom headern, eftersom flex-end då inte har något att
     trycka mot — därför en explicit höjd även på mobil. */
  .hero{min-height:84vh;min-height:84dvh}
  .hero-inner{padding-top:calc(8rem + var(--s-4));padding-bottom:var(--s-6)}
  .hero .sub{font-size:16.5px}
  .card{padding:var(--s-5)}
  .cal,.form{padding:var(--s-5)}
  .terms-strip,.cta-strip{padding:var(--s-5)}
  .foot-emblem{height:64px}
  .price-photo{min-height:260px}
}
@media (max-width:460px){
  /* På riktigt smala skärmar tar loggan + hamburgaren plats nog.
     "Boka" finns i menyn, och hero har sin egen knapp. */
  .nav-book{display:none}
}
@media (max-width:420px){
  .hero-facts{font-size:11.5px}
  .hero-cta{gap:var(--s-4)}
  .navwrap{padding:0 var(--s-4)}
  .container{padding:0 var(--s-4)}
}