/* ==========================================================================
   KBT-Konsulterna i Uppsala
   Design system — "Slottskällan"
   See docs/06-DESIGN-DIRECTION.md for the rationale behind these choices.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Self-hosted variable fonts (SIL OFL, licences in assets/fonts/), built by
   tools/build-fonts.py. No request to Google, so visitor IPs are not passed to
   a third party. Newsreader is cut to weights 400-600 with its optical size
   pinned, which is what keeps a phone's first paint fast. Latin is preloaded
   from each page's head; latin-ext only downloads for a character outside it. */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/familjen-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/familjen-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallbacks scaled to the web fonts' metrics, so text set in Arial or Georgia
   while a font loads takes the same space, and nothing reflows when it swaps. */
@font-face {
  font-family: 'Familjen Grotesk Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  size-adjust: 94.59%;
  ascent-override: 108.37%;
  descent-override: 23.79%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia'), local('Gelasio');
  size-adjust: 96.12%;
  ascent-override: 76.47%;
  descent-override: 27.57%;
  line-gap-override: 0%;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Palette: drawn from the practice's own location — the courtyard house by
     the castle spring, below Uppsala castle. Cool limestone ground, deep
     spruce-teal primary, linden-leaf accent. */
  --deep:        #1B3A38;
  --deep-soft:   #2C5450;
  --deep-deeper: #132928;
  --body:        #3A4A48;
  --muted:       #4F5D5A;
  --paper:       #EBEEE8;
  --paper-hi:    #F6F7F3;
  --sand:        #D8CDBA;
  --sand-soft:   #E4DCCD;
  --linden:      #8A9A5B;   /* decorative only — too light for body text */
  --linden-ink:  #4E5B2B;   /* text-safe variant: >=4.68:1 on every ground used */

  /* Type */
  --display: 'Familjen Grotesk', 'Familjen Grotesk Fallback', 'Helvetica Neue', Arial, sans-serif;
  --text:    'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1.06rem, 1rem + 0.25vw, 1.19rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem);
  --step-5:  clamp(2.7rem, 1.7rem + 4.6vw, 5.9rem);

  /* Space */
  --gutter:  clamp(1.15rem, 4vw, 3rem);
  --measure: 34rem;
  --wrap:    76rem;
  --band:    clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Real SVG icons, not font glyphs. Size follows the surrounding text and
   colour follows currentColor, so an icon always matches what it sits next to. */
.icon {
  /* inline-block, not the global block for svg — a block icon inside a line of
     text forces a break, which pushed every trailing arrow onto its own line. */
  display: inline-block;
  width: 1em; height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.1em;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--deep);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}
/* Section headings need a size of their own. Without one they fell to the
   browser's 1.5em, which made every primary heading smaller than the side
   headings that had been given --step-2 inline. */
h2 { font-size: var(--step-3); }
p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--linden-ink); }
a { color: var(--deep); }
strong { font-weight: 600; color: var(--deep); }
/* --deep is the background in these contexts, so bold text must not be
   recoloured to it — the footer's emergency "112" was invisible. */
.band--deep strong, .bleed strong, .hero strong, .site-foot strong { color: inherit; }
button { font: inherit; }

/* Links in prose: deep text, linden underline. No borders anywhere on this
   site, so the underline is doing real work and is allowed to be visible. */
.prose a, .a-link, .facts dd a {
  text-decoration: underline;
  text-decoration-color: var(--linden);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
.prose a:hover, .a-link:hover, .facts dd a:hover { color: var(--linden-ink); text-decoration-color: var(--linden-ink); }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--linden-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--deep); color: #fff; padding: 0.8rem 1.2rem;
  font-family: var(--display); text-decoration: none;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 56rem; }

.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.band--hi   { background: var(--paper-hi); }
.band--sand { background: var(--sand-soft); }
.band--deep { background: var(--deep); color: #E6EBE8; }
.band--deep h2, .band--deep h3 { color: #fff; }
.band--deep .eyebrow { color: var(--sand); }
.band--deep a:not(.btn) { color: #fff; }

.prose { max-width: var(--measure); }
.prose--wide { max-width: 44rem; }
.prose > :last-child { margin-bottom: 0; }

/* Small uppercase label. Used as a section eyebrow — it names the section
   rather than decorating it, which is why there are no other rules or
   dividers on the page. */
.eyebrow {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--linden-ink);
  margin: 0 0 1.4rem;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--deep-soft);
  max-width: 38rem;
}

/* Two-column band: eyebrow/aside on the left, content on the right.
   Asymmetric by design — centring everything is what reads as a template. */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4.5rem);
}
/* The eyebrow column sits beside a heading, a lede, a form or a list, and each
   starts its first line at a different height. Aligning first baselines keeps
   the eyebrow level with whatever text opens the other column. It also stops
   a short column being centred against a tall form. */
@media (min-width: 62rem) {
  .split { grid-template-columns: 15rem 1fr; align-items: baseline; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--media { grid-template-columns: 1fr 1.15fr; align-items: center; }
}
/* A split used as the heading row above a full-width grid (team, doors, steps) */
.split--head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.95em 1.6em;
  text-decoration: none;
  border: 0; border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease), transform 0.12s var(--ease);
}
/* A 1px press, so a tap on a phone — where there is no hover — still answers. */
.btn:active { transform: translateY(1px); }
/* Primary: no movement on hover — the fill crossfades to the hero button's
   sand and the label darkens to meet it. */
.btn--primary { background: var(--deep); color: #fff; transition-duration: 0.3s, 0.3s, 0.12s; }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--sand); color: var(--deep-deeper); }
.btn--light { background: var(--paper-hi); color: var(--deep); }
.btn--light:hover { background: #fff; }
.btn--ghost { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--deep); }
.btn--ghost:hover { background: var(--deep); color: #fff; }
.btn--on-dark { background: var(--sand); color: var(--deep-deeper); }
.btn--on-dark:hover { background: #fff; }
.btn__arrow { width: 1.05em; height: 1.05em; transition: transform 0.22s var(--ease); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1.1rem; align-items: center; }

/* --- Site header ---------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Set by site.js once the page is scrolled: a hairline instead of a
   permanent border. The header deliberately keeps its height — it is in the
   document flow, so shrinking it would jolt the whole page up by the
   difference the moment the threshold is crossed. */
.site-head.is-scrolled { box-shadow: 0 1px 0 0 rgba(27,58,56,0.12); }
.site-head__inner {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(0.9rem, 2vw, 2rem);
  min-height: 5rem;
}
.site-head__logo {
  margin-right: auto; display: flex; align-items: center; text-decoration: none;
  flex: 0 0 auto;              /* never let the logo shrink below its size */
}
.site-head__logo img { width: 200px; max-width: none; height: auto; }
/* The desktop nav arrives at 66rem with little room to spare: keep the
   logo at its old size until the bar has space again. */
@media (min-width: 66rem) and (max-width: 77.99rem) { .site-head__logo img { width: 168px; } }

.nav { display: none; }
@media (min-width: 66rem) { .nav { display: flex; align-items: center; gap: clamp(0.85rem, 1.5vw, 1.5rem); flex: 0 0 auto; } }
.nav a {
  font-family: var(--display); font-size: 0.92rem; font-weight: 500;
  color: var(--deep); text-decoration: none;
  padding-block: 0.4rem;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--linden);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.24s var(--ease);
}
/* Grows in from the left and leaves to the right, so the line passes through
   the link rather than retracting back the way it came. */
.nav a:hover::after, .nav a:focus-visible::after { transform-origin: left; }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.head-tel {
  display: none;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  color: var(--deep); text-decoration: none; white-space: nowrap;
}
@media (min-width: 92rem) { .head-tel { display: block; } }

/* Sentence case like the nav beside it; the colour and the dot set it apart. */
.head-akut {
  font-family: var(--display); font-size: 0.92rem; font-weight: 600;
  color: var(--linden-ink); text-decoration: none; white-space: nowrap;
  display: none;
}
.head-akut::before {
  content: ''; display: inline-block;
  width: 0.4em; height: 0.4em; margin-right: 0.45em; border-radius: 50%;
  background: currentColor; vertical-align: 0.12em;
}
@media (min-width: 78rem) { .head-akut { display: block; } }
.head-akut:hover { color: var(--deep); }

.site-head .btn { padding: 0.8em 1.3em; }

/* Two real icons swapped on state, rather than three divs transformed into a
   shape. The div version depended on the bars being exactly 7px apart, but
   align-content defaults to stretch, so they spread to 17px and the "close"
   state rotated into a chevron instead of a cross. */
.burger {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;                      /* was shrinking to 22px as a flex item */
  width: 2.75rem; height: 2.75rem;     /* 44px touch target */
  margin-left: auto;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--deep);
}
@media (min-width: 66rem) { .burger { display: none; } }
/* Stacked in the same spot and crossfaded with a quarter-turn, rather than
   swapped outright. */
.burger { position: relative; }
.burger .icon {
  position: absolute; inset: 0; margin: auto;
  width: 1.6rem; height: 1.6rem; stroke-width: 1.85;
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}
.burger__x { opacity: 0; transform: rotate(-90deg); }
.burger[aria-expanded="true"] .burger__bars { opacity: 0; transform: rotate(90deg); }
.burger[aria-expanded="true"] .burger__x { opacity: 1; transform: none; }

/* Over a hero. On pages that open with one, the header is fixed and lies on
   the photo: transparent, light type, with a soft shade from the top so the
   right-hand links stay legible over bright sky. site.js adds .is-solid once
   the hero has scrolled up behind it, and the header turns back into the
   paper one above. An open mobile menu does the same, so the panel and header
   read as one sheet.
   Gated on .js (set inline in <head>): without JS the header stays sticky and
   in flow, which the static no-JS mobile menu depends on. Browsers without
   :has() get the ordinary header too. The hero grows by the header's 5rem and
   pads its top by the same, so its content sits exactly where it did. */
@supports selector(:has(*)) {
  .js .site-head:has(~ main > .hero:first-child) { position: fixed; left: 0; right: 0; }
  .js main > .hero:first-child { padding-top: 5rem; }
  .js main > .hero--full:first-child { min-height: calc(min(92svh, 54rem) + 5rem); }
  .js main > .hero--page:first-child { min-height: calc(min(62svh, 34rem) + 5rem); }

  .site-head::before {
    content: ''; position: absolute; inset: 0 0 -3rem; z-index: -1;
    background: linear-gradient(to bottom, rgba(19,41,40,0.55), rgba(19,41,40,0));
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .site-head__logo img { transition: filter 0.3s var(--ease); }
  .nav a, .head-tel, .head-akut, .burger { transition: color 0.3s var(--ease); }

  /* Written out flat rather than nested: some browsers with :has() predate
     CSS nesting. */
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) { background: transparent; box-shadow: none; }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"]))::before { opacity: 1; }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) .site-head__logo img { filter: brightness(0) invert(1); }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) :is(.nav a, .head-tel, .burger) { color: #fff; }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) .nav a::after { background: var(--sand); }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) .head-akut { color: var(--sand); }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) .head-akut:hover { color: #fff; }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) .btn--primary { background: var(--sand); color: var(--deep-deeper); }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) .btn--primary:is(:hover, :focus-visible) { background: #fff; }
  .js .site-head:has(~ main > .hero:first-child):not(.is-solid):not(:has(.burger[aria-expanded="true"])) :focus-visible { outline-color: var(--sand); }
}

/* The menu holds ~1370px of content, more than a phone viewport. It must not
   grow the sticky header to do that: a header taller than the screen puts its
   own overflow out of reach.
   It is a fixed overlay panel below the header with its own scroll instead.
   Note this deliberately does NOT lock the root scroll — setting
   overflow:hidden on html destroys the scroll container that position:sticky
   depends on, which drops the header to its static document position and takes
   the whole top nav off-screen whenever the menu is opened mid-page. */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0; right: 0;
  top: var(--head-h, 5rem);
  bottom: 0;
  background: var(--paper-hi);
  padding: 1.25rem 0 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;    /* don't chain into the page at the end */
  -webkit-overflow-scrolling: touch;
}
.mobile-nav[data-open="true"] { display: block; }
/* Fades and settles in, top-level items a beat apart. @starting-style supplies
   the first frame of the display:none → block change, and allow-discrete holds
   display back on close until the fade is done. Browsers without either simply
   open and close instantly, as before. The <noscript> rule in each page's head
   resets opacity, since without JS the menu is shown statically. */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    opacity: 0; transform: translateY(-0.5rem);
    transition: opacity 0.22s var(--ease), transform 0.3s var(--ease),
                display 0.3s allow-discrete;
  }
  .mobile-nav[data-open="true"] { opacity: 1; transform: none; }
  .mobile-nav > .wrap > ul > li { transition: opacity 0.35s var(--ease), transform 0.4s var(--ease); }
  .mobile-nav > .wrap > ul > li:nth-child(2) { transition-delay: 0.03s; }
  .mobile-nav > .wrap > ul > li:nth-child(3) { transition-delay: 0.06s; }
  .mobile-nav > .wrap > ul > li:nth-child(4) { transition-delay: 0.09s; }
  .mobile-nav > .wrap > ul > li:nth-child(5) { transition-delay: 0.12s; }
  .mobile-nav > .wrap > ul > li:nth-child(6) { transition-delay: 0.15s; }
  .mobile-nav > .wrap > ul > li:nth-child(n+7) { transition-delay: 0.18s; }
  @starting-style {
    .mobile-nav[data-open="true"] { opacity: 0; transform: translateY(-0.5rem); }
    .mobile-nav[data-open="true"] > .wrap > ul > li { opacity: 0; transform: translateY(0.4rem); }
  }
}
@media (min-width: 66rem) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; }
/* :not(.btn) — otherwise this beats .btn--primary and the mobile menu's
   "Boka samtal" renders deep-on-deep, i.e. invisible. */
.mobile-nav a:not(.btn) {
  display: block; padding: 0.75rem 0;
  font-family: var(--display); font-size: 1.15rem; font-weight: 500;
  color: var(--deep); text-decoration: none;
}
.mobile-nav .mobile-nav__sub a:not(.btn) { font-size: 1rem; font-weight: 400; padding-left: 1.1rem; color: var(--body); }
.mobile-nav__foot { margin-top: 1.5rem; display: grid; gap: 0.75rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; }
.hero--full { min-height: min(92svh, 54rem); }
.hero--page { min-height: min(62svh, 34rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
/* Subject on the right of the frame: on a narrow screen keep it, not the middle. */
.hero__media .pic--right img { object-position: 88% 46%; }
.hero__media .pic--high img { object-position: center 12%; }
/* Background clip: invisible until it is really playing, so the poster
   underneath is what paints first and what stays if it never starts. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero__video[data-playing] { opacity: 1; }
.hero__playpause {
  position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid rgba(232,237,234,0.35); border-radius: 50%;
  background: rgba(19,41,40,0.45); color: #E8EDEA; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__playpause:hover { background: rgba(19,41,40,0.75); border-color: rgba(232,237,234,0.7); }
.hero__playpause svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(19,41,40,0.88) 0%, rgba(19,41,40,0.70) 26%,
                            rgba(19,41,40,0.34) 58%, rgba(19,41,40,0.10) 100%),
    linear-gradient(to top, rgba(19,41,40,0.38) 0%, rgba(19,41,40,0) 55%);
}
.hero__inner { padding-block: clamp(3.5rem, 9vw, 7rem); width: 100%; }
.hero__body { max-width: 40rem; color: #E8EDEA; }
.hero h1 {
  color: #fff;
  font-size: var(--step-5);
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
}
.hero--page h1 { font-size: var(--step-4); }
/* Homepage headline: smaller and tighter than --step-5 so it sets in two
   lines on wider screens. 11.6em lets it run past the 40rem text column, so
   it sets as "Psykologisk behandling / & utredning du kan lita på". */
.hero--full h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.035em;
  width: 11.6em;
  max-width: 100%;
  margin-bottom: 1.6rem;
}
@media (min-width: 52rem) { .hero--full h1 { max-width: calc(100vw - 2 * var(--gutter)); } }
.hero__eyebrow {
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sand); margin: 0 0 1.5rem;
}
.hero__lede { font-size: var(--step-1); line-height: 1.6; color: #DCE4E0; max-width: 33rem; margin-bottom: 2rem; }
.hero .actions { margin-bottom: 2.4rem; }
/* max-content lets the row run past the 40rem text column so the four points
   stay on one line on desktop; the viewport cap wraps it on a phone. */
.hero__trust {
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--display); font-size: 0.88rem; letter-spacing: 0.04em;
  color: #C6D1CC;
}
.hero__trust li { margin: 0; display: inline-flex; align-items: center; gap: 0.45em; }
/* A check per item, so the list still reads as separate points once it wraps */
.hero__trust .icon { width: 0.9em; height: 0.9em; color: var(--sand); }
/* Visiting address under the trust points: one quiet line, linking to the map */
.hero__addr { margin: 1.1rem 0 0; font-family: var(--display); font-size: 0.88rem; letter-spacing: 0.04em; }
.hero__addr a { display: inline-flex; align-items: center; gap: 0.45em; color: #C6D1CC; text-decoration: none; }
.hero__addr a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.hero__addr .icon { flex: none; width: 1em; height: 1em; color: var(--sand); }
.hero__tel { color: #fff; font-family: var(--display); font-weight: 600; text-decoration: none; font-size: var(--step-0); }
.hero__tel:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Signature: "Var ska jag börja?" plain-language router ----------------
   The old site buries every actual problem three clicks deep behind clinical
   category names. This says them in the visitor's own words instead. No
   cards, no icons, no borders — a directory that reads like someone speaking.
   -------------------------------------------------------------------------- */
.router { list-style: none; margin: 0; padding: 0; }
.router li { margin: 0; }
.router__row {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  text-decoration: none;
  color: var(--deep);
  transition: color 0.2s var(--ease);
}
.router__say {
  font-family: var(--text);
  font-size: var(--step-2);
  line-height: 1.25;
  font-weight: 400;
  color: var(--deep);
  transition: transform 0.28s var(--ease);
  transform-origin: left;
}
.router__to {
  font-family: var(--display);
  font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s var(--ease), transform 0.28s var(--ease);
}
.router__to .icon { width: 0.92em; height: 0.92em; margin-left: 0.45em; }
.router__say { grid-column: 1; }
.router__to { grid-column: 3; }
/* A leader line draws across the gap on hover, joining what the visitor said
   to where it takes them. The column gaps keep it clear of both nudges. */
.router__row::after {
  content: ''; grid-column: 2; grid-row: 1; align-self: center;
  height: 1px; background: var(--linden);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.router__row:hover::after, .router__row:focus-visible::after { transform: scaleX(1); }
.router__row:hover .router__say,
.router__row:focus-visible .router__say { transform: translateX(0.5rem); }
.router__row:hover .router__to,
.router__row:focus-visible .router__to { color: var(--linden-ink); transform: translateX(0.25rem); }
@media (max-width: 40rem) {
  .router__row { grid-template-columns: 1fr; }
  .router__say, .router__to { grid-column: 1; }
  .router__to { white-space: normal; }
  .router__row::after { display: none; }
}
/* Beside an eyebrow, pull the list up by the first row's padding so its
   first line sits level with the label rather than a row's padding below it. */
@media (min-width: 62rem) {
  .split .router { margin-top: calc(-1 * clamp(1rem, 2.2vw, 1.5rem)); }
}

/* --- Doors (three audiences) ----------------------------------------------
   The title is set on the photograph itself, under the same scrim treatment
   as the hero and the full-bleed bands, and the images run tall at wide
   viewports so the three read as doorways rather than thumbnails. */
.doors { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 52rem) {
  .doors { grid-template-columns: repeat(3, 1fr); }
}
.door { display: flex; flex-direction: column; text-decoration: none; }
.door__media {
  position: relative; isolation: isolate; overflow: hidden;
  margin-bottom: 1.35rem; background: var(--sand-soft);
}
.door__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
@media (min-width: 52rem) { .door__media img { aspect-ratio: 4 / 5; } }
.door:hover .door__media img, .door:focus-visible .door__media img { transform: scale(1.04); }
.door__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,41,40,0.82) 0%, rgba(19,41,40,0.42) 36%, rgba(19,41,40,0) 66%);
  transition: opacity 0.4s var(--ease);
}
.door:hover .door__scrim, .door:focus-visible .door__scrim { opacity: 0.92; }
/* The label carries a scrim of its own, sized to the text, so a title that
   wraps to two lines — pushing the kicker up into the lighter part of the
   photograph — keeps the kicker legible. */
.door__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.5rem clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.5rem);
  background: linear-gradient(to top, rgba(19,41,40,0.45) 0%, rgba(19,41,40,0.3) 60%, rgba(19,41,40,0) 100%);
}
.door__kicker {
  display: block; margin-bottom: 0.55rem;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--sand);
  text-shadow: 0 1px 12px rgba(19,41,40,0.55);
}
.door__title { color: #fff; font-size: var(--step-3); margin: 0; line-height: 1.02; letter-spacing: -0.025em; }
.door p { color: var(--body); margin-bottom: 0.9rem; font-size: 1rem; }
.door__more {
  margin-top: auto;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--linden-ink);
}
.door__more { display: flex; align-items: center; gap: 0.4em; }
.door__more .icon { width: 0.95em; height: 0.95em; transition: transform 0.22s var(--ease); }
.door:hover .door__more .icon, .door:focus-visible .door__more .icon { transform: translateX(4px); }

/* --- Full-bleed image band ------------------------------------------------ */
.bleed { position: relative; isolation: isolate; }
.bleed__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bleed__media picture { display: block; width: 100%; height: 100%; }
.bleed__media img { width: 100%; height: 100%; object-fit: cover; }
/* No photograph: the quote sits on the deep green alone. */
.bleed--plain { background: var(--deep-deeper); }
/* Keep the castle and sky in frame rather than the lawn below it. */
.bleed__media .pic--sky img { object-position: center 18%; }
.bleed__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(95deg, rgba(19,41,40,0.84) 0%, rgba(19,41,40,0.66) 42%, rgba(19,41,40,0.44) 100%);
}
.bleed__inner { padding-block: clamp(5rem, 12vw, 10rem); color: #E8EDEA; }
.bleed h2 { color: #fff; }
.bleed--tall .bleed__inner { padding-block: clamp(7rem, 18vw, 14rem); }

.pull {
  font-family: var(--text);
  font-size: var(--step-2);
  line-height: 1.4;
  color: #fff;
  max-width: 40rem;
  margin: 0;
}
.pull cite {
  display: block; margin-top: 1.4rem;
  font-family: var(--display); font-size: var(--step--1); font-style: normal;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--sand);
}

/* --- Team ----------------------------------------------------------------- */
/* Two-up even on a phone: one full-width portrait each ran the seven of them
   to ~4,000px before the visitor reached anything else. The note is dropped
   at that width to make it fit. */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 2.5vw, 2rem); }
@media (min-width: 56rem) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 76rem) { .team--seven { grid-template-columns: repeat(4, 1fr); } }
/* Four people: two by two, then one row, never three plus one alone. */
@media (min-width: 56rem) { .team--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .team--four { grid-template-columns: repeat(4, 1fr); } }

.person { display: flex; flex-direction: column; text-decoration: none; }
/* Rows shared across the whole grid, so a role that wraps to two lines no
   longer pushes one card's note out of line with its neighbours'.
   The space between cards moves from the grid's row-gap to each card's own
   padding: a subgrid still lays its inner rows across the parent's gaps, so a
   48px row-gap opened up between name, role and note. The negative margin
   takes back the last row's padding. */
@supports (grid-template-rows: subgrid) {
  .team { row-gap: 0; margin-bottom: calc(-1 * clamp(1.75rem, 3.5vw, 3rem)); }
  .person {
    display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
    padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
  }
}
.person__media { overflow: hidden; margin-bottom: 1.1rem; background: var(--sand-soft); }
.person__media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.55s var(--ease); }
.person:hover .person__media img, .person:focus-visible .person__media img { transform: scale(1.035); }
.person__name { font-family: var(--display); font-size: var(--step-1); font-weight: 600; color: var(--deep); letter-spacing: -0.015em; line-height: 1.15; }
.person__role { font-family: var(--display); font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; margin-top: 0.35rem; line-height: 1.4; }
.person__note { font-size: 0.98rem; color: var(--body); margin-top: 0.7rem; line-height: 1.6; }
@media (max-width: 33.99rem) {
  .person__media { margin-bottom: 0.8rem; }
  .person__name { font-size: 1.05rem; }
  .person__role { font-size: 0.78rem; }
  .person__note { display: none; }
}

/* The eighth cell of the seven-person grid. It holds the "who does what" route,
   in the slot that was otherwise an empty hole at the end of the last row. */
.person--cta .person__media {
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.7rem;
  margin-bottom: 0; padding: clamp(1rem, 2.4vw, 1.6rem);
  color: var(--deep);
  transition: background-color 0.3s var(--ease);
}
.person--cta:hover .person__media, .person--cta:focus-visible .person__media { background: var(--sand); }
.person__cta-title {
  font-family: var(--display); font-size: var(--step-1); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
}
/* Block, not flex: as a flex row the arrow was a separate item, and when the
   label wrapped on a phone it drifted off to the right edge of the tile. */
.person__cta-go {
  display: block;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
}
.person__cta-go .icon { transition: transform 0.22s var(--ease); }
.person--cta:hover .person__cta-go .icon, .person--cta:focus-visible .person__cta-go .icon { transform: translateX(3px); }
@media (max-width: 33.99rem) { .person__cta-title { font-size: 1.05rem; } }

/* --- Numbered process ----------------------------------------------------
   The only numbered markers on the site. The bios describe a genuine
   sequence of events, and knowing there are four steps rather than an
   open-ended commitment is itself reassuring.
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.85rem, 4vw, 3rem); counter-reset: step; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { margin: 0; counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.12em; color: var(--linden-ink);
  margin-bottom: 0.9rem;
}
/* --linden-ink on --deep is 1.67:1 — the numbers all but vanished */
.band--deep .steps li::before { color: var(--sand); }
.steps h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.steps p { font-size: 1rem; margin: 0; }

/* --- Price ---------------------------------------------------------------- */
.prices { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 44rem) { .prices { grid-template-columns: repeat(2, 1fr); } }
.price__label { font-family: var(--display); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); margin-bottom: 0.6rem; }
/* margin 0: the inherited 1.1em is ~50px at this size, which cut the parterapi
   note loose from the figure it qualifies */
.price__fig { font-family: var(--display); font-size: var(--step-3); font-weight: 600; color: var(--deep); letter-spacing: -0.025em; line-height: 1; margin-bottom: 0; }
.price__unit { font-family: var(--display); font-size: var(--step-0); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price__note { font-size: 0.98rem; color: var(--body); margin-top: 0.8rem; }

/* --- Definition list (facts) ---------------------------------------------- */
.facts { margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
.facts dt { font-family: var(--display); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); margin-bottom: 0.35rem; }
.facts dd { margin: 0; color: var(--body); }
.facts a { color: var(--deep); }
/* Embedded map on Kontakt */
.map { margin-top: 1rem; aspect-ratio: 4 / 3; background: var(--paper-hi); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Kaddio's contact form. It has a white background of its own and does not
   resize itself, so the frame is tall enough to show the send button. */
.kaddio { max-width: 34rem; background: #fff; border: 1px solid rgb(27 58 56 / 0.14); border-radius: 3px; overflow: hidden; }
.kaddio iframe { display: block; width: 100%; height: 960px; border: 0; }

/* --- Checklist ------------------------------------------------------------ */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
@media (min-width: 44rem) { .ticks--two { grid-template-columns: repeat(2, 1fr); } }
.ticks li { margin: 0; font-size: 1rem; line-height: 1.6; display: flex; gap: 0.65rem; align-items: flex-start; }
.ticks .icon { color: var(--linden-ink); width: 0.95em; height: 0.95em; margin-top: 0.42em; }
.band--deep .ticks .icon { color: var(--sand); }
.akut .ticks .icon { color: var(--deep); }

/* --- Link list (sub-page index) ------------------------------------------- */
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 48rem) { .linklist--two { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); } }
.linklist li { margin: 0; }
.linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.95rem;
  font-family: var(--display); font-size: var(--step-0); font-weight: 500;
  color: var(--deep); text-decoration: none;
}
/* The arrow is always shown: hidden until hover, a touch screen never showed
   that these rows were links at all. Hover nudges it instead. The hairlines
   stop a column of link rows reading as floating headings. */
.linklist { border-top: 1px solid rgb(27 58 56 / 0.12); }
.linklist li { border-bottom: 1px solid rgb(27 58 56 / 0.12); }
.linklist a .icon { color: var(--linden-ink); transition: transform 0.2s var(--ease); }
.linklist a:hover { color: var(--linden-ink); }
.linklist a:hover .icon, .linklist a:focus-visible .icon { transform: translateX(3px); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: 0.35rem; max-width: 48rem; }
.faq details { padding-block: 0.35rem; }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-family: var(--display); font-size: var(--step-1); font-weight: 500;
  color: var(--deep); padding-block: 0.9rem;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--linden-ink); }
.faq__toggle {
  width: 1.15em; height: 1.15em; color: var(--linden-ink);
  margin-top: 0.2em;
  transition: transform 0.25s var(--ease);
}
.faq details[open] .faq__toggle { transform: rotate(45deg); }
.faq summary:hover .faq__toggle { color: var(--deep); }
.faq details > div { max-width: var(--measure); padding-bottom: 1.1rem; }
.faq details > div > :last-child { margin-bottom: 0; }

/* --- Emergency notice ----------------------------------------------------- */
.akut { background: var(--sand); color: var(--deep-deeper); }
.akut .eyebrow { color: var(--deep); }
.akut h2 { color: var(--deep-deeper); }
.akut a:not(.btn) { color: var(--deep-deeper); }

/* --- Credential marks ----------------------------------------------------- */
/* A grid, not a wrapping flex row: six marks of very different aspect ratios
   wrapped one orphan onto a second line. Column counts divide six evenly, and
   each mark is capped by height and by its cell, so the long wordmarks shrink
   instead of pushing the row apart. */
.marks { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.marks li { margin: 0; }
.marks img { width: auto; height: auto; max-width: 100%; max-height: 2rem; opacity: 0.55; filter: grayscale(1); transition: opacity 0.25s var(--ease), filter 0.25s var(--ease); }
.marks li:hover img { opacity: 1; filter: grayscale(0); }
.marks img.marks__tall { max-height: 2.9rem; }
@media (min-width: 40rem) { .marks { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70rem) { .marks { grid-template-columns: repeat(6, 1fr); } }

/* --- Form ----------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; max-width: 34rem; }
/* Spam trap: off-screen rather than display:none, which some bots skip. */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--display); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.field input, .field textarea, .field select {
  font-family: var(--text); font-size: var(--step-0);
  color: var(--deep); background: rgba(27,58,56,0.05);
  border: 0; border-radius: 2px;
  padding: 0.8rem 0.95rem;
  width: 100%;
  box-shadow: inset 0 -2px 0 0 rgba(27,58,56,0.28);
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { background: rgba(27,58,56,0.08); }
.field input:focus, .field textarea:focus, .field select:focus { background: #fff; box-shadow: inset 0 -2px 0 0 var(--linden-ink); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field__req { color: var(--linden-ink); }

/* Custom select: the native caret sat almost flush against the right edge and
   could not be given breathing room, so it is replaced with a real chevron and
   the control gets padding to clear it. */
.select { position: relative; display: block; }
.select select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 3.1rem;
  text-overflow: ellipsis;
}
.select select::-ms-expand { display: none; }
.select__caret {
  position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%);
  width: 1.05em; height: 1.05em;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.2s var(--ease);
}
.select select:hover ~ .select__caret,
.select select:focus ~ .select__caret { color: var(--deep); }

/* --- Breadcrumb ----------------------------------------------------------- */
/* Two contexts: over a dark hero image, and on a light ground. The link
   colour follows the context instead of being hard-coded to sand, which was
   invisible (1.34:1) on the bio and FAQ pages. */
.crumb { font-family: var(--display); font-size: var(--step--1); letter-spacing: 0.02em; color: var(--muted); margin: 0 0 0.9rem; }
.crumb a { color: inherit; text-decoration: underline; text-decoration-color: var(--linden); text-underline-offset: 0.2em; }
.crumb a:hover { color: var(--linden-ink); }
.crumb span { opacity: 0.6; margin-inline: 0.45em; }
/* --muted on --sand is 4.39:1, just short of AA, so the sand band gets --deep */
.akut .crumb { color: var(--deep); }
.hero .crumb { color: #C6D1CC; }
.hero .crumb a { color: var(--sand); text-decoration-color: rgba(216,205,186,0.5); }
.hero .crumb a:hover { color: #fff; }

/* --- Bio page ------------------------------------------------------------- */
.bio { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 58rem) { .bio { grid-template-columns: 20rem 1fr; align-items: start; } }
.bio__media { background: var(--sand-soft); }
.bio__media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.bio__aside { display: grid; gap: 1.5rem; }
@media (min-width: 58rem) { .bio__aside { position: sticky; top: 6.5rem; } }
.bio__prose { max-width: 38rem; }
.bio__prose p { margin-bottom: 1.2em; }
.bio__prose h2 { font-size: var(--step-2); margin: 2.2em 0 0.6em; }

/* --- Footer --------------------------------------------------------------- */
.site-foot { background: #4A6B5A; color: #F1F4EF; padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.site-foot h2 { color: #fff; font-size: var(--step-2); margin-bottom: 0.9rem; }
.site-foot__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.site-foot h3 { color: #F3EEE4; font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1.1rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 0.6rem; }
.site-foot__addr { font-style: normal; line-height: 1.8; }
.site-foot__akut { margin-top: 1.5rem; font-size: 0.98rem; }
.site-foot__akut a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.site-foot__base { margin-top: clamp(2.5rem, 6vw, 4rem); font-size: 0.88rem; color: #E8EEEA; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.site-foot__base a { color: #E8EEEA; }
.site-foot__logo img { width: 220px; height: auto; margin-bottom: 1.4rem; }
.site-foot :focus-visible { outline-color: #fff; }

/* --- Motion --------------------------------------------------------------
   One orchestrated moment on load, then section headings fade up once.
   -------------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } }

/* Opt IN to the load sequence rather than out of it. These elements must be
   visible by default: animating them in from opacity:0 means any environment
   that does not run the animation renders an empty hero. */
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* The photograph settles back as the text rises over it */
  .hero__media img, .hero__video { animation: settle 2.2s var(--ease) both; }
  .hero__eyebrow { animation: rise 0.8s var(--ease) 0.15s backwards; }
  .hero h1 { animation: rise 0.85s var(--ease) 0.28s backwards; }
  .hero__lede { animation: rise 0.85s var(--ease) 0.42s backwards; }
  .hero .actions { animation: rise 0.85s var(--ease) 0.54s backwards; }
  .hero__trust, .hero__addr { animation: rise 0.85s var(--ease) 0.66s backwards; }
}

.reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal[data-seen="true"] { opacity: 1; transform: none; }

/* <details> open and close by height where the browser can animate to
   `auto`; everywhere else they snap open, as before. The clip margin keeps
   the focus ring on the links inside from being cut off at the edges. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details, .sidenav__box { interpolate-size: allow-keywords; }
    .faq details::details-content, .sidenav__box::details-content {
      block-size: 0; overflow: clip; overflow-clip-margin: 6px;
      transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
    }
    .faq details[open]::details-content, .sidenav__box[open]::details-content { block-size: auto; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-head, .mobile-nav, .hero__playpause, .hero__media, .hero__scrim, .bleed__media, .bleed__scrim { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- Topic grid ----------------------------------------------------------
   Consolidated treatment areas. On the old site each of these was its own
   90-to-400-word page, three clicks deep; folded into the hub they become
   scannable. Whitespace separates them — no cards, no rules.
   -------------------------------------------------------------------------- */
.topics { display: grid; gap: clamp(1.85rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem); }
@media (min-width: 44rem) { .topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .topics--three { grid-template-columns: repeat(3, 1fr); } }
.topics h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.topics p { font-size: 1rem; margin: 0; max-width: 26rem; }

/* Anchored section within a hub page */
.anchor { scroll-margin-top: 6.5rem; }
/* A full-bleed band lands flush under the sticky header (min-height 5rem),
   so the previous band's background never peeks through the gap. */
.band.anchor { scroll-margin-top: 5rem; }

/* --- Topic cards ----------------------------------------------------------
   A topic in the grid that has its own page. The card is the whole link; the
   underline lives on the heading so the hit area can be large without the
   whole block looking like a button.
   -------------------------------------------------------------------------- */
.topic { display: block; }
.topic--link {
  color: inherit; text-decoration: none;
  display: grid; align-content: start;
  /* The hover tint bleeds past the text, but the bleed must stay inside the
     narrowest gutter (1.15rem) and inside half the narrowest column gap
     (1.5rem), or the cards overflow the page on a phone and overlap each
     other in the grid. 0.7rem clears both. */
  padding: 1.4rem 0.7rem 1.25rem;
  margin: -1.4rem -0.7rem -1.25rem;
  border-radius: 3px;
  transition: background-color 0.25s var(--ease);
}
.topic--link:hover, .topic--link:focus-visible { background: rgb(27 58 56 / 0.05); }
.band--hi .topic--link:hover, .band--hi .topic--link:focus-visible,
.band--sand .topic--link:hover, .band--sand .topic--link:focus-visible {
  background: rgb(27 58 56 / 0.07);
}
.topic--link h3 { text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.18em; transition: text-decoration-color 0.25s var(--ease); }
.topic--link:hover h3, .topic--link:focus-visible h3 {
  text-decoration-color: currentColor;
}
.topic__go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.85rem;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.02em; color: var(--deep);
}
.topic--link:hover .topic__go .icon, .topic--link:focus-visible .topic__go .icon { transform: translateX(3px); }
.topic__go .icon { transition: transform 0.25s var(--ease); }

/* Shared rows, so a title that wraps to two lines ("Nedstämdhet och
   depression") no longer drops that card's text below its neighbours'. */
/* As with .team: the grid's row-gap becomes spacing on each card, or the
   subgrid opens the parent's gap between title, text and link. */
@supports (grid-template-rows: subgrid) {
  .topics { row-gap: 0; margin-bottom: calc(-1 * clamp(1.85rem, 3.5vw, 3rem)); }
  /* Titles sit on the bottom of their row, so a one-line title stays next to
     its own text when a neighbour's title takes two lines. */
  .topics > .topic > h3, .topiccards > .topiccard > h3 { align-self: end; }
  .topics > .topic--link {
    grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
    margin-bottom: calc(clamp(1.85rem, 3.5vw, 3rem) - 1.25rem);   /* gap, less the hover bleed */
  }
  .topics > .topic:not(.topic--link) {
    display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
    padding-bottom: clamp(1.85rem, 3.5vw, 3rem);
  }
  .topiccards { row-gap: 0; margin-bottom: -0.75rem; }
  .topiccards > .topiccard { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 0.75rem; }
}

/* "Read the whole section" link under a hub section */
.hub__more { margin: 1.8rem 0 0; }

/* --- Article layout -------------------------------------------------------
   Sidebar navigator beside the article. Below 62rem the two stack and the
   navigator becomes a collapsed <details> above the text, so a phone reader
   meets the article first rather than a list of thirteen siblings.
   -------------------------------------------------------------------------- */
.band--article { padding-block: clamp(2rem, 5vw, 3.5rem) var(--band); }
.layout-side { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) {
  .layout-side { grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
  /* The article comes first in the DOM; put the navigator back on the left. */
  .layout-side > .sidenav { grid-area: 1 / 1; }
  .layout-side > .article { grid-area: 1 / 2; }
}
/* Below that the two stack, article first, and the navigator reads as
   "the rest of this section" under the piece it belongs to. */
@media (max-width: 61.99rem) {
  .sidenav { margin-top: clamp(2rem, 5vw, 3rem); }
}

/* Inline photograph in a text column: the client's own pictures, shown
   unscrimmed. No frame or shadow, in keeping with the rest of the system. */
.photo { margin: clamp(2rem, 4vw, 2.75rem) 0 0; max-width: 44rem; }
.article .photo { margin: 0 0 2.4rem; }
.photo--flush { margin-top: 0; }
.photo img { width: 100%; height: auto; }
.photo figcaption {
  margin-top: 0.7rem;
  font-family: var(--display); font-size: var(--step--1); color: var(--muted);
}

.article { max-width: 42rem; }
.article h1 { font-size: var(--step-3); margin-bottom: 1.1rem; }
.article__lede {
  font-family: var(--display); font-size: var(--step-1); font-weight: 500;
  line-height: 1.45; color: var(--deep); margin-bottom: 2rem;
  max-width: 32rem;
}
.article__body h2 {
  font-size: var(--step-2); margin-top: 2.6rem; margin-bottom: 0.9rem;
}
.article__body h3 {
  font-size: var(--step-1); margin-top: 1.9rem; margin-bottom: 0.6rem;
}
.article__body > :first-child { margin-top: 0; }
.article__body ul, .article__body ol { margin: 0 0 1.3rem 1.15rem; }
.article__body li { margin-bottom: 0.45rem; }
.article__body .callout {
  border-left: 3px solid var(--sand);
  padding: 0.15rem 0 0.15rem 1.15rem;
  margin: 2rem 0 0; font-size: 1rem; color: var(--muted);
}
/* The numbered process list, reused inside an article without the band frame */
.steps--plain { margin-left: 0; }
.steps--plain h3 { margin-top: 0; }

/* --- Sidebar navigator ----------------------------------------------------
   The thing the old site had as a bare WordPress widget: the level-2 siblings
   of wherever you are, with the active branch's children nested under it.
   -------------------------------------------------------------------------- */
.sidenav { font-family: var(--display); }
@media (min-width: 62rem) {
  .sidenav { position: sticky; top: 6.5rem; }
}
/* Tone, not a ruled box: the lighter ground is what separates it from the
   article, as tone separates everything else on the site. */
.sidenav__box {
  border-radius: 3px;
  background: var(--paper-hi);
}
.sidenav__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; cursor: pointer; list-style: none;
  padding: 0.95rem 1.1rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--deep);
}
.sidenav__head::-webkit-details-marker { display: none; }
.sidenav__chev { transition: transform 0.25s var(--ease); }
.sidenav__box[open] .sidenav__chev { transform: rotate(180deg); }
@media (min-width: 62rem) {
  /* No point offering to collapse it when it is a permanent column */
  .sidenav__head { cursor: default; pointer-events: none; }
  .sidenav__chev { display: none; }
}
.sidenav__list { list-style: none; margin: 0; padding: 0 0 0.4rem; }
.sidenav__list a {
  display: block; padding: 0.72rem 1.1rem;
  font-size: 0.95rem; line-height: 1.35;
  color: var(--body); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.sidenav__list a:hover { background: rgb(27 58 56 / 0.06); color: var(--deep); }
.sidenav__list > li > a { font-weight: 600; color: var(--deep); }
/* The open branch is marked by the list nested under it, not by a solid block
   of --deep, which was the heaviest thing on an otherwise quiet page. Wherever
   the current page sits in the tree it gets the same linden bar. */
.sidenav__list > li.is-open > a { font-weight: 700; }
.sidenav__sub { list-style: none; margin: 0; padding: 0 0 0.55rem; }
.sidenav__sub a { padding: 0.42rem 1.1rem 0.42rem 1.6rem; font-size: 0.92rem; }
.sidenav__list a[aria-current="page"] {
  font-weight: 700; color: var(--deep);
  box-shadow: inset 3px 0 0 var(--linden);
  background: rgb(138 154 91 / 0.12);
}
.sidenav__all {
  margin: 0; padding: 0.6rem 1.1rem 1rem;
  font-size: var(--step--1);
}

/* --- Child cards on a section hub ----------------------------------------- */
.childgrid { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.childgrid__head {
  font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.4rem;
}
/* Tiles on a lighter ground rather than a ruled table: tone separates them,
   as it does everywhere else on the site. */
.topiccards { display: grid; gap: 0.75rem; }
@media (min-width: 46rem) { .topiccards { grid-template-columns: repeat(2, 1fr); } }
.topiccard {
  padding: 1.4rem 1.4rem 1.3rem;
  border-radius: 3px;
  background: var(--paper-hi);
  text-decoration: none; color: inherit;
  display: grid; align-content: start;
  transition: background-color 0.25s var(--ease);
}
.topiccard:hover, .topiccard:focus-visible { background: #fff; }
.topiccard h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.topiccard p { font-size: 0.97rem; margin: 0; color: var(--muted); }
.topiccard__go {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  color: var(--deep);
}
.topiccard:hover .topiccard__go .icon, .topiccard:focus-visible .topiccard__go .icon { transform: translateX(3px); }
.topiccard__go .icon { transition: transform 0.25s var(--ease); }

/* --- Read next ------------------------------------------------------------ */
.alsoread { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.alsoread__head {
  font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.6rem;
}

/* --- Previous / next across siblings -------------------------------------- */
/* Plain text under one hairline rather than a boxed pair. Each arrow points
   the way it goes and nudges that way on hover. */
.pnav {
  display: grid; gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgb(27 58 56 / 0.14);
}
@media (min-width: 40rem) {
  .pnav { grid-template-columns: repeat(2, 1fr); }
  .pn--next { text-align: right; justify-items: end; }
}
.pn {
  padding: 0.6rem 0.7rem; margin: -0.6rem -0.7rem;
  border-radius: 3px;
  text-decoration: none; color: inherit; display: grid; gap: 0.2rem;
  transition: background-color 0.25s var(--ease);
}
.pn:hover, .pn:focus-visible { background: rgb(27 58 56 / 0.05); }
.pn__dir {
  font-family: var(--display); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.pn__label { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--display); font-weight: 600; color: var(--deep); }
.pn__label .icon { color: var(--linden-ink); transition: transform 0.22s var(--ease); }
.pn--prev .pn__label .icon { transform: rotate(180deg); }
.pn--prev:hover .pn__label .icon, .pn--prev:focus-visible .pn__label .icon { transform: rotate(180deg) translateX(3px); }
.pn--next:hover .pn__label .icon, .pn--next:focus-visible .pn__label .icon { transform: translateX(3px); }
/* A lone "next" sits in the second column, so the pair always reads left→right */
@media (min-width: 40rem) { .pnav > .pn--next:only-child { grid-column: -2; } }


/* --- Narrow-phone header --------------------------------------------------
   Below ~27rem the logo (168px) + "Boka samtal" + the 44px burger no longer
   fit the row, and the burger pushed ~3px past the viewport — giving every
   page on the site a sliver of horizontal scroll. Let the logo shrink and
   tighten the button rather than wrapping the row.
   -------------------------------------------------------------------------- */
@media (max-width: 27rem) {
  .site-head__logo { flex: 0 1 auto; min-width: 0; }
  .site-head__logo img { width: 100%; max-width: 8.5rem; }
  .site-head .btn { padding: 0.8em 0.95em; font-size: 0.82rem; }
  .site-head__inner { gap: 0.7rem; }
}