/* ==========================================================================
   Michaela Malm , styles.css
   Palette: naturnära. Warm white paper, sand surfaces, dark earth ink,
   one muted sage accent. OKLCH throughout.
   Type: Schibsted Grotesk (display/UI) + Hanken Grotesk (body).
   Fonts are SELF-HOSTED , no request leaves the site at runtime (EU/GDPR).
   ========================================================================== */

/* --- Self-hosted variable fonts ----------------------------------------- */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/schibsted-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:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/schibsted-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:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/hanken-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:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/hanken-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;}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Surfaces. Warm white and sand, tinted to hue 80-84. Never pure white. */
  --paper:      oklch(98.4% 0.006 84);
  --paper-warm: oklch(96.6% 0.010 82);
  --sand:       oklch(94.4% 0.014 82);
  --sand-deep:  oklch(90.6% 0.017 80);

  /* Ink. Dark earthy brown-black, never pure black. */
  --ink:       oklch(25.5% 0.017 62);
  --ink-soft:  oklch(45.5% 0.014 68);
  --ink-mute:  oklch(56%   0.012 70);   /* decorative / large text only */

  /* The single accent: dämpad grön. */
  --sage:      oklch(45% 0.048 142);
  --sage-deep: oklch(42% 0.042 142);
  --sage-dark: oklch(34% 0.038 142);
  --sage-tint: oklch(95.5% 0.016 142);

  --line:       oklch(88.5% 0.010 78);
  --line-soft:  oklch(92.5% 0.008 78);
  --line-onink: oklch(52%   0.030 142);

  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Type scale , 5 steps, ratio >= 1.25, fluid on the display sizes. */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: clamp(1rem, 0.972rem + 0.14vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --fs-h3:   clamp(1.3125rem, 1.19rem + 0.6vw, 1.625rem);
  --fs-h2:   clamp(1.75rem, 1.42rem + 1.6vw, 2.75rem);
  --fs-h1:   clamp(2.375rem, 1.78rem + 2.9vw, 4.125rem);

  /* 4pt spacing scale, semantic names. */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --section:   clamp(4rem, 2.6rem + 5.6vw, 7.5rem);

  --container: 1200px;
  --gutter:    clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  --measure:   66ch;
  --bento-gap: clamp(0.75rem, 0.5rem + 0.7vw, 1.125rem);

  /* Squared. 2px on controls and 4px on panels reads sharp and deliberate
     without the hard-edge look of a literal 0. */
  --radius-ctl:  2px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   4px;
  --radius-pill: 999px;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press:  140ms;
  --dur-hover:  200ms;
  --dur-panel:  280ms;
  --dur-reveal: 620ms;

  --z-header: 60;
  --z-drawer: 90;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--sage-tint); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--space-md); top: var(--space-md);
  transform: translateY(-200%);
  background: var(--ink); color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 200; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
h3, h4 { line-height: 1.24; letter-spacing: -0.008em; }

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.eyebrow--mute { color: var(--ink-mute); }
.eyebrow--onink { color: oklch(86% 0.030 142); }

/* Unresolved facts. Deliberately visible: Michaela has to see the gaps.
   Every occurrence is listed in design-notes.md and must be gone before launch. */
.tbc {
  font-family: var(--font-display);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--sage);
  text-decoration: underline dotted 1.5px;
  text-underline-offset: 3px;
}

/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.section--sand { background: var(--sand); }
.section--warm { background: var(--paper-warm); }

.prose > * + * { margin-top: var(--space-md); }
.prose p, .prose li { max-width: var(--measure); color: var(--ink-soft); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--fs-h2); }
.prose h3 { margin-top: var(--space-xl); font-size: var(--fs-h3); color: var(--ink); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- Buttons ------------------------------------------------------------- */
/* Actions are pills; every other surface stays squared. That split is the
   hierarchy: if it is round, it does something. The primary action carries a
   circular arrow badge, so it reads as a button even at a glance. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3.25rem;
  padding: 0.4rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-hover) ease,
    border-color var(--dur-hover) ease,
    color var(--dur-hover) ease;
}
.btn:active { transform: scale(0.97); }

/* Badge sits inside the pill, so the right padding tightens to hold it. */
.btn:has(.btn__badge) { padding-right: 0.4rem; }

.btn__badge {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--sage-dark);
  transition: transform var(--dur-hover) var(--ease-out);
}
.btn__badge svg { display: block; }

.btn--primary { background: var(--sage-deep); color: var(--paper); }
.btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn--onink { background: var(--paper); color: var(--sage-dark); }
.btn--ghost {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: var(--sage);
}

/* Header action: same pill, compact, no badge. */
.btn--compact { min-height: 2.6rem; padding-inline: 1.15rem; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--sage-dark); }
  .btn--secondary:hover { border-color: var(--ink); background: var(--paper-warm); }
  .btn--onink:hover { background: var(--sand); }
  .btn:hover .btn__badge { transform: translateX(3px); }
}

.btn__arrow { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__arrow { transform: translateX(3px); }
}

.btn__meta {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  padding-left: var(--space-xs);
  border-left: 1px solid var(--line);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* --- Header -------------------------------------------------------------- */
/* No backdrop-filter anywhere here: it would make the header the containing
   block for the fixed drawer and reintroduce the off-canvas overflow bug. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 74px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.3rem + 1.4vw, 1.75rem); }
.nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.4rem;
  transition: color var(--dur-hover) ease;
}
.nav__link[aria-current="page"], .nav__link.is-current { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--sage); } }

/* --- Nav dropdown -------------------------------------------------------- */
/* The audience split repeated in the header, so it is present on every page
   and not only on the homepage. "För privatpersoner" is a plain link because
   Terapi is the only thing behind it; a menu that opens onto one item is an
   extra interaction for nothing. The chevron is what marks the difference. */
.nav__group { position: relative; display: flex; align-items: center; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-block: 0.4rem;
  transition: color var(--dur-hover) ease;
}
.nav__trigger.is-current { color: var(--ink); }
.nav__trigger svg { transition: transform var(--dur-hover) var(--ease-out); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav__trigger:hover { color: var(--sage); } }

.nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -12px oklch(25.5% 0.017 62 / 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out),
    visibility 0s linear var(--dur-hover);
}
.nav__group.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out),
    visibility 0s linear 0s;
}

.nav__menu-link {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-ctl);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.nav__menu-link[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav__menu-link:hover { background: var(--sage-tint); color: var(--sage); }
}

/* Drawer: group labels rather than accordions. Fewer taps, no state to break. */
.drawer__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xs);
}
.drawer__list li.drawer__label + li { border-top: 0; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  margin-right: -0.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-press) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.95); }
.nav-toggle__bar { display: block; width: 21px; height: 1.5px; background: var(--ink); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

/* --- Mobile drawer ------------------------------------------------------- */
/* Fixed full-viewport clip layer with overflow:hidden; the panel slides INSIDE
   it. A real element's own overflow clips reliably on every engine, unlike
   relying on html/body overflow-x to hide an off-canvas translateX(100%). */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  overflow: hidden;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-panel) var(--ease-out), visibility 0s linear var(--dur-panel);
}
.drawer.is-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity var(--dur-panel) var(--ease-out), visibility 0s linear 0s;
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(380px, 90vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-2xl);
  background: var(--paper);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-panel) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__close {
  align-self: flex-end;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-press) var(--ease-out);
}
.drawer__close:active { transform: scale(0.95); }

.drawer__list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.drawer__list li + li { border-top: 1px solid var(--line-soft); }
.drawer__link {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  padding-block: var(--space-md);
  text-decoration: none;
  color: var(--ink);
}
.drawer__link[aria-current="page"] { color: var(--sage); }

/* --- Hero: bento ---------------------------------------------------------- */
/* Four tiles of deliberately unequal size. It carries the whole top of the page:
   who she is, her face, and the two routes. The separate doors section it
   replaces is gone, so the page never says the same thing twice.
   Sizes are driven by content weight, not by a tidy grid: the intro is widest
   because it holds the name, the photograph is tallest because Michaela asked
   for it to take real space, and the two route tiles are the smallest because
   they are signposts rather than destinations. */
.hero { background: var(--paper-warm); padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(3rem, 2rem + 4vw, 5rem); }

.bento { display: grid; gap: var(--bento-gap); }

.tile {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 0.85rem + 1.5vw, 2rem);
}

/* DOM order is intro, Terapi, Uppdrag, photo, which is the order a phone
   should read them in: the two audience routes before the portrait, so the
   split is above the fold rather than 300px under it. Desktop places all four
   by explicit grid-column/grid-row below, so its layout is unaffected by the
   source order and needs no `order` override. */
@media (min-width: 900px) {
  .bento {
    grid-template-columns: 1fr 1fr 1.25fr;
    grid-template-rows: auto auto;
    align-items: stretch;
  }
  .bento__intro { grid-column: 1 / span 2; grid-row: 1; }
  .bento__terapi { grid-column: 1; grid-row: 2; }
  .bento__uppdrag { grid-column: 2; grid-row: 2; }
  .bento__photo { grid-column: 3; grid-row: 1 / span 2; }
}

/* Intro tile */
.bento__intro { display: flex; flex-direction: column; justify-content: center; }
.hero__credentials {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-sm);
}
.hero__credentials span { white-space: nowrap; }
.hero__credentials span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-left: var(--space-sm);
  margin-bottom: 0.22em;
  border-radius: 50%;
  background: var(--sage);
}
.hero__title { margin-top: var(--space-md); font-size: var(--fs-h1); }
.hero__lead { margin-top: var(--space-md); max-width: 46ch; }
.hero__actions { margin-top: var(--space-lg); }

/* Photo tile */
.tile--photo { padding: 0; border: 0; overflow: hidden; }
.tile--photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 46vw, 420px);
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
}
@media (min-width: 900px) {
  .tile--photo img { min-height: 0; }
}

/* Route tiles */
.tile--route { display: flex; flex-direction: column; text-decoration: none; transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-hover) ease; }
.tile--route:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) {
  .tile--route:hover { border-color: var(--line); }
  .tile--route:hover .btn__arrow { transform: translateX(3px); }
}

.tile--accent { background: var(--sage-deep); border-color: transparent; color: var(--paper); }
.tile--accent .route__text { color: oklch(90% 0.018 142); }

.route__title { margin-top: var(--space-sm); font-size: var(--fs-h3); }
/* Optical correction, not a different intent: the same weight reads thinner in
   light type on a dark ground, so the on-dark headings sit one step up to match
   the 400 used everywhere else. */
.tile--accent .route__title { font-weight: 500; }
.route__text { margin-top: var(--space-xs); color: var(--ink-soft); font-size: var(--fs-sm); }
.route__cta {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
}

/* Uppdrag tile: three signposts on hairlines */
.bento__uppdrag { display: flex; flex-direction: column; }
.route-list {
  margin-top: var(--space-md);
  border-top: 1px solid var(--line);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.route-link {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--font-display); font-weight: 500;
  transition: color var(--dur-hover) ease;
}
.route-link span:first-child { line-height: 1.25; }
.route-link .btn__arrow { color: var(--ink-mute); transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .route-link:hover { color: var(--sage); }
  .route-link:hover .btn__arrow { transform: translateX(3px); color: var(--sage); }
}

/* --- Homepage "om mig" band ---------------------------------------------- */
/* Text-led on purpose: the hero already carries her photograph, and a second
   portrait on the same page would be repetition. */
.about { display: grid; gap: clamp(1.5rem, 0.9rem + 2.4vw, 3.5rem); }
@media (min-width: 880px) { .about { grid-template-columns: 0.85fr 1.15fr; } }
.about__title { margin-top: var(--space-sm); font-size: var(--fs-h2); max-width: 14ch; }
.about__more { margin-top: var(--space-lg); }
.about__body > * + * { margin-top: var(--space-md); }
.about__body p { color: var(--ink-soft); max-width: 56ch; }

/* --- Split feature (image + text, alternating) --------------------------- */
.split { display: grid; gap: clamp(2rem, 1.2rem + 3.4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 0.9fr 1.1fr; }
  .split--flip .split__media { order: 2; }
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.split__title { margin-top: var(--space-md); font-size: var(--fs-h2); }
.split__body { margin-top: var(--space-lg); }
.split__body > * + * { margin-top: var(--space-md); }
.split__body p { color: var(--ink-soft); max-width: 52ch; }

/* --- Credential chips ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; }
.chip {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink-soft);
  background: var(--paper);
}

/* --- Page header (interior pages) --------------------------------------- */
.page-head { padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem) 0; }
.page-head__title { margin-top: var(--space-md); font-size: var(--fs-h1); max-width: 18ch; }
.page-head__lead { margin-top: var(--space-lg); }
.page-head__media { margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.page-head__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* --- Definition rows (services, formats, what's included) --------------- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  gap: var(--space-2xs) var(--space-2xl);
  padding-block: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .row { grid-template-columns: minmax(200px, 0.42fr) 1fr; gap: var(--space-2xl); }
}
.row__term { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -0.008em; }
.row__desc { color: var(--ink-soft); max-width: 58ch; }

/* --- Numbered steps ------------------------------------------------------ */
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-xl); counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); } }
.step { counter-increment: step; }
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sage);
  display: block;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step__title { margin-top: var(--space-xs); font-size: var(--fs-h3); }
.step__text { margin-top: var(--space-xs); color: var(--ink-soft); max-width: 46ch; }

/* --- Course list --------------------------------------------------------- */
.courses { display: grid; gap: var(--space-lg); }
@media (min-width: 800px) { .courses { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); } }
.course {
  padding: var(--space-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.course--lead { background: var(--sand); border-color: transparent; }
@media (min-width: 800px) { .course--lead { grid-column: span 2; } }
.course__title { font-size: var(--fs-h3); }
.course__meta { margin-top: var(--space-xs); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.course__text { margin-top: var(--space-sm); color: var(--ink-soft); max-width: 58ch; }

/* Lead course: two columns so a long syllabus uses the panel's full width
   instead of stranding half of it. */
.course__split { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); }
@media (min-width: 860px) { .course__split { grid-template-columns: 1fr 1fr; } }
.course__foot { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.course__foot .course__text { max-width: 78ch; }

.tick-list { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
.tick-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}

/* --- Quiet note / aside -------------------------------------------------- */
.note {
  background: var(--sage-tint);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.note p { color: var(--ink-soft); max-width: 58ch; }
.note p + p { margin-top: var(--space-sm); }
.note__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); margin-bottom: var(--space-xs); }

/* --- Podcast strip ------------------------------------------------------- */
.pod {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  background: var(--sage-dark);
  color: var(--paper);
  border-radius: var(--radius-lg);
}
@media (min-width: 720px) { .pod { grid-template-columns: auto 1fr auto; gap: var(--space-xl); } }
.pod__mark {
  width: clamp(96px, 8vw, 124px);
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line-onink);
  flex: none;
}
.pod__mark img { width: 100%; height: 100%; object-fit: cover; }
.pod__links { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.pod__links .pod__alt {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: oklch(86% 0.024 142);
  text-decoration-color: oklch(60% 0.030 142);
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .pod__links .pod__alt:hover { color: var(--paper); } }
.pod__title { font-size: var(--fs-h3); font-weight: 500; }
.pod__text { margin-top: var(--space-xs); color: oklch(89% 0.018 142); max-width: 52ch; }

/* --- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.8fr 1.2fr; } }

.contact-detail { border-top: 1px solid var(--line); padding-block: var(--space-md); }
.contact-detail__label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.contact-detail__value { margin-top: var(--space-2xs); font-size: var(--fs-lead); }
.contact-detail__value a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .contact-detail__value a:hover { color: var(--sage); } }

/* Form. Bare markup , the deploy injects action/method/Turnstile. */
.form { display: grid; gap: var(--space-lg); }
.field {
  display: grid;
  gap: var(--space-xs);
  /* Rows must not stretch. Side by side, a field carrying a "Valfritt" hint has
     three rows and its neighbour two; with the default stretch the shorter
     field grows to match, which made the select 14px taller than the input
     beside it and pushed it 15px down. */
  align-content: start;
}
.field__label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-mute); }
.field__control {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.field__control:focus { border-color: var(--sage); outline-offset: 1px; }
textarea.field__control { min-height: 150px; resize: vertical; }
select.field__control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.75rem; }
.field-row { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* --- Form success ------------------------------------------------------- */
/* The deploy-injected handler hides the form and unhides this on a 200. */
.form-success[hidden] { display: none; }
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--sage-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.form-success__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
.form-success__icon svg { width: 1.35rem; height: 1.35rem; }
.form-success h2 { font-size: var(--fs-h3); }
.form-success p { color: var(--ink-soft); max-width: 46ch; }

/* --- CTA band ------------------------------------------------------------ */
.cta { background: var(--sand); }
.cta__inner { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 820px) { .cta__inner { grid-template-columns: 1fr auto; gap: var(--space-2xl); } }
.cta__title { font-size: var(--fs-h2); max-width: 20ch; }
.cta__text { margin-top: var(--space-sm); color: var(--ink-soft); max-width: 48ch; }

/* --- Footer -------------------------------------------------------------- */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: var(--space-3xl) var(--space-xl); }
.footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-2xl); } }
.footer__title { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--space-md); }
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.footer__list a { font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__list a:hover { color: var(--sage); } }
.footer__blurb { color: var(--ink-soft); font-size: var(--fs-sm); max-width: 38ch; margin-top: var(--space-sm); }
.footer__base {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  font-size: var(--fs-xs); color: var(--ink-mute);
}
.footer__base a { color: var(--ink-mute); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__base a:hover { color: var(--sage); } }

/* --- Legal pages (deploy-injected content) ------------------------------- */
.legal-page { padding-block: var(--section); }
.legal-page__inner { max-width: 760px; margin-inline: auto; padding-inline: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem); }
.legal-page__title { font-size: var(--fs-h1); }
.legal-page__last-updated { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--ink-mute); }
.legal-page__body { margin-top: var(--space-2xl); }
.legal-page__body > * + * { margin-top: var(--space-md); }
.legal-page__body p, .legal-page__body li { color: var(--ink-soft); }
.legal-page__body ul, .legal-page__body ol { padding-left: 1.25rem; display: grid; gap: var(--space-xs); }
.legal-page__section-heading { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; color: var(--ink); margin-top: var(--space-2xl); }
.legal-page__body a { color: var(--sage); text-underline-offset: 2px; }

/* --- Reveal on scroll ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn__arrow, .route-link .btn__arrow { transition: none; }
}