/* ============================================================
   Lokalsajt — snekker-mal v4 (statisk, data-drevet, MOBIL-FIRST)
   Designretning: "Verkstedsluks" — dyp koksblå natt + varm tre-aksent.
   Rikere enn v3 igjen (nummerert bento, flytende folgertall-kort),
   men fortsatt dokumentarisk, ikke SaaS. Basestiler = mobil (390px).
   Salgslaget bor i et SEPARAT Animasjonlandslaget-panel (kjolig profil)
   nederst i fila — hjemmesiden selv har ingen pris/pakke-stiler.
   ============================================================ */

:root {
  --ink:      #0c1119;   /* dypeste bakgrunn (natt) */
  --ink-2:    #121a26;   /* opphøyd flate */
  --ink-3:    #18222f;   /* kort */
  --line:     #24303f;   /* subtil ramme */
  --line-2:   #34475c;   /* synlig ramme */
  --accent:   #d38a45;   /* varm tre / kobber */
  --accent-2: #eeae67;   /* lysere tre */
  --accent-ink:#1a1206;  /* tekst på aksent */
  --text:     #f4f6f9;   /* primærtekst */
  --text-2:   #b7c1cf;   /* sekundær (AA) */
  --text-3:   #8d99aa;   /* dempet (AA på små tekster) */
  --ok:       #64d6a4;

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gap: clamp(52px, 9vw, 104px);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--ink);
  color: var(--text);
  line-height: 1.62;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip-link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-s); font-weight: 700; font-size: .9rem;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------- Typografi ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-2);
}
.eyebrow svg { width: 15px; height: 15px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; }
.display { font-size: clamp(2.35rem, 8.4vw, 4.3rem); line-height: 1.03; }
.h2 { font-size: clamp(1.8rem, 5.6vw, 2.9rem); line-height: 1.09; }
.lead { font-size: clamp(1.02rem, 3.2vw, 1.2rem); color: var(--text-2); line-height: 1.6; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-2);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-2);
}
.brand__txt { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.1; }
.brand__sub { font-size: .62rem; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }

.nav__links { display: none; }
.nav__links.open {
  display: flex; flex-direction: column; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  padding: 6px 16px 16px; background: var(--ink);
  border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7);
}
.nav__links.open a {
  padding: 14px 4px; font-size: 1rem; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.nav__links.open a:last-child { border-bottom: 0; }
.nav__cta { display: flex; align-items: center; gap: 8px; }
.nav__cta .btn--ghost { display: none; }
.nav__toggle {
  display: inline-flex; background: none; border: 1px solid var(--line-2); color: var(--text);
  cursor: pointer; padding: 8px; border-radius: 9px;
}
.nav__toggle svg { width: 20px; height: 20px; }

/* ---------- Knapper ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: .92rem; font-weight: 600;
  padding: 12px 18px; border-radius: var(--radius-s); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; line-height: 1; text-align: center;
  transition: transform .18s var(--ease-spring), box-shadow .25s var(--ease-out),
              background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn--primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 85%, transparent);
  transform: translateY(-1px);
}
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn--sm { padding: 9px 13px; font-size: .84rem; }
.btn--lg { padding: 15px 24px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; padding: clamp(30px, 7vw, 84px) 0 var(--gap); overflow: hidden; }
.hero__glow {
  position: absolute; pointer-events: none; z-index: 0;
  width: 440px; height: 440px; border-radius: 50%; top: -20%; right: -32%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%);
  filter: blur(30px);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(30px, 7vw, 60px); align-items: center; }
.hero__kicker { font-size: .82rem; font-weight: 700; letter-spacing: .14em; color: var(--accent-2); text-transform: uppercase; margin-bottom: 16px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { max-width: 48ch; margin-bottom: 22px; }
.hero__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.hero__meta .loc { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .92rem; }
.hero__meta .loc svg { width: 16px; height: 16px; color: var(--accent-2); flex: none; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__actions .btn { flex: 1 1 auto; }

.hero__visual { position: relative; }
.hero__card {
  position: relative; border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: 0 30px 64px -34px rgba(0,0,0,.7);
  aspect-ratio: 4 / 5; background: var(--ink-3);
}
.hero__card img { width: 100%; height: 100%; object-fit: cover; }

/* Flytende, animert folgertall-kort (v2-signaturen, oppa fotoet) */
.hero__float {
  position: absolute; left: -10px; bottom: 26px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--ink-3) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line-2); border-radius: 16px;
  padding: 12px 16px 12px 12px;
  box-shadow: 0 22px 46px -22px rgba(0,0,0,.82);
  animation: floaty 5.5s var(--ease-out) infinite;
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.hero__float:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.hero__float-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-2);
}
.hero__float-ic svg { width: 21px; height: 21px; }
.hero__float-txt { display: flex; flex-direction: column; line-height: 1.15; }
.hero__float-txt b { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--text); }
.hero__float-txt span { font-size: .72rem; color: var(--text-3); }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .hero__float { animation: none; } }

/* ============================================================
   Trust-stripe
   ============================================================ */
.trust { border-block: 1px solid var(--line); background: var(--ink-2); margin-top: var(--gap); }
.trust__grid { display: grid; grid-template-columns: 1fr 1fr; }
.trust__item { padding: 24px 16px; text-align: center; position: relative; }
.trust__item:nth-child(odd)::before {
  content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line);
}
.trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.trust__num { font-family: var(--font-display); font-size: clamp(1.55rem, 5vw, 2.3rem); color: var(--text); line-height: 1.05; }
.trust__lbl { font-size: .76rem; color: var(--text-2); margin-top: 8px; }
.trust__hl .trust__num { color: var(--accent-2); }

/* ============================================================
   Seksjons-ramme
   ============================================================ */
section.block { padding: var(--gap) 0; }
.block--alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: clamp(30px, 5vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-top: 2px; }
.section-head p { color: var(--text-2); margin-top: 16px; font-size: 1.04rem; }

/* ---------- Tjenester (storre, roligere; mobler dominerer) ---------- */
.services { display: grid; grid-template-columns: 1fr; gap: 14px; }
.svc {
  position: relative; overflow: hidden;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 26px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.svc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.svc__num {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--text-3); opacity: .55; letter-spacing: .02em;
  transition: color .3s var(--ease-out), opacity .3s var(--ease-out);
}
.svc:hover .svc__num { color: var(--accent-2); opacity: .95; }
.svc--feat .svc__num { font-size: 1.5rem; }
.svc__icon {
  width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-2); margin-bottom: 18px;
}
.svc__icon svg { width: 25px; height: 25px; }
.svc h3 { font-size: 1.28rem; margin-bottom: 8px; }
.svc p { color: var(--text-2); font-size: .96rem; }
.svc--feat { background: linear-gradient(155deg, var(--ink-3), var(--ink-2)); }
.svc--feat h3 { font-size: 1.5rem; }
.svc--feat .svc__icon { width: 56px; height: 56px; }
.svc--feat .svc__icon svg { width: 28px; height: 28px; }

/* ---------- Om ---------- */
.about { display: grid; gap: clamp(30px, 6vw, 68px); align-items: center; }
.about__media { position: relative; max-width: 460px; }
.about__frame {
  border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line-2);
  aspect-ratio: 4 / 5; box-shadow: 0 24px 56px -34px rgba(0,0,0,.7); background: var(--ink-3);
}
.about__frame img { width: 100%; height: 100%; object-fit: cover; }
.about__badge {
  position: absolute; right: 12px; bottom: -14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: .82rem; padding: 10px 14px; border-radius: 11px;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.about__badge svg { width: 17px; height: 17px; }
.about__body .eyebrow { margin-bottom: 12px; }
.about__body h2 { margin-bottom: 6px; }
.about__body p { color: var(--text-2); margin-top: 15px; font-size: 1.04rem; }
.about__body p:first-of-type { color: var(--text); font-size: 1.14rem; }
.about__facts { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.about__fact dt { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.about__fact dd { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-2); margin-top: 4px; }

/* ---------- Galleri ---------- */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shot { position: relative; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/5; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.shot:hover img { transform: scale(1.04); }
.shot--1 { grid-column: span 2; aspect-ratio: 16/11; }
.shot__tag {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(12,17,25,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text); font-size: .66rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line-2);
}

/* ---------- Instagram ---------- */
.ig__head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.ig__head .eyebrow { margin-bottom: 10px; }
.ig__head h2 { margin-bottom: 8px; }
.ig__head p { color: var(--text-2); max-width: 46ch; font-size: .98rem; }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ig__cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ig__cell img { width: 100%; height: 100%; object-fit: cover; }
.ig__hover {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 55%, transparent); opacity: 0;
  transition: opacity .25s var(--ease-out); color: #fff;
}
.ig__hover svg { width: 26px; height: 26px; }
.ig__cell:hover .ig__hover, .ig__cell:focus-visible .ig__hover { opacity: 1; }

/* ---------- Verifisert / verktoy ---------- */
.tz { display: grid; gap: 20px; }
.tz__col { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; }
.tz__title { display: flex; align-items: center; gap: 9px; font-size: 1.08rem; margin-bottom: 18px; font-family: var(--font-sans); font-weight: 700; }
.tz__title svg { width: 19px; height: 19px; color: var(--ok); }
.tz__badges { display: grid; gap: 12px; }
.tz__badge {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius-m); font-size: .95rem;
}
.tz__badge > svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 1px; }
.tz__badge--link { transition: border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.tz__badge--link:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.tz__note { color: var(--text-3); font-size: .82rem; }
.tz__ext { margin-left: auto; align-self: center; color: var(--accent-2); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.tz__partners { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.tz__partners li {
  padding: 9px 15px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.tz__fine { margin-top: 16px; font-size: .8rem; color: var(--text-3); line-height: 1.5; }

/* ============================================================
   Gjenbrukbare salgs-komponenter (brukes KUN i Animasjonlandslaget-
   panelet nederst; palett overstyres der til kjolig profil).
   ============================================================ */
/* Komponentforklaringer */
.feats { display: grid; grid-template-columns: 1fr; gap: 12px; }
.feat {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.feat:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); transform: translateY(-2px); }
.feat--hot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--ink-3)), var(--ink-3)); }
.feat__ic {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent-2);
}
.feat__ic svg { width: 21px; height: 21px; }
.feat h4 { font-size: 1.06rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: 3px; }
.feat p { color: var(--text-2); font-size: .9rem; line-height: 1.5; }

/* Billing-toggle */
.billing-toggle {
  display: inline-flex; background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 4px;
}
.billing-toggle__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; color: var(--text-2);
  font-size: .86rem; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.billing-toggle__btn.is-active { background: var(--accent); color: var(--accent-ink); }
.billing-toggle__save { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .95; }
.billing-toggle__btn:not(.is-active) .billing-toggle__save { color: var(--accent-2); }

/* Tier-kort */
.tiers { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tier {
  display: flex; flex-direction: column;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.tier:hover { transform: translateY(-3px); border-color: var(--line-2); }
.tier--rec { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent) inset; }
.tier__top { margin-bottom: 16px; }
.tier__name { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tier__badge {
  font-family: var(--font-sans); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 3px 8px; border-radius: 6px;
}
.tier__price { min-height: 28px; }
.tier__price b { font-family: var(--font-display); font-size: 1.65rem; color: var(--accent-2); font-weight: 500; }
.tier__mo, .tier__yr { color: var(--text-3); font-size: .84rem; }
.tier__yr { display: none; }
.tier__yr em { font-style: normal; color: var(--ok); font-weight: 700; margin-left: 4px; }
.pricing[data-billing="year"] .tier__mo { display: none; }
.pricing[data-billing="year"] .tier__yr { display: inline; }
.tier__feats { list-style: none; display: grid; gap: 8px; margin-bottom: 20px; flex: 1; align-content: start; }
.tier__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--text-2); }
.tier__feats li svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 2px; }
.tier .btn { margin-top: auto; }

/* ============================================================
   Kontakt + skjema
   ============================================================ */
.contact { display: grid; gap: clamp(28px, 6vw, 56px); }
.contact__info h2 { margin: 12px 0 14px; }
.contact__info .lead { max-width: 46ch; }
.contact__call {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  padding: 18px 20px; border-radius: var(--radius-m);
  background: var(--ink-3); border: 1px solid var(--line-2);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.contact__call:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.contact__call .ic { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-2); }
.contact__call .ic svg { width: 22px; height: 22px; }
.contact__call .lbl { display: block; font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.contact__call .num { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.contact__hours { margin-top: 18px; color: var(--text-2); font-size: .92rem; display: flex; align-items: center; gap: 10px; }
.contact__hours svg { width: 16px; height: 16px; color: var(--accent-2); flex: none; }

.lead-form {
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: var(--radius-l); padding: clamp(20px, 5vw, 32px);
  box-shadow: 0 24px 50px -34px rgba(0,0,0,.6);
}
.lead-form h3 { font-size: 1.4rem; margin-bottom: 4px; }
.lead-form__intro { color: var(--text-2); font-size: .9rem; margin-bottom: 20px; }
.field { margin-bottom: 15px; }
.field--split { display: grid; gap: 15px; }
.field--split > div { margin: 0; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--text-3); text-transform: none; letter-spacing: 0; font-size: .72rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-sans); font-size: 16px;
  background: var(--ink); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  padding: 12px 14px; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23eeae67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #e0745a; box-shadow: 0 0 0 3px rgba(224,116,90,.16); }
.field textarea { resize: vertical; min-height: 88px; }
.form-note { font-size: .74rem; color: var(--text-3); margin-top: 12px; text-align: center; }
.form-status { display: none; margin-top: 14px; padding: 13px 15px; border-radius: var(--radius-s); font-size: .88rem; line-height: 1.45; }
.form-status.ok { display: block; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent); }
.form-status.draft { display: block; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: var(--ink-2); padding: 44px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.footer__brand { grid-column: 1 / -1; max-width: 340px; }
.footer__brand p { color: var(--text-2); font-size: .88rem; margin-top: 12px; }
.footer__col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin-bottom: 12px; font-family: var(--font-sans); font-weight: 700; }
.footer__col a, .footer__col span { display: block; color: var(--text-2); font-size: .9rem; margin-bottom: 8px; }
.footer__col a:hover { color: var(--accent-2); }
.footer__bar {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  font-size: .76rem; color: var(--text-3);
}
/* ============================================================
   ANIMASJONLANDSLAGET-PANEL — SEPARAT salgslag, kjolig profil.
   Egen palett; klart avskilt fra den varme hjemmesiden.
   ============================================================ */
.agency { --a-brand: #8b93ff; --a-brand-2: #b7bdff; }

/* Kollapset linje (fast i bunn). Glir mykt inn etter en liten stund. */
.agency-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px clamp(14px, 4vw, 28px);
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #171a2e, #101120);
  border: 0; border-top: 1px solid #2b2f52;
  box-shadow: 0 -14px 40px -22px rgba(0,0,0,.75);
  color: #eef0ff; font-family: var(--font-sans);
  transform: translateY(110%); animation: agencyBarIn .7s 1.1s var(--ease-out) forwards;
}
.agency-bar__logo {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--a-brand), #5b63e0); color: #0a0d1a;
}
.agency-bar__logo svg { width: 18px; height: 18px; }
.agency-bar__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.agency-bar__txt strong { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agency-bar__sub { font-size: .74rem; color: #9aa0d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agency-bar__go {
  margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: rgba(139,147,255,.14); color: var(--a-brand-2); border: 1px solid rgba(139,147,255,.28);
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.agency-bar__go svg { width: 18px; height: 18px; }
.agency-bar:hover .agency-bar__go { background: rgba(139,147,255,.26); transform: translateX(2px); }
.agency.is-open .agency-bar { pointer-events: none; }
@keyframes agencyBarIn { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .agency-bar { animation: none; transform: none; } }

/* Backdrop (kun nar apen; ingen auto-modal ved last) */
.agency-backdrop {
  position: fixed; inset: 0; z-index: 85; background: rgba(6,7,15,.64);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.agency.is-open .agency-backdrop { opacity: 1; }

/* Sheet — egen kjolig palett-overstyring */
.agency-sheet {
  --ink: #0b0d1a; --ink-2: #12152a; --ink-3: #191d38;
  --line: #262b52; --line-2: #3a4176;
  --accent: #7a83f0; --accent-2: #aab1ff; --accent-ink: #0a0c18;
  --text: #f3f4ff; --text-2: #c3c7ee; --text-3: #8a90c4; --ok: #64d6a4;
  position: fixed; z-index: 90; inset: auto 0 0 0;
  display: flex; flex-direction: column; max-height: 92dvh;
  background: var(--ink-2);
  border-top: 2px solid var(--accent);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -30px 72px -20px rgba(0,0,0,.82);
  transform: translateY(101%); transition: transform .42s var(--ease-out);
  color: var(--text);
}
.agency.is-open .agency-sheet { transform: translateY(0); }
.agency-sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px clamp(16px, 4vw, 28px); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #171b36, var(--ink-2));
  border-radius: 22px 22px 0 0;
}
.agency-sheet__id { display: flex; align-items: center; gap: 12px; }
.agency-sheet__logo {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent), #5b63e0); color: var(--accent-ink);
}
.agency-sheet__logo svg { width: 22px; height: 22px; }
.agency-sheet__id strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; }
.agency-sheet__id span { font-size: .78rem; color: var(--text-3); }
.agency-sheet__close { background: none; border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer; padding: 8px; border-radius: 10px; transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
.agency-sheet__close:hover { border-color: var(--accent-2); color: var(--text); }
.agency-sheet__close svg { width: 20px; height: 20px; }

.agency-sheet__scroll {
  overflow-y: auto;
  padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 28px) calc(env(safe-area-inset-bottom, 0px) + 40px);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}

.agency-hello {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 3vw, 1.32rem); line-height: 1.5;
  color: var(--text); max-width: 66ch; margin-bottom: clamp(28px, 5vw, 40px);
}
.agency-hello__hi { color: var(--accent-2); font-weight: 500; }

.agency-sec { margin-bottom: clamp(30px, 5vw, 46px); }
.agency-sec__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.agency-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 4vw, 1.75rem); line-height: 1.12; }
.agency-note { color: var(--text-3); font-size: .86rem; margin-bottom: 18px; }
.agency-fine { font-size: .82rem; color: var(--text-3); margin-top: 16px; }

/* Hva er chatten (fremhevet) */
.agency-chat-explain {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, var(--ink-3)), var(--ink-3));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-l); padding: clamp(20px, 4vw, 28px);
  margin-bottom: clamp(30px, 5vw, 46px);
}
.agency-chat-explain__ic { width: 48px; height: 48px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); }
.agency-chat-explain__ic svg { width: 24px; height: 24px; }
.agency-chat-explain h4 { font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; margin-bottom: 6px; }
.agency-chat-explain p { color: var(--text-2); font-size: .96rem; line-height: 1.6; }
.agency-chat-explain strong { color: var(--accent-2); }

/* Demoer */
.agency-demos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.agency-demo { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 18px; }
.agency-demo__label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; margin-bottom: 14px; }
.agency-demo__label svg { width: 18px; height: 18px; color: var(--accent-2); }
.agency-demo__tag { margin-left: auto; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(122,131,240,.18); color: var(--accent-2); border: 1px solid rgba(122,131,240,.34); padding: 3px 8px; border-radius: 999px; }
.agency-demo__note { margin-top: 12px; font-size: .76rem; color: var(--text-3); }

/* Booking-demo */
.dbook { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 16px; }
.dbook__title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin-bottom: 12px; }
.dbook__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.dbook__day { text-align: center; font-size: .78rem; padding: 8px 0; border-radius: 9px; border: 1px solid var(--line-2); color: var(--text-2); }
.dbook__day.is-sel { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.dbook__day.is-off { opacity: .4; }
.dbook__slots { display: flex; gap: 8px; margin-bottom: 14px; }
.dbook__slot { flex: 1; text-align: center; font-size: .82rem; padding: 9px 0; border-radius: 9px; border: 1px solid var(--line-2); color: var(--text-2); }
.dbook__slot.is-sel { border-color: var(--accent-2); color: var(--accent-2); background: rgba(122,131,240,.12); font-weight: 600; }
.dbook__cta { pointer-events: none; }

/* Chat-demo */
.dchat { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-m); overflow: hidden; }
.dchat__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .85rem; }
.dchat__head svg { width: 16px; height: 16px; color: var(--accent-2); }
.dchat__log { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.dchat__row { display: flex; }
.dchat__row--user { justify-content: flex-end; }
.dchat__b { max-width: 86%; padding: 9px 13px; border-radius: 13px; font-size: .85rem; line-height: 1.42; }
.dchat__b--bot { background: var(--ink-3); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--text); }
.dchat__b--user { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-bottom-right-radius: 4px; font-weight: 500; }
.dchat__b--cta { background: rgba(122,131,240,.10); border: 1px dashed var(--line-2); color: var(--text-2); }
.dchat__b--cta b { color: var(--accent-2); }
.dchat__input { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .85rem; }
.dchat__input span { flex: 1; }
.dchat__input svg { width: 18px; height: 18px; color: var(--accent-2); }

/* Logo-tillegg */
.agency-addon {
  display: flex; gap: 16px; align-items: center;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--radius-l);
  padding: clamp(18px, 4vw, 24px); margin-bottom: clamp(28px, 5vw, 40px);
}
.agency-addon__ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.agency-addon__ic svg { width: 23px; height: 23px; }
.agency-addon h4 { font-family: var(--font-sans); font-weight: 700; font-size: 1.08rem; margin-bottom: 3px; }
.agency-addon p { color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.agency-addon b { color: var(--accent-2); }

/* CTA + foot */
.agency-cta { display: flex; flex-direction: column; gap: 12px; }
.agency-cta .btn { flex: 1 1 auto; }
.agency-foot { margin-top: 18px; font-size: .84rem; color: var(--text-3); }
.agency-foot strong { color: var(--text-2); }
.agency-foot a { color: var(--accent-2); }

body.agency-locked { overflow: hidden; }

@media (min-width: 640px) {
  .agency-demos { grid-template-columns: 1fr 1fr; }
  .agency-sec__head { flex-direction: row; justify-content: space-between; align-items: center; }
  .agency-cta { flex-direction: row; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .feats { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .feats { grid-template-columns: repeat(3, 1fr); }
  .agency-sheet__scroll > * { max-width: 1120px; margin-inline: auto; }
}

/* ============================================================
   Scroll-reveal (varierte retninger)
   ============================================================ */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal[data-r="left"] { transform: translateX(-26px); }
.js .reveal[data-r="scale"] { transform: scale(.94); }
.reveal.in { opacity: 1 !important; transform: none !important; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }

body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Oppover-skalering (mobil -> desktop)
   ============================================================ */
@media (min-width: 560px) {
  .nav__cta .btn--ghost { display: inline-flex; }
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .trust__item:nth-child(-n+2) { border-bottom: 0; }
  .trust__item + .trust__item::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
  .trust__item:nth-child(odd)::before { right: auto; }
  .services { grid-template-columns: 1fr 1fr; }
  .field--split { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
  .footer__bar { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .shot { aspect-ratio: auto; }
  .shot--1 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .shot--4 { grid-column: span 2; }
  .ig__grid { grid-template-columns: repeat(6, 1fr); }
  .ig__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .tz { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 900px) {
  .nav { height: 74px; }
  .nav__links { display: flex; align-items: center; gap: 28px; }
  .nav__links a { font-size: .9rem; color: var(--text-2); position: relative; padding: 4px 0; transition: color .2s var(--ease-out); }
  .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--accent); transition: width .25s var(--ease-out); }
  .nav__links a:hover { color: var(--text); }
  .nav__links a:hover::after { width: 100%; }
  .nav__toggle { display: none; }
  .hero__grid { grid-template-columns: 1.1fr .9fr; }
  .hero__actions .btn { flex: 0 0 auto; }
  .services { grid-template-columns: repeat(6, 1fr); }
  .svc { grid-column: span 2; }
  .svc--feat { grid-column: span 3; }
  .about { grid-template-columns: .85fr 1.15fr; }
  .about__media { max-width: none; }
  .about__badge { right: -18px; bottom: 28px; }
  .contact { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 1024px) {
  body { font-size: 17px; }
}

/* ============================================================
   Metriskt matchade reservfonter (battemat)

   Manrope och Instrument Serif laddas fran Google Fonts med
   display=swap. Utan metrisk matchning ritas sidan forst med
   reservfonten och far andra radbrytningar och blockhojder, sa nar
   webbfonten kommer in flyttar sig CTA och allt under den. Det ar
   precis den typen av hopp vi bygger om sidan for att slippa.

   Vardena ar UPPMATTA i webblasaren, inte gissade: bredd per em och
   fontBoundingBox-ascent/descent for webbfonten respektive reserven
   over samma svenska provstrang, dar
     size-adjust      = bredd(webbfont) / bredd(reserv)
     ascent-override  = ascent(webbfont) / size-adjust
   Reserven ar Arial och Times New Roman, eftersom mataskinen har
   Liberation Sans och Liberation Serif som ar metriskt kompatibla med
   just dem. Georgia far darfor INTE sta forst i serif-stacken, dess
   metrik ar en annan.
   ============================================================ */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.89%;
  ascent-override: 104.62%;
  descent-override: 29.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Nimbus Roman");
  size-adjust: 81.71%;
  ascent-override: 121.16%;
  descent-override: 37.94%;
  line-gap-override: 0%;
}

/* ============================================================
   TEMA: BAT / UPPLEVELSE (body.theme-boat)

   Designriktning: "Nordisk marin editorial". Tre beslut barare hela
   temat:
     1. Marinblatt #203860 ar varumarkets farg, uppmatt ur logotypen och
        oberoende bekraftad av letsbooks egen tema-payload (#253861).
        Den ager typografi, morka band och strukturen.
     2. Solgult #e9a23b ar hamtat ur motljuset i hero-fotot och anvands
        ENBART till boknings-CTA. Blatt och gult ar komplementarer, sa
        knappen kan aldrig forsvinna, och den kolliderar aldrig med
        varumarket eftersom ingenting annat far vara gult.
     3. Bottnen ar varmvitt papper, inte kallt vitt. Fotona ar soliga och
        gronbla, och ett kallt #fff far dem att se blaskiga ut.

   Typografi: Instrument Serif i rubriker (redaktionell, hog kontrast),
   Manrope i brodtext. Fyra tydliga steg i skalan.
   ============================================================ */
body.theme-boat {
  /* Fabrikens delade variabler pekas om, sa arvda komponenter foljer med */
  --ink:      #fbf9f5;   /* varmvitt papper (basyta) */
  --ink-2:    #f4f0e8;   /* alternerande sektion */
  --ink-3:    #ffffff;   /* kort */
  --line:     #e6e0d6;
  --line-2:   #cdc4b6;
  --accent:   #203860;
  --accent-2: #1b3054;
  --accent-ink: #ffffff;
  --text:     #14243d;
  --text-2:   #4d5f7c;
  /* 4,8:1 mot vitt. Tidigare #7a8aa3 gav bara 3,5:1 och foll pa WCAG AA
     for liten text ("per bat", noteringar). */
  --text-3:   #66748b;

  /* Temats egna */
  --navy-900: #0a1424;
  --navy-800: #12233f;
  --navy:     #203860;
  --navy-600: #2c4a7a;
  --sun:      #e9a23b;
  --sun-2:    #f6b757;
  --sun-ink:  #22180a;
  --gold:     #d99b2b;
  --paper:    #fbf9f5;

  --shadow-card: 0 2px 4px rgba(20, 36, 61, .04), 0 18px 40px -22px rgba(20, 36, 61, .28);
  --shadow-lift: 0 4px 8px rgba(20, 36, 61, .05), 0 32px 64px -28px rgba(20, 36, 61, .35);
  --shadow-cta: 0 2px 6px rgba(120, 78, 12, .22), 0 14px 30px -12px rgba(180, 122, 30, .55);

  --font-display: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
  --font-sans: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Tva angransande sektioner ger 2x gap. 84px ger ca 168px mellan
     sektioner, vilket ar redaktionellt luftigt utan att lasa som
     oavslutat. Storre an sa borjade sidan kannas tom. */
  --gap: clamp(48px, 6vw, 84px);
  --radius-m: 14px;
  --radius-l: 22px;
  /* Hojden pa den fasta bokningsraden pa mobil: 10 px innerkant upptill,
     56 px CTA, 10 px nertill, plus hemindikatorn pa iPhone. En enda
     sanning, sa att bade sidans botten och heron reserverar exakt lika
     mycket utrymme som raden faktiskt tar. */
  --mbar-h: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* Fokusmarkering pa morka ytor.
   Den globala fokuslinjen anvander --accent-2, som i battemat ar marinbla
   #1b3054. Mot headerns och modalens #12233f ger det ca 1,2:1 och mot
   sidfotens #0a1424 ca 1,4:1, alltsa langt under kravet pa 3:1 for
   synlig komponentmarkering. En tangentbordsanvandare sag helt enkelt
   inte var fokus lag. Pa de morka ytorna byts linjen darfor mot vitt,
   som ger over 12:1 mot samtliga av dem. */
.theme-boat .site-header :focus-visible,
.theme-boat .site-footer :focus-visible,
.theme-boat .bt-hero :focus-visible,
.theme-boat .bt-inc :focus-visible,
.theme-boat .bt-final :focus-visible,
.theme-boat .bt-pcard--feat :focus-visible,
.theme-boat .bt-mbar :focus-visible,
.theme-boat .bt-modal :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}
.theme-boat h1, .theme-boat h2, .theme-boat h3, .theme-boat h4 { word-spacing: .06em; }
.theme-boat .h2 { font-size: clamp(1.95rem, 5.4vw, 3.15rem); line-height: 1.06; letter-spacing: -.012em; }
.theme-boat .eyebrow { color: var(--navy-600); letter-spacing: .18em; }
.theme-boat .section-head { max-width: 620px; }
.theme-boat .section-head p { color: var(--text-2); line-height: 1.65; }
.section-head--mid { margin-inline: auto; text-align: center; }
.theme-boat section[id] { scroll-margin-top: 84px; }

/* Formularelement pa ljust kort */
.theme-boat .field input, .theme-boat .field select { background-color: #fff; min-height: 52px; }
.theme-boat .field label { font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
.theme-boat .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203860' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ============================================================
   Boknings-CTA. Enda gula ytan pa sidan. Minst 56 px hog.
   Gult falt med morkt marinblatt text ger kontrast ~7:1, alltsa
   battre an vit text pa gult, som hade legat under gransen.
   ============================================================ */
.bt-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 15px 30px; border: 0; border-radius: 999px;
  background: linear-gradient(178deg, var(--sun-2) 0%, var(--sun) 58%, #dd9128 100%);
  color: var(--sun-ink);
  font-family: var(--font-sans); font-weight: 800; font-size: 1rem; letter-spacing: .005em;
  cursor: pointer; text-align: center;
  box-shadow: var(--shadow-cta);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), filter .22s var(--ease-out);
}
/* Mjuk glansstrimma som vandrar over knappen vid hover */
.bt-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.bt-cta:hover { transform: translateY(-2px); filter: saturate(1.06); box-shadow: 0 4px 10px rgba(120,78,12,.24), 0 22px 44px -14px rgba(180,122,30,.62); }
.bt-cta:hover::after { transform: translateX(120%); }
.bt-cta:active { transform: translateY(0) scale(.985); }
.bt-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--navy); }
.bt-cta svg { width: 18px; height: 18px; flex: none; }
.bt-cta--lg { min-height: 64px; padding: 18px 36px; font-size: 1.08rem; }
.bt-cta--block { width: 100%; }
.bt-cta--nav { display: none; min-height: 48px; padding: 12px 22px; font-size: .95rem; }

/* Sekundarknapp: aldrig gul, aldrig lika tung som bokningen */
.bt-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; padding: 15px 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.42); color: #fff;
  font-weight: 700; font-size: .98rem;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bt-ghost:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.75); }
.bt-ghost svg { width: 17px; height: 17px; }
.bt-textlink { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-weight: 700; font-size: .96rem; }
.bt-textlink svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.bt-textlink:hover svg { transform: translateX(3px); }
.bt-textlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Header: massiv marinbla list. Lasbar i alla lagen aven utan JS,
   till skillnad fran en genomskinlig header som blir olaslig sa
   snart man rullar ner over ljust innehall.
   ============================================================ */
.theme-boat .site-header {
  background: color-mix(in srgb, var(--navy-800) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.theme-boat .site-header.is-stuck { background: var(--navy-800); box-shadow: 0 12px 30px -20px rgba(10,20,36,.9); }
.theme-boat .nav { height: 68px; gap: 14px; }
.bt-brand { display: flex; align-items: center; min-width: 0; }
.bt-brand__logo { height: 26px; width: auto; display: block; }
.bt-brand:hover { opacity: .85; }
.bt-logo--txt { color: #fff; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .04em; }
.theme-boat .nav__links a { color: rgba(255,255,255,.82); font-size: .93rem; font-weight: 600; }
.theme-boat .nav__links a:hover { color: #fff; }
.theme-boat .nav__links.open { background: var(--navy-800); border-bottom-color: rgba(255,255,255,.12); }
.theme-boat .nav__links.open a { color: #fff; border-bottom-color: rgba(255,255,255,.1); }
.bt-navend { display: flex; align-items: center; gap: 8px; }
.bt-toggle { background: transparent; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; color: #fff; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.bt-toggle svg { width: 20px; height: 20px; }
.bt-toggle:hover { background: rgba(255,255,255,.1); }

/* ---------- Sprakvaljare ----------
   <details> ar en disclosure som fungerar helt utan JavaScript. Texten
   ("Svenska") ar den tillgangliga markningen, flaggan ar dekor. Samma
   komponent pa mobil och desktop, sa den ar aldrig gomd pa liten skarm. */
.bt-lang { position: relative; }
.bt-lang > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 11px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.24); color: #fff;
  font-size: .82rem; font-weight: 800; letter-spacing: .04em;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.bt-lang > summary::-webkit-details-marker { display: none; }
.bt-lang > summary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.bt-flag { display: block; width: 20px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.16) inset; }
.bt-lang__chev { display: grid; place-items: center; opacity: .7; }
.bt-lang__chev svg { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .22s var(--ease-out); }
.bt-lang[open] .bt-lang__chev svg { transform: rotate(-90deg); }
.bt-lang__pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 190px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 6px; box-shadow: var(--shadow-lift);
  animation: btPop .2s var(--ease-out) both;
}
@keyframes btPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.bt-lang__pop a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 9px; min-height: 44px;
  color: var(--text); font-size: .92rem; font-weight: 600;
}
.bt-lang__pop a:hover { background: var(--ink-2); }
.bt-lang__pop a.is-current { color: var(--navy); font-weight: 800; }
.bt-lang__tick { margin-left: auto; display: grid; place-items: center; color: var(--navy); }
.bt-lang__tick svg { width: 16px; height: 16px; }

/* ============================================================
   Hero: fotot fyller skarmen, texten ligger i nedre vanstra hornet
   dar sloret ar tatast. Hojden ar last i CSS, sa bilden aldrig
   knuffar innehallet nedat under laddning.
   ============================================================ */
.bt-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 620px; min-height: min(94svh, 900px);
  padding: 120px 0 clamp(48px, 7vw, 92px);
  background: var(--navy-900);
}
.bt-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bt-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
/* Motivet har en person med vit LET'S BOAT-text pa ryggen mitt i bild.
   Utan ett tatt slor pa vanster halva kolliderar rubriken med den texten
   och bada blir svarlasta. Sloret ar darfor kraftigt asymmetriskt. */
.bt-hero__scrim {
  position: absolute; inset: 0;
  background:
    /* Koncentrerad skugga exakt bakom textblocket. Ett heltackande slor
       over hela bilden gav visserligen kontrast, men slackte samtidigt
       motljuset som ar hela anledningen till att fotot ar bra. Ellipsen
       maste racka fram till ca 70 % av bredden: dar borjar det vita
       LET'S BOAT-trycket pa ryggen, och det ar mot det rubrikens sista
       rad ska sta sig. */
    radial-gradient(64% 76% at 18% 70%, rgba(8,17,31,.88) 0%, rgba(8,17,31,.72) 36%, rgba(8,17,31,.4) 58%, transparent 80%),
    linear-gradient(to top, rgba(8,17,31,.9) 0%, rgba(8,17,31,.6) 30%, rgba(8,17,31,.16) 64%, rgba(8,17,31,.44) 100%),
    linear-gradient(100deg, rgba(8,17,31,.78) 0%, rgba(8,17,31,.5) 40%, rgba(8,17,31,.16) 70%, transparent 92%);
}
/* .wrap ger margin-inline: auto. Med en max-width direkt pa .bt-hero__in
   centrerades hela textblocket i sin 1180 px-behallare och skots darmed
   at hoger, rakt in i det vita LET'S BOAT-trycket pa personens rygg.
   Behallaren far darfor behalla full bredd, och det ar barnen som
   begransas, sa texten borjar vid containerns vanstra kant dar bilden
   ar morkast. */
.bt-hero__in { position: relative; color: #fff; }
.bt-hero__in > * { max-width: 700px; }

.bt-hproof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.bt-rating {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.bt-rating:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.bt-rating__score { font-family: var(--font-display); font-size: 1.85rem; line-height: 1; color: #fff; }
.bt-rating__body { display: flex; flex-direction: column; gap: 2px; }
.bt-rating__lbl { font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .01em; }
.bt-rank {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.92);
}
.bt-rank svg { width: 15px; height: 15px; color: var(--sun-2); flex: none; }

.bt-hero__h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.7rem, 7.6vw, 5.2rem); line-height: .98; letter-spacing: -.022em;
  color: #fff; text-wrap: balance;
  /* Tva lager: ett tatt for kantskarpa mot bokstaverna i fotot, ett brett
     mjukt for allman separation fran bilden. */
  text-shadow: 0 1px 3px rgba(8,17,31,.55), 0 2px 34px rgba(8,17,31,.5);
}
/* Kursiven var tidigare nedtonad till 82 % vitt. Mot den ljusa delen av
   fotot blev den ljusgra mot ljust och tappade lasbarhet. Den ar nu
   praktiskt taget samma vita som forsta raden, och skiljs at med kursiv
   stil i stallet for med ljushet. */
.bt-hero__h1 em { display: block; font-style: italic; color: rgba(255,255,255,.97); margin-top: .06em; }
.bt-hero__sub {
  margin-top: 22px; max-width: 46ch;
  font-size: clamp(1.05rem, 2.5vw, 1.22rem); line-height: 1.62;
  color: rgba(255,255,255,.88);
}
.bt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Snabbfakta: harfina avdelare i stallet for piller. Piller pa piller
   blir rorigt sa nara betygsbrickan. */
.bt-hfacts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2);
}
.bt-hfacts li {
  position: relative; padding-right: 24px;
  font-size: .92rem; font-weight: 700; color: rgba(255,255,255,.94); letter-spacing: .005em;
}
.bt-hfacts li:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(255,255,255,.26);
}
.bt-hero__micro { display: flex; gap: 9px; align-items: flex-start; margin-top: 18px; font-size: .85rem; color: rgba(255,255,255,.7); }
.bt-hero__micro svg { width: 15px; height: 15px; color: var(--sun-2); flex: none; margin-top: 3px; }

.bt-stars { display: inline-flex; gap: 2px; color: var(--gold); }
.bt-stars svg { width: 15px; height: 15px; }

/* ============================================================
   Bokningskort som lyfter upp over heron. Overlappet ar det som
   gor att sidan far djup i stallet for att kannas som staplade
   vita rutor, och det flyttar bokningen ovanfor vecket.
   ============================================================ */
/* Ingen egen bottenpadding: nasta sektion bar sin egen var(--gap), och
   tva staplade gap gjorde ytan under kortet dod. Sektionen efter far
   dessutom halverad topp-padding, eftersom bokningskortet redan har
   44 px egen innerkant och summan annars lasar som en dod yta. */
.bt-bookband { position: relative; background: var(--paper); }
.bt-bookband + .block { padding-top: calc(var(--gap) * .5); }
.bt-bookcard {
  position: relative; margin-top: clamp(-40px, -5vw, -76px);
  display: grid; gap: clamp(22px, 3vw, 40px);
  background: #fff; border-radius: var(--radius-l);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
}
.bt-bookcard__head .eyebrow { margin-bottom: 12px; }
.bt-bookcard__head p { color: var(--text-2); margin-top: 12px; font-size: .96rem; line-height: 1.6; }
.bt-bookcard__form { display: grid; gap: 14px; align-items: end; }
.bt-bookcard__form .field { margin-bottom: 0; }
.bt-bookcard__submit { width: 100%; white-space: nowrap; }

/* ============================================================
   Socialt bevis: asymmetriskt, foto till vanster med ett flytande
   betygskort som bryter ut ur ramen.
   ============================================================ */
.bt-proof { display: grid; gap: clamp(30px, 5vw, 56px); align-items: center; }
.bt-proof__media { position: relative; }
.bt-proof__frame {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-lift);
}
.bt-proof__frame img { width: 100%; height: 100%; object-fit: cover; }
.bt-proof__float {
  position: absolute; right: -8px; bottom: -22px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--navy); color: #fff; border-radius: 18px;
  padding: 18px 22px; box-shadow: var(--shadow-lift);
}
.bt-proof__float-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.bt-proof__float-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.bt-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.bt-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--navy) 16%, #fff);
  color: var(--navy); font-size: .84rem; font-weight: 700;
}
.bt-badge svg { width: 15px; height: 15px; flex: none; color: var(--gold); }
.bt-ratings { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; margin-bottom: 22px; }
.bt-ratings li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: #fff; padding: 15px 18px;
}
.bt-ratings b { font-weight: 800; color: var(--text); }
.bt-ratings span { color: var(--text-2); font-size: .9rem; text-align: right; }

/* ============================================================
   Priser. Den mest bokade turen far marinbla yta i stallet for en
   ram, sa hierarkin syns pa en halv sekund.
   ============================================================ */
.bt-pcards { display: grid; gap: 20px; padding-top: 14px; }
.bt-pcard {
  position: relative; display: flex; flex-direction: column; gap: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.bt-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.bt-pcard--feat {
  background: linear-gradient(168deg, var(--navy) 0%, var(--navy-800) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 30px 70px -30px rgba(32,56,96,.72);
}
.bt-pcard--feat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 80% 0%, rgba(233,162,59,.2), transparent 62%);
}
.bt-pcard__badge {
  position: absolute; top: -14px; left: 26px;
  background: var(--sun); color: var(--sun-ink);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-cta);
}
.bt-pcard h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.95rem; }
.bt-pcard--feat h3 { color: #fff; }
.bt-pcard__angle { color: var(--navy-600); font-weight: 700; font-size: .88rem; margin-top: -6px; }
.bt-pcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bt-pcard__price b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 2.8rem); line-height: 1; color: var(--text); }
.bt-pcard--feat .bt-pcard__price b { color: #fff; }
.bt-pcard__price span { color: var(--text-3); font-size: .88rem; }
.bt-pcard--feat .bt-pcard__price span { color: rgba(255,255,255,.6); }
.bt-pcard__per { color: var(--text-2); font-size: .92rem; font-weight: 700; }
.bt-pcard--feat .bt-pcard__per { color: rgba(255,255,255,.82); }
.bt-pcard__list { list-style: none; display: grid; gap: 9px; margin: 10px 0 20px; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.bt-pcard--feat .bt-pcard__list { color: rgba(255,255,255,.8); }
.bt-pcard__list li { display: flex; gap: 9px; align-items: flex-start; }
.bt-pcard__list svg { width: 16px; height: 16px; color: var(--navy); flex: none; margin-top: 3px; }
.bt-pcard--feat .bt-pcard__list svg { color: var(--sun-2); }
.bt-pcard .bt-cta { margin-top: auto; }
.bt-trustline {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 34px auto 0; max-width: 760px; color: var(--text-2); font-size: .88rem; text-align: center; line-height: 1.6;
}
.bt-trustline svg { width: 17px; height: 17px; color: var(--navy); flex: none; }

/* ---------- Sa fungerar det ---------- */
.bt-steps { list-style: none; display: grid; gap: 28px; counter-reset: bt; }
.bt-steps li { position: relative; padding-top: 26px; border-top: 2px solid var(--line); }
.bt-steps__num {
  position: absolute; top: -19px; left: 0;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 0 0 6px var(--paper);
}
.bt-steps h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 8px; }
.bt-steps p { color: var(--text-2); font-size: .96rem; line-height: 1.62; }

/* ============================================================
   Vad som ingar: morkt band mitt i sidan. Ger vertikal rytm och
   later fotot ga hela vagen ut i kanten.
   ============================================================ */
.bt-inc { position: relative; background: var(--navy-800); color: #fff; padding: var(--gap) 0; overflow: clip; }
.bt-inc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 12% 0%, rgba(233,162,59,.14), transparent 60%);
}
.bt-inc__grid { position: relative; display: grid; gap: clamp(30px, 5vw, 60px); align-items: center; }
.bt-inc__frame { overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.bt-inc__frame img { width: 100%; height: 100%; object-fit: cover; }
.bt-inc .eyebrow { color: var(--sun-2); }
.bt-inc .h2 { color: #fff; }
/* Linjen ligger overst pa varje rad, inte underst. Med tva kolumner blir
   det da alltid forsta raden som ska sakna linje, vilket ar en fast
   position, till skillnad fran sista raden som beror pa antalet punkter. */
.bt-includes { list-style: none; display: grid; gap: 0; }
.bt-includes li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.9);
}
.bt-includes li:first-child { border-top: 0; }
.bt-includes svg { width: 18px; height: 18px; color: var(--sun-2); flex: none; margin-top: 2px; }

/* ---------- Upplevelser: foto pa varje kort ----------
   Fem kort i ett tre-kolumnsrutnat lamnar annars ett tomt hal i sista
   raden. Sista kortet (foretag, det mest vardefulla ledet) breddas till
   tva spalter och laggs om till liggande format i stallet. */
.bt-auds { display: grid; gap: 20px; }
.bt-aud {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.bt-aud:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.bt-aud__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ink-2); }
.bt-aud__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.bt-aud:hover .bt-aud__media img { transform: scale(1.05); }
.bt-aud__body { display: flex; flex-direction: column; gap: 9px; padding: 24px 24px 26px; flex: 1; }
.bt-aud h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.bt-aud p { color: var(--text-2); font-size: .93rem; line-height: 1.6; flex: 1; }
.bt-aud__link { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-weight: 700; font-size: .91rem; margin-top: 6px; }
.bt-aud__link svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.bt-aud:hover .bt-aud__link svg { transform: translateX(4px); }
.bt-aud__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- FAQ ---------- */
.bt-faqwrap { display: grid; gap: clamp(24px, 4vw, 56px); }
.bt-faqwrap__head .section-head { margin-bottom: 24px; }
/* Vansterspalten bar mer an en rubrik. Utan detta stod en nastan tom
   spalt bredvid tio dragspel, vilket lasar som ofardigt. */
.bt-faqhelp {
  background: color-mix(in srgb, var(--navy) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--navy) 13%, #fff);
  border-radius: var(--radius-l); padding: 24px;
  display: grid; gap: 8px; justify-items: start;
}
.bt-faqhelp h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 800; }
.bt-faqhelp p { color: var(--text-2); font-size: .9rem; line-height: 1.55; margin-bottom: 6px; }
.bt-faqhelp .bt-textlink { font-size: .92rem; }
.bt-faq { display: grid; gap: 10px; }
.bt-faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; transition: border-color .2s var(--ease-out); }
.bt-faq__item:hover { border-color: var(--line-2); }
.bt-faq__item[open] { box-shadow: var(--shadow-card); }
.bt-faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 19px 22px; font-weight: 700; font-size: 1rem; color: var(--text);
}
.bt-faq__item summary::-webkit-details-marker { display: none; }
.bt-faq__item summary:hover { color: var(--navy); }
.bt-faq__chev { flex: none; display: grid; place-items: center; color: var(--navy); }
.bt-faq__chev svg { width: 17px; height: 17px; transition: transform .25s var(--ease-out); }
.bt-faq__item[open] .bt-faq__chev svg { transform: rotate(90deg); }
.bt-faq__a { padding: 0 22px 20px; color: var(--text-2); font-size: .95rem; line-height: 1.65; }

/* ---------- Hitta hit ---------- */
.bt-contact { display: grid; gap: 16px; align-items: start; }
.bt-cinfo {
  display: flex; gap: 15px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px;
  box-shadow: var(--shadow-card);
}
a.bt-cinfo { transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
a.bt-cinfo:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.bt-cinfo__ic {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--navy) 8%, #fff); color: var(--navy);
}
.bt-cinfo__ic svg { width: 20px; height: 20px; }
.bt-cinfo h3 { font-size: 1.02rem; font-weight: 800; font-family: var(--font-sans); margin-bottom: 4px; }
.bt-cinfo p { color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.bt-cinfo__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--navy); font-weight: 700; font-size: .86rem; }
.bt-cinfo__link svg { width: 14px; height: 14px; }
.bt-cinfo__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-cinfo__note { color: var(--text-3); font-size: .82rem; margin-top: 8px; }

/* ---------- Avslutande CTA-band ---------- */
.bt-final { position: relative; isolation: isolate; overflow: clip; padding: clamp(72px, 10vw, 128px) 0; text-align: center; }
.bt-final__media { position: absolute; inset: 0; z-index: -1; }
.bt-final__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.bt-final__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(18,35,63,.93) 0%, rgba(10,20,36,.88) 100%);
}
.bt-final__in { max-width: 660px; margin-inline: auto; display: grid; gap: 16px; justify-items: center; color: #fff; }
.bt-final .h2 { color: #fff; }
.bt-final p { color: rgba(255,255,255,.82); font-size: 1.06rem; }
.bt-final__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ---------- Footer ---------- */
.theme-boat .site-footer { background: var(--navy-900); border-top: 0; color: rgba(255,255,255,.72); padding: clamp(48px, 6vw, 72px) 0 32px; }
.theme-boat .site-footer .bt-brand__logo { height: 24px; }
.theme-boat .footer__brand p { color: rgba(255,255,255,.6); margin-top: 14px; }
/* Sidfotens spaltrubriker ar h3, inte h4: efter sista sektionens h2 hade
   ett h4 blivit ett hopp i rubrikhierarkin. Utseendet ar oforandrat. */
.theme-boat .footer__col h3 {
  font-family: var(--font-sans); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.5); margin-bottom: 12px;
}
.theme-boat .footer__col a, .theme-boat .footer__col span { color: rgba(255,255,255,.74); }
.theme-boat .footer__col a:hover { color: var(--sun-2); }
.theme-boat .footer__bar { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
.bt-footer__langs a[aria-current="true"] { color: #fff; font-weight: 700; }

/* ---------- Sticky bottenrad pa mobil ---------- */
.bt-mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--navy-800) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -14px 30px -20px rgba(10,20,36,.8);
}
.bt-mbar__price { display: flex; flex-direction: column; line-height: 1.15; flex: none; }
/* Utan JavaScript ar raden alltid synlig, och heron reserverar plats for
   den. Med JavaScript satts klassen nedan och raden halls undan sa lange
   heron syns: heron har redan en stor CTA, sa en identisk fast kopia
   ovanpa den ar bade overflodig och det som klippte sista textraden pa
   laga skarmar. */
.bt-mbar--auto { transform: translateY(115%); opacity: 0; pointer-events: none; }
.bt-mbar--auto.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.js .bt-mbar { transition: transform .32s var(--ease-out), opacity .24s var(--ease-out); }
.bt-mbar__price b { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; color: #fff; }
.bt-mbar__price span { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.bt-mbar__cta { flex: 1; }

/* ============================================================
   Bokningsmodal. Let's Boats ram runt letsbooks flode, sa besokaren
   aldrig kanner att hen lamnat sajten. Ramen visas bara nar JS finns;
   utan JS gar samma lank till bokningssidan som vanligt.
   ============================================================ */
.bt-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 0; }
.bt-modal__backdrop { position: absolute; inset: 0; background: rgba(8,16,30,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--ease-out); }
.bt-modal__panel {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 100%; max-width: 880px; max-height: 100%;
  background: var(--navy-800); color: #fff; overflow: hidden;
  transform: translateY(18px); opacity: 0;
  transition: transform .34s var(--ease-out), opacity .34s var(--ease-out);
}
.bt-modal.is-open .bt-modal__backdrop { opacity: 1; }
.bt-modal.is-open .bt-modal__panel { transform: none; opacity: 1; }
.bt-modal__bar {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.14);
  background: var(--navy-800);
}
.bt-modal__logo { height: 22px; width: auto; flex: none; }
.bt-modal__title { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: rgba(255,255,255,.9); flex: 1; min-width: 0; letter-spacing: 0; }
.bt-modal__ext { display: none; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; }
.bt-modal__ext:hover { color: #fff; }
.bt-modal__close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: #fff;
  transition: background .18s var(--ease-out);
}
.bt-modal__close:hover { background: rgba(255,255,255,.2); }
.bt-modal__close svg { width: 19px; height: 19px; }
.bt-modal__body { position: relative; flex: 1; min-height: 0; background: #fff; }
.bt-modal__frame { width: 100%; height: 100%; border: 0; display: block; }
.bt-modal__loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--text-2); font-size: .92rem; font-weight: 600; background: #fff;
}
.bt-modal__loading::before {
  content: ""; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--navy);
  animation: btSpin .9s linear infinite;
}
@keyframes btSpin { to { transform: rotate(360deg); } }
.bt-modal__note {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: .78rem; color: rgba(255,255,255,.62); text-align: center;
}
.bt-modal__note svg { width: 14px; height: 14px; flex: none; }
body.bt-locked { overflow: hidden; }

/* ============================================================
   Uppover-skalering
   ============================================================ */
@media (max-width: 899.98px) {
  /* Bottenraden ar position: fixed och taljer alltsa inte i flodet. Utan
     detta lag den ovanpa sidans sista rader, och i heron skar den av
     mikrotexten om avbokning och sasong redan vid forsta anblicken.
     Bade dokumentet och heron reserverar darfor radens hojd. */
  body.theme-boat { padding-bottom: var(--mbar-h); }
  .bt-hero { padding-bottom: calc(clamp(48px, 7vw, 92px) + var(--mbar-h)); }
}
/* Mobil ar det viktigaste formatet. Heron komprimeras sa att betyg,
   rubrik, CTA OCH de fyra snabbfakta far plats ovanfor vecket pa en
   390 px skarm. Det ar hela poangen med forsta skarmen. */
@media (max-width: 599.98px) {
  .bt-hero { min-height: min(92svh, 760px); padding: 92px 0 calc(28px + var(--mbar-h)); }
  /* Pa smal skarm beskars bilden pa bredden. Genom att visa mer av
     vanstra delen (bryggan, flaggan, kanalen) hamnar personen med det
     vita trycket pa ryggen ute i hogerkanten, i stallet for bakom
     rubriken dar de tva vita texterna slogs om samma yta. */
  .bt-hero__img { object-position: 38% 42%; }
  .bt-hero__h1 { font-size: clamp(2.3rem, 9vw, 2.9rem); }
  .bt-hero__sub { margin-top: 16px; font-size: 1rem; }
  .bt-hero__actions { margin-top: 22px; gap: 10px; }
  .bt-hproof { gap: 8px; margin-bottom: 18px; }
  .bt-rating { padding: 7px 14px 7px 11px; gap: 10px; }
  .bt-rating__score { font-size: 1.6rem; }
  .bt-rank { padding: 7px 13px; font-size: .74rem; }
  .bt-hfacts { margin-top: 20px; padding-top: 16px; gap: 0 16px; }
  .bt-hfacts li { font-size: .84rem; padding-right: 16px; }
  .bt-hero__micro { margin-top: 14px; font-size: .8rem; }
  .bt-ghost { min-height: 52px; font-size: .93rem; }
}
/* Lag skarm (iPhone SE och liknande). Utan detta hamnade sekundarknappen
   precis i kanten pa den fasta bokningsraden och blev halvt avskuren.
   Heron komprimeras darfor pa hojden i stallet for att lita pa att
   innehallet rakar sluta pa ratt stalle. Rubriken halls kvar over 30 px
   sa den fortfarande gar att lasa i solljus. */
@media (max-width: 899.98px) and (max-height: 700px) {
  .bt-hero { padding-top: 78px; }
  .bt-hproof { margin-bottom: 10px; gap: 6px; }
  .bt-rating { padding: 5px 12px 5px 9px; gap: 9px; }
  .bt-rating__score { font-size: 1.35rem; }
  .bt-rank { padding: 6px 11px; font-size: .7rem; }
  .bt-hero__h1 { font-size: clamp(1.95rem, 8vw, 2.3rem); }
  .bt-hero__sub { margin-top: 12px; font-size: .95rem; }
  .bt-hero__actions { margin-top: 16px; gap: 8px; }
  .bt-hfacts { margin-top: 14px; padding-top: 12px; }
  .bt-hero__micro { margin-top: 10px; }
  /* Utan JavaScript ligger bokningsraden kvar aven over heron, och pa en
     lag skarm hamnade da snabbfaktarnas andra rad i kanten pa den. Mer
     bottenpadding hjalper inte: heron ar innehallsdriven och vaxer nedat,
     sa innehallet star kvar. Det som faktiskt flyttar det ar att slappa
     min-height, sa heron kramar sitt innehall i stallet for att stracka
     sig over skarmen. Gäller bara nar main.js inte satt .js pa <html>. */
  html:not(.js) .bt-hero { min-height: 0; padding-top: 12px; }
  html:not(.js) .bt-hfacts { margin-top: 8px; padding-top: 10px; }
}
@media (min-width: 600px) {
  .bt-bookcard__form { grid-template-columns: 1fr 1fr; }
  .bt-bookcard__submit { grid-column: span 2; }
  .bt-contact { grid-template-columns: 1fr 1fr; }
  .bt-includes { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .bt-auds { grid-template-columns: 1fr 1fr; }
  .bt-auds > :last-child { grid-column: span 2; flex-direction: row; }
  .bt-auds > :last-child .bt-aud__media { width: 42%; flex: none; aspect-ratio: auto; }
  .bt-auds > :last-child .bt-aud__body { justify-content: center; padding: 28px 30px; }
}
@media (min-width: 900px) {
  .bt-mbar { display: none; }
  .bt-toggle { display: none; }
  .bt-cta--nav { display: inline-flex; }
  .theme-boat .nav { height: 76px; }
  .bt-brand__logo { height: 30px; }
  .theme-boat .nav__links { display: flex; gap: 26px; margin-inline: auto; }
  .bt-hero__in > * { max-width: 760px; }
  .bt-proof { grid-template-columns: 0.95fr 1.05fr; }
  .bt-pcards { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 24px; }
  .bt-pcard--feat { transform: translateY(-14px); }
  .bt-pcard--feat:hover { transform: translateY(-18px); }
  .bt-steps { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .bt-inc__grid { grid-template-columns: .85fr 1.15fr; }
  .bt-faqwrap { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .bt-faqwrap__head { position: sticky; top: 108px; margin-bottom: 0; }
  .bt-modal { padding: 28px; }
  .bt-modal__panel { height: min(92vh, 940px); border-radius: var(--radius-l); box-shadow: 0 50px 100px -40px rgba(0,0,0,.7); }
  .bt-modal__ext { display: inline; }
  .bt-modal__bar { padding: 16px 20px; }
}
@media (min-width: 1024px) {
  .bt-bookcard { grid-template-columns: .82fr 1.18fr; align-items: center; }
  /* Knappen ligger pa egen rad och tar hela formularets bredd. Forsokte
     forst placera den som fjarde kolumn, men da stod den ensam med en dod
     yta bredvid sig. En bred gul rad under falten lasar som avsiktlig. */
  .bt-bookcard__form { grid-template-columns: 1fr 1fr .68fr; }
  .bt-bookcard__submit { grid-column: 1 / -1; width: 100%; }
  .bt-auds { grid-template-columns: repeat(3, 1fr); }
  .bt-contact { grid-template-columns: repeat(4, 1fr); }
  .theme-boat .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-cta::after, .bt-aud__media img, .bt-modal__panel, .bt-modal__backdrop { transition: none !important; }
  .bt-modal__loading::before { animation: none; }
}