/* ─── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ─── TOKENS ────────────────────────────────────────────── */
:root {
  --bg:          #07060A;
  --bg-2:        #0D0B0F;
  --surface:     #131017;
  --surface-2:   #1A1820;
  --gold:        #B89878;
  --gold-lt:     #D4B895;
  --gold-deep:   #8B6D52;
  --gold-dim:    rgba(184,152,120,.18);
  --gold-glow:   rgba(184,152,120,.28);
  --text:        #F1ECE0;
  --text-2:      rgba(241,236,224,.82);
  --text-3:      rgba(241,236,224,.52);
  --rule:        rgba(241,236,224,.07);
  --rule-gold:   rgba(184,152,120,.18);
  --font:        'Montserrat', system-ui, -apple-system, sans-serif;
  --serif:       'Montserrat', system-ui, -apple-system, sans-serif;
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --t:           .4s;
}

/* ─── BASE ──────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Page-wide film grain — gives flat backgrounds atmospheric depth */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.82 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: .25; }
}
/* The grain is a full-viewport mix-blend-mode layer that forces the whole page
   to recomposite on every animation frame — extremely costly on mobile GPUs and
   barely visible there. Drop it on touch / small screens to free the main thread. */
@media (hover: none), (max-width: 768px) {
  body::before { display: none; }
}

/* ─── PAGE LOADER ───────────────────────────────────────── */
.loader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s var(--ease) .2s;
}
.loader.done { opacity: 0; pointer-events: none; }
.loader__logo {
  animation: logo-pulse 1.4s var(--ease) infinite alternate;
  position: relative;
  text-align: center;
}
.loader__logo svg { width: 220px; height: auto; display: block; }
/* Fyllnaden låg tidigare som fill="white" på var och en av logotypens tio
   path-element. Nu ritas logotypen av partials/logo.php, som medvetet är utan
   fill — färgen hör till platsen den står på, inte till formen. */
.loader__logo svg path { fill: var(--text); }
.loader__tag {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .8;
}
@keyframes logo-pulse {
  from { opacity: .35; letter-spacing: 0; }
  to   { opacity: 1;   letter-spacing: .015em; }
}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
h1, h2 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.005em;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
h3 {
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
h4 {
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.005em;
}

.overline {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
.overline::before, .overline::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: .7;
}
.overline--left::after { display: none; }
.overline--left::before {
  width: 24px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ─── LAYOUT ────────────────────────────────────────────── */
.container { width: min(1160px, 92%); margin-inline: auto; }
section { padding: 7rem 0; }

.section-header { max-width: 680px; }
.section-header .overline { margin-bottom: 1.5rem; }
.section-header h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  margin-bottom: 1.25rem;
}
.section-header p {
  font-size: .9375rem;
  color: var(--text-2);
  line-height: 1.8;
  font-weight: 400;
  max-width: 56ch;
}

.section-header--center { margin-inline: auto; text-align: center; }
.section-header--center .overline { justify-content: center; }

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  padding: 1.15em 2.7em;
  border: 1px solid;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              letter-spacing var(--t) var(--ease);
  white-space: nowrap;
}
.btn:hover { letter-spacing: .26em; }
.btn-gold {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
  box-shadow: 0 0 32px var(--gold-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-gold);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-arrow::after { content: '→'; font-size: 1em; }

/* ─── FOCUS ─────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ─── HAIRLINE ──────────────────────────────────────────── */
.hr {
  width: 100%; height: 1px;
  background: var(--rule);
}
.hr--gold { background: var(--rule-gold); }

/* ─── NAV ───────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.5%;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7,6,10,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--rule);
}

.nav__logo { flex-shrink: 0; }
.nav__logo svg { width: 148px; height: auto; display: block; }
.nav__logo svg path { fill: var(--text); }
.nav__logo-sub {
  font-family: var(--font);
  font-size: .55rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin-top: .2rem;
}

.nav__links {
  display: flex; gap: 2.5rem; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav__links a {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--t);
}
.nav__links a:hover { color: var(--gold); }

.nav__hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; padding: 4px;
}
.nav__hamburger span {
  display: block; width: 20px; height: 1px;
  background: var(--text);
  transition: var(--t) var(--ease);
  transform-origin: center;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  display: none;
  position: fixed; top: 68px; left: 0; right: 0;
  background: rgba(7,6,10,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.5rem 7% 2rem;
  flex-direction: column; gap: 0;
  border-bottom: 1px solid var(--rule-gold);
  z-index: 99;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.nav__drawer.is-open { display: flex; }
.nav__drawer a:not(.btn) {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-2);
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  transition: color var(--t), padding-left var(--t) var(--ease);
}
.nav__drawer a:not(.btn):hover { color: var(--gold); padding-left: .35rem; }
.nav__drawer .btn {
  align-self: flex-start;
  margin-top: 1.5rem;
  padding: 1.05em 2.4em;
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
}

/* ─── HERO ──────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 52fr 48fr;
  position: relative;
  overflow: hidden;
}

/* Subtle animated background gradient */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(157,125,93,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(90,60,200,.04) 0%, transparent 60%);
  animation: hero-glow 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-glow {
  0%   { opacity: .5; }
  100% { opacity: 1; }
}

.hero__content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 10rem 5% 7rem 6%;
  position: relative; z-index: 1;
}

.hero__overline { margin-bottom: 1.5rem; }

.hero__title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.1vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin-bottom: 2rem;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-lt);
}

.hero__lead {
  font-size: .9375rem;
  font-weight: 400;
  color: var(--text-2);
  max-width: 440px;
  line-height: 1.85;
  margin-bottom: 2.75rem;
}

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 4.5rem; }

.hero__divider {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 2.5rem;
}

.hero__stats { display: flex; gap: 3.5rem; }
.hero__stat-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 200;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.005em;
  display: flex; align-items: baseline; gap: .04em;
}
.hero__stat-num sup {
  font-size: .42em;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gold-lt);
  transform: translateY(-.1em);
}
.hero__stat-label {
  font-size: .58rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: .65rem;
  line-height: 1.5;
}

/* ─── BEFORE / AFTER WIDGET ─────────────────────────────── */
.hero__ba {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ba__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ba__after { clip-path: inset(0 50% 0 0); transition: clip-path .05s linear; }

/* Gradient overlay on both sides */
.ba__before::after, .ba__after::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(7,6,10,.45) 0%, transparent 30%, transparent 70%, rgba(7,6,10,.3) 100%);
  pointer-events: none;
}

/* Labels */
.ba__label {
  position: absolute;
  top: 2.5rem;
  font-family: var(--font);
  font-size: .54rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  padding: .55em 1.15em;
  border: 1px solid;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 4;
  transition: opacity .3s;
}
.ba__label--before {
  left: 1.5rem;
  color: rgba(237,232,222,.6);
  border-color: rgba(237,232,222,.15);
  background: rgba(7,6,10,.3);
}
.ba__label--after {
  right: 1.5rem;
  color: var(--gold);
  border-color: var(--rule-gold);
  background: rgba(7,6,10,.3);
}

/* Divider line */
.ba__line {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--gold);
  box-shadow: 0 0 20px var(--gold-glow), 0 0 60px rgba(157,125,93,.1);
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Handle */
.ba__handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  box-shadow: 0 0 0 6px rgba(157,125,93,.15), 0 8px 32px rgba(0,0,0,.6);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  pointer-events: none;
}
.ba__handle:active,
.hero__ba:active .ba__handle { transform: translate(-50%, -50%) scale(.95); }
.ba__handle svg { color: var(--bg); flex-shrink: 0; }

/* Pulsing ring animation (idle hint) */
.ba__handle::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: ba-pulse 2.5s ease-out infinite;
}
@keyframes ba-pulse {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Instruction hint */
.ba__hint {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  z-index: 4;
  opacity: 1;
  padding: .55em 1em;
  background: rgba(7,6,10,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .4s;
}
.ba__hint.hidden { opacity: 0; }

/* ─── TRUST BAR ─────────────────────────────────────────── */
.trust-bar {
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  box-shadow: 0 0 40px rgba(157,125,93,.06);
  overflow: hidden;
}
/* Desktop: single row of 4 */
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-item {
  display: flex; align-items: center; justify-content: flex-start; gap: .8rem;
  font-family: var(--font);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
  padding: 1.4rem 1.5rem;
  border-right: 1px solid var(--rule-gold);
  text-align: left;
}
.trust-item:last-child { border-right: none; }
.trust-item svg { color: var(--gold); opacity: 1; flex-shrink: 0; }

/* Medium: 2x2 grid */
@media (max-width: 1100px) {
  .trust-bar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  .trust-item:nth-child(2n) { border-right: none; }
  .trust-item:nth-child(3), .trust-item:nth-child(4) { border-bottom: none; }
}

/* Mobile: single column */
@media (max-width: 500px) {
  .trust-bar__inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid var(--rule); white-space: normal; }
  .trust-item:last-child { border-bottom: none; }
}

/* ─── INTRO ─────────────────────────────────────────────── */
.intro { background: var(--bg); }
.intro__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 6rem; align-items: center;
}
.intro__image {
  position: relative;
}
.intro__image::before {
  content: '';
  position: absolute;
  top: -2rem; left: -2rem;
  right: 2rem; bottom: 2rem;
  border: 1px solid var(--rule-gold);
  pointer-events: none;
  z-index: 0;
}
.intro__image img {
  position: relative; z-index: 1;
  width: 100%; height: 560px;
  object-fit: cover; object-position: center top;
}
.intro__badge {
  position: absolute;
  bottom: -1.75rem; right: -1.75rem;
  z-index: 2;
  padding: 1.4rem 1.9rem;
  background: var(--gold);
  color: var(--bg);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  line-height: 1.6;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.intro__badge strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: .2rem;
}

.intro__text .section-header { margin-bottom: 2.5rem; }
.intro__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--rule);
}
.intro__list li {
  display: flex; align-items: flex-start; gap: 1rem;
  font-size: .9rem;
  color: var(--text-2);
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.65;
}
.intro__list li::before {
  content: '→';
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
}

/* ─── PROCESS ───────────────────────────────────────────── */
.process { background: var(--bg-2); }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 1rem;
}
/* Connecting top line */
.process__steps::before {
  content: '';
  position: absolute;
  top: 3rem; left: calc(25% / 2);
  right: calc(25% / 2);
  height: 1px;
  background: linear-gradient(90deg, var(--rule-gold) 0%, var(--gold) 50%, var(--rule-gold) 100%);
}
.process__step {
  padding: 0 2rem 0 0;
  position: relative;
}
.process__step:last-child { padding-right: 0; }
.process__num {
  width: 72px; height: 72px;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 200;
  color: var(--gold);
  margin-bottom: 2.25rem;
  background: var(--bg-2);
  position: relative; z-index: 1;
  letter-spacing: 0;
}
.process__step:hover .process__num {
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(184,152,120,.08);
  transition: border-color var(--t), box-shadow var(--t);
}
.process__step h3 { margin-bottom: .75rem; }
.process__step p {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.75;
}

/* ─── AREAS ─────────────────────────────────────────────── */
.areas { background: var(--bg); }
.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: .5rem;
}
.area-card {
  padding: 2.5rem 2rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: background var(--t) var(--ease);
}
.area-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.area-card:hover { background: var(--surface); }
.area-card:hover::after { transform: scaleX(1); }

.area-card h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--gold-lt);
  margin-bottom: .75rem;
  line-height: 1.2;
}
.area-card p { font-size: .875rem; color: var(--text-2); line-height: 1.75; font-weight: 400; }

.areas__more { margin-top: 2.75rem; }
.areas__more-label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.areas__more-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.areas__more-list a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  background: var(--bg);
  font-size: .9rem; font-weight: 500;
  color: var(--text);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.areas__more-list a:hover { background: var(--surface); color: var(--gold); }
.areas__more-list a span {
  color: var(--gold);
  font-weight: 700;
  transition: transform var(--t) var(--ease);
}
.areas__more-list a:hover span { transform: translateX(5px); }
@media (max-width: 600px) {
  .areas__more-list { grid-template-columns: 1fr; }
}

/* ─── RESULTS ───────────────────────────────────────────── */
.results { background: var(--bg-2); }
.results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.results__numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.result-num {
  padding: 2.5rem 2rem;
  background: var(--bg-2);
}
.result-num__value {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 200;
  color: var(--gold-lt);
  line-height: 1;
  margin-bottom: .65rem;
  letter-spacing: -.005em;
}
.result-num__label {
  font-size: .58rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.6;
}
.results__image {
  position: relative;
}
.results__image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(157,125,93,.06) 0%, transparent 60%);
  pointer-events: none;
}
.results__image img {
  width: 100%; height: 480px;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(10%);
}

/* ─── PRICING ───────────────────────────────────────────── */
.pricing { background: var(--bg); }
.pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.price-card {
  padding: 3rem 2.5rem;
  background: var(--bg);
  position: relative;
  display: flex; flex-direction: column;
  transition: background var(--t) var(--ease);
}
.price-card:hover { background: var(--surface); }

.price-card--featured {
  background: var(--surface-2);
  position: relative;
}
.price-card--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.price-card--featured:hover { background: #201E26; }

.price-card__tag {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  padding: .55em 1.4em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.price-card__zone {
  font-size: .56rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}
.price-card h3 {
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.price-card__amount {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 200;
  color: var(--text);
  line-height: 1;
  margin-bottom: .4rem;
  letter-spacing: -.005em;
}
.price-card--featured .price-card__amount { color: var(--gold-lt); }
.price-card__note {
  font-size: .78rem;
  color: var(--text-3);
  margin-bottom: 2rem;
}
.price-card__rule { height: 1px; background: var(--rule); margin-bottom: 2rem; }
.price-card__features {
  list-style: none;
  display: flex; flex-direction: column; gap: .65rem;
}
.price-card__features li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .8375rem;
  color: var(--text-2);
}
.price-card__features li::before {
  content: '→';
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
}
.price-card__btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  padding-top: 1.1em; padding-bottom: 1.1em;
}
.price-card__features + .price-card__btn { margin-top: 2.25rem; }

/* ─── PRICE LIST (remaining treatments) ─────────────────── */
.price-list-group { margin-top: 3.25rem; }
.price-list-group__title {
  display: flex; align-items: center; gap: 1em;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.price-list-group__title::after {
  content: ''; flex: 1; height: 1px; background: var(--rule-gold);
}
.price-list { border: 1px solid var(--rule); }
.price-list__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .4rem 1.75rem;
  padding: 1.05rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: background var(--t) var(--ease);
}
.price-list__row:last-child { border-bottom: none; }
.price-list__row:hover { background: var(--surface); }
.price-list__name { font-size: .9375rem; font-weight: 400; color: var(--text); }
.price-list__meta {
  display: block;
  font-family: var(--font);
  font-size: .54rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: .45rem;
}
.price-list__price {
  font-family: var(--font);
  font-size: 1rem; font-weight: 600;
  letter-spacing: -.005em;
  color: var(--gold-lt);
  white-space: nowrap;
}
.price-list__btn {
  display: inline-flex; align-items: center;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .8em 1.7em;
  border: 1px solid var(--rule-gold);
  color: var(--gold);
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.price-list__btn:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
@media (max-width: 560px) {
  .price-list__row { grid-template-columns: 1fr auto; }
  .price-list__name { grid-column: 1 / -1; }
}

.pricing__note {
  margin-top: 2rem;
  font-size: .8rem;
  color: var(--text-3);
  text-align: center;
}
.pricing__note a { color: var(--gold); border-bottom: 1px solid var(--rule-gold); transition: border-color var(--t); }
.pricing__note a:hover { border-color: var(--gold); }

/* ─── SAFETY ────────────────────────────────────────────── */
.safety { background: var(--bg-2); }
.safety__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.safety__cards {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.safety-card {
  display: flex; gap: 1.5rem;
  padding: 1.75rem 1.75rem;
  background: var(--bg-2);
  align-items: flex-start;
  transition: background var(--t);
}
.safety-card:hover { background: var(--surface); }
.safety-card__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--rule-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.safety-card h3 { margin-bottom: .3rem; font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; }
.safety-card p { font-size: .8125rem; color: var(--text-2); line-height: 1.65; }

.safety__aftercare h3 { margin-bottom: 1.5rem; }
.safety__aftercare-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.safety__aftercare-list li {
  display: flex; align-items: flex-start; gap: 1rem;
  font-size: .875rem; color: var(--text-2);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}
.safety__aftercare-list li:last-child { border-bottom: none; }
.safety__aftercare-list li::before {
  content: '→';
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
}
.safety__note {
  font-size: .8125rem;
  color: var(--text-2);
  line-height: 1.75;
  padding: 1.5rem;
  border: 1px solid var(--rule);
}
.safety__note strong { display: block; margin-bottom: .4rem; color: var(--text); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* ─── FAQ ───────────────────────────────────────────────── */
.faq { background: var(--bg); }
.faq__list {
  max-width: 800px;
  margin-inline: auto;
  border: 1px solid var(--rule);
}
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: none; }
.faq__question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem 2rem;
  background: none; border: none;
  font-family: var(--font);
  font-size: .9375rem; font-weight: 500;
  letter-spacing: -.005em;
  color: var(--text);
  text-align: left;
  transition: background var(--t), color var(--t);
}
.faq__question:hover { background: var(--surface); color: var(--gold); }
.faq__question:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.faq__chevron {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--gold);
  transition: transform var(--t) var(--ease);
}
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }
.faq__answer {
  display: none;
  padding: 0 2rem 1.75rem;
  font-size: .875rem; color: var(--text-2);
  line-height: 1.8;
}
.faq__item.is-open .faq__answer { display: block; }

/* ─── REVIEWS ───────────────────────────────────────────── */
.reviews { background: var(--bg-2); border-top: 1px solid var(--rule); }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: .5rem;
} 
.review-card {
  background: var(--bg-2);
  padding: 2.75rem 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: background var(--t) var(--ease);
}
.review-card:hover { background: var(--surface); }
.review-card__stars {
  color: var(--gold);
  font-size: .95rem;
  letter-spacing: .15em;
}
.review-card__quote {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--text);
}
.review-card__quote::before {
  content: '"';
  display: block;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: .5;
  color: var(--gold);
  margin-bottom: 1rem;
}
.review-card__author {
  margin-top: auto;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 768px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

/* ─── CTA BANNER ────────────────────────────────────────── */
.cta-banner {
  background: var(--bg-2);
  padding: 8rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(157,125,93,.05) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner .overline { margin-bottom: 1.75rem; }
.cta-banner h2 {
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  line-height: 1.08;
  letter-spacing: -.005em;
}
.cta-banner h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.cta-banner p {
  max-width: 480px;
  margin-inline: auto;
  color: var(--text-2);
  font-size: .9375rem;
  margin-bottom: 3rem;
  line-height: 1.8;
}
.cta-banner__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.cta-banner__contact {
  display: flex; gap: 3rem;
  justify-content: center; flex-wrap: wrap;
  margin-top: 4rem; padding-top: 3rem;
  border-top: 1px solid var(--rule);
}
.contact-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem;
  color: var(--text-3);
}
.contact-item svg { color: var(--gold); opacity: .7; }
.contact-item a { color: var(--text-2); transition: color var(--t); }
.contact-item a:hover { color: var(--gold); }

/* ─── FOOTER ────────────────────────────────────────────── */
.footer {
  background: #04030A;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}
.footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.footer__logo svg { width: 148px; height: auto; display: block; }
.footer__logo svg path { fill: var(--text-2); transition: fill var(--t); }
.footer__logo:hover svg path { fill: var(--text); }
.footer__logo-sub {
  font-family: var(--font);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .35rem;
}
.footer__links {
  display: flex; gap: 2rem; list-style: none;
}
.footer__links a {
  font-size: .65rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t);
}
.footer__links a:hover { color: var(--gold); }
.footer__copy {
  font-size: .68rem;
  color: var(--text-3);
  letter-spacing: .06em;
}

/* ─── SCROLL TOP ────────────────────────────────────────── */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 90;
  width: 44px; height: 44px;
  border: 1px solid var(--rule-gold);
  background: var(--bg);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, border-color .3s, background .3s;
}
.scroll-top.is-visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* ─── STICKY MOBILE CTA ─────────────────────────────────── */
.mobile-cta { display: none; }
@media (max-width: 860px) {
  .mobile-cta {
    display: flex; gap: .55rem;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 95;
    padding: .6rem .8rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(7,6,10,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--rule-gold);
  }
  .mobile-cta .btn { flex: 1; justify-content: center; padding: 1.05em 1em; }
  .mobile-cta__call {
    flex: 0 0 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule-gold);
    color: var(--gold);
    transition: background var(--t), color var(--t);
  }
  .mobile-cta__call:hover { background: var(--gold); color: var(--bg); }
  body { padding-bottom: 70px; }
  .scroll-top { bottom: 5.75rem; }
  /* Redundant with sticky bottom CTA — hide hero primary on mobile */
  .hero__actions .btn-gold { display: none; }
  .hero__actions { margin-bottom: 3rem; }
}

/* ─── REVEAL ANIMATIONS ─────────────────────────────────── */
/* Grundläget är SYNLIGT. Att dölja .reveal kräver att html.reveal-ready satts,
   vilket ett litet synkront skript i <head> gör. Kommer main.js sedan aldrig
   igång — JS avstängt, ett fel, en fil som inte når fram — tas klassen bort av
   en timer och allt står kvar synligt. Tidigare låg opacity 0 ovillkorligt, och
   ett kastat fel i skriptet gav därför en helt tom sida. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal-all .reveal,
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal-d1 { transition-delay: .1s; }
  .reveal-d2 { transition-delay: .2s; }
  .reveal-d3 { transition-delay: .3s; }
  .reveal-d4 { transition-delay: .4s; }
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__ba { height: 65vw; min-height: 320px; order: -1; }
  .hero__content { padding: 2.5rem 6% 3.5rem; }
  .intro__grid { grid-template-columns: 1fr; gap: 4rem; }
  .intro__image img { height: 55vw; min-height: 260px; }
  .intro__badge { right: 0; bottom: -1rem; }
  .results__grid { grid-template-columns: 1fr; }
  .results__image img { height: 50vw; min-height: 260px; }
  .safety__grid { grid-template-columns: 1fr; gap: 3.5rem; }
}
@media (max-width: 768px) {
  section { padding: 5rem 0; }
  .process__steps { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .process__steps::before { display: none; }
  .areas__grid { grid-template-columns: 1fr 1fr; }
  .results__numbers { grid-template-columns: 1fr 1fr; }
  .pricing__cards { grid-template-columns: 1fr; gap: 1px; }
  .hero__stats { gap: 2rem; }
  .hero__stat-num { font-size: 2.8rem; }
  .price-card__amount { font-size: 3.2rem; }
  .review-card__quote { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .areas__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
  .trust-item { padding: .5rem 1.2rem; font-size: .58rem; }
}


/* ─── KONTAKTFORMULÄR (låg tidigare som en egen <style> mitt i sidan) ─── */
.contact { background: var(--bg-2); }
.contact .section-header { margin-bottom: 3rem; }
.contact-form { max-width: 680px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form .field { display: flex; flex-direction: column; gap: .6rem; }
.contact-form label { font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.contact-form input, .contact-form textarea {
  font-family: var(--font); font-size: .9rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--rule-gold); padding: 1em 1.1em;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); background: var(--surface-2); }
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
/* Botthonungsfällan gömmer sig numera med en inline-stil i markupen i stället
   för via klassen .cf-hp som stod här. Den ska vara osynlig även om den här
   filen aldrig hinner laddas — annars ser besökaren ett fält hen inte ska
   fylla i, och den som fyller i det räknas som en bott. */
.contact-form__foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.contact-form__foot .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Kvittot under skicka-knappen. fa.js märker statusraden med attributet
   data-fa-state (sending/ok/error) och rör aldrig class — reglerna hängde
   tidigare på .ok och .err, som skriptet aldrig sätter, så ett misslyckat
   inskick fick samma dova gråton som en vanlig upplysning.
   Grundstilen sitter på attributet och inte bara på klassen: vid lyckat
   inskick byter fa.js ut hela formulärets innehåll mot ett eget
   <p data-fa-status> som saknar klassen. */
.contact-form [data-fa-status] { font-size: .82rem; color: var(--text-2); margin: 0; }
.contact-form [data-fa-state="ok"]    { color: var(--gold-lt); }
.contact-form [data-fa-state="error"] { color: #e0928a; }
.contact-thanks { max-width: 580px; margin-inline: auto; text-align: center; padding: 1rem 0 1.5rem; }
.contact-thanks__icon {
  width: 66px; height: 66px; margin: 0 auto 2rem;
  border: 1px solid var(--rule-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  box-shadow: 0 0 0 6px rgba(184,152,120,.06);
}
.contact-thanks h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1.1rem; }
.contact-thanks p { color: var(--text-2); font-size: .95rem; line-height: 1.8; max-width: 46ch; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════
   SIDDELNINGEN (2026-07-27)

   Sajten var en enda sida med ankarnavigation. När priser,
   områden, säkerhet och frågor blev egna adresser behövdes tre
   saker som en ensidig sajt aldrig hade: ett sidhuvud för de
   sidor som inte har hjältebilden, brödsmulor, och en markering
   av vilken menypost man står på. Allt återanvänder tokens och
   formspråk från sektionerna ovan.
   ═══════════════════════════════════════════════════════════ */

/* ─── HOPPA TILL INNEHÅLL ───────────────────────────────── */
/* Osynlig tills den tabbas fram. Med fem sidor står nu samma
   nio navlänkar före innehållet på varje sida — utan den här
   genvägen måste den som navigerar med tangentbord passera dem
   varje gång. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: #07060A;
  padding: .8rem 1.4rem; font-size: .85rem; font-weight: 600;
  letter-spacing: .02em;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ─── SIDHUVUD PÅ UNDERSIDOR ────────────────────────────── */
/* Navigeringen är fast och 68 px hög och ligger ovanpå sidan.
   Utrymmet överst är därför inte dekoration: utan det hamnar
   rubriken under menyn. */
.subhero {
  padding: 11rem 0 5rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.subhero::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold), transparent);
}
.subhero .overline { margin-bottom: 1.5rem; }
.subhero__title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
  max-width: 20ch;
}
.subhero__lead {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 58ch;
  font-weight: 300;
}

/* ─── BRÖDSMULOR ────────────────────────────────────────── */
.subhero__crumbs { margin-bottom: 2rem; }
.subhero__crumbs ol {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.subhero__crumbs li + li::before {
  content: '/';
  margin-right: .6rem;
  color: var(--rule-gold);
}
.subhero__crumbs a { color: var(--text-3); transition: color var(--t); }
.subhero__crumbs a:hover { color: var(--gold); }
.subhero__crumbs [aria-current="page"] { color: var(--text-2); }

@media (max-width: 700px) {
  .subhero { padding: 8.5rem 0 3.5rem; }
}

/* ─── AKTUELL SIDA I MENYN ──────────────────────────────── */
.nav__links a[aria-current="page"],
.nav__drawer a[aria-current="page"] { color: var(--gold); }
.nav__links a[aria-current="page"] { position: relative; }
.nav__links a[aria-current="page"]::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -.45rem;
  height: 1px; background: var(--gold);
}