/* =====================================================================
   MÖCKELNS KANOT – Designsystem
   Alla CSS-variabler är centrerade här. Byt variabler för att ändra
   hela sajten på en gång.
   ===================================================================== */

/* ----- SJÄLVHOSTADE TYPSNITT ----------------------------------------- */
/* latin-ext */
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/crimson-pro-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/crimson-pro-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/crimson-pro-600-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/crimson-pro-600-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/crimson-pro-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/crimson-pro-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/crimson-pro-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/crimson-pro-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Familjen Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/familjen-grotesk-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Familjen Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/familjen-grotesk-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/familjen-grotesk-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/familjen-grotesk-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/familjen-grotesk-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/familjen-grotesk-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/familjen-grotesk-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/familjen-grotesk-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/familjen-grotesk-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/familjen-grotesk-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/space-mono-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/space-mono-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/space-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/space-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/space-mono-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/space-mono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ----- TOKENS -------------------------------------------------------- */
:root {
  /* Färger */
  --c-dark:    #12312F;           /* Mörk grundfärg, heroer, footer */
  --c-body:    #3F615B;           /* Dämpad brödtext */
  --c-bg:      #E9EEE8;           /* Sidbakgrund */
  --c-card:    #FBFCF8;           /* Kortbakgrund */
  --c-lake:    #2E7C8F;           /* Sjöblå, primärfärg */
  --c-deep:    #16495A;           /* Djup sjöblå, knappar */
  --c-light:   #CBE0E1;           /* Ljus sjöblå, ytor */
  --c-yellow:  #E9A93C;           /* Flytvästgul, accent */
  --c-forest:  #2F6B48;           /* Skogsgrön, sparsamt */
  --c-line:    rgba(18,49,47,.16);/* Linjer */
  --c-white:   #FBFCF8;

  /* Typografi */
  --font-head: 'Familjen Grotesk', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* Rytm */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.875rem;
  --space-m:   1.25rem;
  --space-l:   2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;

  /* Radier */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 16px;

  /* Övergångar */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  240ms;

  /* Layout */
  --max-w: 1120px;
  --col-gap: clamp(1rem, 4vw, 2.5rem);
}

/* ----- RESET --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.5vw + 0.5rem, 1.1875rem);
  line-height: 1.65;
  color: var(--c-body);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Förhindra att display:block på svg och img döljer [hidden]-attributet */
[hidden] { display: none !important; }

a {
  color: var(--c-lake);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--c-deep);
}

ul, ol {
  padding-left: 1.4em;
}

/* ----- FOKUS – TILLGÄNGLIGHET ---------------------------------------- */
:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

/* ----- TYPOGRAFI ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-dark);
}

h1 { font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.375rem); }
h3 { font-size: clamp(1.2rem, 2vw + 0.5rem, 1.625rem); }
h4 { font-size: 1.125rem; font-weight: 600; }

.display-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-lake);
  margin-bottom: 0.35em;
}

.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-body);
  opacity: 0.7;
}

p + p { margin-top: 0.9em; }

strong { font-weight: 600; color: var(--c-dark); }

/* ----- LAYOUT -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.section {
  padding-block: var(--space-xl);
}

.section--large {
  padding-block: var(--space-2xl);
}

/* ----- KNAPPAR ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.8em 1.6em;
  border-radius: var(--r-m);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-yellow);
}

.btn--primary:hover {
  background: #d4942a;
  border-color: #d4942a;
  color: var(--c-dark);
}

.btn--secondary {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(251,252,248,0.5);
}

.btn--secondary:hover {
  background: rgba(251,252,248,0.1);
  border-color: var(--c-white);
  color: var(--c-white);
}

.btn--outline {
  background: transparent;
  color: var(--c-deep);
  border-color: var(--c-deep);
}

.btn--outline:hover {
  background: var(--c-deep);
  color: var(--c-white);
}

.btn--dark {
  background: var(--c-deep);
  color: var(--c-white);
  border-color: var(--c-deep);
}

.btn--dark:hover {
  background: var(--c-dark);
  border-color: var(--c-dark);
}

/* ----- BILDPLATSHÅLLARE ---------------------------------------------- */
/* Tydligt markerade platshållare för foton som ska läggas in senare */
.img-placeholder {
  background: var(--c-light);
  border: 2px dashed var(--c-lake);
  border-radius: var(--r-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-l);
  text-align: center;
  color: var(--c-deep);
  min-height: 240px;
  position: relative;
}

.img-placeholder::before {
  content: '📷';
  font-size: 2rem;
}

.img-placeholder__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-lake);
  display: block;
}

.img-placeholder__desc {
  font-size: 0.9375rem;
  color: var(--c-body);
  max-width: 28ch;
}

/* ----- PLATSHÅLLARE FÖR DATA ----------------------------------------- */
/* Priser, telefonnummer, e-post etc. som behöver bytas ut */
.ph-price,
.ph-tel,
.ph-email,
.ph-orgnr,
.ph-data {
  background: rgba(233, 169, 60, 0.15);
  border-bottom: 2px dashed var(--c-yellow);
  padding: 0 0.2em;
  border-radius: 2px;
  font-style: normal;
}

/* ----- HEADER / NAVIGATION ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--space-l);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-dark);
  border: 2px dashed rgba(18,49,47,0.35);
  padding: 0 0.9em;
  border-radius: var(--r-s);
  height: 40px;
}

.logo-placeholder--footer {
  color: rgba(251,252,248,0.55);
  border-color: rgba(251,252,248,0.25);
}

.nav-logo img,
.nav-logo svg {
  height: 40px;
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-body);
  text-decoration: none;
  padding: 0.35em 0.5em;
  border-radius: var(--r-s);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  color: var(--c-dark);
  background: var(--c-light);
}

.nav-menu .nav-cta a {
  background: var(--c-yellow);
  color: var(--c-dark);
  font-weight: 600;
  padding: 0.45em 1.1em;
}

.nav-menu .nav-cta a:hover {
  background: #d4942a;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--c-dark);
  border-radius: var(--r-s);
}

.nav-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Ikon-toggle styrs av CSS via aria-expanded – inget JS-beroende */
.nav-toggle .icon-close { display: none; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; align-items: center; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--c-card);
    border-bottom: 1px solid var(--c-line);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-m) var(--space-l) var(--space-l);
    gap: var(--space-xs);
    box-shadow: 0 8px 24px rgba(18,49,47,0.12);
  }

  .nav-menu.is-open { display: flex; }

  .nav-menu a {
    display: block;
    padding: 0.75em 1em;
    font-size: 1.0625rem;
  }

  .nav-menu .nav-cta { margin-top: var(--space-xs); }
  .nav-menu .nav-cta a {
    text-align: center;
    padding: 0.8em 1em;
  }

  .nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }
}

/* ----- HERO ---------------------------------------------------------- */
.hero {
  background-color: var(--c-dark);
  background-image:
    linear-gradient(rgba(18,49,47,0.62), rgba(18,49,47,0.62)),
    url("../assets/images/hero.webp");
  background-size: auto, cover;
  background-position: center, center;
  color: var(--c-white);
  padding-block: clamp(4rem, 12vw, 8rem);
  position: relative;
  overflow: hidden;
}


.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.hero__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-bottom: var(--space-m);
}

/* strong-taggar inuti hero ärver färg från föräldern (annars mörkgrön på mörk bakgrund) */
.hero strong {
  color: inherit;
}

.hero h1 {
  color: var(--c-white);
  margin-bottom: var(--space-m);
}

.hero__sub {
  font-size: clamp(1.0625rem, 2vw + 0.5rem, 1.25rem);
  color: rgba(251,252,248,0.82);
  max-width: 56ch;
  margin-bottom: var(--space-l);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ----- HIGHLIGHTS (tre kolumner) ------------------------------------- */
.highlights {
  background: var(--c-light);
  padding-block: var(--space-l);
  border-block: 1px solid var(--c-line);
}

.highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-l);
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
}

.highlight-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--c-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 2px 8px rgba(18,49,47,0.1);
}

.highlight-item h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.2em;
}

.highlight-item p {
  font-size: 0.9375rem;
  color: var(--c-body);
}

/* ----- PRISÖVERSIKT -------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.price-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  padding: var(--space-l);
  position: relative;
  overflow: hidden;
}

.price-card--featured {
  border-color: var(--c-lake);
  box-shadow: 0 0 0 2px var(--c-light);
}

.price-card--featured::before {
  content: 'Populärast';
  position: absolute;
  top: 0;
  right: 0;
  background: var(--c-lake);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-bottom-left-radius: var(--r-m);
}

.price-card__period {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--c-dark);
  margin-bottom: var(--space-xs);
}

.price-card__amount {
  font-size: 2.25rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-dark);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.price-card__unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-body);
}

.price-card__desc {
  font-size: 0.9375rem;
  color: var(--c-body);
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-line);
}

.price-note {
  font-size: 0.875rem;
  color: var(--c-body);
  background: rgba(233, 169, 60, 0.1);
  border-left: 3px solid var(--c-yellow);
  padding: var(--space-s) var(--space-m);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  margin-top: var(--space-m);
}

/* ----- SÅ GÅR DET TILL (steg) --------------------------------------- */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.step-item {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  padding: var(--space-l);
}

.step-number {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--c-light);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-m);
  user-select: none;
}

.step-item h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.4em;
}

.step-item p {
  font-size: 0.9375rem;
  color: var(--c-body);
}

/* ----- INNEHÅLLSBILDER ------------------------------------------------ */
.content-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-m);
  object-fit: cover;
}

.split__media .content-photo {
  height: 100%;
  min-height: 260px;
}

/* ----- GOOGLE MAPS INBÄDDNING ----------------------------------------- */
.map-embed {
  border-radius: var(--r-m);
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- SEKTIONER MED DELAD LAYOUT ------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.split--reversed .split__media {
  order: -1;
}

@media (max-width: 680px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reversed .split__media {
    order: 0;
  }
}

/* ----- FAQ ACCORDION ------------------------------------------------- */
.faq-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq-item {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-dark);
  transition: background var(--dur) var(--ease);
}

.faq-question:hover {
  background: var(--c-light);
}

.faq-question[aria-expanded="true"] {
  background: var(--c-light);
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--dur) var(--ease);
  color: var(--c-lake);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: var(--space-m) var(--space-l);
  font-size: 1rem;
  color: var(--c-body);
}

.faq-answer.is-open {
  display: block;
}

/* ----- KORT ---------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card:hover {
  box-shadow: 0 8px 32px rgba(18,49,47,0.12);
  transform: translateY(-2px);
}

.card__body {
  padding: var(--space-l);
}

.card__icon {
  font-size: 1.75rem;
  margin-bottom: var(--space-s);
}

.card h3 {
  margin-bottom: 0.4em;
}

/* ----- INKLUDERAT-LISTA ---------------------------------------------- */
.includes-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.includes-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  font-size: 1rem;
}

.includes-list li::before {
  content: '✓';
  color: var(--c-forest);
  font-family: var(--font-head);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* ----- BOKNINGSWIDGET PLATSHÅLLARE ----------------------------------- */
/* PLACEHOLDER: Byt ut .booking-placeholder mot inbäddad bokningswidget */
.booking-placeholder {
  background: var(--c-card);
  border: 3px dashed var(--c-lake);
  border-radius: var(--r-l);
  padding: var(--space-xl) var(--space-l);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

.booking-placeholder__icon {
  font-size: 2.5rem;
}

.booking-placeholder__title {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-dark);
}

.booking-placeholder__desc {
  max-width: 46ch;
  color: var(--c-body);
  font-size: 0.9375rem;
}

.booking-placeholder__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-lake);
  background: var(--c-light);
  padding: 0.3em 0.8em;
  border-radius: 99px;
}

/* ----- KONTAKTINFO --------------------------------------------------- */
.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
}

.contact-item__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.contact-item__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-lake);
  display: block;
  margin-bottom: 0.15em;
}

.contact-item__value {
  font-size: 1.0625rem;
  color: var(--c-dark);
  font-weight: 500;
}

/* ----- KARTKARTA SVG (sjöar och leder) ------------------------------ */
.map-wrapper {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
}

.map-disclaimer {
  position: absolute;
  bottom: var(--space-m);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18,49,47,0.85);
  color: rgba(251,252,248,0.9);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4em 1em;
  border-radius: 99px;
  white-space: nowrap;
}

/* ----- AVSNITT OM VATTEN (sjöar-sida) ------------------------------- */
.water-section {
  border-left: 4px solid var(--c-lake);
  padding-left: var(--space-l);
  margin-bottom: var(--space-xl);
}

.water-section__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 680px) {
  .water-section__split {
    grid-template-columns: 1fr;
  }
}

.water-section__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block: var(--space-m);
}

.meta-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-light);
  color: var(--c-deep);
  padding: 0.3em 0.8em;
  border-radius: 99px;
}

/* ----- CTA SECTION --------------------------------------------------- */
.cta-section {
  background-color: var(--c-dark);
  background-image:
    linear-gradient(rgba(18,49,47,0.68), rgba(18,49,47,0.68)),
    url('../assets/images/mockeln-bild.webp');
  background-size: cover;
  background-position: center;
  color: var(--c-white);
  text-align: center;
  padding-block: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.cta-section__inner {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  color: var(--c-white);
  margin-bottom: var(--space-m);
}

.cta-section p {
  color: rgba(251,252,248,0.8);
  font-size: 1.125rem;
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-l);
}

.cta-tel {
  margin-top: var(--space-m);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: rgba(251,252,248,0.6);
}

.cta-tel a {
  color: var(--c-yellow);
  text-decoration: none;
}

/* ----- SECTION INTRO ------------------------------------------------- */
.section-intro {
  max-width: 64ch;
}

.section-intro + * {
  margin-top: var(--space-l);
}

/* ----- SEPARATOR ----------------------------------------------------- */
.divider {
  border: none;
  border-top: 1px solid var(--c-line);
  margin-block: var(--space-l);
}

/* ----- KOORDINAT-DEKORATIONER --------------------------------------- */
.coord-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--c-body);
  opacity: 0.5;
}

/* ----- TABELL -------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th {
  font-family: var(--font-head);
  font-weight: 600;
  text-align: left;
  padding: 0.75em 1em;
  background: var(--c-light);
  color: var(--c-dark);
  border-bottom: 2px solid var(--c-line);
}

td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(203,224,225,0.2); }

/* ----- INFO-BOX ------------------------------------------------------ */
.info-box {
  background: rgba(46, 124, 143, 0.08);
  border: 1px solid rgba(46, 124, 143, 0.25);
  border-radius: var(--r-m);
  padding: var(--space-m) var(--space-l);
  font-size: 0.9375rem;
}

.warning-box {
  background: rgba(233, 169, 60, 0.1);
  border: 1px solid rgba(233, 169, 60, 0.4);
  border-radius: var(--r-m);
  padding: var(--space-m) var(--space-l);
  font-size: 0.9375rem;
}

/* ----- FOOTER -------------------------------------------------------- */
.site-footer {
  background: var(--c-dark);
  color: rgba(251,252,248,0.75);
  padding-block: var(--space-xl) var(--space-l);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (max-width: 680px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

.footer-brand img,
.footer-brand svg {
  height: 40px;
  width: auto;
  opacity: 0.9;
  margin-bottom: var(--space-m);
  filter: brightness(0) invert(1);
}

.footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 38ch;
}

.footer-col h4 {
  color: var(--c-white);
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--space-m);
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.footer-links a {
  color: rgba(251,252,248,0.7);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--dur) var(--ease);
}

.footer-links a:hover {
  color: var(--c-white);
}

.footer-bottom {
  border-top: 1px solid rgba(18,49,47,0.4);
  padding-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  font-size: 0.8125rem;
  color: rgba(251,252,248,0.45);
}

.footer-orgnr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* ----- BREADCRUMB ---------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-body);
  opacity: 0.7;
  padding-block: var(--space-m);
  list-style: none;
  padding-inline: 0;
}

.page-header .breadcrumb {
  color: var(--c-yellow);
  opacity: 1;
}

.page-header .breadcrumb a {
  color: var(--c-yellow);
}

.page-header .breadcrumb a:hover {
  color: var(--c-white);
  opacity: 1;
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: 0.3em;
  opacity: 0.5;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover { opacity: 1; }

/* ----- SIDHUVUD FÖR UNDERSIDOR -------------------------------------- */
.page-header {
  background-color: var(--c-dark);
  background-image:
    linear-gradient(rgba(18,49,47,0.68), rgba(18,49,47,0.68)),
    url("../assets/images/hero.webp");
  background-size: auto, cover;
  background-position: center, center;
  color: var(--c-white);
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
  overflow: hidden;
}


.page-header__inner {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  color: var(--c-white);
  margin-bottom: var(--space-m);
}

.page-header p {
  color: rgba(251,252,248,0.8);
  font-size: 1.125rem;
  max-width: 56ch;
}

/* ----- UTILITY ------------------------------------------------------- */
.text-center { text-align: center; }
.mt-s  { margin-top: var(--space-s); }
.mt-m  { margin-top: var(--space-m); }
.mt-l  { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mb-l  { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }

.bg-dark  { background: var(--c-dark); color: var(--c-white); }
.bg-light { background: var(--c-light); }
.bg-card  { background: var(--c-card); }

/* Visa/dölj visuellt men håll tillgängligt */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-m);
  background: var(--c-yellow);
  color: var(--c-dark);
  font-family: var(--font-head);
  font-weight: 600;
  padding: 0.75em 1.5em;
  border-radius: var(--r-m);
  z-index: 999;
  text-decoration: none;
}

/* ----- ANIMATIONER --------------------------------------------------- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__label   { animation: heroIn 0.65s var(--ease) 0.05s both; }
.hero h1       { animation: heroIn 0.65s var(--ease) 0.20s both; }
.hero__sub     { animation: heroIn 0.65s var(--ease) 0.35s both; }
.hero__actions { animation: heroIn 0.65s var(--ease) 0.50s both; }

/* Scroll-reveal – klassen läggs till av JS när elementet syns */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity  0.55s var(--ease) var(--reveal-delay, 0ms),
    transform 0.55s var(--ease) var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ----- UTILITIES ----------------------------------------------------- */
.skip-link:focus {
  top: var(--space-m);
}