/* Renaissance Dental — komponent-CSS för mockupen.
   Klassnamnen följer LumoKits komponenter (site-header, hero, …) så att CSS:en
   kan flyttas in i build_bundle.py utan omskrivning. */

/* ── Bas ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--fg-strong); margin: 0; font-weight: 450; letter-spacing: -0.02em; }
/* Radbrytning: rubriker delas jämnt, så att inget ord hamnar ensamt på en rad */
h2, h3 { text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--logo); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); color: var(--fg-strong); padding: 8px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { left: 8px; }

.inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.icon { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Knappar */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: 0;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary { background: var(--blush-600); color: var(--white); padding: 14px 30px; box-shadow: none; }
.btn-primary:hover { background: var(--blush-700); transform: translateY(-1px); }
.btn-ghost { background: var(--white); color: var(--blush-700); padding: 14px 28px; box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: var(--blush-50); }
.btn-primary .icon, .btn-ghost .icon { font-size: 18px; stroke-width: 1.75; }
/* Smala skärmar: långa knapptexter (t.ex. ryska) radbryts i stället för att ge sidoscroll
   (2026-10-29). Bara knappar i innehållet; sidhuvudets Boka tid rörs inte. */
@media (max-width: 600px) {
  main :is(.btn-primary, .btn-ghost) { white-space: normal; max-width: 100%; text-align: center; }
  main .reach { min-width: 0; max-width: 100%; }
}

/* ── Sidhuvud (lumo/site-header) ─────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; }

.site-header .topbar { background: var(--paper); border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
/* Tydligare toppremsa (2026-10-24): halvfet, marinblå, jämnbreda siffror och lite luft mellan orden */
.site-header .topbar .inner { font-weight: 500; color: var(--fg-strong); font-variant-numeric: tabular-nums; letter-spacing: .01em; word-spacing: .12em; }
.site-header .topbar .inner { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header .topbar a { display: inline-flex; align-items: center; gap: 6px; }
.site-header .topbar a:hover { color: var(--blush-700); }
.site-header .topbar .icon { color: var(--blush-700); font-size: 16px; }

.site-header .bar { background: var(--white); box-shadow: var(--shadow-xs); }
.site-header .bar .inner { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header .logo { display: block; flex-shrink: 0; }
.site-header .logo img { height: 44px; width: auto; }  /* större logga (2026-10-25) */
@media (max-width: 1100px) { .site-header .logo img { height: 38px; } }  /* smalare skärmar: menyn + engelska/ryska etiketter ryms */

.site-header nav { display: flex; align-items: center; flex: 1; gap: 16px; }
.site-header .menu { display: flex; align-items: center; gap: 24px; margin: 0 auto; }
.site-header .menu > li { position: relative; }
.site-header .menu a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-500); }
.site-header .menu a:hover, .site-header .menu .current-menu-item > a { color: var(--fg-strong); background: var(--blush-50); }
.site-header .menu-item-has-children > a::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 2px; }

.site-header .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.site-header .menu-item-has-children:hover > .sub-menu,
.site-header .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-header .sub-menu a { display: flex; padding: 9px 12px; font-weight: 500; letter-spacing: 0; }


/* Språkväljaren: alla språk synliga direkt med flagga och fullt namn, aktivt språk markerat */
.lang-switch { display: inline-flex; align-items: center; padding: 3px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.lang-switch ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lang-switch li a { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--radius-pill); font-size: 13.5px; letter-spacing: 0; white-space: nowrap; color: var(--fg); transition: background .15s, color .15s; }
.lang-switch li a:hover { background: var(--blush-50); color: var(--blush-700); }
.lang-switch li a[aria-current] { background: var(--blush-600); color: #fff; }
.lang-switch .flag { flex: none; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(20, 50, 74, .22); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.lang-switch li a[aria-current] .flag { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.lang-switch li a:hover .flag { transform: translateY(-1px) scale(1.1); }
@media (min-width: 901px) and (max-width: 1359px) {
  /* Smalt sidhuvud: bara det aktiva språket visar namnet, övriga visar flaggan (namnet finns kvar för skärmläsare) */
  .lang-switch li a:not([aria-current]) { padding: 0 9px; }
  .lang-switch li a:not([aria-current]) .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.site-header .btn-primary { padding: 10px 22px; font-size: 15px; min-height: 44px; }
.site-header .btn-primary:hover { transform: none; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hamburger { display: none; }

@media (max-width: 900px) {
  .site-header .bar .inner { height: 68px; }
  .site-header .logo img { height: 36px; }
  .hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; margin-left: 4px; border-radius: var(--radius-md); cursor: pointer; order: 3;
  }
  .hamburger span { display: block; height: 2px; background: var(--fg-strong); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle:focus-visible + .hamburger { outline: 2px solid var(--logo); outline-offset: 2px; }
  .nav-toggle:checked + .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-top: 1px solid var(--border); box-shadow: var(--shadow-md);
    padding: 8px var(--gutter) 20px; max-height: calc(100vh - 104px); overflow-y: auto;
    display: none;
  }
  .nav-toggle:checked ~ nav { display: flex; }
  .site-header .menu { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .site-header .menu > li { border-bottom: 1px solid var(--border); }
  .site-header .menu a { padding: 14px 4px; font-size: var(--fs-body); border-radius: 0; }
  .site-header .menu a:hover { background: none; }
  .site-header .menu-item-has-children > a::after { display: none; }
  .site-header .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 10px 12px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .site-header .sub-menu a { padding: 8px 4px; font-size: var(--fs-small); }

  .lang-switch { margin-top: 16px; align-self: flex-start; }

  .site-header .bar .inner > .btn-primary { margin-left: auto; padding: 9px 18px; }
}
@media (min-width: 901px) {
  .site-header .bar .inner > .btn-primary { order: 4; }
}
@media (max-width: 600px) {
  .site-header .topbar { font-size: var(--fs-tiny); }
  .site-header .topbar .inner { height: 32px; }
}

/* ── Hero (lumo/hero) ────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 640px; background: var(--surface); }
.hero .frame { position: absolute; inset: 0; z-index: 0; }
.hero .frame img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--surface-rgb), .97) 0%, rgba(var(--surface-rgb), .9) 36%, rgba(var(--surface-rgb), 0) 60%);
}
.hero .caption { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--gutter); }
.hero .caption > * { max-width: 672px; }

.hero .location { font-size: var(--fs-body); font-weight: 500; color: var(--blush-700); margin-bottom: var(--space-4); }

.hero h1 {
  font-size: var(--fs-h1); line-height: 1.08; letter-spacing: var(--tracking-tight);
  max-width: 620px; margin-bottom: var(--space-5); text-wrap: pretty;
}

.hero .ingress { font-size: var(--fs-lead); line-height: 1.6; max-width: 576px; margin-bottom: var(--space-5); text-wrap: balance; }

.hero .bulletins { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: var(--space-7); }
.hero .bulletins li { display: flex; align-items: flex-start; text-wrap: pretty; gap: 8px; font-size: 15px; font-weight: 500; color: var(--fg); }
.hero .bulletins li::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a5c6' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero .bulletins li:empty { display: none; }

.hero .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Google-betyget under knapparna (platshållare för {{site_reviews_score}}) */
.hero-score { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--fg-strong); }
.hero-score .g-word { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin-right: 2px; }
.hero-score .g-word span:nth-child(1), .hero-score .g-word span:nth-child(4) { color: #4285f4; }
.hero-score .g-word span:nth-child(2), .hero-score .g-word span:nth-child(6) { color: #ea4335; }
.hero-score .g-word span:nth-child(3) { color: #fbbc05; }
.hero-score .g-word span:nth-child(5) { color: #34a853; }
.hero-score .score { font-weight: 600; }
.hero-score .stars { display: inline-flex; gap: 1px; }
.hero-score .stars svg { width: 16px; height: 16px; fill: #fbbc04; }
.hero-score .count { color: var(--fg); white-space: nowrap; }
.hero-score { flex-wrap: wrap; row-gap: 4px; }
.hero-score.is-placeholder .stars svg { fill: var(--ink-200); }
.hero-score .chev { font-size: 16px; color: var(--fg-muted); transition: transform .2s ease; }
.hero-score:hover .chev { transform: translateX(3px); }

/* Mobil och surfplatta (vald variant "ljus toning"): bilden överst tonar ut i
   vitt, och texten börjar i den vita delen. Bildytan är bred nog att visa hela
   fotot på höjden, så att personerna syns ovanför texten. Punkterna döljs. */
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; background: var(--surface); }
  .hero .frame { position: relative; inset: auto; height: clamp(300px, 48svh, 520px); }
  .hero .frame img { object-position: 60% 50%; }
  .hero .frame::after { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 50%, rgba(var(--surface-rgb), .85) 86%, var(--surface) 100%); }
  .hero .caption { position: relative; margin: -56px 0 0; padding: 0 var(--gutter) 32px; background: none; border-radius: 0; }
  .hero .location { font-size: 14px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(36px, 11vw, 60px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 18px; }
  .hero .ingress { font-size: 17px; line-height: 1.6; margin-bottom: 28px; }
  /* Punkterna syns i mobil också (mobile-first-indexering), som en tät lista */
  .hero .bulletins { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
  .hero .ingress { margin-bottom: 20px; }
  .hero .btn-row { flex-wrap: nowrap; gap: 12px; }
  .hero .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
}
@media (max-width: 600px) {
  .site-header .topbar { display: none; }
  .hero .btn-row .btn-primary { flex: 1; padding-top: 16px; padding-bottom: 16px; }
  /* Ring blir en rund ikonknapp bredvid Boka tid — texten finns kvar för skärmläsare */
  .hero .btn-row .btn-ghost { flex: 0 0 54px; width: 54px; height: 54px; padding: 0; border-radius: 50%; }
  .hero .btn-row .btn-ghost .icon { font-size: 22px; }
  .hero .btn-row .btn-ghost .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 480px) {
  .site-header .logo img { height: 30px; }
}
@media (max-width: 400px) {
  .site-header .bar .inner { gap: 10px; }
  .site-header .logo { min-width: 0; }
  .site-header .logo img { height: 26px; }
  .hamburger { flex-shrink: 0; }
}

/* ── Gemensamt för sektionerna ───────────────────────────────────── */
.intro, .treatments-grid, .content-block, .contact-panel { padding: var(--space-8) 0; }
.intro h2, .treatments-grid h2, .content-block h2, .reviews-section h2, .contact-panel h2 {
  font-size: var(--fs-h2); line-height: 1.15; font-weight: 450; letter-spacing: -0.02em;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--blush-600); transition: color .2s ease; }
.text-link .icon { font-size: 18px; transition: transform .2s ease; }
.text-link:hover { color: var(--blush-700); }
.text-link:hover .icon { transform: translateX(4px); }

/* ── Intro (lumo/intro) ──────────────────────────────────────────── */
.intro { background: var(--white); text-align: center; }
.intro .inner > * { max-width: 672px; margin-left: auto; margin-right: auto; }
.intro h2 { margin-bottom: var(--space-4); }
.intro p { font-size: var(--fs-lead); line-height: 1.6; }

/* Startsidans intro: ljusblå panel med loggans träd (statisk tillgång) */
.intro.intro-panel { background: var(--white); text-align: left; padding: 40px 0 64px; }
.intro.intro-panel .inner > * { max-width: none; margin: 0; }
.intro-panel .panel { background: var(--blush-50); border-radius: var(--radius-lg); padding: 32px 24px 40px; }
.intro-panel .mark { display: block; width: 56px; height: 56px; margin-bottom: 20px; }
.intro.intro-panel h2 { font-size: clamp(24px, 6.4vw, 40px); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 16px; text-wrap: balance; }
.intro.intro-panel p { font-size: 17px; line-height: 1.7; color: var(--fg); }
@media (min-width: 901px) {
  .intro.intro-panel { padding: clamp(40px, 7vh, 96px) 0; }
  .intro-panel .panel {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    gap: clamp(32px, 4vw, 72px); padding: clamp(40px, 7vh, 72px) clamp(40px, 5vw, 72px);
  }
  .intro-panel .text { display: contents; }
  .intro-panel .mark { width: clamp(96px, 9vw, 150px); height: auto; margin: 0; }
  .intro.intro-panel h2 { margin: 0; }
  .intro.intro-panel p { font-size: 18px; }
}

/* ── Behandlingar (lumo/treatments-grid) ─────────────────────────── */
.treatments-grid { background: var(--paper); }
/* Tydlig hierarki: sektionsrubriken stor (som i språksektionen), raderna ett steg ned */
.treatments-grid h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }
/* --treat-ease: en mjuk ease-out som alla rörelser i sektionen delar (samma kurva som heron) */
.treat-index { position: relative; --treat-ease: cubic-bezier(.2, .7, .2, 1); }
.treat-index .rows { border-top: 1px solid var(--border); }
.treat-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name thumb" "summary thumb";
  align-items: center; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border);
}
.treat-row .name { grid-area: name; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-strong); transition: color .3s var(--treat-ease); }
.treat-row .summary { grid-area: summary; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.treat-row .arrow { display: none; }
.treat-row .more { display: none; }
.treat-row .preview { grid-area: thumb; width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-md); }
.treat-row:hover .name, .treat-row:focus-visible .name { color: var(--blush-700); }
.treat-index .preview-frame { display: none; }
.treat-index .overview { display: none; }

/* Mobil och surfplatta (vald variant "svep"): stora bildkort i en rad som man
   sveper mellan. Nästa kort sticker fram i kanten. Inga miniatyrer. */
@media (max-width: 900px) {
  .treat-index .rows {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
    scroll-padding-left: var(--gutter); scrollbar-width: none;
    /* Ett svep som når radens ände stannar i raden — inget "bakåt i webbläsaren" av misstag */
    overscroll-behavior-x: contain;
  }
  .treat-index .rows::-webkit-scrollbar { display: none; }
  .treat-index .rows li { flex: 0 0 76%; scroll-snap-align: start; }
  .treat-row {
    position: relative; display: block; height: clamp(360px, 62vw, 480px);
    padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
  }
  .treat-row .preview { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .treat-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 39, 48, 0) 35%, rgba(14, 39, 48, .6) 62%, rgba(14, 39, 48, .9) 100%); }  /* AA: mörkare toning bakom namnet (2026-10-24) */
  .treat-row .name, .treat-row .summary { position: absolute; left: 20px; right: 20px; z-index: 1; color: var(--white); }
  .treat-row .name { bottom: 106px; font-size: 26px; }
  .treat-row .summary { bottom: 52px; margin: 0; color: rgba(255, 255, 255, .9); }
  /* "Läs mer →" visar att kortet leder till behandlingens sida (en pil ensam kan
     läsas som "nästa kort" i en svepbar rad). Text: ACF-fältet more_text. */
  .treat-row .more {
    display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 20px; bottom: 18px; z-index: 1;
    font-size: 15px; font-weight: 600; color: var(--white);
  }
  .treat-row .more span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: 4px; }
  .treat-row .more .icon { font-size: 17px; }
  .treat-row:hover .name, .treat-row:focus-visible .name { color: var(--white); }
}
/* Översikt ovanför svepkorten: alla behandlingar syns direkt, ett tryck öppnar behandlingens sida */
@media (max-width: 900px) {
  /* Översikten som knappar i två kolumner. Hela knappen är en länk till behandlingens
     sida; pilen är en symbol i länken, utan skiljelinje (feedback 2026-10-29: namnet
     hoppade förut bara till kortet nedanför, vilket inte märktes i mobil) */
  .treat-index .overview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .treat-index .overview .ov-item {
    --ov-name: var(--fg-strong); --ov-name-hover: var(--blush-700); --ov-arrow: var(--blush-600);
    display: flex; align-items: stretch; min-height: 52px; overflow: hidden;
    color: var(--ov-name); text-decoration: none;
    background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    /* Lätt upphöjd, så att rutorna läses som knappar och inte som etiketter */
    box-shadow: 0 1px 2px rgba(20, 50, 74, .08), 0 2px 8px rgba(20, 50, 74, .06);
    transition: border-color .24s var(--treat-ease), box-shadow .16s var(--treat-ease), transform .16s var(--treat-ease);
  }
  /* Egen tryckrespons (se rörelseblocket nedan) ersätter webbläsarens grå tryckruta */
  .treat-index .overview .ov-item { -webkit-tap-highlight-color: transparent; }
  .treat-index .overview .ov-show {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
    padding: 12px 8px 12px 14px;
    font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--ov-name);
    /* Bryts bara vid ordfogen: namnen har mjuka bindestreck (U+00AD) i ACF-texten,
       t.ex. Tand·implantat — aldrig "Tandimplan-tat" */
    hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
    transition: color .24s var(--treat-ease);
  }
  .treat-index .overview .ov-item:hover .ov-show { color: var(--ov-name-hover); }
  .treat-index .overview .ov-go {
    flex: 0 0 40px; display: flex; align-items: center; justify-content: center; padding-right: 4px;
    color: var(--ov-arrow);
  }
  .treat-index .overview .ov-go .icon { font-size: 17px; transition: transform .24s var(--treat-ease); }
  /* Fokusramen ritas innanför rutan */
  .treat-index .overview .ov-item:focus-visible { outline-offset: -3px; }
  /* Smala telefoner: något mindre text */
  @media (max-width: 420px) { .treat-index .overview .ov-show { font-size: 14px; } }
  /* Vid hopp hamnar kortet under översikten, så att översikten syns kvar (sidhuvud + översikt) */
  .treat-index .rows li { scroll-margin-top: 280px; }
}
/* När ett kort valts i översikten: kortet som syns helt lyser, kort som bara
   skymtar i kanten dämpas. Ljuset följer svepet (scrolldriven animation), så
   kortet man sveper fram till tänds. Utan stöd för scrolldrivna animationer
   dämpas inget. */
@supports (animation-timeline: view()) {
  @media (max-width: 900px) {
    .treat-index:has(.rows li:target) .rows li {
      animation: treat-spot linear both;
      animation-timeline: view(inline);
    }
    @keyframes treat-spot {
      entry 0%, entry 70% { filter: brightness(.5) saturate(.7); }
      entry 100%, exit 0% { filter: none; }
      exit 30%, exit 100% { filter: brightness(.5) saturate(.7); }
    }
  }
}
/* Rörelser i översikten och svepkorten — bara när besökaren inte bett om mindre rörelse */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Mjuk ankarscroll: nedåt på sidan och i sidled i raden */
  html, .treat-index .rows { scroll-behavior: smooth; }
  /* Tryck: hela knappen sjunker in en aning, pilen puttas åt höger */
  .treat-index .overview .ov-item:active { transform: scale(.98); box-shadow: none; }
  .treat-index .overview .ov-item:active .ov-go .icon { transform: translateX(3px); }
  /* Kortet man hoppat till kvitterar: bilden zoomar mjukt ut en gång (inom kortets ram) */
  .treat-index .rows li:target .preview { animation: card-settle .6s var(--treat-ease) both; }  @keyframes card-settle { from { transform: scale(1.05); } }
}
@media (max-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .treat-index .overview .ov-item:hover .ov-go .icon { transform: translateX(3px); }
}

@media (min-width: 601px) and (max-width: 900px) {
  .treat-index .rows li { flex-basis: 44%; scroll-margin-top: 250px; }
  .treat-index .overview { grid-template-columns: repeat(3, 1fr); }
}

/* Dator: kompakt namnlista till vänster; bilden och den korta texten för raden
   man pekar på visas i den högra kolumnen (första raden som standard).
   Höjderna följer skärmhöjden, så att hela sektionen ryms utan scroll. */
@media (min-width: 1024px) {
  .treatments-grid { padding: clamp(40px, 7vh, 96px) 0; }
  .treatments-grid .section-head { margin-bottom: clamp(20px, 3.5vh, 40px); }
  .treat-index { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 5vw, 96px); }
  .treat-row {
    grid-template-columns: 1fr auto; grid-template-areas: "name arrow";
    padding: clamp(10px, 1.7vh, 20px) 0;
  }
  /* Indraget görs med transform i stället för padding: samma utseende, men raden layoutas inte om under rörelsen */
  .treat-row .name { font-size: clamp(22px, 3.1vh, 32px); color: var(--fg); transition: color .3s var(--treat-ease), transform .4s var(--treat-ease); }
  .treat-row:hover .name, .treat-row:focus-visible .name,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .name { color: var(--blush-700); }
  .treat-row .arrow { display: block; grid-area: arrow; font-size: 24px; color: var(--blush-700); opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--treat-ease), transform .4s var(--treat-ease); }
  .treat-row:hover .name, .treat-row:focus-visible .name { transform: translateX(12px); }
  .treat-row:hover .arrow, .treat-row:focus-visible .arrow { opacity: 1; transform: none; }
  .treat-index .preview-frame { display: block; }
  /* Bild och text placeras i registrets högra kolumn (grid-area mot .treat-index).
     Överlämning utan blink: den nya bilden läggs överst och tonar in, den gamla
     ligger kvar under och tonar ut först när den nya täcker (fördröjning .3s).
     Den gamla texten tonar däremot ut direkt, så att två texter inte syns samtidigt. */
  .treat-row .preview, .treat-row .summary {
    position: absolute; grid-area: 1 / 2 / 2 / 3; z-index: 1;
    opacity: 0; transition: opacity .3s ease .3s; pointer-events: none;
  }
  .treat-row .preview { inset: 0; width: 100%; height: 100%; border-radius: var(--radius-md); }
  .treat-row .summary {
    z-index: 2; left: 0; right: 0; bottom: 0; top: auto; margin: 0; display: block; -webkit-line-clamp: unset;
    padding: 64px 28px 24px; border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: linear-gradient(180deg, rgba(14, 39, 48, 0), rgba(14, 39, 48, .78) 55%);
    color: var(--white); font-size: 17px; line-height: 1.5;
    transition: opacity .18s ease-out;
  }
  .treat-row:hover .preview, .treat-row:focus-visible .preview,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .preview {
    opacity: 1; z-index: 3; transition: opacity .4s var(--treat-ease);
  }
  .treat-row:hover .summary, .treat-row:focus-visible .summary,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .summary {
    opacity: 1; z-index: 4; transition: opacity .4s var(--treat-ease) .06s;
  }
}
/* Dator, rörelse: bilden lägger sig från en aning inzoomad (1.03 → 1) och texten
   glider upp 8 px. clip-path följer skalan/förflyttningen exakt, så att bildens
   kanter och toningens nederkant står still medan innehållet rör sig. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .treat-row .preview {
    transform: scale(1.03); clip-path: inset(1.456% round calc(var(--radius-md) / 1.03));
    transition: opacity .3s ease .3s, transform 0s .6s, clip-path 0s .6s;
  }
  .treat-row .summary {
    transform: translateY(8px); clip-path: inset(0 0 8px round 0 0 var(--radius-md) var(--radius-md));
    transition: opacity .18s ease-out, transform 0s .2s, clip-path 0s .2s;
  }
  .treat-row:hover .preview, .treat-row:focus-visible .preview,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .preview {
    transform: scale(1); clip-path: inset(0 round var(--radius-md));
    transition: opacity .4s var(--treat-ease), transform .5s var(--treat-ease), clip-path .5s var(--treat-ease);
  }
  .treat-row:hover .summary, .treat-row:focus-visible .summary,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .summary {
    transform: translateY(0); clip-path: inset(0 round 0 0 var(--radius-md) var(--radius-md));
    transition: opacity .4s var(--treat-ease) .06s, transform .5s var(--treat-ease) .06s, clip-path .5s var(--treat-ease) .06s;
  }
}

/* ── Innehållsblock (lumo/content-block-1) ───────────────────────── */
.content-block { background: var(--white); }
.content-block .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.content-block .media img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-md); }
.content-block .text > * + * { margin-top: 20px; }
.content-block p { font-size: var(--fs-lead); line-height: 1.6; }
.content-block .text-link { margin-top: 28px; }

/* Språksektionen: djupblå yta, språken i stor stil på sitt eget språk.
   På dator ligger allt i en rad — text och språk till vänster, bilden till
   höger i samma höjd — så att hela sektionen ryms på skärmen utan scroll. */
.languages-block { background: var(--blush-700); color: var(--white); padding: var(--space-8) 0; }
.languages-block h2 { color: var(--white); font-size: clamp(36px, 4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }
.languages-block p { color: #d6e6f5; max-width: 520px; }
.languages-block .text-link { color: var(--white); }
.languages-block .text-link:hover { color: #d6e6f5; }
.languages-block .media img { height: 320px; }
.languages-block .languages {
  display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 32px !important;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.languages-block .languages li {
  padding: 16px 16px 16px 0;
  font-size: clamp(24px, 2.1vw, 34px); line-height: 1.15; letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: padding-left .3s ease, background-color .3s ease;
}

@media (min-width: 1024px) {
  .languages-block { padding: clamp(48px, 9vh, 120px) 0; }
  .languages-block .inner { align-items: stretch; gap: clamp(48px, 5vw, 96px); }
  .languages-block .text { display: flex; flex-direction: column; justify-content: center; }
  .languages-block .media { display: flex; }
  .languages-block .media img { flex: 1; height: auto; min-height: 420px; max-height: 760px; }
  .languages-block .languages li:hover { background: rgba(255, 255, 255, .06); padding-left: 16px; }
}
/* Språkbilden som två porträtt sida vid sida (feedback 2026-10-29: Vladimir och Anna Salop i
   stället för receptionsbilden). Samma hörnradie och höjd som den enda bilden hade: i mobil
   och på surfplatta dagens bildhöjd, på datorn hela textspaltens höjd. Ansiktena i mitten
   av varje bild (fokus 50 % 20 %). */
.languages-block .media.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.languages-block .media.duo img { width: 100%; min-width: 0; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 1024px) {
  /* Porträtten ligger absolut i bildytan, så att deras egen höjd (3:4) inte styr radhöjden:
     ytan följer textspalten (minst 420, högst 760 px, som den enda bilden) */
  .languages-block .media.duo { display: block; position: relative; min-height: 420px; max-height: 760px; }
  .languages-block .media.duo img {
    position: absolute; top: 0; left: 0; width: calc(50% - 5px); height: 100%;
    min-height: 0; max-height: none; flex: none;
  }
  .languages-block .media.duo img + img { left: auto; right: 0; }
}
/* Låga skärmar (t.ex. 1280×720): heron tätare så att knapparna och bandet ryms */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(44px, 8vh, 66px); margin-bottom: 16px; }
  .hero .ingress { margin-bottom: 16px; }
  .hero .bulletins { margin-bottom: 28px; }
}
/* Låga skärmar (t.ex. 1280×720): tätare rader så att sektionen ryms */
@media (min-width: 1024px) and (max-height: 760px) {
  .languages-block .languages li { padding-top: 12px; padding-bottom: 12px; }
  .languages-block .languages { margin-top: 24px !important; }
}

/* ── Recensioner (lumo/reviews-section) ──────────────────────────── */
.reviews-section { background: var(--blush-50); padding: var(--space-7) 0; }
.reviews-section .inner { display: flex; align-items: baseline; gap: 16px 40px; flex-wrap: wrap; }
.reviews-section p { font-size: var(--fs-lead); }

/* ── Medlemskap och samarbeten (lumo/partner-logos) ──────────────────
   En vit list på kontaktpanelens yta, med hårlinjer mellan cellerna (1 px
   mellanrum på hårlinjefärgad botten). Loggorna i full färg, utjämnade till
   en gemensam optisk höjd via width/height i HTML; texten under förklarar
   kopplingen. Hela cellen är länkyta. Ingen nedre luft: kontaktpanelens
   egen luft ovanför räcker. */
.partner-logos { background: var(--paper); padding: var(--space-7) 0 0; }
.partner-logos h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 20px; }
.partner-logos .logo-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.partner-logos .logo-row > li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 12px 20px; background: var(--white); text-align: center;
}
.partner-logos .logo-row a { display: block; width: 100%; }
.partner-logos .mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; }
.partner-logos .mark img { max-width: 100%; height: auto; }
.partner-logos .logo-row p { max-width: 16em; font-size: 14px; line-height: 1.4; color: var(--fg); text-wrap: balance; transition: color .2s ease; }
/* Hela cellen är länkyta; fokusringen ritas runt cellen */
.partner-logos .logo-row a::after { content: ""; position: absolute; inset: 0; }
.partner-logos .logo-row a:focus-visible { outline: none; }
.partner-logos .logo-row a:focus-visible::after { outline: 2px solid var(--logo); outline-offset: -4px; border-radius: var(--radius-md); }
.partner-logos .logo-row li:hover p { color: var(--blush-700); }
.partner-logos .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Mobil: två per rad, den breda loggan på egen rad i mitten */
@media (max-width: 600px) {
  .partner-logos h2 { margin-bottom: 16px; }
  .partner-logos .logo-row > li.is-wide { grid-column: 1 / -1; }
}
/* Surfplatta: tre i första raden, två i andra */
@media (min-width: 601px) and (max-width: 900px) {
  .partner-logos .logo-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .partner-logos .logo-row > li { grid-column: span 2; }
  .partner-logos .logo-row > li:nth-child(n+4) { grid-column: span 3; }
}
/* Dator: alla fem i en rad, den breda loggan får en bredare cell i mitten */
@media (min-width: 901px) {
  .partner-logos { padding-top: clamp(40px, 7vh, 72px); }
  .partner-logos h2 { margin-bottom: clamp(16px, 2.6vh, 24px); }
  .partner-logos .logo-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .partner-logos .logo-row > li { padding: clamp(18px, 3vh, 28px) 16px clamp(16px, 2.6vh, 24px); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .partner-logos .inner { animation: partner-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes partner-rise { from { opacity: 0; transform: translateY(36px); } }
  }
}

/* ── Kontaktpanel (lumo/contact-panel) ───────────────────────────── */
.contact-panel { background: var(--paper); }
.contact-panel .panel { padding: var(--space-8); border-radius: var(--radius-md); background: rgba(214, 230, 245, .6); }
.contact-panel h2 { margin-bottom: 12px; }
.contact-panel .urgent { font-size: var(--fs-lead); max-width: 640px; margin-bottom: 48px; }
.contact-panel .urgent strong { font-weight: 600; color: var(--fg-strong); }
.contact-panel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-panel .label { font-size: var(--fs-body); margin-bottom: 4px; }
.contact-panel .phone { display: inline-block; font-size: clamp(32px, 3.2vw, 44px); font-weight: 450; letter-spacing: -0.02em; color: var(--fg-strong); margin-bottom: 24px; }
.contact-panel .phone:hover { color: var(--blush-700); }
.contact-panel .reach .btn-primary { display: flex; width: max-content; }
.contact-panel .details { margin: 0; display: grid; gap: 20px; }
.contact-panel .details > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(23, 91, 145, .15); }
.contact-panel .details > div:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-panel dt { font-weight: 600; color: var(--fg-strong); }
.contact-panel dd { margin: 0; }
.contact-panel dd a:hover { color: var(--blush-700); }

/* Kontaktpanelen: luft som följer skärmhöjden, så att panelen ryms även på 1280×720 */
@media (min-width: 1024px) {
  .contact-panel { padding: clamp(32px, 6vh, 64px) 0; }
  .contact-panel .panel { padding: clamp(36px, 6vh, 64px) clamp(40px, 5vw, 64px); }
  .contact-panel .urgent { margin-bottom: clamp(28px, 4.5vh, 48px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .contact-panel h2 { margin-bottom: 8px; }
  .contact-panel .urgent { margin-bottom: 22px; }
  .contact-panel .details { gap: 14px; }
  .contact-panel .details > div { padding-bottom: 14px; }
}

/* ── Sidfot (lumo/site-footer) ───────────────────────────────────── */
.site-footer { background: var(--blush-50); font-size: var(--fs-small); line-height: 1.6; }
.site-footer .footer-grid { display: grid; grid-template-columns: 4fr 3fr 2fr 2fr 2fr; gap: 32px; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.site-footer .logo img { height: 40px; width: auto; }
.site-footer .brand p { max-width: 384px; margin-top: 16px; font-size: var(--fs-body); }
.site-footer .col-title { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--fg-strong); margin-bottom: 12px; }
.site-footer .links li + li { margin-top: 4px; }
.site-footer .links.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.site-footer .links.two-col li + li { margin-top: 0; }
.site-footer .links a:hover { color: var(--blush-700); }
.site-footer .hours b { font-weight: 500; color: var(--fg-strong); }
.site-footer .footer-bottom { background: var(--blush-600); color: var(--white); }
.site-footer .footer-bottom .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.site-footer .footer-bottom ul { display: flex; align-items: center; }
.site-footer .footer-bottom li + li::before { content: "·"; opacity: .4; margin: 0 12px; }
.site-footer .langs { font-size: var(--fs-tiny); font-weight: 500; }
.site-footer .langs li + li::before { margin: 0 4px; }
.site-footer .footer-bottom a:hover { text-decoration: underline; }
.site-footer .langs a[aria-current] { font-weight: 700; }

/* ── Surfplatta ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .intro, .treatments-grid, .content-block, .contact-panel { padding: var(--space-7) 0; }
  .content-block .inner { grid-template-columns: 1fr; gap: 40px; }
  .content-block .media img { height: 360px; }
  .contact-panel .panel { padding: var(--space-6); }
  .contact-panel .cols { grid-template-columns: 1fr; gap: 40px; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .brand { grid-column: 1 / -1; }
}

/* ── Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
  /* Introt i mobil: mer luft runt en kort text, så att det andas efter heron */
  .intro { text-align: left; padding: 72px 0 80px; }
  .intro h2 { margin-bottom: 20px; }
  .intro p { font-size: 17px; line-height: 1.7; color: var(--fg); }
  .hero-score { font-size: 14px; gap: 6px; }
  .hero-score .g-word { font-size: 16px; }
  .hero-score .stars svg { width: 14px; height: 14px; }
  .intro .inner > * { margin-left: 0; }
  .content-block .media img { height: 280px; }
  .languages-block .media img { height: 260px; }
  .reviews-section .inner { flex-direction: column; gap: 8px; }
  .contact-panel .panel { padding: var(--space-6) var(--space-4); }
  .contact-panel .urgent { margin-bottom: 32px; }
  .contact-panel .reach .btn-primary { width: 100%; }
  .contact-panel .details > div { grid-template-columns: 1fr; gap: 2px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .footer-bottom .inner { flex-direction: column; text-align: center; gap: 10px; }
}

/* ── Stora skärmar ───────────────────────────────────────────────────
   Mobilen förblir enkel. Från 1024 px tillkommer mjuka rörelser; från 1440 px växer heron och typografin; från 1680 px blir
   innehållsytan bredare. Rörelserna kräver stöd för scroll-animationer —
   saknas det står allt stilla, utan att något döljs. */
@media (min-width: 1024px) {
  /* Heron fyller skärmen under sidhuvudet (36 + 1 + 80 px) — inget hamnar under kanten */
  .hero { min-height: clamp(520px, calc(100svh - 117px), 1100px); }
  .hero .caption { padding-top: clamp(32px, 7vh, 96px); padding-bottom: clamp(32px, 7vh, 96px); }
  .hero .bulletins { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 40px; }

}

@media (min-width: 1024px) {
  .hero h1 { font-size: clamp(52px, 5vw, 72px); line-height: 1.04; }
}
@media (min-width: 1440px) {
  .hero .caption > * { max-width: 760px; }
  .hero h1, .hero .caption > h1 { font-size: clamp(64px, 5vw, 88px); max-width: 860px; }
  .hero .ingress { font-size: 20px; max-width: 620px; }
  .hero .bulletins li { font-size: 16px; }
  .hero .btn-row .btn-primary, .hero .btn-row .btn-ghost { font-size: 17px; padding: 17px 34px; }
  /* Toningen följer textytan i stället för skärmbredden — mer av kliniken syns */
  .hero .frame::after {
    background: linear-gradient(90deg,
      rgba(var(--surface-rgb), .97) 0,
      rgba(var(--surface-rgb), .9) calc(max(0px, (100% - var(--container)) / 2) + 640px),
      rgba(var(--surface-rgb), 0) calc(max(0px, (100% - var(--container)) / 2) + 1000px));
  }
  .content-block:not(.languages-block) .media img { height: 520px; }
}

@media (min-width: 1680px) {
  :root { --container: 1600px; --gutter: 64px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* Heron: bilden zoomar sakta ut när sidan laddas */
  .hero .frame { animation: hero-settle 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes hero-settle { from { transform: scale(1.06); } }

  @supports (animation-timeline: view()) {
    /* Bilden glider långsammare än sidan när man scrollar */
    .hero .frame img { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-drift { to { transform: translateY(90px); } }

    /* Innehållet glider upp när det kommer in i bild, korten i otakt */
    .intro .inner, .section-head, .treat-index, .content-block .media, .content-block .text,
    .contact-panel .panel {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
    .content-block .text { animation-range: entry 10% entry 55%; }
    @keyframes rise { from { opacity: 0; transform: translateY(36px); } }
  }
}

/* Tryckytor i mobil: minst 44 px för länkar i sidfoten och textlänkar */
@media (max-width: 900px) {
  .text-link { min-height: 44px; }
  .site-header .logo, .site-footer .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-score { min-height: 44px; }
  .contact-panel dd a, .site-footer .links li a[href^="mailto"] { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .links li + li, .site-footer .links.two-col li + li { margin-top: 0; }
  .site-footer .links.two-col { row-gap: 0; }
  .site-footer .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .langs a, .site-footer .legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .site-footer .langs { font-size: 14px; }
  .site-footer .footer-bottom li + li::before { margin: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Utskrift: inga rörelser, inget band — allt innehåll synligt */
@media print {
  *, *::before, *::after { animation: none !important; }
  .site-header .topbar, .hamburger { display: none !important; }
}

/* SUBMENU-STATES: current = färg + markör, hover = svag bakgrund */
.site-header .menu > .current-menu-item > a, .site-header .menu > .current-menu-ancestor > a { color: var(--blush-700); font-weight: 600; background: none; }
.site-header .menu > li > a:hover { background: var(--blush-50); color: var(--fg-strong); }
.site-header .menu > .current-menu-item > a:hover, .site-header .menu > .current-menu-ancestor > a:hover { color: var(--blush-700); }
.site-header .sub-menu { display: flex; flex-direction: column; gap: 2px; }
.site-header .sub-menu a { position: relative; padding: 9px 12px 9px 18px; border-radius: var(--radius-sm); color: var(--ink-500); background: none; }
.site-header .sub-menu a:hover, .site-header .sub-menu a:focus-visible { background: var(--blush-50); color: var(--fg-strong); }
.site-header .sub-menu .current-menu-item > a { color: var(--blush-700); font-weight: 600; background: none; }
.site-header .sub-menu .current-menu-item > a:hover { color: var(--blush-700); background: var(--blush-50); }
.site-header .sub-menu .current-menu-item > a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--blush-700); }
.site-header .sub-menu a:focus-visible { outline: 2px solid var(--logo); outline-offset: -2px; }
@media (max-width: 900px) {
  .site-header .sub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .site-header .sub-menu a { padding: 8px 4px 8px 16px; border-radius: var(--radius-sm); }
  .site-header .sub-menu .current-menu-item > a::before { left: 4px; }
  .site-header .menu > li > a:hover { background: none; }
}

/* Loggans färg (vald variant "touch 1"): petrol i stället för Google-blått,
   turkosa detaljer från loggan, ringknappen med tunn kant. */
.btn-primary:hover { background: #095a6e; }
.btn-ghost { background: transparent; color: var(--blush-700); box-shadow: inset 0 0 0 1.5px rgba(11, 110, 134, .35); }
.btn-ghost:hover { background: rgba(22, 165, 198, .08); }
.text-link { text-decoration: underline; text-decoration-color: var(--logo); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.languages-block { background: linear-gradient(135deg, #0b6e86, #0a4a5a); }
.site-footer .footer-bottom { background: #0a4a5a; }

/* ── Finputs: lugn rytm och enhetliga rubriker ─────────────────────────
   En bakgrund (vit) för de flesta sektioner, en tydlig ton (ljusblå) bara där
   den betyder något, och samma rubrikstorlek för alla sektionsrubriker. */
:root { --paper: #ffffff; --section-h2: clamp(30px, 3.4vw, 48px); }
body, .hero, .treatments-grid, .partner-logos, .contact-panel, .site-header .topbar { background-color: var(--surface); }
.site-header .topbar { border-bottom: 1px solid var(--border); }
@media (min-width: 901px) {
  .hero .frame::after { background: linear-gradient(90deg, rgba(var(--surface-rgb),.97) 0%, rgba(var(--surface-rgb),.9) 36%, rgba(var(--surface-rgb),0) 60%); }
}
@media (min-width: 1440px) {
  .hero .frame::after { background: linear-gradient(90deg, rgba(var(--surface-rgb),.97) 0, rgba(var(--surface-rgb),.9) calc(max(0px, (100% - var(--container)) / 2) + 640px), rgba(var(--surface-rgb),0) calc(max(0px, (100% - var(--container)) / 2) + 1000px)); }
}
.intro.intro-panel h2, .treatments-grid h2, .languages-block h2, .reviews-section h2, .partner-logos h2, .contact-panel h2,
.content-block:not(.languages-block) h2 { font-size: var(--section-h2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 450; }
.treatments-grid { border-top: 1px solid var(--border); }

/* Omdömen: rubrik och text till vänster, betyget som en tydlig siffra till höger */
.reviews-section { background: var(--blush-50); padding: clamp(48px, 8vh, 88px) 0; }
.reviews-section .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.reviews-section .text { max-width: 560px; }
.reviews-section h2 { margin-bottom: 10px; }
.reviews-section p { font-size: var(--fs-lead); line-height: 1.6; }
.review-summary { display: inline-flex; align-items: center; gap: 18px; padding: 18px 24px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--border); min-height: 44px; transition: border-color .2s ease; }
.review-summary:hover { border-color: var(--blush-600); }
.review-summary .big { font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--fg-strong); }
.review-summary .meta { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--fg); }
.review-summary .stars { display: inline-flex; gap: 2px; }
.review-summary .stars svg { width: 18px; height: 18px; fill: #fbbc04; }
.review-summary > .icon { font-size: 20px; color: var(--blush-700); }

/* Medlemskap: samma rubrikstil, mer luft, loggorna i lugna celler */
.partner-logos { padding: clamp(48px, 8vh, 88px) 0 0; }
.partner-logos h2 { margin-bottom: 28px; }

/* Kontaktpanelen: inga ensamma ord i akutraden */
.contact-panel .urgent { text-wrap: pretty; max-width: 760px; }
@media (max-width: 600px) {
  .reviews-section .inner { align-items: flex-start; }
  .review-summary { width: 100%; }
}

/* Omdömen på sidans yta i stället för panelton: annars ligger tre grå block i rad
   (omdömen → kontaktpanel → sidfot) när partnersektionen är borta. */
.reviews-section { background: var(--surface); padding-bottom: 16px; }
.reviews-section .review-summary { background: var(--surface); }

/* ── Heron lämnar alltid en glimt av nästa sektion ─────────────────────
   Heron anpassar sig efter skärmhöjden. Fyller den skärmen exakt ser sidan ut
   att ta slut, så en bit av nästa sektion (--peek) ska alltid synas i första vyn. */
:root { --peek: clamp(170px, 22svh, 280px); }
@media (min-width: 1024px) {
  .hero { min-height: clamp(440px, calc(100svh - 117px - var(--peek)), 1100px); }
  .hero + section { padding-top: clamp(24px, 4vh, 48px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero .caption { padding-top: 24px; padding-bottom: 24px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero h1 { font-size: 48px; margin-bottom: 12px; }
  .hero .location { margin-bottom: 10px; }
}
/* Första sektionen efter heron: rubriken ska nå in i första vyn, så panelens topp-luft krymper */
.hero + section .panel { padding-top: clamp(24px, 4.5vh, 48px); }
@media (max-width: 900px) {
  /* Bildens höjd = skärmhöjden minus texten under den, så att nästa sektion når in i vyn */
  .hero .frame { height: clamp(180px, calc(100svh - 580px), 520px); }
  .hero .caption { padding-bottom: 8px; }
  .hero + section { padding-top: 24px; }
}

/* ── lumo/booking-widget-section: bokningskalendern sist på varje sida ── */
.booking-section { background: var(--surface); padding: clamp(48px, 9vh, 96px) 0; border-top: 1px solid var(--border); }
.booking-section .inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.booking-section .head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(24px, 4vh, 40px); }
.booking-section h2 { font-size: var(--section-h2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 450; }
.booking-section .head p { font-size: var(--fs-lead); line-height: 1.6; max-width: 40em; }
.booking-section .head a { color: var(--fg-strong); font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--logo); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* Hoppet landar på sektionens rubrik, inte mitt i kalendern: sidhuvud + rubrik + ingress */
/* Bara kalenderytan i sektionen: modal-läget lägger loaderns egen #tdl-booking-widget först i body (ska inte ta plats) */
.booking-section #tdl-booking-widget { scroll-margin-top: 232px; min-height: 560px; }
@media (max-width: 900px) {
  .booking-section .head { grid-template-columns: minmax(0, 1fr); }
  .booking-section #tdl-booking-widget { scroll-margin-top: 228px; min-height: 480px; }
}
.hero .bulletins li::before { margin-top: 0.22em; }

/* ── Startsidans hero på dator: delad i stället för toning ─────────────
   Toningen lade ett mjölkigt dis över halva fotot och rubriken löpte ut över
   bildens detaljer. Nu står texten på ren yta till vänster och fotot ligger
   skarpt till höger, ut mot kanten, med rundat hörn nertill — samma idé som
   undersidornas hero, men större. Mobilen är oförändrad. */
@media (min-width: 1024px) {
  .hero .frame { position: absolute; inset: 0 0 0 calc(50% + 16px); border-bottom-left-radius: 28px; overflow: hidden; }
  .hero .frame::after, html[data-palette] .hero .frame::after { background: none; }
  .hero .caption > * { max-width: calc(min(100vw, var(--container)) / 2 - 64px); }
  .hero h1, .hero .caption > h1 { font-size: clamp(48px, 4.6vw, 76px); line-height: 1.03; max-width: calc(min(100vw, var(--container)) / 2 - 64px); }
}
@media (min-width: 1440px) {
  .hero .caption > *, .hero h1, .hero .caption > h1 { max-width: calc(min(100vw, var(--container)) / 2 - 80px); }
  .hero h1, .hero .caption > h1 { font-size: clamp(64px, 4.6vw, 88px); }
}

/* Smal dator/liggande surfplatta (901–1100 px): menyn tätare så att Boka-knappen ryms,
   även med längre menyord på engelska och ryska */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header .bar .inner { gap: 12px; }
  .site-header nav { gap: 8px; }
  .site-header .menu { gap: 4px; }
  .site-header .menu a { padding: 8px 9px; font-size: 14.5px; }
}

/* Länkar inne i löptext ska synas som länkar (WCAG 1.4.1): understrykning i loggans turkos */
.hero .bulletins a, .contact-panel .urgent a, .contact-panel p a, .intro p a, .content-block p a, .reviews-section p a, .faq .answer a, .price-row .body a {
  text-decoration: underline; text-decoration-color: var(--logo); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.hero .bulletins a:hover, .contact-panel .urgent a:hover, .contact-panel p a:hover, .intro p a:hover, .content-block p a:hover { color: var(--fg-strong); }
/* Språksektionen rymmer nu även tandläkarna: tätare lista på låga skärmar */
@media (min-width: 1024px) and (max-height: 820px) {
  .languages-block .languages li { padding-top: 8px; padding-bottom: 8px; font-size: clamp(22px, 1.8vw, 28px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .languages-block { padding-top: 40px; padding-bottom: 40px; }
}

/* Mobil: texten ska inte ligga ovanpå bilden — rubriken konkurrerade med stolen och skåpen.
   Bilden står för sig själv (mjuk kant bara längst ned), texten börjar på ren yta under den. */
@media (max-width: 900px) {
  .hero .frame { height: clamp(180px, calc(100svh - 640px), 520px); }
  .hero .frame img { object-position: 62% 40%; }
  .hero .frame::after, html[data-palette] .hero .frame::after { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 80%, var(--surface) 100%); }
  .hero .caption { margin-top: 0; padding-top: 20px; }
}

/* Mobil: mjukare övergång från bild till text — längre, avtagande toning (ingen synlig kant)
   och eyebrow närmare bilden; texten ligger fortfarande på i princip helt uttonad yta. */
@media (max-width: 900px) {
  .hero .frame::after, html[data-palette] .hero .frame::after {
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 45%, rgba(var(--surface-rgb), .25) 62%, rgba(var(--surface-rgb), .65) 80%, rgba(var(--surface-rgb), .92) 92%, var(--surface) 100%);
  }
  .hero .caption { margin-top: -18px; padding-top: 0; }
}

/* H1 något kraftigare än sektionsrubrikerna (450), så att hierarkin syns direkt */
.hero h1, .page-hero h1 { font-weight: 520; letter-spacing: -0.03em; }
.h1-place { white-space: nowrap; }
@media (max-width: 900px) { .hero h1 { font-size: clamp(32px, 10vw, 52px); } }
/* Mycket smala telefoner (≤360 px): sidhuvudet tätare så att menyknappen ryms */
@media (max-width: 360px) {
  .site-header .bar .inner { gap: 6px; }
  .site-header .bar .inner > .btn-primary { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 360px) {
  /* Egen bredd: med bara max-width föll loggan ihop till 0 px i flex-raden (osynlig på 360 px och smalare) */
  .site-header .logo img, .site-header .brand img { width: 132px; max-width: none; height: auto; }
  .site-header .bar .inner > .btn-primary { padding: 8px 10px; font-size: 13.5px; }
}
/* Länkar i löptext i sidornas hero (t.ex. "akuttider" på Kontakt) */
.page-hero p a, .page-hero .urgent a, .contact-hero .urgent a { text-decoration: underline; text-decoration-color: var(--logo); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ── Varmare och ljusare foton (kundens önskan: "de är väldigt kalla nu") ──
   Ett gemensamt, milt filter på alla foton i innehållet — även bilder kliniken laddar
   upp själv i WordPress. Loggor (SVG) och partnerloggor påverkas inte. */
:root { --photo-filter: sepia(.10) saturate(1.06) brightness(1.04) contrast(.98); }
main img:not([src$=".svg"]):not([src*="partners/"]) { filter: var(--photo-filter); }

/* ── Startsidans hero med teamfotot (vald variant B) ───────────────────
   Teamfotot är ett panorama (2,4:1): i den delade layouten fick bara hälften av
   kollegorna plats. På dator blir bilden därför ett brett band överst, och texten
   står i två spalter under: rubriken till vänster, ingress, punkter och knappar till höger. */
@media (min-width: 1024px) {
  .hero.hero-band { display: block; min-height: 0; }
  .hero.hero-band .frame { position: relative; inset: auto; height: clamp(300px, 42svh, 540px); border-radius: 0; overflow: hidden; }
  .hero.hero-band .frame img { object-position: 50% 28%; }
  .hero.hero-band .frame::after, html[data-palette] .hero.hero-band .frame::after { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 72%, var(--surface) 100%); }
  .hero.hero-band .caption { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; padding-top: 28px; padding-bottom: 36px; }
  .hero.hero-band .caption > *, .hero.hero-band h1, .hero.hero-band .caption > h1 { max-width: none; }
  .hero.hero-band .location { grid-column: 1; grid-row: 1; }
  .hero.hero-band h1 { grid-column: 1; grid-row: 2 / span 4; align-self: start; margin-bottom: 0; }
  .hero.hero-band .ingress { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 16px; }
  .hero.hero-band .bulletins { grid-column: 2; grid-row: 3; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 20px; }
  .hero.hero-band .btn-row { grid-column: 2; grid-row: 4; }
  .hero.hero-band .hero-score { grid-column: 2; grid-row: 5; margin-top: 16px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero.hero-band .frame { height: clamp(260px, 38svh, 420px); }
  .hero.hero-band h1 { font-size: clamp(44px, 4.2vw, 64px); }
}

/* ── Startsidans hero med teamfotot, delad layout (som tidigare) ─────────
   Panoramat (2,4:1) ligger som ett brett, liggande kort till höger, ut mot kanten,
   i stället för att fylla hela höjden — då får fem–sex av kollegorna plats.
   Texten står till vänster som förut. Mobilen: bandet överst som på övriga sidor. */
@media (min-width: 1024px) {
  .hero.hero-team .frame { inset: auto 0 auto 44%; top: 50%; transform: translateY(-50%); aspect-ratio: 2.05 / 1; height: auto; border-radius: 28px 0 0 28px; overflow: hidden; }
  .hero.hero-team .frame img { object-position: 50% 30%; }
  .hero.hero-team .frame::after, html[data-palette] .hero.hero-team .frame::after { background: none; }
  .hero.hero-team .caption > *, .hero.hero-team h1, .hero.hero-team .caption > h1 { max-width: calc(min(100vw, var(--container)) * .44 - 72px); }
  .hero.hero-team h1, .hero.hero-team .caption > h1 { font-size: clamp(44px, 4.1vw, 72px); }
  .hero.hero-team .bulletins { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 1024px) {
  /* "Erfarna tandläkare / i Solna" — aldrig "Erfarna" ensamt på en rad */
  .hero.hero-team h1, .hero.hero-team .caption > h1 { text-wrap: wrap; max-width: calc(min(100vw, var(--container)) * .44 - 16px); }
}
@media (min-width: 1024px) { .hero.hero-team .btn-row { flex-wrap: wrap; } }
@media (min-width: 1024px) {
  /* Textspalten slutar alltid före bilden (bilden börjar vid 44 % av skärmbredden) */
  .hero.hero-team .caption > *, .hero.hero-team h1, .hero.hero-team .caption > h1 { max-width: calc(44vw - max(var(--gutter), (100vw - var(--container)) / 2) - 40px); }
  html[lang="en"] .hero.hero-team h1, html[lang="ru"] .hero.hero-team h1 { font-size: clamp(38px, 3.5vw, 62px); }
}
@media (min-width: 1024px) {
  /* Robust på alla bredder: textspaltens högerkant = bildens vänsterkant (44vw) minus 40 px */
  .hero.hero-team .caption > *, .hero.hero-team h1, .hero.hero-team .caption > h1 { max-width: none; }
  .hero.hero-team .caption { padding-right: calc(min(100vw, (100vw + var(--container)) / 2) - 44vw + 40px); }
}
@media (min-width: 1024px) {
  /* Stora skärmar: bilden börjar vid 44 % av innehållsytan (inte av hela skärmen), så textspalten inte blir smal */
  .hero.hero-team { --team-split: max(44vw, calc((100vw - var(--container)) / 2 + var(--container) * .44)); }
  .hero.hero-team .frame { left: var(--team-split); }
  .hero.hero-team .caption { padding-right: calc(min(100vw, (100vw + var(--container)) / 2) - var(--team-split) + 40px); }
}
/* Rubriker avstavas inte automatiskt ("сто-матологи") — bara radbrytning mellan ord */
.hero h1, .page-hero h1 { hyphens: manual; }
/* Ryska har långa ord (стоматологическая): mindre H1 i mobil så att orden ryms hela */
@media (max-width: 600px) {
  html[lang="ru"] .hero h1, html[lang="ru"] .page-hero h1 { font-size: clamp(26px, 8.2vw, 40px); }
}
@media (min-width: 1024px) {
  /* Smalare teambild (börjar vid 52 % av innehållsytan) — mer plats åt rubriken */
  .hero.hero-team { --team-split: max(52vw, calc((100vw - var(--container)) / 2 + var(--container) * .52)); }
  .hero.hero-team h1, .hero.hero-team .caption > h1 { font-size: clamp(46px, 4.4vw, 80px); }
  html[lang="en"] .hero.hero-team h1, html[lang="ru"] .hero.hero-team h1 { font-size: clamp(40px, 3.9vw, 70px); }
}

/* Mjuk förflyttning vid ankarlänkar (Boka tid, innehållsförteckningar, "Läs mer"), på alla skärmar —
   men bara när besökaren inte har bett om mindre rörelse. Målet hamnar under det fasta sidhuvudet. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id], h2[id], h3[id], [id].faq, details[id] { scroll-margin-top: 140px; }
@media (max-width: 900px) { section[id], h2[id], h3[id], [id].faq, details[id] { scroll-margin-top: 88px; } }

/* Fokusringen: loggans ljusa turkos gav bara 2,7:1 mot ytan (krav 3:1) — mörk turkos ger ≥4,7:1 */
:focus-visible { outline-color: var(--accent-ink, #0a7089); }
.nav-toggle:focus-visible + .hamburger { outline-color: var(--accent-ink, #0a7089); }

/* Typografi (beslut 2026-10-25, alternativ B Wix Madefor): kraftigare rubriker, meny och knappar. */
/* Rubrikvikter. Specificiteten (0,2,3+) slår mockupens egna regler (t.ex. .content-block:not(...) h2). */
html:root[lang] body :is(h1, h2) { font-weight: 700; letter-spacing: -0.025em; }
html:root[lang] body :is(h3, h4) { font-weight: 700; letter-spacing: -0.01em; }
html:root[lang] body :is(.not-found h1, .legal-page h1, .price-row .amount, .page-hero.contact-hero .phone, .contact-panel .phone) { font-weight: 700; }
html:root[lang] body :is(.price-group summary, .faq summary) { font-weight: 600; }
html:root[lang] body :is(.ov-item .ov-show, .ov-item a) { font-weight: 500; }
html:root[lang] body .content-block .steps li::before { font-weight: 700; }

/* Meny, knappar och andra UI-texter: tydligare. */
html:root[lang] body :is(.btn-primary, .btn-ghost, .site-header .menu a, .site-header .sub-menu a, .text-link, .hero .location, .hero-score, .site-header .topbar .inner, .lang-switch a) { font-weight: 600; }
html:root[lang] body :is(.site-header .menu > .current-menu-item > a, .site-header .menu > .current-menu-ancestor > a, .site-header .sub-menu .current-menu-item > a, .lang-switch li a[aria-current]) { font-weight: 700; }
html:root[lang] body :is(.hero .bulletins li, .page-hero .bulletins li) { font-weight: 500; }

html:root[lang] body .site-footer .ft-tagline { font-weight: 600; }

/* Bildband (2026-10-25): bred foto mellan sektionerna. Filtret (varmare foton) kommer från `main img`-regeln. */
.photo-band { padding: 0; }
.photo-band figure { margin: 0; }
.photo-band img { display: block; width: 100%; height: clamp(220px, 34vw, 520px); object-fit: cover; }
@media (max-width: 600px) { .photo-band img { height: 220px; } }

/* Före och efter (2026-10-25): en bild, centrerad, med bildtext. Bilden är liten (546 px) och visas i sin egen storlek. */
.before-after { background: var(--white); padding: clamp(48px, 7vw, 88px) 0; }
.before-after .inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.before-after h2 { margin: 0 0 12px; }
.before-after .lede { margin: 0 auto 28px; max-width: 34em; }
.before-after figure { margin: 0 auto; max-width: 546px; }
.before-after img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.before-after figcaption { margin-top: 12px; font-size: .875rem; color: var(--fg); }

/* Bokningssektionen i modal-läget: kalendern ligger i en modal, så sektionen får en knapp som öppnar den (2026-10-25). */
.booking-section .head .booking-cta { grid-column: 2; justify-self: start; margin-top: 8px; }
@media (max-width: 900px) { .booking-section .head .booking-cta { grid-column: 1; } }

/* ── Bokningssektionen som CTA-panel (prototyp: .booking-section.cta) ──
   Marinblå panel med rundade hörn, centrerad text (ingen bild, 2026-10-27) och två mjukt drivande ljusklot
   (radial-gradient, ingen oskärpa). Knappen pulserar lugnt; all rörelse av vid reduced-motion. */
.booking-section.cta { background: var(--paper, var(--surface)); border: 0; padding: clamp(28px, 6vh, 64px) 0; color: #fff; }
.booking-section.cta .inner { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px);
  background: var(--blush-600); padding: clamp(32px, 6vh, 64px) clamp(24px, 4.5vw, 72px);
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--container) - 2 * var(--gutter))); max-width: none; margin: 0 auto; }
.booking-section.cta .copy { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
/* Ljusklot: två stora radiella ljusfläckar bakom texten som långsamt driver */
.booking-section.cta .inner::before, .booking-section.cta .inner::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.booking-section.cta .inner::before { width: clamp(300px, 46vw, 640px); aspect-ratio: 1; top: -38%; right: -8%;
  background: radial-gradient(circle at center, rgba(63, 214, 238, .30), rgba(63, 214, 238, 0) 68%); }
.booking-section.cta .inner::after { width: clamp(260px, 38vw, 520px); aspect-ratio: 1; bottom: -46%; left: -6%;
  background: radial-gradient(circle at center, rgba(120, 170, 220, .28), rgba(120, 170, 220, 0) 68%); }

.booking-section.cta .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(12px, 2vh, 18px); padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #cdeaf2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.booking-section.cta .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fd6ee; }
.booking-section.cta h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; font-weight: 500; letter-spacing: -.038em; text-wrap: balance; margin: 0; color: #fff; }
/* auto i sidled: ingressen är smalare än .copy och ska ligga centrerad (2026-10-28) */
.booking-section.cta .lead { margin: clamp(10px, 1.8vh, 16px) auto clamp(18px, 3vh, 26px); max-width: 36em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .88); }
.booking-section.cta .lead a { color: #fff; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: #3fd6ee; text-underline-offset: 5px; text-decoration-thickness: 2px; }

.booking-section.cta .booking-cta { position: relative; display: inline-flex; align-items: center; gap: 14px; overflow: hidden; isolation: isolate;
  padding: 16px 32px; min-height: 56px; border-radius: 999px; background: #fff; color: #14324a; font-size: 18px; font-weight: 650; letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 0 0 0 rgba(63, 214, 238, .55); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.booking-section.cta .booking-cta::before { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(22, 165, 198, .32), transparent); }
.booking-section.cta .booking-cta .icon { width: 1.25em; height: 1.25em; font-size: 22px; color: #0a7089; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.booking-section.cta .booking-cta:hover { transform: translateY(-3px); box-shadow: 0 0 0 6px rgba(63, 214, 238, .28); }
.booking-section.cta .booking-cta:hover .icon { transform: rotate(-8deg) scale(1.12); }
.booking-section.cta .booking-cta:active { transform: translateY(0) scale(.98); }
.booking-section.cta .booking-cta:focus-visible { outline: 3px solid #3fd6ee; outline-offset: 4px; }

@media (max-width: 900px) {
  .booking-section.cta .booking-cta { width: 100%; justify-content: center; }
}
@media (max-width: 600px) { .booking-section.cta h2 { font-size: clamp(32px, 9vw, 42px); } }

@media (prefers-reduced-motion: no-preference) {
  .booking-section.cta .eyebrow .dot { animation: cta-dot 2s ease-out infinite; }
  .booking-section.cta .booking-cta { animation: cta-pulse 2.8s ease-out infinite; }
  .booking-section.cta .booking-cta::before { animation: cta-shine 4.2s ease-in-out infinite 1s; }
  .booking-section.cta .inner::before { animation: cta-drift-a 19s ease-in-out infinite alternate; }
  .booking-section.cta .inner::after { animation: cta-drift-b 23s ease-in-out infinite alternate; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .booking-section.cta .copy > * { animation: cta-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .booking-section.cta .copy > *:nth-child(2) { animation-range: entry 5% entry 62%; }
    .booking-section.cta .copy > *:nth-child(3) { animation-range: entry 10% entry 68%; }
    .booking-section.cta .copy > *:nth-child(4) { animation-range: entry 15% entry 74%; }
  }
}
@keyframes cta-dot { 0% { box-shadow: 0 0 0 0 rgba(63, 214, 238, .7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(63, 214, 238, 0); } }
@keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(63, 214, 238, .55); } 70%, 100% { box-shadow: 0 0 0 20px rgba(63, 214, 238, 0); } }
@keyframes cta-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes cta-drift-a { to { transform: translate(-14%, 22%) scale(1.12); } }
@keyframes cta-drift-b { to { transform: translate(18%, -20%) scale(1.1); } }
@keyframes cta-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Toppremsan: "Hitta hit" bredvid telefonnumret */
.site-header .topbar .links { display: inline-flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.site-header .topbar .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Menyn: tydligare och mindre ytkrävande ──
   Dator: långa undermenyer (fler än 6 rader) går i två kolumner i stället för en hög lista; pilen vänds när menyn är öppen.
   Mobil: grupprubriker som små etiketter, länkar utan grupp (Priser) som egna rader med pil, tätare rader. */
.site-header .menu-item-has-children > a::after { transition: transform .2s ease; }
.site-header .menu-item-has-children:hover > a::after, .site-header .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
@media (min-width: 901px) {
  .site-header .sub-menu:has(> li:nth-child(7)) { display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); column-gap: 6px; min-width: 460px; }
  .site-header .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* ingen lucka mellan rubrik och meny: hovern släpper inte */
}
@media (max-width: 900px) {
  .site-header nav { padding-top: 4px; }
  .site-header .menu > li { border-bottom: 0; }
  .site-header .menu > li + li { border-top: 1px solid var(--border); }
  .site-header .menu > .menu-item-has-children > a[href="#"] { display: block; padding: 18px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blush-700); text-decoration: none; border: 0; box-shadow: none; background: none; pointer-events: none; }
  .site-header .menu > li > a:not([href="#"]) { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; font-size: 17px; font-weight: 600; color: var(--fg-strong); }
  .site-header .menu > li > a:not([href="#"])::after { display: block; content: ""; width: 8px; height: 8px; border: solid var(--blush-600); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 6px; }
  .site-header .sub-menu { padding: 0 0 12px; gap: 0 8px; }
  .site-header .sub-menu a { padding: 10px 8px 10px 20px; font-size: 15px; line-height: 1.25; border-radius: var(--radius-sm); color: var(--fg-strong); }
  .site-header .sub-menu .current-menu-item > a::before { left: 8px; }
  .lang-switch { order: -1; margin: 12px 0 4px; max-width: 100%; align-self: flex-start; }   /* språken överst i mobilmenyn: nåbara utan att scrolla */
  .lang-switch ul { flex-wrap: wrap; }
  .lang-switch li a { height: 40px; }
}

/* ── Behandlingsregistret (dator): ser ut som knappar redan i vila ──
   Varje behandling är ett eget vitt kort med ram och en pil i en rund knapp, inte en rad i en lista.
   Raden man pekar på (eller första raden i vila) får petrolram, fylld pilknapp och bilden till höger.
   Bilden är klickbar och bär en "Läs mer"-pil; hovern ligger kvar när musen flyttas från raden till bilden. */
@media (min-width: 1024px) {
  .treat-index .rows { border-top: 0; display: grid; gap: clamp(6px, 1vh, 10px); align-content: start; }
  .treat-row {
    --arrow: clamp(32px, 4.6vh, 42px);
    padding: clamp(7px, 1.2vh, 12px) clamp(7px, 1.2vh, 12px) clamp(7px, 1.2vh, 12px) 22px;
    background: var(--white); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 50, 74, .06), 0 6px 14px -10px rgba(20, 50, 74, .18);
    transition: border-color .25s var(--treat-ease), box-shadow .3s var(--treat-ease), background-color .25s;
  }
  .treat-row .name { font-weight: 550; color: var(--fg-strong); }
  .treat-row .arrow {
    display: block; box-sizing: border-box; width: var(--arrow); height: var(--arrow); padding: calc(var(--arrow) * .26); border-radius: 50%;
    background: var(--blush-50); color: var(--blush-700); font-size: inherit; margin: 0; opacity: 1; transform: none;
    transition: background-color .25s var(--treat-ease), color .25s var(--treat-ease), transform .4s var(--treat-ease);
  }
  .treat-row:hover, .treat-row:focus-visible,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .treat-row {
    border-color: var(--blush-600); box-shadow: 0 0 0 1px var(--blush-600), 0 14px 30px -14px rgba(20, 50, 74, .4);
  }
  .treat-row:hover .arrow, .treat-row:focus-visible .arrow,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .arrow { background: var(--blush-600); color: var(--white); transform: translateX(3px); }
  .treat-row:hover .name, .treat-row:focus-visible .name,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .name { transform: translateX(6px); }
  .treat-row .more {
    display: inline-flex; align-items: center; gap: 8px; position: absolute; grid-area: 1 / 2 / 2 / 3; top: 0; right: 0; left: auto; bottom: auto; margin: 20px; z-index: 5; white-space: nowrap;
    padding: 10px 16px; border-radius: var(--radius-pill); background: var(--white); color: var(--blush-700); font-size: 15px; font-weight: 600;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .25s ease, transform .35s var(--treat-ease);
  }
  .treat-row .more .icon { font-size: 18px; }
  .treat-row:hover .more, .treat-row:focus-visible .more,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .more { opacity: 1; transform: none; transition-delay: .12s; }
  /* Bilden och texten för den aktiva raden är klickbara (hoveren stannar kvar på raden) */
  .treat-row:hover .preview, .treat-row:focus-visible .preview, .treat-row:hover .summary, .treat-row:focus-visible .summary,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .preview,
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .summary { pointer-events: auto; cursor: pointer; }
}
/* Uppmaning i vila: första pilknappen pulserar tills man rör listan */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .treat-index .rows:not(:hover):not(:focus-within) li:first-child .arrow { animation: treat-nudge 2.4s ease-out infinite; }
  @keyframes treat-nudge {
    0% { box-shadow: 0 0 0 0 rgba(22, 165, 198, .55); transform: translateX(3px); }
    35% { transform: translateX(8px); }
    60%, 100% { box-shadow: 0 0 0 14px rgba(22, 165, 198, 0); transform: translateX(3px); }
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .treat-row .more { transform: none; } }

/* ── "Visa alla behandlingar": de behandlingar som inte ryms bland de sex korten ──
   Bara CSS: en dold kryssruta styr om panelen är öppen (samma teknik som hamburgarmenyn). */
.treat-all { position: relative; margin-top: clamp(20px, 3.5vh, 36px); }
.treat-all-toggle { position: absolute; opacity: 0; pointer-events: none; }
.treat-all-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: var(--radius-pill); cursor: pointer; user-select: none;
  font-size: 16px; font-weight: 600; color: var(--blush-700); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--blush-600);
  transition: background-color .2s, color .2s, box-shadow .2s; }
.treat-all-btn:hover { background: var(--blush-600); color: var(--white); }
.treat-all-btn .icon { font-size: 18px; transform: rotate(90deg); transition: transform .3s var(--treat-ease, ease); }
.treat-all-btn .when-open { display: none; }
.treat-all-toggle:checked + .treat-all-btn .when-open { display: inline; }
.treat-all-toggle:checked + .treat-all-btn .when-closed { display: none; }
.treat-all-toggle:checked + .treat-all-btn .icon { transform: rotate(-90deg); }
.treat-all-toggle:focus-visible + .treat-all-btn { outline: 3px solid var(--logo); outline-offset: 3px; }
.treat-all-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--treat-ease, ease), visibility 0s .4s; }
.treat-all-toggle:checked ~ .treat-all-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--treat-ease, ease), visibility 0s; }
.treat-all-inner { overflow: hidden; min-height: 0; }
.treat-all-title { margin: 28px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blush-700); }
.treat-all-inner ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 2px 2px 4px; }
.treat-all-inner a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 12px 10px 20px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--border); font-size: 18px; font-weight: 550; color: var(--fg-strong);
  box-shadow: 0 1px 2px rgba(20, 50, 74, .06); transition: border-color .2s, box-shadow .25s, transform .25s var(--treat-ease, ease); }
.treat-all-inner a .icon { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 50%; background: var(--blush-50); color: var(--blush-700); transition: background-color .2s, color .2s; }
.treat-all-inner a:hover, .treat-all-inner a:focus-visible { border-color: var(--blush-600); box-shadow: 0 0 0 1px var(--blush-600), 0 12px 24px -14px rgba(20, 50, 74, .4); transform: translateY(-2px); }
.treat-all-inner a:hover .icon, .treat-all-inner a:focus-visible .icon { background: var(--blush-600); color: var(--white); }
@media (max-width: 600px) {
  .treat-all-btn { width: 100%; justify-content: center; }
  .treat-all-inner ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .treat-all-panel, .treat-all-btn .icon, .treat-all-inner a { transition: none; } }

/* Sidhuvudet ryms utan sidoscroll från 901 px: menyn bryter aldrig rad, loggan och språkväljaren krymper stegvis */
@media (min-width: 901px) { .site-header .menu a { white-space: nowrap; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header .logo img { height: 30px; }
  .site-header .menu { gap: 0; }
  .site-header .menu a { padding: 8px 7px; font-size: 14px; gap: 3px; }
  .site-header .bar .inner { gap: 10px; }
  .site-header .bar .inner > .btn-primary { padding: 9px 14px; font-size: 14px; }
  .lang-switch li a[aria-current] { padding: 0 9px; }
  .lang-switch li a[aria-current] .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1299px) {
  .site-header .logo img { height: 36px; }
  .site-header .menu { gap: 0; }
  .site-header .menu a { padding: 8px 9px; font-size: 14.5px; }
  .site-header .bar .inner { gap: 14px; }
}

/* ── Vattenstämpel: loggan i hörnet över bildbanden ──
   Diskret, den stående loggan enfärgad i rubrikfärgen (symbolen över texten, som på receptionsväggen), utan ram eller bakgrund; en nästan osynlig ljus gloria gör att den går att uppfatta även mot mörka bilder (syns knappt mot ljusa).
   Rent dekorativ (pseudo-element), ingen markup och inget fält. */
.photo-band figure { position: relative; }
.photo-band figure::after {
  content: ""; position: absolute; z-index: 2; right: clamp(14px, 2vw, 30px); bottom: clamp(12px, 1.6vw, 24px);
  width: clamp(84px, 8vw, 116px); aspect-ratio: 160 / 86; pointer-events: none;
  background: url(img/logo-stacked-navy.svg) center / contain no-repeat; opacity: .92;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .55)) drop-shadow(0 0 5px rgba(255, 255, 255, .32));
}
@media (max-width: 600px) {
  .photo-band figure::after { width: 72px; right: 10px; bottom: 10px; }
}

/* Mobil/surfplatta: Google-omdömet centrerat i heron (startsidan och undersidorna) */
@media (max-width: 900px) {
  .hero-score { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; justify-content: center; align-self: center; text-align: center; }
}
/* Gruppens länk (Om oss, Kontakt) är en riktig sida: raden går dit, undermenyn ligger direkt under */
@media (max-width: 900px) {
  .site-header .menu > .menu-item-has-children > a:not([href="#"]) { padding-bottom: 8px; }
  .site-header .menu > .menu-item-has-children > a:not([href="#"]) + .sub-menu { padding-top: 0; }
}

/* ── Bildspel (lumo/photo-slideshow, Om oss) ──
   Dator: bilderna ligger i en rad som flyttas med transform när en (dold) alternativknapp väljs; pilar och
   prickar är etiketter till knapparna, så ingen länk hoppar i sidan och inget JS behövs. Nästa bild tittar
   fram i kanten. Mobil: raden svepas i sidled med scroll-snap. Inget rör sig av sig självt. */
.slideshow { padding: clamp(40px, 7vh, 88px) 0; background: var(--surface); --ss-w: min(80%, 860px); --ss-gap: clamp(12px, 1.6vw, 24px); }
.slideshow .inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.slideshow .head { max-width: 46em; margin-bottom: clamp(20px, 3.5vh, 36px); }
.slideshow h2 { font-size: var(--section-h2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 450; text-wrap: balance; }
.slideshow .head p { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.6; }
.slideshow .ss { position: relative; max-width: var(--container); margin: 0 auto; container-type: inline-size;
  --sw: min(calc((100cqw - 2 * var(--gutter)) * .8), 860px); }
/* Dator: en bild i taget, mindre och centrerad (ingen kantbild som förvirrar). */
@media (min-width: 901px) {
  .slideshow .ss { --sw: min(calc(100cqw - 2 * var(--gutter)), 680px); }
  .slideshow .head { margin-inline: auto; text-align: center; }
}
.slideshow .ss-r { position: absolute; opacity: 0; pointer-events: none; }
.slideshow .ss-viewport { overflow: hidden; padding: 0 var(--gutter); }
.slideshow .ss-track { display: flex; gap: var(--ss-gap); margin: 0; padding: 0; list-style: none; --i: 0; }
.slideshow .ss-slide { flex: 0 0 var(--ss-w); min-width: 0; }
.slideshow .ss-slide figure { margin: 0; }
.slideshow .ss-slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: clamp(16px, 1.8vw, 24px); background: var(--blush-50); }
.slideshow .ss-slide figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; padding-right: 8px; font-size: 15px; line-height: 1.45; color: var(--fg); }
.slideshow .ss-slide .n { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--blush-700); font-variant-numeric: tabular-nums; }
.slideshow .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.slideshow .ss-nav, .slideshow .ss-dots { display: none; }

@media (min-width: 901px) {
  .slideshow .ss-viewport { width: var(--sw); margin: 0 auto; padding: 0; }
  .slideshow .ss-track { transform: translateX(calc(var(--i) * -1 * (var(--sw) + var(--ss-gap)))); transition: transform .6s var(--treat-ease, cubic-bezier(.2, .7, .2, 1)); }
  .slideshow .ss-slide { flex-basis: var(--sw); }
  #ss-2:checked ~ .ss-viewport .ss-track { --i: 1; } #ss-3:checked ~ .ss-viewport .ss-track { --i: 2; }
  #ss-4:checked ~ .ss-viewport .ss-track { --i: 3; } #ss-5:checked ~ .ss-viewport .ss-track { --i: 4; }
  #ss-6:checked ~ .ss-viewport .ss-track { --i: 5; } #ss-7:checked ~ .ss-viewport .ss-track { --i: 6; }
  .slideshow .ss-nav { position: absolute; left: 0; right: 0; top: calc(var(--sw) / 3); height: 0; pointer-events: none; }
  #ss-1:checked ~ .ss-nav-1, #ss-2:checked ~ .ss-nav-2, #ss-3:checked ~ .ss-nav-3, #ss-4:checked ~ .ss-nav-4,
  #ss-5:checked ~ .ss-nav-5, #ss-6:checked ~ .ss-nav-6, #ss-7:checked ~ .ss-nav-7 { display: block; }
  .slideshow .ss-btn {
    position: absolute; top: -22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; pointer-events: auto;
    background: var(--white); color: var(--blush-700); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4);
    transition: transform .2s var(--treat-ease, ease), background-color .2s, color .2s;
  }
  .slideshow .ss-btn .icon { font-size: 20px; }
  .slideshow .ss-prev { left: calc((100cqw - var(--sw)) / 2 + 14px); }
  .slideshow .ss-next { left: calc((100cqw - var(--sw)) / 2 + var(--sw) - 58px); }
  .slideshow .ss-prev .icon { transform: scaleX(-1); }
  .slideshow .ss-btn:hover { background: var(--blush-600); color: var(--white); transform: scale(1.08); }
  .slideshow .ss-dots { display: flex; gap: 8px; justify-content: center; margin: 18px 0 0; }
  .slideshow .ss-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blush-300); cursor: pointer; transition: width .3s var(--treat-ease, ease), background-color .2s; }
  .slideshow .ss-dot:hover { background: var(--blush-500); }
  #ss-1:checked ~ .ss-dots label[for="ss-1"], #ss-2:checked ~ .ss-dots label[for="ss-2"], #ss-3:checked ~ .ss-dots label[for="ss-3"],
  #ss-4:checked ~ .ss-dots label[for="ss-4"], #ss-5:checked ~ .ss-dots label[for="ss-5"], #ss-6:checked ~ .ss-dots label[for="ss-6"],
  #ss-7:checked ~ .ss-dots label[for="ss-7"] { width: 28px; border-radius: 999px; background: var(--blush-600); }
  /* Tangentbord: piltangenterna växlar alternativknapp, fokus syns på pricken */
  #ss-1:focus-visible ~ .ss-dots label[for="ss-1"], #ss-2:focus-visible ~ .ss-dots label[for="ss-2"], #ss-3:focus-visible ~ .ss-dots label[for="ss-3"],
  #ss-4:focus-visible ~ .ss-dots label[for="ss-4"], #ss-5:focus-visible ~ .ss-dots label[for="ss-5"], #ss-6:focus-visible ~ .ss-dots label[for="ss-6"],
  #ss-7:focus-visible ~ .ss-dots label[for="ss-7"] { outline: 3px solid var(--logo); outline-offset: 3px; }
}
@media (max-width: 900px) {
  .slideshow .ss-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .slideshow .ss-viewport::-webkit-scrollbar { display: none; }
  .slideshow .ss-slide { scroll-snap-align: start; flex-basis: 86%; }
}
@media (prefers-reduced-motion: reduce) { .slideshow .ss-track { transition: none; } }

/* ── Betalning och tandvårdsstöd (lumo/price-info, Priser) ── tre kort: stöd, delbetalning, återbud */
.price-info { padding: clamp(40px, 7vh, 88px) 0; background: var(--surface); }
.price-info .inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.price-info h2 { font-size: var(--section-h2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 450; text-wrap: balance; margin-bottom: clamp(20px, 3.5vh, 36px); }
.price-info .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.price-info .cards li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 2.4vw, 32px); background: var(--white); border: 1px solid var(--border); border-radius: 20px; border-top: 4px solid var(--blush-600); box-shadow: 0 1px 2px rgba(20, 50, 74, .06); }
.price-info h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; font-weight: 550; letter-spacing: -.01em; color: var(--fg-strong); margin: 0; }
.price-info p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg); }
.price-info .text-link { margin-top: auto; padding-top: 4px; min-height: 44px; }
.price-info .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) { .price-info .cards { grid-template-columns: minmax(0, 1fr); } }

/* ── Öppet nu (toppremsa + sidfot) ──
   Chippen fylls av open-now.js utifrån öppettiderna (data-attribut på [data-open-hours], som kommer från
   sajtens öppettidsinställningar). Tom tills skriptet körts. Mobil: toppremsan är dold, statusen finns i sidfoten. */
.open-now { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.open-now:empty { display: none; }
.open-now .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8a96a0; }
.open-now[data-state="open"] .dot { background: #2f9e5c; animation: open-pulse 2.4s ease-out infinite; }
.open-now[data-state="open"] .txt { color: #1c6b3e; }
@keyframes open-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 92, .5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(47, 158, 92, 0); } }
@media (prefers-reduced-motion: reduce) { .open-now[data-state="open"] .dot { animation: none; } }
.site-header .topbar .inner { justify-content: flex-start; }
.site-header .topbar .links { margin-left: auto; }
.site-header .topbar .open-now { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--border-strong); }

/* Föräldrasidan som första punkt i dropdownen (Om kliniken / Kontakta oss). På mobil är Om oss/Kontakt redan egna länkrader: dölj dubbletten.
   Strukturväljaren täcker WP-menyn, där posten saknar klass; Behandlingar (href="#") berörs inte. */
@media (max-width: 900px) {
  .site-header .sub-menu .menu-item-parent-link,
  .site-header nav > ul > .menu-item-has-children > a:not([href="#"]) + .sub-menu > li:first-child { display: none; }
}

/* ── Startsidans hero på dator: bilden täcker hela ytan (2026-10-27) ──────
   Kunden gillade inte "titthålet" (bilden som kort till höger). Från 901 px ligger
   teamfotot i stället kant till kant bakom hela heron, som på surfplatta men i
   full bredd. Texten står till vänster på en yta som tonar ut över bilden
   (rubrik och brödtext ligger på ≥ .93 täckning, kontrast > 7:1). Mobil och
   surfplatta (≤900) är oförändrade. Sidheroerna (.page-hero) har motsvarande
   regler sist i pages.css. */
@media (min-width: 901px) {
  .hero.hero-team {
    --hero-tw: clamp(420px, 44vw, 700px);
    --hero-edge: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + var(--hero-tw));
  }
  /* bilden börjar vid textblockets mitt och tonar in mjukt (samma som sidheroerna) */
  .hero.hero-team .frame { inset: 0; top: 0; left: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + var(--hero-tw) * .72); transform: none; aspect-ratio: auto; height: auto; border-radius: 0; overflow: hidden; }
  .hero.hero-team .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.08) 70px, rgba(0,0,0,.28) 150px, rgba(0,0,0,.55) 250px, rgba(0,0,0,.82) 350px, #000 460px);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.08) 70px, rgba(0,0,0,.28) 150px, rgba(0,0,0,.55) 250px, rgba(0,0,0,.82) 350px, #000 460px); }
  .hero.hero-team .frame::after, html[data-palette] .hero.hero-team .frame::after { background: none; }
  /* max-höjd på startsidans hero: källbilden är 1600 px bred och blir grumlig om heron växer med skärmhöjden */
  .hero.hero-team { min-height: clamp(440px, calc(100svh - 117px - var(--peek, 0px)), 720px); max-height: 760px; }
  .hero.hero-team .caption { padding-right: var(--gutter); }
  .hero.hero-team .caption > *, .hero.hero-team h1, .hero.hero-team .caption > h1 { max-width: var(--hero-tw); }
}

/* Startsidans hero på mobil/surfplatta: teamfotot (1,65:1) visas nästan i sin helhet så att ingen i
   ytterkanten klipps bort (aspect-ratio i stället för fast höjd, objekt centrerat). */
@media (max-width: 900px) {
  .hero.hero-team .frame { height: auto; aspect-ratio: 1.5 / 1; }
  .hero.hero-team .frame img { object-position: 50% 40%; }
}

/* Honeypot i kontaktformulären (bridgen kastar inskick där fältet är ifyllt) */
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }