/* =========================================================
   Hornindal 514 Utvikling - styles
   ========================================================= */

/* Fontar hostet sjølv (Inter og Archivo Black, SIL OFL, sjå assets/fonts/) */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/archivo-black-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/archivo-black-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-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;
}
/* Reserve med tilpassa mål, så teksten ikkje flyttar seg når Inter kjem */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  --blue: #0077C8;
  --blue-deep: #006BB4;
  --blue-soft: #E6F1FA;

  /* Warm accents - for life, energy, optimism */
  --sun: #FFC857;
  --sun-deep: #F2A93B;
  --coral: #F26B4A;
  --coral-deep: #BF4526;
  --moss: #5FAD56;
  --moss-deep: #3F8A38;

  --ink: #0E1318;
  --ink-2: #2A2F36;
  --muted: #5C6470;
  --line: #E5E7EB;
  --line-strong: #D7DBE0;

  --paper: #FFFFFF;
  --paper-alt: #F5F6F8;
  --paper-warm: #FFF8EC;

  --shadow-sm: 0 1px 2px rgba(15, 19, 24, 0.04), 0 1px 3px rgba(15, 19, 24, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 19, 24, 0.06), 0 1px 3px rgba(15, 19, 24, 0.04);
  --shadow-lg: 0 24px 64px rgba(15, 19, 24, 0.08), 0 2px 8px rgba(15, 19, 24, 0.04);

  --radius: 14px;
  --radius-lg: 22px;
  --container: 1180px;

  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Archivo Black", "Inter", "Inter Fallback", -apple-system, sans-serif;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--blue); }
main p a:not(.btn), .veke a, .steps a { text-decoration: underline; text-underline-offset: 2px; }

button { font: inherit; cursor: pointer; }

.skip-link {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: static; width: auto; height: auto;
  padding: 0.6rem 1rem; background: var(--ink); color: #fff;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(15, 19, 24, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
.brand img {
  display: block;
  height: 48px;
  width: auto;
}

/* Kort notis øvst på sidene. På mobil står berre det viktigaste. */
.notice {
  margin: 0;
  padding: 12px 24px;
  background: var(--sun);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
.notice a { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }
@media (max-width: 700px) { .notice-meir { display: none; } }

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav a {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { background: var(--paper-alt); color: var(--ink); }
.site-nav .nav-cta {
  background: var(--ink);
  color: #fff;
  margin-left: 0;
}
.site-nav .nav-cta:hover { background: var(--blue); color: #fff; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 96px;
  isolation: isolate;
  color: #fff;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 19, 24, 0.65) 0%, rgba(14, 19, 24, 0.35) 40%, rgba(14, 19, 24, 0.78) 100%),
    linear-gradient(90deg, rgba(14, 19, 24, 0.5) 0%, rgba(14, 19, 24, 0.1) 60%);
}
.hero-credit {
  position: absolute;
  right: 16px;
  bottom: 10px;
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  z-index: 1;
}
.hero-credit a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 2px; }
.hero-credit a:hover { color: #fff; }

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  width: 100%;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 24px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--blue);
}
.eyebrow-light { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.eyebrow-light::before { background: #fff; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.h1-line { display: block; }
.accent { color: var(--blue); }
.hero h1 .accent {
  color: #fff;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 6px;
  background: var(--blue);
  border-radius: 3px;
  box-shadow: 0 1px 8px rgba(0, 119, 200, 0.5);
}

.lede {
  max-width: 640px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 36px;
}
.lede-light {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 64px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.06s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--blue); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--paper-alt); }
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.btn-lg { padding: 18px 28px; font-size: 16px; }

/* Word-marquee just under the hero buttons */
.hero-marquee {
  margin-top: 28px;
  margin-bottom: 8px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.hero-marquee.paused .hero-marquee-track { animation-play-state: paused; }
.marquee-pause {
  display: block;
  margin: 0 0 32px auto;
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}
.marquee-pause:hover { background: rgba(255, 255, 255, 0.14); }
.hero-marquee-track .dot {
  color: var(--sun);
  font-family: var(--font-sans);
  font-weight: 800;
  align-self: center;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero stats */
.hero-stats {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 760px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 28px;
}
.hero-stats li {
  display: flex; flex-direction: column; gap: 6px;
}
.hero-stats .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hero-stats .lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   Sections
   ========================================================= */
.section {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.section-alt {
  background: var(--paper-alt);
  border-top-color: transparent;
}
.section-head {
  max-width: 720px;
  margin: 0 0 56px;
}
.section h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}
.section .lede { margin: 0; }

.two-col {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.two-col-photo {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.prose p { margin: 0 0 16px; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--card-accent, var(--blue));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 88px);
  line-height: 0.9;
  color: var(--card-accent, var(--blue));
  opacity: 0.18;
  letter-spacing: -0.02em;
  margin: 0;
  position: absolute;
  top: 18px; right: 22px;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.card:hover .card-num { opacity: 0.32; transform: translateY(-2px) rotate(-2deg); }
.card h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 10px;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.card p {
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 0;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.card-01 { --card-accent: var(--coral); }
.card-02 { --card-accent: var(--blue); }
.card-03 { --card-accent: var(--sun-deep); }
.card-04 { --card-accent: var(--moss); }

/* Wavy SVG divider (sits at the bottom of a section, eats into the next) */
.wave-divider {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: -1px;
  margin-bottom: -1px;
}
.wave-divider path { transition: fill 0.2s ease; }

/* Manifesto / vision band - big, warm, optimistic */
.manifesto {
  position: relative;
  padding: 0;
  background:
    radial-gradient(ellipse 60% 70% at 20% 20%, rgba(255, 200, 87, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 80% at 90% 80%, rgba(242, 107, 74, 0.18), transparent 65%),
    var(--paper-warm);
  overflow: hidden;
  isolation: isolate;
}
.manifesto::before,
.manifesto::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  filter: blur(2px);
  opacity: 0.55;
}
.manifesto::before {
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, var(--sun) 0%, transparent 70%);
  top: -40px; right: 8%;
}
.manifesto::after {
  width: 280px; height: 280px;
  background: radial-gradient(circle at 30% 30%, var(--blue-soft) 0%, transparent 70%);
  bottom: -80px; left: 4%;
}
.manifesto-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 96px 24px;
  position: relative;
}
.manifesto-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: rgba(255, 255, 255, 0.65);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(242, 107, 74, 0.2);
  margin-bottom: 24px;
}
.manifesto-eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}
.manifesto-quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 28px;
}
.manifesto-quote .hl-sun   { background: linear-gradient(180deg, transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%); padding: 0 6px; }
.manifesto-quote .hl-coral { background: linear-gradient(180deg, transparent 62%, rgba(242,107,74,0.35) 62%, rgba(242,107,74,0.35) 92%, transparent 92%); padding: 0 6px; }
.manifesto-quote .hl-blue  { color: var(--blue-deep); }
.manifesto-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Photo section */
.photo-frame {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.photo-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo-frame--wide img { aspect-ratio: 16 / 9; }
.photo-frame figcaption {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(14, 19, 24, 0.78);
  color: #fff;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* Styre photo */
.styre-photo {
  margin: 0 auto 40px;
  max-width: 720px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.styre-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.styre-photo figcaption {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(14, 19, 24, 0.78);
  color: #fff;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* Styret: eitt kort per person, fem i rada på brei skjerm. Portretta er
   små med vilje, sidan profilbileta frå LinkedIn ikkje toler å bli større. */
.people {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.people li {
  flex: 0 1 calc((100% - 64px) / 5);
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.person-photo {
  width: 88px; height: 88px;
  border-radius: 50%;
  margin-bottom: 16px;
  background: var(--paper-alt);
  filter: grayscale(1);
}
.person-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.person-role { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.person-bio { margin: 12px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.person-link {
  --linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
}
.person-link::before {
  content: "";
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--linkedin) center / contain no-repeat;
  mask: var(--linkedin) center / contain no-repeat;
}
.person-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Partners */
.partners {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lede + .partners { margin-top: 24px; }
.partners li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  cursor: default;
}
.partners li:hover {
  transform: translateY(-2px) rotate(-1deg);
  border-color: var(--blue);
  color: var(--blue-deep);
}
.partners li:nth-child(2n):hover { transform: translateY(-2px) rotate(1deg); border-color: var(--coral); color: var(--coral-deep); }
.partners li:nth-child(3n):hover { border-color: var(--sun-deep); color: var(--sun-deep); }
.partners li a {
  color: inherit;
  text-decoration: none;
  display: block;
  margin: -10px -18px;
  padding: 10px 18px;
  border-radius: inherit;
}
.partners li a::after {
  content: " ↗";
  opacity: 0;
  margin-left: 4px;
  font-weight: 700;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.partners li:hover a::after { opacity: 1; }

/* Contact */
.section-contact {
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, var(--blue-soft) 0%, transparent 50%),
    var(--paper);
  border-top-color: transparent;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.contact-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.contact-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  word-break: break-word;
}
.contact-value a { color: var(--ink); }
.contact-value a:hover { color: var(--blue); }
.contact-meta {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.contact-cta {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: #C8CED6;
  padding: 56px 0 48px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.footer-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: #fff;
}
.footer-tag {
  margin: 0;
  font-size: 15px;
  color: #C8CED6;
  max-width: 540px;
}
.footer-meta {
  margin: 0;
  font-size: 13px;
  color: #888F98;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .people li { flex-basis: calc((100% - 32px) / 3); }
}

@media (max-width: 900px) {
  .two-col,
  .two-col-photo {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cards { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; gap: 18px; }
  .contact-grid { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
  .hero {
    padding: 96px 0 80px;
    min-height: 72vh;
  }
}

@media (max-width: 700px) {
  .site-nav a { display: none; }
  .site-nav .nav-cta { display: inline-flex; }
  body { font-size: 16px; }
  .header-inner { height: 64px; }
  .brand img { height: 40px; }
  .hero { padding: 40px 0 56px; }
  .card-num + h3 { padding-right: 72px; }
  /* Mobil: bilete og namn på éi linje, teksten og lenkja under */
  .people li {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    column-gap: 16px;
    padding: 20px 20px 10px;
  }
  .person-photo { width: 64px; height: 64px; margin: 0; }
  .person-bio, .person-link { grid-column: 1 / -1; }
  .person-link { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .marquee-pause { display: none; }
}

/* =========================================================
   Undersider (Smia · Flytt til Hornindal · Næringsareal)
   + mobilmeny. Lagt til juni 2026.
   ========================================================= */

/* Mobil-meny: hamburgerknapp */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px; width: 22px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s 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); }

/* Marker aktiv side i menyen */
.site-nav a[aria-current="page"] {
  color: var(--blue-deep);
  background: var(--blue-soft);
}

/* Kompakt hero for innhaldssider */
.hero.hero-compact {
  min-height: 0;
  padding: 116px 0 72px;
}
.hero.hero-compact .hero-inner { max-width: 780px; }
@media (max-width: 700px) {
  .hero.hero-compact { padding: 32px 0 48px; }
}

/* «Tilbake»-lenke øvst i hero */
.page-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  margin: 0 0 22px;
}
.page-back:hover { color: #fff; }

/* Pris-/tilbod-kort (byggjer på .card) */
.card--tier {
  display: flex;
  flex-direction: column;
  padding-top: 28px;
}
.card--tier .tier-price {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  line-height: 1;
  margin: 6px 0 4px;
}
.card--tier .tier-price small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.card--tier > p { margin-bottom: 16px; }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.45;
}
.ticks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--moss-deep);
  font-weight: 800;
}
.card--tier .btn { margin-top: auto; align-self: flex-start; }

/* Faktaliste (dl) */
.facts { margin: 0; display: grid; gap: 0; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: none; }
.facts dt { margin: 0; color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 15px; text-align: right; }

/* Callout / infoboks */
.callout {
  background: var(--blue-soft);
  border: 1px solid rgba(0, 119, 200, 0.2);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.callout h3 { margin: 0 0 12px; font-size: 18px; color: var(--ink); }
.callout p { margin: 0 0 10px; color: var(--ink-2); font-size: 15.5px; }
.callout p:last-child { margin-bottom: 0; }
.callout--warm { background: var(--paper-warm); border-color: rgba(242, 169, 59, 0.3); }
.callout .steps { margin: 4px 0 18px; }
.callout > :last-child { margin-bottom: 0; }
.prose + .partners { margin-top: 16px; }
.bustad-tun { margin-top: 48px; }
.trening { margin-top: 20px; }
.bustad-tun p, .trening p { max-width: 760px; }
.facts-note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }

/* Økonomi: stolpeliste over finansieringa */
.finans { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.finans li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px; }
.finans-namn { color: var(--ink-2); font-size: 15.5px; }
.finans-sum { color: var(--ink); font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finans-merke {
  display: inline-block;
  margin-left: 0;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--paper-alt);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.finans-bar { grid-column: 1 / -1; height: 12px; background: var(--paper-alt); border-radius: 0 4px 4px 0; }
.finans-bar span { display: block; height: 100%; background: var(--blue-deep); border-radius: 0 4px 4px 0; }
.finans-total {
  display: flex;
  justify-content: space-between;
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  font-weight: 700;
  font-size: 15.5px;
}
.okonomi-boksar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 56px;
}
@media (max-width: 900px) {
  .okonomi-boksar { grid-template-columns: 1fr; margin-top: 40px; }
}

/* «Slik gjer du»-steg */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li {
  position: relative;
  padding-left: 44px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -3px;
  width: 30px; height: 30px;
  background: var(--blue-deep);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

/* 3-kolonne kort-grid */
.cards-3 { grid-template-columns: repeat(3, 1fr); }

/* Bilet-kort: foto øvst i .card, tekst under */
.card--photo { padding: 0 0 28px; }
.card--photo .card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0 0 20px;
}
.card--photo h3,
.card--photo p { padding: 0 28px; }

/* FAQ (native details/summary) */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 22px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--blue);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details p { margin: 16px 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* Bilete-plassholdar (til ekte foto kjem) */
.img-placeholder {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 24px;
}

/* Brødtekst-kolonne */
.rich { max-width: 760px; }
.rich p { color: var(--ink-2); margin: 0 0 16px; }
.rich p:last-child { margin: 0; }
.rich h2 { font-size: 24px; line-height: 1.2; margin: 48px 0 12px; }
.rich h2:first-child { margin-top: 0; }
.rich ul { color: var(--ink-2); margin: 0 0 16px; padding-left: 22px; }

/* Footer-navigasjon */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.footer-nav a { color: #C8CED6; font-size: 14px; }
.footer-nav a:hover { color: #fff; }

@media (max-width: 900px) {
  .cards-3 { grid-template-columns: 1fr; }
}

/* Mobilmeny ≤1023px (hamburger erstattar full meny). Med sju punkt får
   menyen ikkje plass på éi linje under om lag 990 px. */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 10px 16px 16px;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { display: block; font-size: 16px; padding: 12px 12px; border-radius: 8px; }
  .site-nav .nav-cta { display: block; text-align: center; margin: 8px 0 0; }
}

/* Kalender (tidslinje på framsida). Ho blar sidelengs, startar der containeren
   startar og går ut til kanten av skjermen. Linja er heil for det som har
   skjedd og stipla fram mot det som kjem. */
.timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.timeline-head .section-head { margin: 0; }
.timeline-nav { display: flex; gap: 8px; }
.timeline-nav button {
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.timeline-nav button:hover:not([aria-disabled="true"]) { background: var(--blue); }
.timeline-nav button[aria-disabled="true"] { opacity: 0.2; cursor: default; }

.timeline {
  --kant: max(24px, (100% - var(--container)) / 2 + 24px);
  list-style: none;
  margin: 0;
  padding: 4px var(--kant) 8px;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--kant);
  scrollbar-width: none;
  cursor: grab;
}
@media (prefers-reduced-motion: no-preference) {
  .timeline { scroll-behavior: smooth; }
}
/* Medan ein drar med mus: ingen snapping eller mjuk scroll, så tidslinja
   følgjer musa direkte */
.timeline.drar { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.timeline.drar a { cursor: inherit; }
.timeline li {
  flex: 0 0 min(300px, 80%);
  padding-right: 32px;
  scroll-snap-align: start;
}
/* Bileta står over linja. Punkt utan bilete får like mykje tom plass, så
   linja går rett gjennom alle punkta. */
.timeline li:not(:has(> .timeline-bilete))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
}
/* Linja går frå prikken til neste prikk, gjennom luftrommet mellom punkta */
.timeline time::after {
  content: "";
  position: absolute;
  top: 7px; left: 0; right: -32px;
  height: 3px;
  background: var(--blue);
}
.timeline li:has(+ .kjem) time::after,
.timeline .kjem time::after {
  background: repeating-linear-gradient(90deg, var(--coral) 0 10px, transparent 10px 18px);
}
.timeline li:last-child time::after {
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent);
  mask-image: linear-gradient(90deg, #000 20%, transparent);
}
.timeline time {
  position: relative;
  display: block;
  padding-top: 36px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
  color: var(--blue-deep);
}
.timeline time::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px var(--paper-alt);
}
.timeline .kjem time { color: var(--coral-deep); }
.timeline .kjem time::before {
  background: var(--paper-alt);
  border: 3px solid var(--coral);
  animation: pulse 2.4s ease-in-out infinite;
}
.timeline h3 { margin: 10px 0 0; font-size: 18px; line-height: 1.3; }
.timeline p { margin: 8px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.timeline p a { text-decoration: underline; text-underline-offset: 2px; }
.timeline .btn { margin-top: 16px; }

/* Bilete i kalenderen, alle i 16:9. Forsida av presentasjonen opnar modalen. */
.timeline-bilete {
  position: relative;
  display: block;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
}
img.timeline-bilete { aspect-ratio: 16 / 9; object-fit: cover; }
.timeline-bilete img { transition: transform 0.3s ease; }
.timeline-bilete:hover img { transform: scale(1.04); }
.timeline-bilete span {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(14, 19, 24, 0.78);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Presentasjonen frå kommunestyret (modal med lysbilete) */
.slides {
  width: min(1200px, 100vw - 32px, (100vh - 120px) * 16 / 9);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  outline: none;
}
.slides::backdrop { background: rgba(14, 19, 24, 0.85); }
.slides-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.slides-track img { flex: 0 0 100%; scroll-snap-align: start; }
.slides-bar { display: flex; align-items: center; gap: 4px; padding: 8px; }
.slides-bar button, .slides-bar a {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.slides-bar button:hover, .slides-bar a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.slides-bar a { margin-left: auto; }

/* Kva skjer: kalender med eitt kort per arrangement og datoen som eit
   kalenderblad. Arrangement som er over, tek sida bort av seg sjølv. */
.abonner { margin: 28px 0 0; }
.abonner-adresse { overflow-wrap: anywhere; }
.agenda-ar {
  margin: 48px 0 16px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
}
.section-head + .agenda-ar { margin-top: 0; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.agenda li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  align-items: start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.agenda time {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 10px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}
.agenda-dag {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
}
.agenda h4 { margin: 2px 0 4px; font-size: 18px; line-height: 1.3; color: var(--ink); }
.agenda p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.agenda .agenda-meta { margin-bottom: 4px; color: var(--muted); font-size: 14.5px; }
.agenda .agenda-regel {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--paper-warm);
  color: var(--coral-deep);
  font-size: 13px;
  font-weight: 600;
}
.agenda-note { max-width: 820px; margin-top: 20px; }

/* Faste tilbod kvar veke: tid til venstre, kva og kvar til høgre */
.veke { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.veke li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}
.veke li:first-child { border-top: 0; padding-top: 4px; }
.veke-tid { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.veke strong { color: var(--ink); }
#kvar-veke .cards + .facts-note { margin-top: 24px; }
#kvar-veke .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card .card-lenkje { margin-top: 14px; }

/* Skjemakort: innmelding av arrangement og nyheitsbrevet. .heil går over heile breidda. */
.meld-inn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 18px 20px;
  max-width: 820px;
  margin: 0 0 40px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.meld-inn h3 { grid-column: 1 / -1; margin: 0; font-size: 20px; line-height: 1.3; }
.meld-inn p { margin: 0; }
.meld-inn .heil { grid-column: 1 / -1; }
.meld-inn label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.meld-inn input,
.meld-inn textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.meld-inn input:focus,
.meld-inn textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.meld-inn textarea { min-height: 120px; resize: vertical; }
.meld-inn .valfri { color: var(--muted); font-weight: 400; }
/* Avkryssing: boksen til venstre for teksten, ikkje som eit tekstfelt */
.meld-inn .avkryss { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.meld-inn .avkryss input { display: inline-block; flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--blue); }
/* Valet mellom privatperson og bedrift på bidra.html. Gøymde felt skal vere gøymde sjølv om dei har display frå andre reglar. */
.meld-inn fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.meld-inn legend { padding: 0; margin-bottom: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.meld-inn .val-rad { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.meld-inn [hidden] { display: none !important; }
.meld-inn-merk { color: var(--muted); font-size: 13.5px; }
.meld-inn .btn { justify-self: start; }

/* Nyheitsbrev: same skjemastil, med knappen ved sida av feltet (under kvarandre på mobil) */
.nyheitsbrev { grid-template-columns: 1fr auto; max-width: 640px; margin-bottom: 0; }
.nyheitsbrev .btn { min-height: 48px; }
.nyheitsbrev-status { font-weight: 600; color: var(--ink); }
.nyheitsbrev-status:empty { display: none; }

@media (max-width: 700px) {
  .agenda li { grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; }
  .agenda-dag { font-size: 22px; }
  .meld-inn { grid-template-columns: 1fr; padding: 20px; }
}

/* Snarvegar på framsida: heile kortet er lenkja */
.snarvegar { padding: 48px 0; background: var(--paper-alt); }
.snarvegar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.snarvegar .card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px 22px 22px; color: var(--ink-2); }
.snarvegar .card:hover { color: var(--ink-2); }
.snarvegar .card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.snarvegar strong { color: var(--ink); font-size: 18px; line-height: 1.3; }
.snarvegar strong::after { content: " →"; content: " →" / ""; color: var(--card-accent); }
.snarvegar span { font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .snarvegar ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .snarvegar { padding: 28px 0; }
  .snarvegar ul { grid-template-columns: 1fr; gap: 10px; }
  .snarvegar .card { gap: 2px; padding: 16px 18px 14px; }
  .snarvegar strong { font-size: 17px; }
}

/* Reisetidskartet på Flytt hit */
.kart { margin: 32px 0 0; max-width: 560px; }
.kart img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }