/* =====================================================================
   Wiktoria Gordon Beauty — designsystem
   Editorial beauty studio: clean white, ink and signature burgundy.
   ===================================================================== */

/* ---------- Design-tokens ---------- */
:root {
  /* Burgundy remains the signature colour. The former beige canvas has
     been replaced with white and cool, paper-like neutrals. */
  /* Headerens højde. Mobilmenuen hænger nedenunder og heroen skal holde
     afstand til den, så de tre tal skal følges ad. */
  --header-h:   78px;

  --cream:      #FFFFFF;
  --cream-2:    #F4F2F2;
  --blush:      #E9E2E4;
  --white:      #FFFFFF;
  --ink:        #171315;
  --ink-soft:   #676064;
  --sand:       #C9C3C5;
  --rose:       #9B7E84;
  --rose-deep:  #5B1020;
  --rose-soft:  #E9DADD;
  --gold:       #7A2939;
  --line:       rgba(23, 19, 21, 0.18);
  --line-soft:  rgba(23, 19, 21, 0.09);

  /* Typografi */
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Form */
  --radius:    2px;
  --radius-sm: 1px;
  --shadow:    0 28px 70px -38px rgba(55, 18, 27, 0.38);
  --shadow-sm: 0 14px 36px -26px rgba(55, 18, 27, 0.3);
  --container: 1320px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);

  /* Rytme */
  --section-y: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.2rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .022;
  background-image: radial-gradient(rgba(23, 19, 21, .5) .4px, transparent .55px);
  background-size: 4px 4px;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--rose-soft); color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 200;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--rose-deep);
  color: var(--white);
  font-weight: 500;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Skjuler visuelt, men beholder for skærmlæsere og sidens
   overskriftsstruktur. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typografi ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 .4em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem); font-weight: 500; }
h2 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
p  { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
em, .italic { font-style: italic; }
strong { font-weight: 500; }

/* Kursiv-accent i overskrifter */
.accent { font-style: italic; color: var(--rose-deep); font-weight: 500; }

/* ---------- Layout-hjælpere ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
/* Ankerspring skal lande under den fastgjorte header, og den er lavere på
   mobil end på desktop. Bindes til samme variabel som headeren selv. */
.section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.bg-cream2 { background: var(--cream-2); }
.bg-blush  { background: linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%); }

/* Eyebrow-label med guldstreg */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
}

.section-head { max-width: 640px; }
.section-head--center { max-width: 660px; margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.125rem; }

/* ---------- Knapper ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.02rem 2rem;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--rose-deep);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(140, 85, 96, 0.7);
}
.btn--primary:hover { background: var(--ink); box-shadow: 0 18px 34px -14px rgba(46,37,35,.6); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--rose-deep); color: var(--rose-deep); }
.btn--text {
  /* Stregen er knappens bundkant. Uden dette ville den arve .btn's
     lodrette padding og svæve langt under teksten. */
  padding: .25rem .35rem;
  color: var(--rose-deep);
  border-radius: 0;
  border-bottom-color: var(--rose-soft);
}
.btn--text:hover { color: var(--ink); border-bottom-color: var(--ink); transform: translateY(-2px); }
.btn--light {
  background: #fff; color: var(--ink);
}
.btn--light:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header / nav ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.header.scrolled {
  background: rgba(250, 245, 240, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}
.brand {
  /* Mærke og navn side om side. Flex, så de to linjer navn/underlinje
     bliver ét blokelement ved siden af logoet i stedet for to flex-børn. */
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ink);
}
.brand-mark { height: 2.5rem; width: auto; flex: none; }
/* Navnet må ikke brække. Med monogrammet ved siden af blev brand-blokken
   bredere, og i mellembredderne faldt "Wiktoria Gordon" på tre linjer og
   lagde sig oven i menuen. */
.brand-text { white-space: nowrap; }
.nav-book { white-space: nowrap; }
.brand-last { color: var(--rose-deep); font-style: italic; }
.brand small {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .3rem;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  position: relative;
  padding-block: .3rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--rose-deep);
  transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--rose-deep); }
.nav-links a.active::after { width: 100%; }
.nav-book { padding: .72rem 1.5rem; }

/* Sprogskifter */
.lang-switch { display: flex; align-items: center; gap: .55rem; font-size: .95rem; letter-spacing: .14em; }
.lang-switch a { color: var(--ink-soft); position: relative; padding: .2rem 0; transition: color .3s ease; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.active { color: var(--rose-deep); font-weight: 500; }
.lang-switch a:not(:last-child)::after { content: "·"; margin-left: .55rem; color: var(--line); }

/* Burger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: none; background: transparent;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(7rem, 12vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero::before {
  /* blødt lys øverst */
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(227,201,199,.55), transparent 62%);
  z-index: 0;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { max-width: 620px; }
.hero h1 { margin-bottom: .35em; }
.hero-sub {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 30em;
  margin-bottom: 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Hero-billede i buet ramme */
.hero-figure {
  position: relative;
  justify-self: center;
  width: min(420px, 100%);
}
.hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 210px 210px 22px 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  outline: 1px solid var(--line);
  outline-offset: 12px;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure::after {
  /* tynd guldbue bag rammen */
  content: "";
  position: absolute;
  inset: -22px -22px 40px -22px;
  border: 1px solid var(--gold);
  border-radius: 230px 230px 30px 30px;
  z-index: -1;
  opacity: .6;
}
.hero-badge {
  position: absolute;
  bottom: 22px; left: -18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: .7rem 1.15rem;
  display: flex; align-items: center; gap: .6rem;
  box-shadow: var(--shadow-sm);
  font-size: 1rem;
  font-weight: 400;
}
.hero-badge b { font-weight: 500; }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(196,170,133,.2); }

/* ---------- Marquee-strip ---------- */
.strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--cream-2);
  overflow: hidden;
}
.strip-track {
  display: flex;
  gap: 3.5rem;
  padding-block: 1.1rem;
  white-space: nowrap;
  animation: marquee 34s linear infinite;
}
.strip-track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--rose-deep);
  display: inline-flex; align-items: center; gap: 3.5rem;
}
.strip-track span::after { content: "✦"; color: var(--gold); font-style: normal; font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ---------- Ydelser ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 3.2rem;
}
.service {
  position: relative;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 2.1rem 1.9rem;
  display: flex;
  flex-direction: column;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.service--wide { grid-column: span 7; padding: clamp(2.1rem, 4vw, 3rem); }
.service--narrow { grid-column: span 5; }
.service:nth-child(4n + 1) { border-radius: 38px var(--radius) var(--radius) var(--radius); }
.service:nth-child(4n + 2) { border-radius: var(--radius) 38px var(--radius) var(--radius); }
.service:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.service--featured { background: linear-gradient(170deg, #fff, #fbeeeb); }
.service-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 18px 18px 18px 5px;
  background: var(--blush);
  color: var(--rose-deep);
  margin-bottom: 1.3rem;
}
.service-icon svg { width: 26px; height: 26px; }
.service h3 { margin-bottom: .5rem; }
.service .desc { color: var(--ink-soft); font-size: 1.125rem; margin-bottom: 1.5rem; }
.service-expect-title {
  margin: 0 0 .65rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.service-meta {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.service-price { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }
.service-dur { font-size: 1rem; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; }
/* Book-knappen i kortet: skjult på desktop, hvor headerens knap altid er
   synlig. Se noten i services.html. */
.service-book { display: none; }
.tag-popular {
  position: absolute; top: 1.2rem; right: 1.2rem;
  font-size: .875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-deep); background: rgba(176,122,130,.12);
  padding: .32rem .7rem; border-radius: 100px;
}

/* ---------- Galleri ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
  margin-top: 3rem;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--cream-2);
}
.gallery-item img,
.gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img,
.gallery-item:hover video { transform: scale(1.06); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.4rem 1.1rem .9rem;
  background: linear-gradient(0deg, rgba(46,37,35,.62), transparent);
  color: #fff;
  font-size: 1.125rem;
  letter-spacing: .04em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.gallery-item:hover .gallery-cap { opacity: 1; transform: translateY(0); }
.gallery-follow { text-align: center; margin-top: 2.4rem; }

/* ---------- Priser ---------- */
.pricing-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: 2.5rem;
}
.price-list { list-style: none; margin: 0; padding: 0; }
.price-row {
  display: flex; align-items: baseline; gap: .8rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.price-row:last-child { border-bottom: none; }
/* Navnet SKAL kunne ombrydes. Med nowrap skubbede "Koreansk lash lift +
   brynlaminering + farve" hele siden ud over skærmkanten på små telefoner,
   så prisen forsvandt. min-width:0 er nødvendig, fordi flex-elementer
   ellers nægter at blive smallere end deres indhold. */
.price-row .name { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); flex: 0 1 auto; min-width: 0; }
.price-row .lead { flex: 1 1 16px; min-width: 16px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.price-row .amt { flex: none; font-weight: 500; font-size: 1.125rem; color: var(--rose-deep); white-space: nowrap; }
.price-row .dur { display: block; font-size: 1rem; color: var(--ink-soft); letter-spacing: .04em; margin-top: .15rem; }
.price-group-title {
  font-family: var(--sans); font-weight: 500; font-size: .875rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  margin: 2rem 0 .3rem;
}
.price-aside {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 100px;
}
.price-aside h3 { margin-bottom: .6rem; }
.price-aside p { color: var(--ink-soft); font-size: 1.125rem; }
.price-aside .btn { width: 100%; margin-top: 1.2rem; }
.price-note { font-size: 1.125rem; color: var(--ink-soft); margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }

/* ---------- Om ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-figure { position: relative; }
.about-figure img {
  width: 100%;
  border-radius: 260px 260px 20px 20px;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.about-figure::before {
  content: "";
  position: absolute;
  inset: 16px 16px -16px -16px;
  border: 1px solid var(--gold);
  border-radius: 260px 260px 20px 20px;
  z-index: -1;
  opacity: .55;
}
.about-highlights { list-style: none; margin: 1.8rem 0 2.2rem; padding: 0; display: grid; gap: .85rem; }
.about-highlights li { display: flex; align-items: flex-start; gap: .8rem; color: var(--ink); }
.about-highlights svg { width: 20px; height: 20px; color: var(--rose-deep); flex: none; margin-top: .2rem; }
.signature {
  font-family: var(--serif); font-style: italic; font-size: 1.7rem;
  color: var(--rose-deep); margin-top: .5rem;
}

/* ---------- Anmeldelser ---------- */
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }




.reviews-grid {
  columns: 2;
  column-gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.8rem;
}
.review {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  position: relative;
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}
.review:nth-child(4n + 1) { background: rgba(230,214,207,.55); }
.review .rec {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 1rem;
}
.review .rec svg { width: 17px; height: 17px; color: var(--gold); flex: none; }
.reviews-more { text-align: center; margin-top: 2.4rem; }
.review .quote { font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: var(--ink); margin-bottom: 1.3rem; }
.review .who { display: flex; align-items: center; gap: .8rem; }
.review .avatar {
  width: 40px; height: 40px; border-radius: 14px 14px 14px 4px;
  background: var(--blush); color: var(--rose-deep);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.05rem;
}
.review .who-meta b { display: block; font-weight: 500; font-size: 1.125rem; }
.review .who-meta span { display: block; font-size: 1rem; color: var(--ink-soft); letter-spacing: .02em; }
.review .avatar { line-height: 1; }

/* ---------- FAQ ---------- */
#faq .container {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(2.5rem, 7vw, 7rem);
}
#faq .section-head { position: sticky; top: 110px; }
.faq-list { margin: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  color: var(--ink);
  transition: color .3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute; right: .3rem; top: 50%;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--rose-deep);
  border-bottom: 1.5px solid var(--rose-deep);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-item summary:hover { color: var(--rose-deep); }
.faq-item summary:focus-visible { outline-offset: 2px; }
.faq-answer { padding: 0 3rem 1.5rem 0; color: var(--ink-soft); }
.faq-answer p { margin: 0; }

/* ---------- Før/efter-slider ---------- */
.ba-wrap { display: flex; justify-content: center; margin-top: 2.8rem; }
.ba-slider {
  --pos: 50%;
  position: relative;
  width: min(680px, 100%);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  outline: 1px solid var(--line);
  outline-offset: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-top {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.ba-label {
  position: absolute; top: 14px;
  font-family: var(--sans);
  font-size: .875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  background: rgba(46,37,35,.55);
  backdrop-filter: blur(4px);
  padding: .38rem .8rem;
  border-radius: 100px;
  pointer-events: none;
}
.ba-label--before { left: 14px; }
.ba-label--after { right: 14px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ba-line {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 12px rgba(46,37,35,.35);
}
.ba-knob {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  color: var(--rose-deep);
}
.ba-knob svg { width: 20px; height: 20px; }
.ba-knob::before {
  /* venstre-pil (spejlet af højre-pilen i ikonet) */
  content: "";
  position: absolute; left: 9px;
  width: 7px; height: 7px;
  border-left: 1.6px solid var(--rose-deep);
  border-bottom: 1.6px solid var(--rose-deep);
  transform: rotate(45deg);
}
.ba-knob svg { margin-left: 8px; }
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.ba-range::-moz-range-thumb { width: 60px; height: 999px; border: 0; background: transparent; }
.ba-range:focus-visible ~ .ba-handle .ba-knob,
.ba-slider:has(.ba-range:focus-visible) .ba-knob {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
}

/* ---------- Booking ---------- */
.booking { position: relative; }
.booking-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,164,159,.28), transparent 38%),
    rgba(255,255,255,.72);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(2.4rem, 5vw, 4rem);
  text-align: center;
  max-width: 920px;
  margin-inline: auto;
}
.booking-card h2 { margin-bottom: .4em; }
.booking-card p { color: var(--ink-soft); max-width: 42ch; margin-inline: auto; text-wrap: pretty; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.booking-note {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .35rem .7rem;
  font-size: 1.125rem; color: var(--ink-soft); margin-top: 1.6rem; letter-spacing: .02em;
}
.booking-note span { display: inline-flex; align-items: baseline; gap: .3rem; }
.booking-note span + span::before { content: "·"; margin-right: .7rem; opacity: .55; }
.booking-note svg { width: 15px; height: 15px; color: var(--rose-deep); align-self: center; }
.booking-embed { margin-top: 2rem; }
.booking-embed iframe { width: 100%; min-height: 640px; border: 0; border-radius: var(--radius-sm); }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: #E9DED9;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer a { color: #E9DED9; transition: color .3s ease; }
.footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer .brand, .footer .brand small { color: #fff; }
.footer .brand-last { color: var(--rose-soft); }
.footer-about p { color: rgba(233,222,217,.72); max-width: 34ch; margin-top: 1.1rem; }
.footer h4 {
  font-family: var(--sans); font-weight: 500; font-size: .875rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
/* Åbningstiderne er den anden overskrift i kontaktkolonnen og skal have luft
   over sig. ::first-letter gør det store begyndelsesbogstav til CSS'ens ansvar,
   så ugedagene kan staves korrekt med småt på dansk og med stort på engelsk. */
.footer-hours-title { margin-top: 2rem; }
.footer-hours li::first-letter { text-transform: uppercase; }
.footer ul a { font-size: 1.125rem; }
.footer .socials { display: flex; gap: .8rem; margin-top: 1.4rem; }
.footer .socials a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.footer .socials a:hover { background: var(--rose-deep); border-color: var(--rose-deep); transform: translateY(-2px); }
.footer .socials svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 2rem;
  font-size: 1.125rem;
  color: rgba(233,222,217,.6);
}

/* ---------- Reveal-animation (kun når JS er aktivt) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Responsivt ---------- */

/* Navigationen har sit eget breakpoint. Den løber tør for plads længe før
   resten af layoutet gør, fordi brand, fem menupunkter, sprogskifter og
   booking-knap skal stå på én linje. Ved 1000 px begynder navnet at brække
   ind i menuen, så burgeren overtager dér i stedet for først ved 720. */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.6rem var(--gutter) 2.2rem;
    gap: 1.4rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transform: translateY(-14px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .nav-open .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 1.3rem; width: 100%; }
  .nav-links a { font-size: 1.1rem; letter-spacing: .05em; }
  .nav-book { width: 100%; }
}

/* Lige over burger-grænsen er der plads, men ikke rigelig. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .nav-menu { gap: 1.2rem; }
  .nav-links { gap: 1.4rem; }
  .nav-links a { font-size: 1rem; letter-spacing: .08em; }
  .nav-book { padding: .85rem 1.3rem; font-size: .9375rem; letter-spacing: .08em; }
  .brand { font-size: 1.3rem; }
  .brand-mark { height: 2.1rem; }
  .brand small { font-size: .8125rem; letter-spacing: .26em; }
}


/* Store tablets i portræt (fx iPad Pro, 1024px) rammer ikke 960-grænsen, men
   skal have samme stablede hero. Blokken skal stå FØR de smallere
   breakpoints: ellers overskriver den telefonreglerne, fordi en telefon
   også er "portrait" under 1024px. */
@media (max-width: 1024px) and (orientation: portrait) {
  .hero-grid { grid-template-columns: 1fr; justify-items: center; }
  .hero-figure { grid-row: 1; margin-bottom: 2.4rem; width: min(420px, 88%); }
  .hero-copy { grid-row: 2; margin-inline: auto; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}

@media (max-width: 960px) {
  .service--wide, .service--narrow { grid-column: span 6; }
  .reviews-grid { columns: 1; }
  .pricing-wrap { grid-template-columns: 1fr; }
  .price-aside { position: static; }
  /* Billedet først. Et ansigt er det stærkeste, en personlig
     behandlingsvirksomhed har at åbne med, og på en telefon er der kun plads
     til ét blikfang over folden. Rækkefølgen ændres kun visuelt: i koden
     står h1 stadig før billedet, så skærmlæsere og Google møder
     overskriften først. */
  .hero-grid { grid-template-columns: 1fr; justify-items: center; }
  .hero-figure { grid-row: 1; margin-bottom: 2.4rem; width: min(420px, 88%); }
  .hero-copy { grid-row: 2; margin-inline: auto; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { width: min(360px, 80%); margin-inline: auto; }
  #faq .container { grid-template-columns: 1fr; gap: 2rem; }
  #faq .section-head { position: static; max-width: 620px; }
}
@media (max-width: 720px) {
  /* Book-knap i hvert servicekort, modsat prisen. */
  .service-meta { flex-wrap: wrap; gap: .6rem 1rem; }
  .service-book {
    display: inline-block;
    margin-left: auto;
    font-family: var(--sans);
    font-size: .875rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--rose-deep);
    border: 1px solid var(--rose-deep);
    border-radius: 100px;
    padding: .5rem 1.1rem;
    transition: background .3s ease, color .3s ease;
  }
  .service-book:hover, .service-book:focus-visible {
    background: var(--rose-deep); color: var(--cream);
  }
  /* "FØLG @wiktoriagordon.beauty" brækker til to linjer på en telefon, og
     så står Instagram-ikonet alene ud for to linjer tekst og ser forkert
     ud. Mindre skrift og sporing holder det på én linje. */
  .results-follow .btn {
    font-size: .875rem; letter-spacing: .05em;
    padding-inline: 1.2rem;
  }
  .results-follow .btn svg { width: 20px; height: 20px; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item.wide { grid-column: span 2; }
  .service--wide, .service--narrow { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .reviews-head { flex-direction: column; align-items: flex-start; }
  /* Headeren er fastgjort og gennemsigtig i toppen, så heroen skal selv
     holde afstand. Der skal være plads til headerens højde PLUS guldbuen,
     der stikker 22 px op over billedrammen; ellers lægger fotoet sig bag
     logoet. Headeren er samtidig strammet en anelse herunder, så pladsen
     ikke går fra indholdet. */
  .brand { font-size: 1.3rem; gap: .55rem; }
  .brand-mark { height: 2.1rem; }
  .brand small { font-size: .8125rem; letter-spacing: .26em; margin-top: .22rem; }
  :root { --header-h: 64px; }
  .hero { padding-top: 6.4rem; }
  .hero-figure::after { inset: -14px -14px 30px -14px; }
  /* Mindre billede på telefon, så overskriften når med over folden ved
     siden af ansigtet. I fuld bredde fylder det alene hele skærmen. */
  .hero-figure { width: min(264px, 66%); margin-bottom: 1.4rem; }
  .hero-sub { margin-bottom: 1.6rem; }
  /* Badgen er skaleret efter et billede i fuld bredde. På det mindre
     mobilbillede brækker den til to linjer og stikker ud i begge sider. */
  .hero-badge {
    font-size: .8125rem;
    padding: .5rem .85rem;
    gap: .45rem;
    left: -10px; bottom: 14px;
    white-space: nowrap;
  }
  .hero-badge .dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(196,170,133,.2); }
  .hero-actions .btn { flex: 1 1 100%; }
  .booking-actions { align-items: stretch; flex-direction: column; }
  .booking-actions .btn { width: 100%; }
  .booking-actions .btn--text { width: auto; align-self: center; }
}
@media (max-width: 400px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery-item.wide, .gallery-item.tall { grid-column: auto; grid-row: auto; }
}


/* ---------- Politik & information ---------- */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 3.2rem;
}
.policy-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
}
.policy-card h3 {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 0 0 .85rem;
}
.policy-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.65;
}
.policy-note {
  max-width: 68ch;
  margin: 2.6rem auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.65;
}
.policy-accept {
  max-width: 68ch;
  margin: .9rem auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 900px) {
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .policy-grid { grid-template-columns: 1fr; }
}

/* ---------- Book-knap i prislisten ---------- */
.price-book {
  margin-left: 1rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-deep);
  border: 1px solid var(--rose-soft);
  border-radius: 999px;
  padding: .38rem .95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.price-book:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--cream); }

/* ---------- Klik-for-at-hente-boksen over kalenderen ---------- */
.cal-invite { text-align: center; padding: .5rem 0 1rem; }
.cal-invite-ic {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blush);
  color: var(--rose-deep);
  margin: 0 auto 1.2rem;
}
.cal-invite h3 { margin: 0 0 .6rem; }
.cal-invite p {
  max-width: 46ch;
  margin: 0 auto 1.6rem;
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.6;
}
.cal-load[disabled] { opacity: .6; cursor: default; }

/* ---------- Introduktion (Wiktorias §3) ---------- */
.section--intro { padding-block: clamp(3.5rem, 7vw, 6rem); }
/* Før/efter står lige efter introteksten og skal læses som svaret på den,
   ikke som en ny sektion langt nede.

   Tre afstande lagde sig oven i hinanden og gav 128 px hul: introens
   bundluft, sektionens topluft og .ba-wrap's margin. Den sidste var til at
   skabe afstand til resultatsektionens overskrift, som ikke længere vises,
   så den er overflødig her. Nu er der 56 px.

   :has() lader introen selv stramme op, men kun når før/efter faktisk
   følger efter. Browsere uden :has() får den oprindelige, lidt større
   afstand — det ser fint ud, bare mindre stramt. */
.section--intro:has(+ .ba) { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section--intro + .ba { padding-top: 0; }
.section--intro + .ba .ba-wrap { margin-top: 0; }
.intro-block {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
}
.intro-block h2 { margin-bottom: 1.4rem; }
.intro-block p {
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.75;
  margin: 0 0 1rem;
}
.intro-closing {
  margin-top: 1.8rem !important;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-style: italic;
  color: var(--rose-deep) !important;
}

/* ---------- "What you can expect" på behandlingskortene ---------- */
.service-expect {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.service-expect li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.service-expect svg { flex: none; width: 16px; height: 16px; margin-top: .18rem; color: var(--rose-deep); }
.service-tagline {
  margin: 0 0 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Om mig: citat, læs mere, afslutning ---------- */
.about-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  color: var(--rose-deep);
  margin: 1.6rem 0;
}
.about-more { margin: 1.4rem 0 0; }
.about-more summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  border-bottom: 1px solid var(--rose-soft);
  padding-bottom: .3rem;
}
.about-more summary::-webkit-details-marker { display: none; }
.about-more summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .3s ease;
}
.about-more[open] summary::after { transform: translateY(10%) rotate(-135deg); }
.about-more-body { padding-top: 1.4rem; }
.about-more-body h3 {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 1.6rem 0 .8rem;
}
.about-closing {
  margin-top: 1.8rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Afsluttende opfordring (Wiktorias §19) ---------- */
.finalcta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  background: var(--rose-deep);
}
.finalcta::before {
  content: "";
  position: absolute;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  top: -90%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.03), 0 0 0 160px rgba(255,255,255,.025);
}
.finalcta-inner { max-width: 46ch; margin-inline: auto; text-align: center; }
.finalcta-inner h2 { margin-bottom: 1rem; color: var(--cream); }
.finalcta-inner p {
  color: rgba(255,255,255,.78);
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 2.2rem;
}

/* ---------- Sæt-kortet i behandlingsgitteret ---------- */
.service--sets {
  background: linear-gradient(170deg, var(--blush), var(--cream-2));
  text-decoration: none;
  color: inherit;
}
.service--sets:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.sets-list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .1rem;
}
.sets-list li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem;
  line-height: 1.4;
}
.sets-list li:last-child { border-bottom: 0; }
.sets-list li span { flex: 1; color: var(--ink-soft); }
.sets-list li b { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); white-space: nowrap; }
.sets-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.sets-link svg { width: 16px; height: 16px; }

/* ---------- Resultater: filmstrimlen under før/efter ---------- */
.results-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 14px;
  margin-top: 2.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.results-shot {
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-2);
}
.results-shot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.results-shot:hover img { transform: scale(1.05); }
.results-shot figcaption {
  padding: .7rem .2rem 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
/* Vælger mellem før/efter-par. Skjult indtil JS melder sig, så knapperne
   ikke står og ser klikbare ud på en side, hvor de ikke kan gøre noget. */
.ba-tabs { display: none; }
.ba-tabs.is-ready {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-top: 1.6rem;
}
.ba-tab {
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ba-tab:hover { border-color: var(--rose-deep); color: var(--rose-deep); }
.ba-tab.is-active {
  background: var(--rose-deep); border-color: var(--rose-deep); color: #fff;
}

/* Resultatbillederne bliver først knapper, når JS kan åbne dem */
.results-open {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: default;
}
.is-clickable .results-open { cursor: zoom-in; }
.results-open:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }

/* Overlay til det store billede */
body.no-scroll { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 20, 19, .92);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  max-width: min(1100px, 100%); max-height: 100%;
}
.lightbox-figure img {
  max-width: 100%; max-height: 78dvh;
  width: auto; height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.lightbox-figure figcaption {
  margin-top: 1rem; text-align: center;
  font-size: 1.0625rem; color: rgba(233,222,217,.85);
}
.lightbox-btn {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 1.9rem; line-height: 1;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.lightbox-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.2rem; font-size: 1.6rem; }
@media (max-width: 620px) {
  /* Behandlingsnavnene er lange og brækker til to linjer på en telefon.
     Mindre sporing og lidt mindre skrift holder blokken fra at dominere. */
  .ba-tab { font-size: .9375rem; letter-spacing: .06em; padding: .55rem 1rem; }
  .lightbox { gap: .4rem; padding: 1rem .5rem 2rem; }
  .lightbox-btn { width: 40px; height: 40px; }
  .lightbox-figure img { max-height: 66dvh; }
}

.results-follow { text-align: center; margin-top: 2.4rem; }

/* ---------- Branded 404 ---------- */
.error-page { min-height: 70dvh; display: grid; place-items: center; text-align: center; }
.error-page__inner { max-width: 560px; }
.error-page__text { margin-inline: auto; }
.error-page__actions { justify-content: center; }

/* Rytme: sektionerne stod for langt fra hinanden, da brødteksten blev 18px */
:root { --section-y: clamp(3.5rem, 7vw, 6.5rem); }


/* ---------- Sikring mod vandret overløb på små skærme ---------- */
.pricing-wrap > *, .services-grid > *, .policy-grid > *,
.reviews-grid > *, .about-grid > * { min-width: 0; }
.sets-list li span { min-width: 0; overflow-wrap: anywhere; }
.price-row .name { overflow-wrap: anywhere; }

/* =====================================================================
   Editorial direction — approved reference response, 25/08/2026
   The visual language follows a luxury beauty editorial: large typography,
   square image crops, strict rules, generous white space and one accent.
   ===================================================================== */

body { background: #fff; }

h1, h2, h3, h4 {
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(4.4rem, 8.7vw, 8.5rem);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(3rem, 5.4vw, 5.65rem);
  line-height: .92;
  letter-spacing: -.05em;
}

h3 { letter-spacing: -.025em; }

.accent {
  display: block;
  margin-left: .6em;
  font-weight: 400;
  text-transform: none;
}

.section { padding-block: clamp(5rem, 9vw, 9rem); }

.eyebrow {
  gap: .8rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--rose-deep);
}

.eyebrow::before,
.eyebrow--center::after {
  width: 42px;
  background: var(--rose-deep);
}

.section-head { max-width: 760px; }
.section-head--center { max-width: 900px; }
.section-head p { max-width: 54ch; }
.section-head--center p { margin-inline: auto; }

/* Crisp, fashion-site controls replace the former rounded UI. */
.btn {
  min-height: 3.7rem;
  border-radius: 0;
  padding: 1rem 2rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  box-shadow: none;
}

.btn--primary:hover { background: #26080f; box-shadow: none; }
.btn--ghost { border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--text { min-height: auto; }

/* Header */
.header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line-soft);
}

.header.scrolled {
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.brand { gap: .55rem; }
.brand-mark { height: 2.25rem; }
.brand-text {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.brand-last { color: var(--ink); font-style: normal; }
.brand small {
  margin-top: .22rem;
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .37em;
  color: var(--rose-deep);
}
.nav-links { gap: clamp(1.1rem, 1.8vw, 2rem); }
.nav-links a { font-size: .7rem; font-weight: 500; letter-spacing: .18em; }
.nav-book { min-height: auto; padding: .76rem 1.3rem; }
.lang-switch { font-size: .75rem; }

/* Hero — an asymmetric editorial cover rather than a soft portrait card. */
.hero {
  min-height: min(920px, 100dvh);
  padding-top: clamp(8.5rem, 15vh, 11rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
  background: #fff;
}
.hero::before {
  top: 13%;
  right: auto;
  left: 6%;
  width: 1px;
  height: 72%;
  background: var(--line-soft);
}
.hero::after {
  content: "WGB  /  BEAUTY STUDIO  /  HORSENS";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .32em;
  color: var(--ink-soft);
}
.hero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: clamp(1.5rem, 2vw, 3rem);
  align-items: end;
}
/* Critical above-the-fold content must never wait on JavaScript or an
   observer callback. Lower sections keep the staggered scroll reveal. */
.js .hero .reveal {
  opacity: 1;
  transform: none;
}
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 820px;
  padding-bottom: clamp(1.5rem, 5vw, 4rem);
}
.hero h1 {
  margin-right: -.8em;
  margin-bottom: .28em;
}
.hero-sub {
  max-width: 44ch;
  margin-left: clamp(.2rem, 7vw, 5rem);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.65;
}
.hero-actions { margin-left: clamp(.2rem, 7vw, 5rem); }
.hero-figure {
  justify-self: stretch;
  width: 100%;
  max-width: 520px;
}
.hero-frame {
  aspect-ratio: 4 / 5.15;
  border-radius: 0;
  outline: 0;
  box-shadow: var(--shadow);
}
.hero-frame img { object-position: 50% 35%; }
.hero-figure::after {
  inset: auto auto -18px -18px;
  width: 44%;
  height: 50%;
  border: 0;
  border-left: 1px solid var(--rose-deep);
  border-bottom: 1px solid var(--rose-deep);
  border-radius: 0;
  opacity: 1;
}
.hero-badge {
  left: -2.6rem;
  bottom: 2rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.6);
  padding: .72rem 1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: none;
}
.hero-badge .dot { border-radius: 0; background: var(--rose-deep); box-shadow: none; }

/* A narrow burgundy announcement bar mirrors the supplied references. */
.strip {
  border: 0;
  background: var(--rose-deep);
}
.strip-track { padding-block: .82rem; }
.strip-track span {
  font-family: var(--sans);
  font-style: normal;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
}
.strip-track span::after { color: rgba(255,255,255,.65); }
.strip-track span::after { content: "·"; font-size: 1rem; }

/* Statement intro */
.section--intro {
  padding-block: clamp(6rem, 10vw, 10rem);
  border-bottom: 1px solid var(--line-soft);
}
.intro-block { max-width: 900px; }
.intro-block h2 { margin-bottom: 2rem; }
.intro-block p { max-width: 54ch; margin-inline: auto; }
.intro-closing {
  margin-top: 2.4rem !important;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}

/* Results: large, clean photography with no soft frames. */
.ba-slider {
  width: min(980px, 100%);
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}
.ba-label { border-radius: 0; background: var(--rose-deep); }
.ba-knob { border-radius: 0; box-shadow: none; }
.ba-tabs.is-ready { gap: 0; }
.ba-tab { border-radius: 0; font-size: .72rem; letter-spacing: .16em; }
.results-strip {
  grid-auto-columns: minmax(260px, .8fr);
  gap: 1.2rem;
  margin-top: 4rem;
}
.results-shot { border-radius: 0; }
.results-shot figcaption { font-size: .78rem; letter-spacing: .08em; }

/* Services become an editorial ruled grid, not rounded cards. */
#ydelser { border-top: 1px solid var(--line-soft); }
.services-grid { gap: 0; margin-top: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--ink); }
.service,
.service:nth-child(4n + 1),
.service:nth-child(4n + 2) {
  min-height: 390px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: clamp(2rem, 4vw, 3.6rem);
  box-shadow: none;
}
.service:nth-child(even) { border-right: 0; }
.service:hover { transform: none; box-shadow: none; background: var(--cream-2); }
.service--featured,
.service--sets { background: var(--rose-deep); color: #fff; }
.service--featured h3,
.service--featured .desc,
.service--featured .service-expect-title,
.service--featured .service-expect li,
.service--featured .service-price,
.service--featured .service-dur,
.service--sets h3,
.service--sets .desc,
.service--sets .sets-list li span,
.service--sets .sets-list li b,
.service--sets .sets-link { color: #fff; }
.service--featured .service-meta,
.service--sets .sets-list li { border-color: rgba(255,255,255,.22); }
.service-icon {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  border: 1px solid currentColor;
}
.service h3 { font-size: clamp(2rem, 3vw, 3.2rem); }
.service .desc { max-width: 44ch; }
.tag-popular {
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid currentColor;
}

/* Price list */
.price-row { padding: 1.35rem 0; border-color: var(--line); }
.price-row .name { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.price-group-title { color: var(--rose-deep); }
.price-aside {
  top: 104px;
  border: 0;
  border-radius: 0;
  padding: clamp(2.4rem, 5vw, 4rem);
  background: var(--rose-deep);
  color: #fff;
  box-shadow: none;
}
.price-aside h3,
.price-aside p,
.price-aside .price-note { color: #fff; }
.price-aside .btn--primary { background: #fff; color: var(--rose-deep); }
.price-aside .btn--primary:hover { background: var(--ink); color: #fff; }
.price-aside .price-note { border-color: rgba(255,255,255,.25); opacity: .76; }

/* About — a clean two-page magazine spread. */
.bg-blush { background: var(--cream-2); }
.about-grid { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.about-figure { min-height: 700px; }
.about-figure img {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  object-position: 50% 35%;
}
.about-figure::before { display: none; }
.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 7rem);
  background: #fff;
}
.about-copy h2 { font-size: clamp(2.8rem, 4.6vw, 5rem); }
.about-pull { font-size: clamp(1.8rem, 2.8vw, 2.7rem); }

/* Reviews and information are ruled editorial lists. */
.review,
.review:nth-child(4n + 1),
.policy-card {
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: 1.8rem 0 2.5rem;
}
.review .quote { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.review .avatar { border-radius: 0; background: var(--rose-deep); color: #fff; }
.policy-grid { gap: 2rem; }

/* Booking is the conversion-focused burgundy panel. */
.booking-card {
  max-width: 1100px;
  border: 0;
  border-radius: 0;
  padding: clamp(4rem, 8vw, 7rem);
  color: #fff;
  background: var(--rose-deep);
  box-shadow: none;
}
.booking-card h2,
.booking-card p,
.booking-card .eyebrow { color: #fff; }
.booking-card .eyebrow::before,
.booking-card .eyebrow::after { background: #fff; }
.booking-card .btn--primary { background: #fff; color: var(--rose-deep); }
.booking-card .btn--primary:hover { background: var(--ink); color: #fff; }
.booking-card .btn--text { color: #fff; border-color: rgba(255,255,255,.45); }
.booking-note svg { color: #fff; }

.finalcta {
  padding-block: clamp(5rem, 8vw, 8rem);
  background: #fff;
  border-top: 1px solid var(--line);
}
.finalcta::before { display: none; }
.finalcta-inner { max-width: 900px; }
.finalcta-inner h2 { color: var(--rose-deep); }
.finalcta-inner p { color: var(--ink-soft); }

.footer { background: #1d1719; }
.footer .brand-last { color: #fff; }
.footer .brand small { color: rgba(255,255,255,.62); }
.footer .socials a { border-radius: 0; }

@media (max-width: 1000px) {
  .nav-menu { background: rgba(255,255,255,.985); }
}

@media (max-width: 960px) {
  .hero { min-height: auto; }
  .hero::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-figure {
    grid-row: 1;
    width: min(540px, 74%);
    max-width: none;
    justify-self: end;
    margin-bottom: -9rem;
  }
  .hero-copy {
    grid-row: 2;
    max-width: 780px;
    text-align: left;
  }
  .hero h1 { margin-right: 0; }
  .hero-sub,
  .hero-actions { margin-left: clamp(1rem, 12vw, 6rem); margin-right: 0; }
  .hero-actions { justify-content: flex-start; }
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { min-height: auto; width: min(680px, 92%); }
  .about-copy { margin-left: clamp(0rem, 7vw, 5rem); margin-top: -4rem; position: relative; }
}

@media (max-width: 720px) {
  h1 { font-size: clamp(3.75rem, 18vw, 6rem); }
  h2 { font-size: clamp(2.7rem, 14vw, 4.4rem); }
  .section { padding-block: clamp(4.5rem, 17vw, 7rem); }
  .brand-text { font-size: 1rem; }
  .brand small { font-size: .53rem; letter-spacing: .28em; }
  .hero { padding-top: calc(var(--header-h) + 2.6rem); padding-bottom: 4.5rem; }
  .hero-figure {
    width: 72%;
    margin: 0 0 -4.8rem auto;
  }
  .hero-frame { aspect-ratio: 4 / 5; }
  .hero-figure::after { inset: auto auto -10px -10px; }
  .hero-copy { width: 100%; padding: 0; }
  .hero h1 { position: relative; margin-bottom: .45em; }
  .hero-sub,
  .hero-actions { margin-left: 0; }
  .hero-sub { max-width: 34ch; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
  .hero-actions .btn { min-width: 0; padding-inline: .7rem; }
  .hero-badge { left: -1rem; bottom: 1rem; font-size: .58rem; }
  .hero-badge { display: none; }
  .services-grid { display: block; }
  .service,
  .service:nth-child(4n + 1),
  .service:nth-child(4n + 2) {
    min-height: 0;
    border-right: 0;
    padding: 2.5rem 0;
  }
  .service--featured,
  .service--sets { padding-inline: 1.5rem !important; }
  .service-book { border-radius: 0; }
  .about-figure { width: 100%; }
  .about-copy { margin: -2rem 1rem 0; padding: 2.2rem 1.3rem; }
  .booking-card { margin-inline: calc(var(--gutter) * -1); }
  .results-strip { grid-auto-columns: 76%; }
}

@media (max-width: 400px) {
  .brand-mark { height: 1.85rem; }
  .brand-text { font-size: .92rem; }
  .hero-actions { grid-template-columns: 1fr; }
}