/* TRINES KLINIK — main stylesheet
   Built on tokens.css. Calm, quiet, elegant motion. */

/* ============================================================
   IDLE FLOAT SYSTEM — subtle "breathing" on all cards.
   2-3px range, 7-8s cycles. Quieter than Godballe Byg.
   ============================================================ */
@property --idle-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes klinik-float-soft {
  0%, 100% { --idle-y: 0px; }
  50%      { --idle-y: -2.5px; }
}
@keyframes klinik-float-medium {
  0%, 100% { --idle-y: 0px; }
  50%      { --idle-y: -3.5px; }
}

/* ============================================================
   v=35 DEPTH LAYER — floating sections, scroll progress, cursor
   effects, sticky pin. All respect prefers-reduced-motion.
   ============================================================ */

/* ── Scroll progress bar (top of viewport) ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--sage-deep);
  z-index: 60; /* above nav */
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ── Custom cursor follower (v=41) — softer, smaller-on-card, still
   auto-inverts via mix-blend-mode. ── */
.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(
    circle,
    rgba(138, 164, 176, 0.28) 0%,
    rgba(138, 164, 176, 0.12) 45%,
    transparent 75%
  );
  mix-blend-mode: difference;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.cursor-follower.is-visible {
  opacity: 1;
}
/* Over a card: smaller, softer bloom */
.cursor-follower.is-over-card {
  width: 140px;
  height: 140px;
  background: radial-gradient(
    circle,
    rgba(138, 164, 176, 0.42) 0%,
    rgba(138, 164, 176, 0.18) 40%,
    rgba(138, 164, 176, 0.05) 70%,
    transparent 100%
  );
}
@media (hover: none), (pointer: coarse) {
  .cursor-follower { display: none; }
}

/* ── Section divider — subtle sage shimmer between hero and behandlere (v=38) ── */
.section-divider {
  position: relative;
  height: 18px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
@keyframes section-divider-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.section-divider--shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(138, 164, 176, 0.0) 15%,
    rgba(138, 164, 176, 0.35) 50%,
    rgba(138, 164, 176, 0.0) 85%,
    transparent 100%
  );
}
.section-divider--shimmer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(109, 138, 152, 0.0) 20%,
    rgba(109, 138, 152, 0.8) 35%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(109, 138, 152, 0.8) 65%,
    rgba(109, 138, 152, 0.0) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: section-divider-shimmer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-divider--shimmer::after { animation: none; }
}

/* ── Floating section wrapper ── */
/* Used INSIDE a <section> to lift the content out of the body gradient.
   Applied to: behandlere-stage, anmeldelser-stage. */
.section--floating {
  position: relative;
  max-width: 1100px;
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 64px);
  background: var(--paper-2);
  border: 1px solid var(--hairline-2);
  border-radius: 24px;
  box-shadow:
    0 6px 14px rgba(46, 42, 35, 0.06),
    0 28px 56px -16px rgba(46, 42, 35, 0.20);
  overflow: hidden;
}
/* Subtle radial-gradient vignettes on top + bottom edges */
.section--floating::before,
.section--floating::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}
.section--floating::before {
  top: 0;
  background: linear-gradient(180deg, rgba(245, 241, 232, 0.35) 0%, transparent 100%);
}
.section--floating::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(245, 241, 232, 0.35) 0%, transparent 100%);
}
/* Reset margins for nested staged content so it fills the floating box */
.section--floating > .behandlere-stage,
.section--floating > .anmeldelser-stage {
  margin-top: 0;
}

/* Sticky pin on Behandlere (Tier 3) — desktop only */
@media (min-width: 1024px) {
  .behandlere .section--floating--sticky {
    position: sticky;
    top: 80px;
  }
  .behandlere .section--floating--sticky-spacer {
    height: 600px; /* extra scroll-distance for the pin to "hold" */
  }
}

/* ── Stagger reveal on individual carousel cards (when parent section reveals) ── */
.js-reveal .scroll-reveal .scroll-reveal--stagger-children .service-card {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card {
  opacity: 1;
  transform: translateY(0);
}
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card:nth-child(1) { transition-delay: 0.05s; }
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card:nth-child(2) { transition-delay: 0.15s; }
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card:nth-child(3) { transition-delay: 0.25s; }
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card:nth-child(4) { transition-delay: 0.35s; }
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card:nth-child(5) { transition-delay: 0.45s; }
.js-reveal .scroll-reveal.is-revealed .scroll-reveal--stagger-children .service-card:nth-child(6) { transition-delay: 0.55s; }

/* ── Cursor / hover effects ── */
/* Pointer-down active feedback (kept narrow — only on CTA buttons that already have transitions) */
.hero-cta-primary:active,
.hero-cta-secondary:active,
.hero-cta-tertiary:active,
.sticky-cta-btn:active,
.service-card-hover-cta:active,
.behandlere-foot a:active,
.services-foot a:active {
  transform: scale(0.97);
}

/* Magnetic CTAs — JS sets --mag-x, --mag-y via mousemove */
[data-magnetic] {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
[data-magnetic].is-magnetized {
  transform: translate(var(--mag-x, 0), var(--mag-y, 0));
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Generic hover-tilt + glow-following-cursor for any [data-tilt] element */
[data-tilt] {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative; /* needed for ::before glow positioning */
}
/* Smooth transition between resting and tilted shadow */
[data-tilt] {
  transition:
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-tilt].is-tilting {
  /* !important needed — scroll-reveal stagger rule has higher specificity
     and would otherwise override our tilt transform AND its transition
     (matches .section--floating and .service-card via stagger-children). */
  transform: perspective(1000px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             translateY(-6px) !important;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  /* Sage backlight — soft lamp behind the card. */
  box-shadow:
    0 0 50px -2px rgba(138, 164, 176, 0.55),
    0 18px 40px -10px rgba(46, 42, 35, 0.22) !important;
}
/* v=39: inner .tilt-glow removed — cursor-follower owns all hover-glow.
   Tilt now drives whole-card movement only, no internal shift. */

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
  .section--floating::before, .section--floating::after { display: none; }
  .js-reveal .scroll-reveal--stagger-children .service-card { opacity: 1; transform: none; transition: none; }
  [data-magnetic], [data-magnetic].is-magnetized { transform: none; }
  [data-tilt].is-tilting { transform: none; }
  .cursor-follower { display: none; }
  .behandlere .section--floating--sticky { position: relative; top: 0; }
  .behandlere .section--floating--sticky-spacer { display: none; }
}

/* ============================================================
   SCROLL-REVEAL — sections fade + translate as they enter view.
   Wrapped in .js-reveal (added by JS on init) so non-JS browsers
   see all content unhidden. v=26: now 2-step stagger — section
   header reveals first, body 150ms after, for a clearer "guided"
   flow (artikel 3: scanning, ikke læsning).
   ============================================================ */
.js-reveal .scroll-reveal {
  /* Wrapper still gets the slide, but children handle the visual stagger */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 2-step stagger — header first, body 150ms later */
.js-reveal .scroll-reveal > .section-header,
.js-reveal .scroll-reveal > .history-inner > .section-header {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .scroll-reveal.is-revealed > .section-header,
.js-reveal .scroll-reveal.is-revealed > .history-inner > .section-header {
  opacity: 1;
  transform: translateY(0);
}

/* Section body — everything after the header */
.js-reveal .scroll-reveal > *:not(.section-header):not(.history-inner) {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.js-reveal .scroll-reveal.is-revealed > *:not(.section-header):not(.history-inner) {
  opacity: 1;
  transform: translateY(0);
}
/* v=38: Behandlere — more dramatic "svæver ind" reveal */
.js-reveal .behandlere.scroll-reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  filter: blur(4px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .behandlere.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .behandlere.scroll-reveal { opacity: 1; transform: none; filter: none; }
}

/* History body inner */
.js-reveal .scroll-reveal > .history-inner > .history-body {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.js-reveal .scroll-reveal.is-revealed > .history-inner > .history-body {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .scroll-reveal,
  .js-reveal .scroll-reveal > *,
  .js-reveal .scroll-reveal > .history-inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   IDLE MICRO-MOTION — keeps the eye softly engaged between
   sections. Artikel 1: hjernen er kodet til at opdage bevægelse.
   Pause via prefers-reduced-motion.
   ============================================================ */
@keyframes klinik-breath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes klinik-pulse-faint {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* Visit step-icons: gentle breath + faint pulse, staggered per step */
.visit-step-icon {
  animation: klinik-breath 6s ease-in-out infinite;
}
.visit-step:nth-child(1) .visit-step-icon { animation-delay: -0.5s; }
.visit-step:nth-child(2) .visit-step-icon { animation-delay: -2.0s; }
.visit-step:nth-child(3) .visit-step-icon { animation-delay: -3.5s; }
.visit-step:nth-child(4) .visit-step-icon { animation-delay: -5.0s; }

/* v=33: .service--featured idle motion removed — services now use carousel layout */

@media (prefers-reduced-motion: reduce) {
  .visit-step-icon { animation: none; }
}

/* ============================================================
   STICKY BOTTOM CTA — appears on scroll past hero, dismissable.
   v=28. Dark ink-bg with sage primary CTA for high contrast against
   the paper page background, but tone-matched to the brand.
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 28px);
  padding: 12px clamp(56px, 5vw, 80px) 12px clamp(20px, 4vw, 32px);
  /* v=35: glass-effect (subtle) — paper-overlay shows through softly */
  background: rgba(46, 42, 35, 0.84);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  color: var(--paper);
  transform: translateY(110%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -8px 32px -12px rgba(0, 0, 0, 0.25);
}
@supports not (backdrop-filter: blur(1px)) {
  .sticky-cta { background: rgba(46, 42, 35, 0.96); }
}
.sticky-cta.is-visible {
  transform: translateY(0);
}
.sticky-cta.is-dismissed {
  display: none;
}

.sticky-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 14px;
  color: rgba(245, 241, 232, 0.85);
}
@keyframes sticky-cta-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(138, 164, 176, 0.55); }
  50%      { transform: scale(1.10); opacity: 0.85; box-shadow: 0 0 0 6px rgba(138, 164, 176, 0); }
}
.sticky-cta-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  animation: sticky-cta-dot-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta-dot { animation: none; }
  .sticky-cta { transition: none; }
}

.sticky-cta-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 14px);
}
.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sticky-cta-btn:active { transform: translateY(1px); }

.sticky-cta-btn--primary {
  background: var(--sage);
  color: var(--ink);
}
.sticky-cta-btn--primary:hover { background: var(--sage-deep); color: var(--paper); }

.sticky-cta-btn--secondary {
  color: rgba(245, 241, 232, 0.85);
  border-color: rgba(245, 241, 232, 0.20);
}
.sticky-cta-btn--secondary:hover { border-color: rgba(245, 241, 232, 0.50); color: var(--paper); }

.sticky-cta-btn--tertiary {
  color: var(--paper);
  font-weight: 600;
}
.sticky-cta-btn--tertiary:hover { color: var(--sage); }

.sticky-cta-close {
  position: absolute;
  top: 50%;
  right: clamp(10px, 2vw, 18px);
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(245, 241, 232, 0.45);
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.3s ease, background 0.3s ease;
}
.sticky-cta-close:hover { color: var(--paper); background: rgba(245, 241, 232, 0.08); }

@media (max-width: 720px) {
  .sticky-cta {
    padding: 10px 44px 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .sticky-cta-label { display: none; }
  .sticky-cta-btn { padding: 8px 12px; font-size: 13px; }
  .sticky-cta-btn--secondary { display: none; } /* keep only Ring + main CTA on small screens */
  .sticky-cta-close { right: 4px; }
}

/* ============================================================
   BEHANDLERE FOOT — link to /om-os under the split
   ============================================================ */
.behandlere-foot {
  /* Now lives inside the floating card — tighter top spacing */
  margin: clamp(28px, 4vw, 44px) auto 0;
  text-align: center;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-3);
  position: relative;
  z-index: 2; /* keep above floating's edge vignettes */
}
.behandlere-foot a {
  color: var(--sage-deep);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.behandlere-foot a:hover {
  color: var(--ink);
  border-bottom-color: var(--sage-deep);
}

/* ============================================================
   BASE
   ============================================================ */

body {
  min-height: 100dvh;
  overflow-x: hidden;
  /* Single continuous gradient across entire page — no section cuts.
     NOTE: background-attachment: fixed removed — caused massive scroll repaint thrash.
     Gradient now scrolls naturally with the page (no perf cost). */
  background:
    var(--noise) repeat,
    linear-gradient(180deg,
      #F5F1E8 0%,
      #F1ECDE 8%,
      #ECE5D2 18%,
      #E5DDC8 30%,
      #DCD5C2 42%,
      #CFD1C8 55%,
      #BCC5C7 68%,
      #B0BAC0 80%,
      #A4ADB3 90%,
      #98A0A7 100%
    );
  background-size: 220px 220px, auto;
}

/* ============================================================
   NAV
   ============================================================ */

/* v=48: floating pill-shaped nav (inspired by bisoncompany.dk).
   Centered, rounded, subtly translucent — sits above the page rather
   than spanning edge to edge. */
.nav {
  position: fixed;
  top: clamp(14px, 1.8vw, 22px);
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 10px 24px;
  border-radius: 999px;
  /* Subtle translucent paper — backdrop-blur makes the page show through */
  background: rgba(245, 241, 232, 0.55);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  border: 1px solid rgba(46, 42, 35, 0.06);
  box-shadow:
    0 2px 6px rgba(46, 42, 35, 0.04),
    0 12px 32px -10px rgba(46, 42, 35, 0.12);
  transition:
    background 0.45s ease,
    padding 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}
.nav.scrolled {
  padding: 8px 18px 8px 22px;
  background: rgba(245, 241, 232, 0.78);
  border-color: rgba(46, 42, 35, 0.10);
  box-shadow:
    0 4px 10px rgba(46, 42, 35, 0.06),
    0 18px 40px -14px rgba(46, 42, 35, 0.18);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(245, 241, 232, 0.92); }
  .nav.scrolled { background: rgba(245, 241, 232, 0.97); }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.brand-wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}

.nav-links { display: inline-flex; align-items: center; gap: 32px; }
.nav-links a {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  transition: color 0.3s ease;
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:not(.nav-cta):not(.nav-phone)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--sage);
  transition: width 0.4s ease;
}
.nav-links a:not(.nav-cta):not(.nav-phone):hover::after { width: 100%; }

.nav-cta {
  padding: 11px 22px;
  background: var(--ink);
  color: var(--paper) !important;
  border-radius: 999px;
  transition: background 0.4s ease;
}
.nav-cta:hover { background: var(--sage-deep); }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--sage-deep) !important;
  background: var(--sage-soft);
  border: 1px solid rgba(138, 164, 176, 0.20);
  border-radius: 999px;
  transition: background 0.35s ease, color 0.35s ease;
}
.nav-phone:hover {
  background: var(--sage);
  color: var(--paper) !important;
}
.nav-phone svg { flex-shrink: 0; }

@media (max-width: 1024px) {
  .nav-phone span { display: none; }
  .nav-phone { padding: 10px; }
}

/* ---------- Mobile hamburger toggle ---------- */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  position: relative;
  z-index: 70;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav-mobile-toggle:hover { border-color: var(--ink); }
.nav-mobile-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transform-origin: center;
  transition:
    transform 0.5s cubic-bezier(0.32, 0.72, 0.4, 1),
    opacity 0.3s ease;
}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 42, 35, 0.42);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.nav-backdrop.nav-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 880px) {
  .nav-mobile-toggle { display: inline-flex; }

  /* Transform .nav-links into a slide-in panel on the right */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 88px var(--s-5) var(--s-6);
    background: var(--paper);
    border-left: 1px solid var(--hairline-2);
    transform: translateX(105%);
    transition: transform 0.6s cubic-bezier(0.32, 0.72, 0.4, 1);
    z-index: 60;
    overflow-y: auto;
    box-shadow: -20px 0 60px -10px rgba(46, 42, 35, 0.25);
  }
  .nav-links.nav-links--open { transform: translateX(0); }

  /* Anchor links big + spaced in overlay */
  .nav-links a:not(.nav-cta):not(.nav-phone) {
    display: flex;
    align-items: center;
    padding: 18px 4px;
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--ink);
    border-bottom: 1px solid var(--hairline-2);
  }
  .nav-links a:not(.nav-cta):not(.nav-phone)::after { display: none; }
  .nav-links a:not(.nav-cta):not(.nav-phone):hover { color: var(--sage-deep); }

  /* Phone CTA — sage prominent button */
  .nav-phone {
    margin-top: var(--s-4);
    padding: 14px 18px !important;
    background: var(--sage);
    color: var(--paper) !important;
    border-color: var(--sage);
    border-radius: 10px;
    justify-content: center;
    border-bottom: 0 !important;
    font-family: var(--f-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }
  .nav-phone span {
    display: inline !important;
    font-size: 16px;
  }

  /* Skriv til os CTA — ink */
  .nav-cta {
    margin-top: var(--s-3);
    padding: 16px 24px !important;
    text-align: center;
    border-radius: 10px;
    font-family: var(--f-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100dvh;
  padding: clamp(140px, 18vh, 200px) var(--gutter) clamp(60px, 8vh, 100px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: clamp(60px, 8vh, 96px);
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

/* Hero photo/video background — cinematic 3-step entrance (v=31, slower).
   Step 1: white flash dissolves slowly to reveal video (0 → 1.2s)
   Step 2: video plays CRYSTAL CLEAR for 1.5s (1.2 → 2.7s)
   Step 3: video slowly fades back as text floats in (2.7 → 5.6s)
   Total entrance ~5.6s. Calmer, more "fade in fade out" feel. */
@keyframes hero-bg-cinematic {
  /* Stage 1: 0–21% (0 → 1.2s) — fade in cleanly behind dissolving flash */
  0%   { opacity: 0;    filter: blur(6px)  saturate(0.95); transform: scale(1.08); }
  21%  { opacity: 0.95; filter: blur(0px)  saturate(1.05); transform: scale(1.04); }
  /* Stage 2: 21–48% (1.2 → 2.7s) — hold CRYSTAL CLEAR for 1.5s */
  48%  { opacity: 0.95; filter: blur(0px)  saturate(1.05); transform: scale(1.05); }
  /* Stage 3: 48–100% (2.7 → 5.6s) — slow fade back behind text */
  100% { opacity: 0.70; filter: blur(8px)  saturate(1.0);  transform: scale(1.06); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: -50px;
  background-image: url("../images/hero/massage.jpg");
  background-size: cover;
  background-position: center 35%;
  filter: blur(8px) saturate(1.0);
  transform: scale(1.06);
  z-index: -2;
  opacity: 0.70;
  animation: hero-bg-cinematic 5.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0s both;
}

/* Hero background VIDEO — overlays the ::before fallback when available.
   Inherits the exact same cinematic entrance (blur, scale, opacity ramp). */
.hero-bg-video {
  position: absolute;
  inset: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  object-fit: cover;
  object-position: center 35%;
  filter: blur(8px) saturate(1.0);
  transform: scale(1.06);
  z-index: -2;
  opacity: 0.70;
  pointer-events: none;
  animation: hero-bg-cinematic 5.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0s both;
}

/* White-flash overlay — Step 1 of the hero entrance. Sits above everything,
   fades from full opaque to transparent over 0.6s, revealing the video underneath. */
@keyframes hero-flash-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.hero-flash {
  position: absolute;
  inset: 0;
  background: var(--paper); /* paper, not stark white — matches body tone */
  z-index: 5; /* above everything in hero until faded */
  pointer-events: none;
  animation: hero-flash-out 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { animation: none; opacity: 0.70; filter: blur(8px); }
  .hero-flash { animation: none; opacity: 0; }
}

/* ========================================================
   HERO ENTRANCE CHOREOGRAPHY (v=21)
   Initial: only .hero-name + .hero-decoration visible.
   Drop-in: name line 1 at 1.6s, line 2 at 1.9s.
   Reveal: scroll > 60px adds .hero-revealed → everything else fades in.
   ======================================================== */

@keyframes hero-name-drop {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-name .hero-name-line {
  opacity: 0;
  transform: translateY(-30px);
  animation: hero-name-drop 2.0s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-name .hero-name-line:nth-child(1) { animation-delay: 1.8s; }
.hero-name .hero-name-line:nth-child(2) { animation-delay: 2.3s; }

/* Olive-branch decoration fades in alongside the name (auto on load) */
@keyframes hero-decoration-in {
  from { opacity: 0; }
  to   { opacity: 0.22; }
}
.hero-decoration {
  opacity: 0;
  animation: hero-decoration-in 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) 2.5s both;
}

/* All other hero pieces start hidden — wait for scroll-reveal */
.hero-eyebrow,
.hero-tagline,
.hero-cta,
.hero-walkin,
.hero-foot,
.hero-trust {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Signature has its own rotate — keep it through hide/reveal so matrix interpolation behaves */
.hero-signature {
  opacity: 0;
  transform: translateY(14px) rotate(-1.5deg);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero.hero-revealed .hero-eyebrow   { opacity: 1; transform: translateY(0); transition-delay: 0.00s; }
.hero.hero-revealed .hero-signature { opacity: 1; transform: translateY(0) rotate(-1.5deg); transition-delay: 0.08s; }
.hero.hero-revealed .hero-tagline   { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.hero.hero-revealed .hero-cta       { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.hero.hero-revealed .hero-walkin    { opacity: 1; transform: translateY(0); transition-delay: 0.38s; }
.hero.hero-revealed .hero-foot      { opacity: 1; transform: translateY(0); transition-delay: 0.46s; }
.hero.hero-revealed .hero-trust     { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }

/* Honor reduced-motion: skip the cinematic entrance, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; opacity: 0.70; filter: blur(8px); }
  .hero-name .hero-name-line { animation: none; opacity: 1; transform: none; }
  .hero-decoration { animation: none; opacity: 0.22; }
  .hero-eyebrow, .hero-tagline, .hero-cta,
  .hero-walkin, .hero-foot, .hero-trust {
    opacity: 1; transform: none; transition: none;
  }
  .hero-signature { opacity: 1; transform: rotate(-1.5deg); transition: none; }
}
/* Paper-tinted overlay — readable text on top of photo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--noise) repeat,
    linear-gradient(180deg,
      rgba(245, 241, 232, 0.55) 0%,
      rgba(245, 241, 232, 0.55) 35%,
      rgba(245, 241, 232, 0.75) 65%,
      rgba(245, 241, 232, 0.95) 90%,
      rgba(245, 241, 232, 1.00) 100%);
  background-size: 220px 220px, auto;
  z-index: -1;
  pointer-events: none;
}

/* Decorative olive-branch SVG — single sage line behind the wordmark.
   NOTE: opacity (hide/fade-in) is controlled in the hero-entrance block above. */
.hero-decoration {
  position: absolute;
  top: 18%;
  left: 50%;
  width: clamp(420px, 60vw, 760px);
  height: auto;
  transform: translate(-50%, 0) rotate(-6deg);
  color: var(--sage);
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0;
  position: relative;
}

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.hero-eyebrow span {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
}
.hero-name-line {
  display: block;
}
.hero-name-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--sage);
  letter-spacing: -0.02em;
  /* slightly smaller than line 1 — keeps "Trines Klinik" dominant */
  font-size: 0.78em;
  margin-top: 4px;
}

/* Handwritten signature — Caveat font, the "personal touch".
   NOTE: transform (rotate + reveal-translate) is set in the hero-entrance block above. */
.hero-signature {
  display: block;
  margin: 14px 0 0;
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--sage-deep);
  line-height: 1;
  letter-spacing: 0.02em;
}

.hero-tagline {
  margin: clamp(36px, 5vh, 56px) auto 0;
  max-width: 56ch;
  font-family: var(--f-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
}

.hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(32px, 5vh, 48px);
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 28px;
  background: var(--sage);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  transition: background 0.45s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0.4, 1);
  box-shadow: 0 8px 24px -8px rgba(109, 138, 152, 0.40);
}
.hero-cta-primary:hover {
  background: var(--sage-deep);
  transform: translateY(-2px);
}
.hero-cta-primary svg { flex-shrink: 0; }

.hero-cta-secondary {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color 0.35s ease;
}
.hero-cta-secondary::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform-origin: right;
  transform: scaleX(0.92);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0.4, 1);
}
.hero-cta-secondary:hover {
  color: var(--sage-deep);
}
.hero-cta-secondary:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  background: var(--sage-deep);
}

.hero-cta-tertiary {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.35s ease;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
}
.hero-cta-tertiary:hover { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }

.hero-walkin {
  margin: clamp(20px, 3vh, 28px) 0 0;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-2);
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
/* v=35: Glass pill around the "Tid i denne uge" copy */
.hero-walkin-glass-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.45);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid rgba(46, 42, 35, 0.10);
  box-shadow: 0 2px 8px -2px rgba(46, 42, 35, 0.08);
}
@supports not (backdrop-filter: blur(1px)) {
  .hero-walkin-glass-pill { background: rgba(245, 241, 232, 0.85); }
}
.hero-walkin strong {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hero-walkin em {
  font-style: italic;
  color: var(--sage-deep);
}
/* Pulsing availability dot — gentle, not alarming. Signals "live". */
@keyframes hero-walkin-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(138, 164, 176, 0.5); }
  50%      { transform: scale(1.08); opacity: 0.85; box-shadow: 0 0 0 6px rgba(138, 164, 176, 0); }
}
.hero-walkin-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage-deep);
  flex-shrink: 0;
  animation: hero-walkin-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-walkin-pulse { animation: none; }
}

/* Practical info strip — reduced to 2 items, dampened weight */
.hero-foot {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding-top: clamp(40px, 6vh, 60px);
  border-top: 1px solid var(--hairline);
}
.hero-foot-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--hairline);
}
.hero-foot-item:last-child { border-right: 0; }
.hero-foot-item dt {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.hero-foot-item dd {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* Trust badges — visually dampened: smaller, paper-2 bg, no border */
.hero-trust {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(237, 230, 214, 0.50);
  border-radius: 14px;
  transition: background 0.5s ease, transform 0.5s cubic-bezier(0.32, 0.72, 0.4, 1);
}
.trust-badge:hover {
  background: var(--paper-2);
  transform: translateY(-2px);
}
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
}
.trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.trust-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trust-name {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

@media (max-width: 980px) {
  .hero-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero-trust { grid-template-columns: 1fr; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-foot-item { border-right: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 16px; }
  .hero-foot-item:last-child { border-bottom: 0; padding-bottom: 0; }
  .hero-foot-item + .hero-foot-item { padding-top: 16px; }
}

/* ============================================================
   SECTION HEADER — shared across all sections
   ============================================================ */
.section-header {
  max-width: var(--max);
  margin: 0 auto clamp(48px, 7vh, 80px);
  text-align: center;
}
.section-eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: var(--s-4);
}
.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
.section-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

/* ============================================================
   DIT BESØG — 4-step process
   ============================================================ */
.visit {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
  overflow: hidden;
}

.visit-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  position: relative;
}

/* Connecting line between step icons (decorative) */
.visit-steps::before {
  content: "";
  position: absolute;
  top: 90px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--hairline) 12%,
    var(--hairline) 88%,
    transparent 100%
  );
  z-index: 0;
}

.visit-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  z-index: 1;
}
.visit-step-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--sage-deep);
  margin-bottom: var(--s-4);
}
.visit-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--sage-deep);
  margin-bottom: var(--s-5);
  position: relative;
}
.visit-step-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 1.8vw, 26px);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  line-height: 1.1;
}
.visit-step-body {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 28ch;
}

.visit-foot {
  margin: clamp(48px, 7vh, 72px) auto 0;
  max-width: var(--max);
  text-align: center;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.visit-foot a {
  color: var(--sage-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.visit-foot a:hover { border-bottom-color: var(--sage-deep); }

@media (max-width: 980px) {
  .visit-steps { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .visit-steps::before { display: none; }
}
@media (max-width: 560px) {
  .visit-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   BEHANDLERE — interactive split-testimonial (Trine ↔ Signe)
   Klik sektion (eller dot/piletaster) → switch. Begge slides
   stacked absolute, kun .is-active synlig. v=22.
   Inspired by the split-testimonial pattern (21st.dev), ported
   to vanilla HTML/CSS/JS to stay zero-dependency.
   ============================================================ */
.behandlere {
  position: relative;
  /* Reduced bottom-padding so behandlere flows tighter into ydelser. */
  padding: var(--rhythm) var(--gutter) clamp(40px, 5vw, 64px);
  background: transparent;
  overflow: hidden;
}

.behandlere-stage {
  max-width: 1024px; /* matches original max-w-5xl */
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding: 0 24px;   /* matches original px-6 */
  position: relative;
  cursor: pointer;
  outline: none;
}
.behandlere-stage:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 14px;
  border-radius: 28px;
}

.behandlere-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* ── Info column (quote + author) ── */
.behandlere-info {
  position: relative;
  min-height: 380px;
}

/* Slides + child elements: animation is driven by JS (Web Animations API)
   for mode="wait" exit→enter sequencing. CSS only handles initial-hidden
   state so non-active slides start invisible before JS init. */
.behandlere-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  opacity: 0;
  pointer-events: none;
}
.behandlere-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Role eyebrow with hairline lead-in */
.behandlere-role {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.behandlere-role::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(46, 42, 35, 0.30);
}

/* The quote — initial state matches the JS "enter from" keyframe so the
   first paint doesn't flicker before JS runs. */
.behandlere-slide .behandlere-quote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.behandlere-slide.is-active .behandlere-quote {
  /* JS will set inline animation styles; this ensures a sensible resting state */
  transform: translateY(0);
}

/* Author row — hairline + name + specialer */
.behandlere-author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.behandlere-author::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 1px;
  background: rgba(46, 42, 35, 0.20);
}
.behandlere-name {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.behandlere-spec {
  display: block;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ── Portrait stack ── matches original 21st.dev: w-48 h-64 = 192×256 */
.behandlere-portrait-stack {
  position: relative;
  width: 192px;
  height: 256px;
}
.behandlere-portrait {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--paper-3);
  box-shadow:
    0 4px 12px rgba(46, 42, 35, 0.05),
    0 24px 48px -16px rgba(46, 42, 35, 0.14);
  opacity: 0;
  /* Initial filter/transform set so non-active starts hidden before JS init */
  filter: blur(20px);
  transform: scale(1.05);
}
.behandlere-portrait.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.behandlere-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover cue under portrait — only on desktop hover */
.behandlere-next-cue {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%) scale(0.85);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.behandlere-next-cue svg {
  width: 12px;
  height: 12px;
}
.behandlere-stage:hover .behandlere-next-cue,
.behandlere-stage:focus-visible .behandlere-next-cue {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Progress dots (2 dots — Trine, Signe) ──
   Ring is a single positioned element that JS moves between dots
   (emulates framer-motion layoutId="activeDot"). */
.behandlere-dots {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(56px, 7vw, 80px);
}
.behandlere-dot {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.behandlere-dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0.30;
  transform: scale(0.75);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.behandlere-dot:hover::after {
  opacity: 0.55;
  transform: scale(1);
}
.behandlere-dot.is-active::after {
  background: var(--ink);
  opacity: 1;
  transform: scale(1);
}

/* The morphing ring — JS sets translate(x, y) translate(-50%,-50%) */
.behandlere-dots-ring {
  position: absolute;
  top: 0; left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(46, 42, 35, 0.30);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

/* ── Mobile pass: stack columns, hide hover-cue ── */
@media (max-width: 760px) {
  .behandlere-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
    justify-items: center;
    text-align: left;
  }
  .behandlere-info {
    min-height: 280px;
    width: 100%;
  }
  .behandlere-portrait-stack {
    order: -1;
    width: 168px;
    height: 224px;
    margin: 0 auto;
  }
  .behandlere-next-cue { display: none; }
  .behandlere-dots { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .behandlere-slide,
  .behandlere-slide .behandlere-quote,
  .behandlere-portrait {
    transition: opacity 0.2s ease;
    filter: none;
    transform: none;
  }
  .behandlere-slide.is-active .behandlere-quote { transform: none; }
}

/* ============================================================
   VÆRDIER
   ============================================================ */
.values {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
}
.values-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.value-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(24px, 2.8vw, 36px) clamp(24px, 2.6vw, 32px);
  background: var(--paper-2);
  border-radius: 18px;
  border: 1px solid var(--hairline-2);
  box-shadow:
    0 4px 10px rgba(46, 42, 35, 0.04),
    0 22px 44px -16px rgba(46, 42, 35, 0.14);
  --hover-y: 0px;
  transform: translateY(calc(var(--idle-y, 0px) + var(--hover-y)));
  animation: klinik-float-soft 7s ease-in-out infinite;
  transition:
    --hover-y 1.4s cubic-bezier(0.32, 0.72, 0.4, 1),
    box-shadow 1.4s ease,
    border-color 1.0s ease;
  overflow: hidden;
  /* will-change removed — 4 permanent compositor layers cost more memory than the float micro-anim is worth. */
}
.values-grid .value-tile:nth-child(2) { animation-delay: -1.7s; }
.values-grid .value-tile:nth-child(3) { animation-delay: -3.4s; }
.values-grid .value-tile:nth-child(4) { animation-delay: -5.1s; }
.value-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sage);
  opacity: 0;
  transform: scaleY(0.6);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.value-tile:hover {
  --hover-y: -8px;
  border-color: rgba(138, 164, 176, 0.30);
  box-shadow:
    0 12px 22px rgba(46, 42, 35, 0.06),
    0 36px 64px -14px rgba(46, 42, 35, 0.22);
}
.value-tile:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
.value-num {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.value-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.value-text {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

@media (max-width: 1100px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ANMELDELSER — split-testimonial (single-column quote variant)
   Bruger samme JS-infrastruktur som .behandlere men uden portrait.
   Stars over, quote midt, author under, dots+ring nederst. v=26.
   ============================================================ */
.testimonials {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
  overflow: hidden;
}
.testimonials .section-header {
  text-align: center;
}

.anmeldelser-stage {
  max-width: 760px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  position: relative;
  cursor: pointer;
  outline: none;
  text-align: center;
}
.anmeldelser-stage:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 14px;
  border-radius: 24px;
}

/* Slides stacked absolute, only .is-active visible */
.anmeldelser-stack {
  position: relative;
  min-height: 340px;
}
.anmeldelser-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 28px);
  opacity: 0;
  pointer-events: none;
}
.anmeldelser-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.anmeldelser-stars {
  display: inline-flex;
  gap: 6px;
  color: var(--sage);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.anmeldelser-slide .anmeldelser-quote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 640px;
}
.anmeldelser-slide.is-active .anmeldelser-quote {
  transform: translateY(0);
}

.anmeldelser-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(8px, 1.4vw, 16px);
}
.anmeldelser-author::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(46, 42, 35, 0.20);
}
.anmeldelser-name {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.anmeldelser-role {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
  text-align: left;
}

/* Dots row — same morphing-ring pattern as behandlere */
.anmeldelser-dots {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
}
.anmeldelser-dot {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.anmeldelser-dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0.30;
  transform: scale(0.75);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.anmeldelser-dot:hover::after {
  opacity: 0.55;
  transform: scale(1);
}
.anmeldelser-dot.is-active::after {
  background: var(--ink);
  opacity: 1;
  transform: scale(1);
}
.anmeldelser-dots-ring {
  position: absolute;
  top: 0; left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(46, 42, 35, 0.30);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

/* Minimal "Klik for at se næste" guide-pin — bottom-right inside the floating card */
.testimonials .section--floating > .anmeldelser-next-cue {
  position: absolute;
  right: clamp(28px, 5vw, 56px);
  bottom: clamp(20px, 3vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.testimonials .section--floating > .anmeldelser-next-cue svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}
.testimonials .section--floating:hover > .anmeldelser-next-cue {
  opacity: 0.95;
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .anmeldelser-stack { min-height: 380px; }
  .anmeldelser-author { flex-direction: column; gap: 8px; }
  .anmeldelser-author::before { display: none; }
  .anmeldelser-next-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anmeldelser-slide,
  .anmeldelser-slide .anmeldelser-quote {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* ============================================================
   YDELSER — horizontal scroll carousel (v=33)
   Cards med billede + tekst-overlay. Hover slører billedet
   og afslører "Læs mere"-CTA + længere beskrivelse.
   ============================================================ */
.services {
  position: relative;
  /* Reduced top-padding so ydelser sits closer to behandlere above. */
  padding: clamp(56px, 7vw, 88px) 0 var(--rhythm);
  background: transparent;
  overflow: hidden;
}
.services .section-header {
  padding: 0 var(--gutter);
}

/* Carousel viewport — horizontal scroll with snap */
.services-carousel {
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 12px clamp(20px, 4vw, 48px) 32px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 4vw, 48px);
  /* hide scrollbar but keep scrollable */
  scrollbar-width: thin;
  scrollbar-color: rgba(138, 164, 176, 0.35) transparent;
}
.services-carousel::-webkit-scrollbar { height: 6px; }
.services-carousel::-webkit-scrollbar-track { background: transparent; }
.services-carousel::-webkit-scrollbar-thumb {
  background: rgba(138, 164, 176, 0.35);
  border-radius: 999px;
}

.services-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
  width: max-content;
}

/* Individual card */
.service-card {
  flex: 0 0 clamp(280px, 26vw, 340px);
  height: clamp(380px, 38vw, 480px);
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  scroll-snap-align: start;
  cursor: pointer;
  outline: none;
  background: var(--sage-deep);
  box-shadow:
    0 6px 14px rgba(46, 42, 35, 0.06),
    0 28px 56px -16px rgba(46, 42, 35, 0.20);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}
.service-card[data-tone="taupe"]  { background: var(--taupe-deep); }
.service-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 24px rgba(46, 42, 35, 0.08),
    0 40px 72px -16px rgba(46, 42, 35, 0.28);
}
.service-card:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 4px;
}

/* Image layer — fallback to card background-color if image fails */
.service-card-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease;
}
/* Gradient overlay on the image for text legibility at the bottom */
.service-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(46, 42, 35, 0.30) 60%,
    rgba(46, 42, 35, 0.78) 100%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Text overlay at the bottom — visible by default */
.service-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--paper);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card-num {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.75);
}
.service-card-name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.service-card-tagline {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: rgba(245, 241, 232, 0.85);
  line-height: 1.4;
  font-style: italic;
}

/* Hover state: blur image + reveal full description + CTA */
.service-card-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 24px);
  padding: clamp(24px, 2.6vw, 32px);
  background: rgba(46, 42, 35, 0.62);
  color: var(--paper);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.service-card-hover-body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.94);
}
.service-card-hover-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(245, 241, 232, 0.40);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--paper);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.service-card:hover .service-card-image img,
.service-card:focus-visible .service-card-image img {
  filter: blur(8px) saturate(0.9);
  transform: scale(1.05);
}
.service-card:hover .service-card-image::after,
.service-card:focus-visible .service-card-image::after {
  opacity: 0;
}
.service-card:hover .service-card-overlay,
.service-card:focus-visible .service-card-overlay {
  opacity: 0;
  transform: translateY(20px);
}
.service-card:hover .service-card-hover,
.service-card:focus-visible .service-card-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.service-card:hover .service-card-hover-cta {
  background: rgba(245, 241, 232, 0.10);
}

.services-foot {
  margin: clamp(36px, 5vh, 56px) auto 0;
  max-width: var(--max);
  padding: 0 var(--gutter);
  text-align: center;
  font-family: var(--f-body);
  font-size: 15.5px;
  color: var(--ink-2);
}
.services-foot a {
  color: var(--sage-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.services-foot a:hover { border-bottom-color: var(--sage-deep); }

@media (max-width: 560px) {
  .service-card { flex-basis: 75vw; height: 420px; }
  .service-card-name { font-size: 22px; }
}

/* ============================================================
   KLINIKKEN — interior gallery
   ============================================================ */
.clinic {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
}
.clinic-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(14px, 1.6vw, 22px);
}
.clinic-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.clinic-item--wide {
  grid-column: span 2;
  grid-row: span 2;
}
.clinic-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 4px 10px rgba(46, 42, 35, 0.04),
    0 22px 44px -16px rgba(46, 42, 35, 0.14);
  transition: transform 1.4s cubic-bezier(0.32, 0.72, 0.4, 1),
              box-shadow 1.4s ease;
}
.clinic-item:hover img {
  transform: translateY(-4px);
  box-shadow:
    0 10px 18px rgba(46, 42, 35, 0.07),
    0 30px 56px -14px rgba(46, 42, 35, 0.20);
}
.clinic-item--wide img { aspect-ratio: 16/13; }
.clinic-item figcaption {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.clinic-item figcaption .mono { color: var(--sage-deep); }

@media (max-width: 980px) {
  .clinic-grid { grid-template-columns: 1fr 1fr; }
  .clinic-item--wide { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .clinic-grid { grid-template-columns: 1fr; }
  .clinic-item--wide { grid-column: 1; }
}

/* ============================================================
   BOOKING — weekly available times
   ============================================================ */
.booking {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
}
.booking-week {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}
.booking-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 1.8vw, 22px);
  background: var(--paper);
  border-radius: 16px;
  border: 1px solid var(--hairline-2);
}
.booking-day-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.booking-day-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.booking-day-date {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.booking-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 8px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  border: 1px solid rgba(138, 164, 176, 0.20);
  border-radius: 10px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0.4, 1);
}
.booking-slot:hover {
  background: var(--sage);
  color: var(--paper);
  border-color: var(--sage);
  transform: translateY(-2px);
}
.booking-slot--taken {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--hairline);
  text-decoration: line-through;
  text-decoration-color: var(--hairline);
  cursor: not-allowed;
  pointer-events: none;
}
.booking-foot {
  margin: clamp(40px, 5vh, 56px) auto 0;
  max-width: var(--max);
  text-align: center;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-2);
}
.booking-foot a {
  color: var(--sage-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.booking-foot a:hover { border-bottom-color: var(--sage-deep); }

@media (max-width: 1100px) {
  .booking-week { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .booking-week { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .booking-week { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
}
.faq .section-sub a { color: var(--sage-deep); border-bottom: 1px solid transparent; transition: border-color 0.4s ease; }
.faq .section-sub a:hover { border-bottom-color: var(--sage-deep); }

.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--paper-2);
  border-radius: 16px;
  border: 1px solid var(--hairline-2);
  box-shadow:
    0 4px 10px rgba(46, 42, 35, 0.04),
    0 22px 44px -16px rgba(46, 42, 35, 0.14);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: border-color 0.4s ease-out, box-shadow 0.5s ease;
}
.faq-item:hover,
.faq-item:focus-within {
  border-color: rgba(138, 164, 176, 0.35);
  box-shadow:
    0 10px 18px rgba(46, 42, 35, 0.06),
    0 32px 60px -12px rgba(46, 42, 35, 0.20);
}
.faq-q {
  display: flex;
  align-items: center;
  padding: clamp(20px, 2.4vw, 26px) clamp(24px, 2.6vw, 32px);
  user-select: none;
}
.faq-q-text {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
}
.faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 clamp(24px, 2.6vw, 32px) 0;
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.65;
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.3s ease,
    padding 0.45s cubic-bezier(0.4, 0, 0.6, 1);
}
.faq-item:hover .faq-a,
.faq-item:focus-within .faq-a {
  max-height: 420px;
  opacity: 1;
  padding-bottom: clamp(22px, 2.6vw, 28px);
  transition:
    max-height 1.1s cubic-bezier(0.32, 0.72, 0.4, 1),
    opacity 0.7s ease 0.18s,
    padding 1.1s cubic-bezier(0.32, 0.72, 0.4, 1);
}
.faq-a p { margin: 0; }
.faq-a a { color: var(--sage-deep); border-bottom: 1px solid transparent; transition: border-color 0.4s ease; }
.faq-a a:hover { border-bottom-color: var(--sage-deep); }
.faq-a strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  background: transparent;
}
.contact-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.contact-pitch {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.contact-pitch .section-eyebrow {
  text-align: left;
  margin-bottom: var(--s-3);
}
.contact-pitch .section-title {
  text-align: left;
  font-size: clamp(36px, 4.6vw, 60px);
  margin-bottom: var(--s-4);
}
.contact-lede {
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
  max-width: 50ch;
}
.contact-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin: 0;
}
.contact-list > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--hairline-2);
}
.contact-list dt {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.contact-list dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.3;
}
.contact-list a {
  transition: color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.contact-list a:hover { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(28px, 3.2vw, 44px) clamp(28px, 3.2vw, 44px);
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid var(--hairline-2);
  box-shadow:
    0 4px 10px rgba(46, 42, 35, 0.04),
    0 22px 44px -16px rgba(46, 42, 35, 0.14);
}
.contact-form .hp { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.field label {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  font-family: var(--f-body);
  font-size: 15.5px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color 0.4s ease, background 0.4s ease;
  width: 100%;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--sage);
  background: var(--paper);
}
.field textarea { min-height: 110px; }
.contact-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: var(--s-2);
}
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--sage);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: background 0.4s ease, transform 0.4s ease;
  box-shadow: 0 8px 18px -6px rgba(109, 138, 152, 0.35);
}
.contact-submit:hover { background: var(--sage-deep); transform: translateY(-1px); }
.contact-form-note {
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s-2) 0 0;
}

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .contact-list { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  padding: clamp(48px, 6vh, 72px) var(--gutter) clamp(32px, 5vh, 56px);
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.footer-sub {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.005em;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-2);
  transition: all 0.45s cubic-bezier(0.32, 0.72, 0.4, 1);
}
.footer-social-link:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper);
  transform: translateY(-2px);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.footer-col a, .footer-col span {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--sage-deep); }
/* Designer-credit → bridge tilbage til Madsen Studio (subtil men findbar konverterings-link) */
.footer-col a.footer-credit { display: inline-block; margin-top: var(--s-2); color: var(--sage-deep); opacity: 0.9; }
.footer-col a.footer-credit:hover { opacity: 1; color: var(--sage); }
.footer-walkin { font-style: italic; color: var(--sage-deep) !important; }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: var(--s-4); }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUBPAGE — page-hero (booking, om-os)
   ============================================================ */
.page-hero {
  position: relative;
  padding: clamp(140px, 18vh, 200px) var(--gutter) clamp(48px, 6vh, 72px);
  text-align: center;
}
.page-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.page-hero-eyebrow {
  display: inline-block;
  margin-bottom: clamp(24px, 4vh, 40px);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-hero-eyebrow a {
  color: var(--sage-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.page-hero-eyebrow a:hover { border-bottom-color: var(--sage-deep); }

.page-hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 3vh, 32px);
}
.page-hero-sub {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

/* ============================================================
   BOOKING-TIPS — bottom of /booking page
   ============================================================ */
.booking-tips {
  position: relative;
  padding: clamp(48px, 6vh, 80px) var(--gutter) var(--rhythm);
}
.booking-tips-inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.booking-tips-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 0 0 clamp(28px, 4vh, 40px);
}
.booking-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  text-align: left;
}
.booking-tip {
  padding: clamp(22px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  border: 1px solid var(--hairline-2);
}
.booking-tip-num {
  display: block;
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  color: var(--sage-deep);
  margin-bottom: 10px;
}
.booking-tip h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.012em;
}
.booking-tip p {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 880px) {
  .booking-tips-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HISTORY — bottom of /om-os page
   ============================================================ */
.history {
  position: relative;
  padding: var(--rhythm) var(--gutter);
}
.history-inner {
  max-width: 760px;
  margin: 0 auto;
}
.history-header { text-align: left; margin-bottom: clamp(32px, 5vh, 48px); }
.history-header .section-title { font-size: clamp(36px, 4.4vw, 56px); }
.history-body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.history-lede {
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 var(--s-5);
  letter-spacing: -0.005em;
}
.history-body p + p { margin-top: var(--s-5); }
.history-body strong { color: var(--ink); font-weight: 500; }
.history-body em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.06em;
  color: var(--sage-deep);
}

/* ============================================================
   SYMPTOMS — "Hvor gør det ondt?" interactive body figure (v=51)
   Two SEPARATE floating cards side-by-side: figure (left) + list (right).
   Each card sits in its own paper-2 surface — visually distinct, easier to scan.
   ============================================================ */
.symptoms {
  position: relative;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 88px);
}

/* Stage = grid container for the two cards */
.symptoms-stage {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}

/* Shared card styling — each gets its own floating surface */
.symptoms-card {
  padding: clamp(32px, 3.5vw, 56px) clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
}

/* Figure side — NO card box (v=61). Figure stands alone on page bg. */
.symptoms-card--figure {
  /* Override .section--floating box styling */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  align-items: center;
  justify-content: center;
  position: relative;
}
.symptoms-card--figure::before { content: none; } /* drop "Klik på området" eyebrow — figure stands alone */

/* List card: list vertically centered */
.symptoms-card--list {
  justify-content: center;
  position: relative;
}
.symptoms-card--list::before {
  content: "Vælg dit symptom";
  position: absolute;
  top: clamp(18px, 2vw, 24px);
  left: clamp(28px, 3vw, 48px);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.7;
  pointer-events: none;
}
/* Hide the redundant eyebrow on the list since we have the ::before */
.symptoms-card--list .symptoms-list-eyebrow { display: none; }

/* --- Figure column (v=61): bigger, standalone, no card --- */
.symptoms-figure {
  position: relative;
  width: clamp(280px, 32vw, 460px);
  height: clamp(560px, 72vh, 880px);
  margin: 0 auto;
}

.symptoms-figure-art {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* JS controls the whole-figure transform for the lean-forward effect.
     Smooth fallback transition when JS isn't actively driving (e.g. at neutral). */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* IMG variant: object-fit so it scales correctly inside the container */
.symptoms-figure-art--image {
  object-fit: contain;
  object-position: center bottom;
  border-radius: 8px; /* very subtle so edge doesn't feel sharp */
}

/* VIDEO variant: cover-crop so the square 1024×1024 source fills the tall container.
   Background tint matches the figure's background so the crop blends. */
.symptoms-figure-art--video {
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  background: #c4b59a; /* approximate sandstone-beige match for any edge bleed */
}

/* Anatomy 2D viewer (v=60): 8 stacked PNG views with CSS crossfade + zoom.
   Replaces the Three.js canvas. Much simpler, no JS lib, pre-rendered photorealism. */
.symptoms-figure-art--anatomy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
}
.figure-views {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
  transform: scale(var(--zoom, 1));
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Two layers stacked. Default: only sharp visible (full skin figure).
   Detail: both show muscle. Bottom = dimmed (saturate↓, brightness↓) = soft baseline.
   Top = unfiltered muscle, masked with radial gradient so only focus region "pops" — soft falloff. */
.figure-views-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.figure-views-layer--blurred {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.symptoms-stage.is-detail .figure-views-layer--blurred {
  opacity: 1;
}

.figure-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.figure-view.is-active { opacity: 1; }

/* Detail mode: bottom layer is dimmed (soft, low-sat) — context for the rest of body */
.symptoms-stage.is-detail .figure-views-layer--blurred .figure-view.is-active {
  filter: saturate(0.38) brightness(0.96) contrast(0.94);
}

/* Top sharp layer: clipped to anatomical muscle polygon in detail mode.
   Polygon path defined per-symptom in JS — each follows the specific muscle group's shape. */
.figure-views-layer--sharp .figure-view.is-active {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* default: no clip, full visible */
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.symptoms-stage.is-detail .figure-views-layer--sharp .figure-view.is-active {
  filter: saturate(1.18) brightness(1.04) contrast(1.08);
  clip-path: var(--focus-clip, polygon(40% 30%, 60% 30%, 60% 50%, 40% 50%));
}

/* Ensure the figure container is positioned for the absolute canvas host */
.symptoms-figure {
  position: relative;
}

/* Hotspots must stack above the 3D canvas */
.symptom-hotspot { z-index: 3; }

/* ============================================================
   SYMPTOM DETAIL PANEL (v=59) — in-place replacement for the list
   when a hotspot is clicked. Transitions smooth between modes.
   ============================================================ */
.symptoms-detail {
  display: none;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.symptoms-stage.is-detail .symptoms-detail {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

/* Hide the list (and its ::before eyebrow) when in detail mode */
.symptoms-stage.is-detail .symptoms-list { display: none; }
.symptoms-stage.is-detail .symptoms-card--list::before { opacity: 0; }

/* Fade out hotspots in detail mode so the focused region reads cleaner */
.symptoms-stage.is-detail .symptom-hotspot {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* Tilbage button */
.symptoms-detail-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.symptoms-detail-back:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  border-color: var(--hairline);
  transform: translateX(-2px);
}
.symptoms-detail-back span { font-size: 16px; line-height: 1; }

.symptoms-detail-eyebrow {
  margin: 0;
  letter-spacing: 0.20em;
  color: var(--ink-3);
}

.symptoms-detail-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}

.symptoms-detail-intro {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 4px;
}

.symptoms-detail-treatments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

.symptoms-detail-treatment {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.symptoms-detail-treatment:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--hairline);
}
.symptoms-detail-treatment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.symptoms-detail-treatment-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.010em;
  color: var(--ink);
}
.symptoms-detail-treatment-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sage-deep);
  text-transform: uppercase;
}
.symptoms-detail-treatment p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.symptoms-detail-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.symptoms-detail-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, color 0.3s ease;
}
.symptoms-detail-cta-btn--primary {
  background: var(--ink);
  color: #F5F1E8;
}
.symptoms-detail-cta-btn--primary:hover {
  background: #1f1d18;
  transform: translateY(-1px);
}
.symptoms-detail-cta-btn--ghost {
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.symptoms-detail-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

/* SVG head/eye groups need smooth transitions so the asymmetric Y still feels organic */
.figure-head {
  transition: transform 0.05s linear; /* very short — JS is doing the smoothing */
}

/* --- Hotspots --- */
.symptom-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Outer pulse ring on the dot */
.symptom-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--sage);
  box-shadow:
    0 0 0 4px rgba(245, 241, 232, 0.65),
    0 0 0 6px rgba(138, 164, 176, 0.30),
    0 6px 18px rgba(46, 42, 35, 0.16);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    box-shadow 0.4s ease;
}

/* Subtle continuous pulse so users see it's interactive */
.symptom-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  background: var(--sage);
  opacity: 0.45;
  animation: symptom-pulse 2.6s ease-out infinite;
  z-index: -1;
}
@keyframes symptom-pulse {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(2.1);  opacity: 0;    }
  100% { transform: scale(2.1);  opacity: 0;    }
}

/* Stagger pulse-start so all 6 dots don't blink in sync */
.symptom-hotspot:nth-child(1) .symptom-dot::before { animation-delay: 0s; }
.symptom-hotspot:nth-child(2) .symptom-dot::before { animation-delay: 0.4s; }
.symptom-hotspot:nth-child(3) .symptom-dot::before { animation-delay: 0.8s; }
.symptom-hotspot:nth-child(4) .symptom-dot::before { animation-delay: 1.2s; }
.symptom-hotspot:nth-child(5) .symptom-dot::before { animation-delay: 1.6s; }
.symptom-hotspot:nth-child(6) .symptom-dot::before { animation-delay: 2.0s; }

/* Floating label — visible on hover/focus, also when synced via JS .is-highlighted */
.symptom-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 6px);
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--ink);
  color: #F5F1E8;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.32s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 8px 24px rgba(46, 42, 35, 0.18);
}
.symptom-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ink);
}

/* For hotspots near the BOTTOM (knee), flip the label to appear BELOW the dot */
.symptom-hotspot[data-symptom="knae"] .symptom-label {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translate(-50%, -6px);
}
.symptom-hotspot[data-symptom="knae"] .symptom-label::after {
  bottom: auto;
  top: -4px;
}

/* Hover / focus / sync-highlight states */
.symptom-hotspot:hover,
.symptom-hotspot:focus-visible,
.symptom-hotspot.is-highlighted {
  outline: none;
}
.symptom-hotspot:hover .symptom-dot,
.symptom-hotspot:focus-visible .symptom-dot,
.symptom-hotspot.is-highlighted .symptom-dot {
  background: var(--sage-deep);
  transform: scale(1.45);
  box-shadow:
    0 0 0 4px rgba(245, 241, 232, 0.85),
    0 0 0 8px rgba(109, 138, 152, 0.40),
    0 10px 28px rgba(46, 42, 35, 0.22);
}
.symptom-hotspot:hover .symptom-label,
.symptom-hotspot:focus-visible .symptom-label,
.symptom-hotspot.is-highlighted .symptom-label {
  opacity: 1;
  transform: translate(-50%, 0);
}
.symptom-hotspot[data-symptom="knae"]:hover .symptom-label,
.symptom-hotspot[data-symptom="knae"]:focus-visible .symptom-label,
.symptom-hotspot[data-symptom="knae"].is-highlighted .symptom-label {
  transform: translate(-50%, 0);
}

/* --- List column --- */
.symptoms-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}
.symptoms-list-eyebrow {
  margin: 0 0 4px;
  letter-spacing: 0.20em;
}
.symptoms-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.symptoms-list-items li {
  border-bottom: 1px solid var(--hairline-2);
}
.symptoms-list-items li:last-child { border-bottom: 0; }
.symptoms-list-items a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: padding-left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.symptoms-list-items a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--sage-deep);
  transform: translateY(-50%);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.symptoms-list-items a::after {
  content: "→";
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--sage-deep);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.symptoms-list-items a:hover,
.symptoms-list-items a:focus-visible,
.symptoms-list-items a.is-highlighted {
  outline: none;
  padding-left: 24px;
}
.symptoms-list-items a:hover::before,
.symptoms-list-items a:focus-visible::before,
.symptoms-list-items a.is-highlighted::before {
  width: 16px;
}
.symptoms-list-items a:hover::after,
.symptoms-list-items a:focus-visible::after,
.symptoms-list-items a.is-highlighted::after {
  opacity: 1;
  transform: translateX(0);
}
.symptom-list-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 24px);
  letter-spacing: -0.014em;
  color: var(--ink);
  display: block;
  line-height: 1.2;
}
.symptom-list-hint {
  display: block;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
}
.symptoms-list-foot {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.symptoms-list-foot a {
  color: var(--sage-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--sage);
  transition: border-color 0.3s ease;
}
.symptoms-list-foot a:hover { border-bottom-color: var(--sage-deep); }

/* Symptom list icons — small body silhouette + region dot per symptom (on-brand line-art) */
.symptom-list-text { display: block; min-width: 0; }
.symptom-list-icon {
  width: 32px;
  height: 68px;
  flex-shrink: 0;
  align-self: center;
  overflow: visible;
}
.symptom-list-icon-body { fill: var(--sage); opacity: 0.20; }
.symptom-list-icon-dot {
  fill: var(--sage-deep);
  transition: r 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.symptoms-list-items a:hover .symptom-list-icon-dot,
.symptoms-list-items a:focus-visible .symptom-list-icon-dot,
.symptoms-list-items a.is-highlighted .symptom-list-icon-dot { r: 4.2; }

/* Tablet — slimmer figure, cards still side-by-side */
@media (max-width: 1024px) {
  .symptoms-figure { width: 210px; height: 480px; }
}

/* Mobile — stack the two cards vertically */
@media (max-width: 820px) {
  .symptoms-stage {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
  }
  .symptoms-card {
    padding: clamp(48px, 6vw, 64px) clamp(24px, 5vw, 32px) clamp(28px, 4vw, 36px);
  }
  .symptoms-figure {
    width: 200px;
    height: 458px;
  }
  /* On mobile, increase tap target */
  .symptom-hotspot { width: 40px; height: 40px; }
  .symptom-dot { width: 16px; height: 16px; }
  /* Labels always visible-ish on mobile so user knows what each dot is */
  .symptom-label {
    opacity: 0.92;
    transform: translate(-50%, 0);
    font-size: 11.5px;
    padding: 4px 9px;
  }
}

/* ============================================================
   SYMPTOM PAGES — shared layout for /symptom/*.html (v=50)
   Intro lead → 2-col content (treatment + causes/warning) → CTA band → related
   ============================================================ */
.symptom-content {
  padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(56px, 7vw, 80px);
}
.symptom-content-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.symptom-col h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  line-height: 1.1;
}
.symptom-col h2 + .symptom-col-lead {
  font-size: 16px;
  color: var(--ink-2);
  margin: -8px 0 24px;
  line-height: 1.55;
}

/* Treatment cards (left column) */
.symptom-treatments {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}
.symptom-treatment {
  padding: clamp(18px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.symptom-treatment:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--hairline);
}
.symptom-treatment-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.symptom-treatment-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.symptom-treatment-tag {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  color: var(--sage-deep);
  text-transform: uppercase;
}
.symptom-treatment p {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Cause list + warning block (right column) */
.symptom-causes {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.symptom-causes li {
  padding-left: 26px;
  position: relative;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.symptom-causes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 1.5px;
  background: var(--sage);
}

.symptom-alert {
  padding: clamp(20px, 2.2vw, 26px);
  background: var(--sage-soft);
  border-left: 2px solid var(--sage);
  border-radius: 12px;
}
.symptom-alert h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 10px;
}
.symptom-alert ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.symptom-alert li {
  padding-left: 20px;
  position: relative;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.symptom-alert li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sage-deep);
  font-weight: 600;
}

/* CTA band */
.symptom-cta {
  padding: clamp(56px, 7vw, 88px) var(--gutter);
  text-align: center;
}
.symptom-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.symptom-cta h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.1;
}
.symptom-cta p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 clamp(28px, 3vw, 36px);
}
.symptom-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.symptom-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.symptom-cta-btn--primary {
  background: var(--ink);
  color: #F5F1E8;
  box-shadow: 0 6px 18px rgba(46, 42, 35, 0.18);
}
.symptom-cta-btn--primary:hover {
  background: #1f1d18;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(46, 42, 35, 0.24);
}
.symptom-cta-btn--ghost {
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.symptom-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}

/* Related symptoms — small cards grid at bottom */
.symptom-related {
  padding: clamp(40px, 5vw, 64px) var(--gutter) var(--rhythm);
}
.symptom-related-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.symptom-related-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.014em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.symptom-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.symptom-related-card {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, border-color 0.4s ease;
}
.symptom-related-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--sage);
}
.symptom-related-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.012em;
}
.symptom-related-hint {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Mobile — symptom pages stack to single column */
@media (max-width: 860px) {
  .symptom-content-inner {
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 48px);
  }
}

/* ============================================================
   REDUCED MOTION — full kill switch
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto;
  }
}

/* ---------- cookie consent banner (samme mønster som Godballe) ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2vw, 32px);
  transform: translateX(-50%) translateY(0);
  z-index: 100;
  max-width: min(720px, calc(100vw - 32px));
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow:
    0 4px 8px rgba(46, 42, 35, 0.06),
    0 22px 44px -14px rgba(46, 42, 35, 0.20),
    0 52px 96px -28px rgba(46, 42, 35, 0.18);
  animation: cookie-rise 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 26px);
}
.cookie-title {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cookie-text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cookie-btn--secondary {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid rgba(46, 42, 35, 0.18);
}
.cookie-btn--secondary:hover {
  background: rgba(46, 42, 35, 0.04);
  color: var(--ink);
}
.cookie-btn--primary {
  background: var(--sage);
  color: var(--ink);
  border: 1px solid var(--sage);
  box-shadow: 0 4px 12px -4px rgba(138, 164, 176, 0.5);
}
.cookie-btn--primary:hover {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .cookie-inner { grid-template-columns: 1fr; }
  .cookie-actions { flex-direction: column-reverse; }
  .cookie-btn { width: 100%; justify-content: center; }
}