:root{
    --paper:#F6F0E3;
    --paper-2:#EFE6D3;
    --paper-3:#E8DBC3;
    --ink:#2E251C;
    --ink-soft:#6B5F51;
    --ink-faint:#8C8071;
    --line:rgba(46,37,28,0.12);
    --line-soft:rgba(46,37,28,0.07);

    --blue:#C7D6DC;
    --blue-ink:#3B4A4E; /* = footer --footer-bg, exact match: dusty blue, clarity/calm accent */
    --sage:#B9C0AC;
    --blush:#E3C9C4;
    --yellow:#DCC383;
    --blush-ink:#A9776D;
    --sage-ink:#5C6B52;
    --yellow-ink:#8B6A34;

    --serif: 'Newsreader', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --dur: 600ms;
    --dur-fast: 260ms;
    --ease: cubic-bezier(0.19, 1, 0.22, 1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed; inset:0; pointer-events:none; z-index:9999;
    opacity:0.025; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}

  .wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }

  /* Single canonical style for every all-caps tracking label on the site —
     section eyebrows, contact/practical field labels, blog category tags,
     footer column headings. One size, one weight, one letter-spacing. */
  .label-caps{
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:1.6px !important;
    text-transform:uppercase;
  }
  .eyebrow{
    font-family:var(--sans);
    color:var(--ink-faint);
  }
  h1,h2,h3{
    font-family:var(--serif);
    font-weight:400;
    line-height:1.14;
    letter-spacing:-0.005em;
    color:var(--ink);
    /* Newsreader is a variable font with an optical-size axis; left on
       "auto" it picks a highly flared display cut at large headline sizes
       (e.g. the hero "E"), which reads as an odd/broken glyph. Locking it
       to a lower value keeps letterforms closer to the text cut, sturdier
       and more legible at any size. */
    font-optical-sizing:none;
    font-variation-settings:'opsz' 20;
  }
  em, .italic{ font-style:italic; font-family:var(--serif); }
  h1 em, h2 em{ color:var(--sage-ink); font-weight:300; }

  p{ line-height:1.8; color:var(--ink-soft); font-size:16px; }

  .reveal{
    opacity:0;
    transform:translateY(10px);
    transition:opacity 1100ms var(--ease), transform 1100ms var(--ease);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    html{scroll-behavior:auto;}
  }

  /* ---------- photography placeholders ----------
     Deliberately neutral "image coming soon" cards rather than a photo
     illusion: flat paper-toned field, the brand mark centred faintly, and
     a small caption naming what will go here. Reads as intentional. */
  .photo{
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper-3);
    border:1px solid var(--line);
  }
  .photo.tone-b{ background:#E3D6C0; }
  .photo.tone-c{ background:#DED2BC; }
  .photo img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .photo::after{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
    opacity:0.18;
  }
  .photo-mark{
    display:block;
    width:15%; min-width:34px; max-width:64px;
    height:auto; aspect-ratio:1774/887;
    opacity:0.28;
    background-color:var(--ink-faint);
    -webkit-mask-image:url('newlogo.png'); mask-image:url('newlogo.png');
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
  }
  .photo .tag{
    position:absolute; left:18px; bottom:16px;
    font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .photo .tag.right{ left:auto; right:18px; text-align:right; }
  .photo-frame{ transition:transform 1400ms var(--ease); }
  .photo-frame:hover .photo{ transform:scale(1.015); }

  /* brand mark — the supplied logo artwork, used as a CSS mask so it takes
     a flat, crisp fill from `color` in any context — no shadow, glow or
     emboss effect. Dark ink on light backgrounds; a flat brand colour on
     dark backgrounds. */
  .brand-mark{
    display:block;
    width:32px; height:auto;
    aspect-ratio:1774/887;
    background-color:currentColor;
    -webkit-mask-image:url('newlogo.png'); mask-image:url('newlogo.png');
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    color:var(--ink-faint);
  }
  .brand-mark.lg{ width:120px; }
  .moment-panel .brand-mark.lg{ color:var(--ink-faint); }

  /* ================= HEADER ================= */
  header{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(250,247,241,0);
    transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(250,247,241,0.92);
    backdrop-filter:blur(14px);
    border-color:var(--line-soft);
  }
  /* Kontakt page: dark/pink content sits right under the header from the
     start, so keep the nav permanently beige instead of only on scroll. */
  body.kontakt-page header{
    background:rgba(250,247,241,0.96);
    backdrop-filter:blur(14px);
    border-color:var(--line-soft);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:28px 40px;
    max-width:1280px; margin:0 auto;
  }
  .nav-left{ display:flex; align-items:center; gap:14px; }
  /* Optical nudge: the mark's solid shape reads slightly lower than the
     adjacent text's cap-height even though both boxes are centred. */
  .nav-left .brand-mark{ transform:translateY(-1.5px); }
  .logo-word{
    font-family:var(--serif);
    font-size:17px;
    letter-spacing:0.01em;
    font-weight:400;
  }
  .nav-links{
    display:flex; gap:42px; align-items:center; list-style:none;
  }
  /* Without this, li (a flex item whose display is list-item) reports a
     content height slightly shorter than its own <a>'s rendered box,
     throwing the link's optical centre off from the rest of the nav. */
  .nav-links li{ display:flex; align-items:center; }
  .nav-links a{
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    position:relative; padding:5px 0;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0;
    height:1px; background:var(--sage-ink);
    transition:right var(--dur-fast) var(--ease);
  }
  .nav-links a:hover{ color:var(--sage-ink); }
  .nav-links a:hover::after{ right:0; }
  .nav-links a.is-active::after{ right:0; background:var(--blush-ink); }

  .cta-text{
    display:inline-flex; align-items:center;
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
    padding:9px 18px;
    color:var(--sage-ink);
    border:1px solid var(--sage-ink);
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .cta-text:hover{ background:var(--sage-ink); color:var(--paper); }

  .burger{ display:none; }

  /* ================= HERO =================
     One composition at every breakpoint: the photo is an absolute
     full-bleed background, the text sits over it in an absolute overlay.
     Only the viewport height, image crop (object-position) and type
     scale change between breakpoints — never the structure. */
  .hero{
    position:relative;
    height:96vh;
    min-height:620px;
    overflow:hidden;
  }
  .hero-photo{
    position:absolute; inset:0;
    background:#EDE7DA;
  }
  .hero-img{
    width:100%; height:100%;
    object-fit:cover; object-position:58% 42%;
    display:block;
  }
  .hero-photo::after{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
    mix-blend-mode:overlay; opacity:0.3; pointer-events:none;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:flex-start;
    padding:88px 40px 0 clamp(24px, 6vw, 96px);
  }
  .hero-text{ max-width:640px; }
  .hero .hero-headline{
    font-size:clamp(40px, 4.4vw, 58px);
    font-weight:300;
    margin-bottom:28px;
    max-width:20ch;
  }
  .hero p{
    font-size:18.5px;
    line-height:1.5;
    margin-bottom:38px;
  }
  .hero-cta-row{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
  .hero-caption{
    position:absolute; right:56px; bottom:34px;
    font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:rgba(255,255,255,0.8);
    text-shadow:0 1px 6px rgba(0,0,0,0.28);
  }

  /* iPad landscape */
  @media(max-width:1024px){
    .hero{ height:90vh; min-height:600px; }
    .hero-img{ object-position:65% 40%; }
    .hero-overlay{ padding:84px 32px 0 clamp(24px, 5vw, 64px); }
    .hero-text{ max-width:560px; }
    .hero .hero-headline{ font-size:clamp(34px, 5vw, 46px); margin-bottom:24px; }
    .hero p{ font-size:16.5px; margin-bottom:30px; }
  }

  /* iPad portrait */
  @media(max-width:820px){
    .hero{ height:92vh; min-height:580px; }
    .hero-img{ object-position:72% 38%; }
    .hero-overlay{ padding:80px 28px 0 clamp(20px, 5vw, 48px); }
    .hero-text{ max-width:520px; }
    .hero .hero-headline{ font-size:clamp(30px, 5.6vw, 40px); margin-bottom:20px; }
    .hero p{ font-size:16px; margin-bottom:26px; }
    .hero-cta-row{ gap:22px; }
    .hero-caption{ right:36px; bottom:28px; }
  }

  /* mobile */
  @media(max-width:600px){
    .hero{ height:96svh; height:96vh; min-height:560px; }
    .hero-img{ object-position:80% 34%; }
    .hero-overlay{ align-items:flex-start; padding:96px 20px 0 22px; }
    .hero-text{ max-width:none; width:calc(100vw - 44px); }
    .hero .hero-headline{ font-size:clamp(29px, 8.4vw, 34px); margin-bottom:16px; }
    .hero p{ font-size:13px; line-height:1.5; margin-bottom:24px; }
    .hero-cta-row{ gap:16px; row-gap:12px; }
    .hero-caption{ right:26px; bottom:24px; font-size:8.5px; }
  }
  @media(max-width:360px){
    .hero p{ font-size:12px; }
    .hero-text{ max-width:none; }
    .hero .hero-headline{ font-size:clamp(26px, 8.6vw, 30px); }
    .hero p{ font-size:14px; max-width:34ch; }
  }

  /* ================= PHILOSOPHY (01) =================
     Short editorial continuation of the hero — statement + 2-3 sentences,
     nothing more. */
  .recognition{
    padding:140px 0 120px;
    background:var(--paper-2);
  }
  /* Grid instead of flex so the divider column sits at the row's true
     geometric centre — flanked by two equal 1fr tracks — regardless of how
     much text either side holds. */
  .recognition-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:start;
  }
  .recognition-head{ padding-right:clamp(40px, 6vw, 90px); }
  .recognition-head h2{
    font-size:clamp(34px, 4.6vw, 56px);
    line-height:1.2;
    font-weight:300;
    letter-spacing:-0.01em;
  }
  /* Small optical-alignment cushion: an italic "g" swash has negative left
     bearing and can read as clipped flush against the block's edge. */
  .recognition-head h2 em{ font-weight:300; color:var(--sage-ink); padding-left:0.03em; }

  /* Faint brand-mark divider between the heading and the supporting text —
     a hairline / logo / hairline column that stretches to the row's own
     height. Extremely quiet: pale ink, no competing with the copy. */
  .recognition-divider{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    min-height:120px;
  }
  .recognition-divider .divider-line{
    flex:1 1 auto;
    width:1px;
    min-height:20px;
    background:var(--ink-faint);
    opacity:0.16;
  }
  .recognition-divider .brand-mark{
    width:18px;
    flex:0 0 auto;
    color:var(--ink-faint);
    opacity:0.34;
  }
  .recognition-body{
    padding-left:clamp(40px, 6vw, 90px);
    margin-top:14px;
  }
  .recognition-body p{
    font-size:15.5px;
    line-height:1.75;
    font-weight:400;
    max-width:44ch;
  }
  .recognition-body p + p{ margin-top:16px; }
  @media(max-width:900px){
    .recognition-grid{ grid-template-columns:1fr; }
    .recognition-head{ padding-right:0; }
    .recognition-body{ padding-left:0; margin-top:72px; }
    .recognition-divider{ display:none; }
  }
  @media(max-width:760px){
    .recognition-grid{ gap:22px; }
    .recognition-body{ margin-top:6px; max-width:38ch; }
    .recognition-body p{ max-width:none; }
  }

  /* ================= SHARED PHOTO + TEXT SPLIT =================
     One reusable asymmetric pattern (image one side, text the other)
     used by both "Om Christine" and "Min tilgang". */
  .split{ padding:90px 0; }
  .split-grid{
    display:grid;
    grid-template-columns:0.82fr 1.18fr;
    gap:6vw;
    align-items:center;
  }
  .split-grid.reverse{ grid-template-columns:1.18fr 0.82fr; }
  .split-grid.reverse .split-image{ order:2; }
  .split-image .photo{ aspect-ratio:4/5.1; }
  .split-content .eyebrow{ margin-bottom:22px; }
  .split-content h2{
    font-size:clamp(27px, 2.8vw, 38px);
    font-weight:300;
    max-width:14ch;
    margin-bottom:22px;
  }
  .split-content p{
    font-size:16.5px;
    max-width:42ch;
    margin-bottom:18px;
  }
  .split-content .signoff{
    font-family:var(--serif);
    font-style:italic;
    font-size:18px;
    color:var(--ink);
    margin:26px 0 30px;
  }
  .link-arrow{
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
    display:inline-flex; align-items:center; gap:8px;
    color:var(--sage-ink);
    border-bottom:1px solid var(--sage-ink);
    padding-bottom:5px;
    transition:gap var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .link-arrow:hover{ gap:13px; }
  @media(max-width:760px){
    .split{ padding:70px 0; }
    .split-grid, .split-grid.reverse{ grid-template-columns:1fr; gap:32px; }
    .split-grid.reverse .split-image{ order:0; }
  }

  /* ---- Min tilgang: beige, blush accent (warmth / personal approach) ---- */
  #min-tilgang .link-arrow{ color:var(--blush-ink); border-bottom-color:var(--blush-ink); }

  /* Om Christine: back to the standard beige page background. */

  /* ================= OFFERINGS (02) — magazine contents list ================= */
  .therapy{ padding:96px 0 100px; }
  .therapy-grid{
    display:grid;
    grid-template-columns:1.4fr 0.6fr;
    gap:6vw;
    align-items:center;
  }
  .therapy-image{ order:2; }
  .therapy-image .photo{ aspect-ratio:3/4.3; }
  .therapy-head{ margin-bottom:40px; }
  .therapy-head .eyebrow{ margin-bottom:20px; }
  .therapy-head h2{
    font-size:clamp(28px, 3vw, 36px);
    font-weight:300;
    line-height:1.2;
  }
  .therapy-list{ list-style:none; max-width:560px; }
  .therapy-item{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:20px;
    align-items:center;
    padding:20px 0;
    border-top:1px solid var(--line-soft);
    transition:padding-left var(--dur-fast) var(--ease);
  }
  .therapy-item:last-child{ border-bottom:1px solid var(--line-soft); }
  .therapy-item:hover{ padding-left:10px; }
  .therapy-bullet.brand-mark{
    width:16px;
    color:var(--sage-ink);
  }
  .therapy-name{
    font-family:var(--serif); font-size:19px; line-height:1.4; color:var(--ink);
  }
  @media(max-width:760px){
    .therapy-grid{ grid-template-columns:1fr; }
    .therapy-image{ display:none; }
  }

  /* Editorial interlude, not a major section — a short cinematic pause. */
  .moment{
    padding:32px 0;
  }
  .moment-panel{
    background:#2E3A3E;
    padding:64px 56px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .moment-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .moment-panel::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,24,22,0.34) 0%, rgba(20,24,22,0.46) 100%);
    z-index:1; pointer-events:none;
  }
  .moment-inner{ position:relative; z-index:2; max-width:600px; }
  .moment-inner .brand-mark.lg{ margin:0 auto 24px; }
  .moment-panel .brand-mark.lg{ color:var(--paper); }
  .moment h2{
    font-size:clamp(22px, 2.6vw, 32px);
    line-height:1.4;
    font-weight:300;
    font-style:italic;
    color:var(--paper);
  }
  .moment-sub{
    margin-top:16px;
    font-size:14.5px;
    color:rgba(250,247,241,0.82);
    max-width:38ch;
    margin-left:auto; margin-right:auto;
  }
  @media(max-width:760px){
    .moment-panel{ padding:72px 28px; }
  }

  /* ================= PSYKOTERAPI / COACHING (05) ================= */
  .offer{ padding:88px 0; background:var(--sage-ink); }
  .offer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9vw;
  }
  .offer-item{ color:var(--paper); }
  .offer-item .eyebrow{ margin-bottom:18px; color:rgba(250,247,241,0.72); }
  .offer-item h3{
    font-size:clamp(22px, 2.2vw, 27px);
    font-weight:300;
    margin-bottom:16px;
    color:var(--paper);
  }
  .offer-item p{ font-size:15.5px; margin-bottom:22px; color:rgba(250,247,241,0.86); }
  .offer-item .link-arrow{ color:var(--paper); border-bottom:1px solid var(--paper); }
  .offer-note{
    display:block;
    margin-top:-10px;
    margin-bottom:18px;
    font-size:11.5px;
    color:rgba(250,247,241,0.6);
    font-style:italic;
  }
  @media(max-width:820px){
    .offer{ padding:64px 0; }
    .offer-grid{ grid-template-columns:1fr; gap:56px; }
  }

  /* ================= FRA BLOGGEN (07) ================= */
  /* Fra bloggen: page-default cream ground — an editorial magazine strip,
     not another full-weight coloured module. */
  .journal{ padding:96px 0 88px; background:var(--paper-2); }
  .journal-head{
    margin-bottom:44px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  }
  .journal-head .eyebrow{ color:var(--ink-faint); }
  .journal-nav{ display:flex; gap:10px; flex:none; }
  .journal-nav-btn{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    font-family:var(--sans); font-size:20px; line-height:1;
    color:var(--ink-soft);
    background:none;
    border:1px solid var(--line);
    cursor:pointer;
    transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .journal-nav-btn:hover:not(:disabled){ border-color:var(--sage-ink); color:var(--sage-ink); }
  .journal-nav-btn:disabled{ opacity:0.3; cursor:default; }
  .journal-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:5vw;
  }
  /* Fra bloggen on the homepage: same cards, but a swipeable/scrollable
     strip (scroll-snap, no JS required for touch) instead of a fixed grid,
     since the list keeps growing as new posts are published. */
  .journal-carousel{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .journal-carousel::-webkit-scrollbar{ display:none; }
  .journal-carousel .journal-item{
    flex:0 0 calc((100% - 2*5vw)/3);
    min-width:0;
    scroll-snap-align:start;
  }
  .journal-item{ display:block; }
  .journal-item .photo{ aspect-ratio:4/3; margin-bottom:20px; }
  .journal-cat{
    font-family:var(--sans);
    color:var(--ink-faint); margin-bottom:10px;
  }
  .journal-item h3{
    font-size:19px; font-weight:400; line-height:1.35;
    max-width:26ch;
    color:var(--ink);
  }
  .journal-see-all{ display:inline-flex; margin-top:48px; }
  @media(max-width:820px){
    .journal{ padding:72px 0 76px; }
    .journal-grid{ grid-template-columns:1fr; gap:44px; }
    .journal-carousel .journal-item{ flex:0 0 100%; }
    .journal-see-all{ margin-top:40px; }
  }

  /* ================= BLOG OVERVIEW (/blog/) =================
     Same header/footer/.wrap/typography as every other page. Cards reuse
     .journal-item exactly, so a post looks identical whether it appears
     here, in "Fra bloggen" on the homepage, or in "Læs også". */
  .sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .blog-hero{ padding:clamp(140px, 16vw, 172px) 0 48px; }
  .blog-hero h1{
    font-size:clamp(30px, 3.6vw, 44px);
    font-weight:300;
    line-height:1.2;
    max-width:18ch;
    margin-top:14px;
  }
  .blog-hero-sub{
    font-size:16.5px;
    line-height:1.7;
    color:var(--ink-soft);
    max-width:56ch;
    margin-top:20px;
  }
  .blog-controls{
    padding:28px 0 32px;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .blog-controls .wrap{
    display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px;
  }
  .blog-search{ flex:0 1 320px; }
  .blog-search-input{
    display:block; width:100%;
    font-family:var(--sans); font-size:15px;
    color:var(--ink);
    background:none;
    border:none; border-bottom:1px solid var(--line);
    padding:8px 0;
    transition:border-color var(--dur-fast) var(--ease);
  }
  .blog-search-input::placeholder{ color:var(--ink-faint); }
  .blog-search-input:focus{ outline:none; border-bottom-color:var(--sage-ink); }
  .blog-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
  .blog-chip{
    font-family:var(--sans);
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--ink-soft);
    background:none; border:none;
    padding:6px 0;
    cursor:pointer;
    position:relative;
  }
  .blog-chip::after{
    content:""; position:absolute; left:0; right:100%; bottom:0;
    height:1px; background:var(--sage-ink);
    transition:right var(--dur-fast) var(--ease);
  }
  .blog-chip:hover{ color:var(--sage-ink); }
  .blog-chip:hover::after{ right:0; }
  .blog-chip.is-active{ color:var(--sage-ink); }
  .blog-chip.is-active::after{ right:0; }
  .blog-result-count{
    width:100%;
    font-size:12px; color:var(--ink-faint);
  }
  .blog-list{ padding:56px 0 120px; }
  .blog-card-excerpt{
    font-size:14px; line-height:1.65;
    color:var(--ink-soft);
    max-width:40ch;
    margin-top:8px;
  }
  .blog-card-meta{
    font-family:var(--sans);
    font-size:12px; color:var(--ink-faint);
    margin-top:10px;
  }
  .blog-card.is-hidden{ display:none; }
  .blog-empty{ padding:24px 0 8px; }
  .blog-empty p{ color:var(--ink-soft); margin-bottom:14px; }
  @media(max-width:700px){
    .blog-hero{ padding:120px 0 40px; }
    .blog-controls{ padding:24px 0 28px; }
    .blog-search{ flex-basis:100%; }
    .blog-list{ padding:40px 0 90px; }
  }

  /* ================= PRACTICAL ================= */
  /* Faint standalone brand-mark sitting quietly in the negative space
     between "Fra bloggen" and "Praktisk" — a brief, unexpected pause
     before the page moves from editorial content into practical info. */
  .section-mark{
    display:flex;
    justify-content:center;
    padding:8px 0 56px;
  }
  .section-mark .brand-mark{
    width:18px;
    color:var(--ink-faint);
    opacity:0.3;
  }
  .practical{ padding:130px 0; }
  .practical-head{ max-width:520px; margin-bottom:64px; }
  .practical-head .eyebrow{ margin-bottom:22px; }
  .practical-head h2{ font-size:clamp(27px, 2.8vw, 38px); font-weight:300; }

  .practical-grid{
    max-width:860px;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line-soft);
    border-left:1px solid var(--line-soft);
  }
  .practical-cell{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:24px;
    padding:28px 32px;
    border-bottom:1px solid var(--line-soft);
    border-right:1px solid var(--line-soft);
  }
  .practical-cell.span-2{ grid-column:1 / -1; grid-template-columns:120px 1fr; }
  .practical-cell .label{
    color:var(--ink-faint);
    padding-top:4px;
  }
  .practical-cell .val{
    font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:4px;
  }
  .practical-cell .sub{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
  @media(max-width:640px){
    .practical-grid{ grid-template-columns:1fr; }
    .practical-cell, .practical-cell.span-2{ grid-template-columns:100px 1fr; gap:16px; padding:22px 20px; }
  }
  /* Reused inside the Psykoterapi article body (no dedicated .practical
     section wrapper there, so it needs its own top clearance). */
  .practical-grid--article{ max-width:820px; }

  /* ================= CONTACT ================= */
  /* Full dusty-blue background (clarity / calm, practical closing section) —
     flows straight into the footer, which already uses the same colour.
     Follows the blog strip directly now, so it needs a clear beat of its
     own rather than a token top padding. */
  .contact{
    padding:100px 0 120px;
    background:var(--blue-ink);
    color:rgba(250,247,241,0.86);
    position:relative;
  }
  /* Standalone /kontakt/ page: beige like the rest of the site — the dark
     treatment now lives only in the booking panel itself, below. This is
     also the first section under the fixed header, so it needs its own
     top clearance instead of the in-page value. */
  .contact-page{ padding-top:160px; background:var(--paper); color:var(--ink-soft); }
  .contact-page .contact-grid > div > .eyebrow{ color:var(--ink-faint); }
  .contact-page .contact-grid > div > h1{ color:var(--ink); }
  .contact-page .contact-grid > div > .hero-headline{ color:var(--ink); }
  .contact-page .contact-grid > div > p{ color:var(--ink-soft); }
  .contact-page .contact-grid > div > .btn-outline{ color:var(--sage-ink); border-color:var(--sage-ink); }
  .contact-page .contact-grid > div > .btn-outline:hover{ background:var(--sage-ink); color:var(--paper); }
  .contact-page .contact-details .eyebrow{ color:var(--ink-faint); }
  .contact-page .contact-details .value{ color:var(--ink); }
  .contact-page .contact-details .row{ border-top-color:var(--line-soft); }
  .contact-page .contact-details .row:last-child{ border-bottom-color:var(--line-soft); }

  /* Anmod om en tid: its own pink panel, sitting on the now-beige page. */
  .contact-page .booking{
    background:var(--blush-ink);
    padding:48px 44px 56px;
  }
  @media(max-width:760px){
    .contact-page{ padding-top:130px; }
    .contact-page .booking{ padding:36px 24px 44px; }
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:8vw;
  }
  .contact .hero-headline{
    font-size:clamp(22px, 2.6vw, 38px);
    font-weight:300;
    white-space:nowrap;
    margin-bottom:26px;
    color:var(--paper);
  }
  .contact .eyebrow{ color:rgba(250,247,241,0.72); }
  .contact p{ font-size:16.5px; max-width:40ch; margin-bottom:36px; color:rgba(250,247,241,0.86); }
  /* Manual two-line break — needs more room than the default 40ch so the
     <br> controls the break, not auto-wrap. Removed below 600px, where the
     column is too narrow for the first line to fit unbroken anyway. */
  .contact p.contact-p--2l{ max-width:64ch; }
  @media(max-width:600px){
    .contact p.contact-p--2l br{ display:none; }
  }
  .contact .btn-outline{ color:var(--paper); border-color:var(--paper); }
  .contact .btn-outline:hover{ background:var(--paper); color:var(--blue-ink); }
  .contact-cta-block{ max-width:520px; }
  .contact-cta-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
  .contact .link-arrow{ color:var(--paper); border-bottom-color:var(--paper); }
  .contact-details{ display:flex; flex-direction:column; }
  .contact-details .row{
    border-top:1px solid rgba(250,247,241,0.18);
    padding:20px 0;
  }
  .contact-details .row:last-child{ border-bottom:1px solid rgba(250,247,241,0.18); }
  .contact-details .eyebrow{ margin-bottom:8px; }
  .contact-details .value{ font-family:var(--serif); font-size:18px; color:var(--paper); }

  /* ---- Booking: small inline appointment-request calendar, sitting quietly
     in the negative space below "Kontakt mig". No card, no white box — same
     dark ground, hairline dividers, sage-ink for the selected date only. ---- */
  .booking{ margin-top:64px; max-width:560px; }
  .booking .eyebrow{ margin-bottom:12px; }
  .booking-intro{
    font-size:15.5px;
    line-height:1.65;
    color:rgba(250,247,241,0.7);
    max-width:42ch;
    margin-bottom:36px;
  }
  .booking-cal-head{
    display:flex; align-items:center; justify-content:space-between;
    max-width:400px;
    margin-bottom:24px;
  }
  .booking-month{
    font-family:var(--serif); font-style:italic; font-size:19px;
    color:var(--paper);
  }
  .booking-nav{
    background:none; border:none; cursor:pointer;
    font-size:22px; line-height:1;
    color:rgba(250,247,241,0.55);
    padding:4px 10px;
    transition:color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .booking-nav:hover{ color:var(--paper); }
  .booking-nav:disabled{ opacity:0.25; cursor:default; }
  .booking-weekdays{
    display:grid; grid-template-columns:repeat(7, 1fr);
    max-width:400px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(250,247,241,0.4);
    margin-bottom:12px;
    text-align:center;
  }
  .booking-days{
    display:grid; grid-template-columns:repeat(7, 1fr);
    max-width:400px;
    row-gap:6px;
  }
  .booking-day{
    height:44px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-size:15.5px;
    color:rgba(250,247,241,0.86);
    background:none; border:none; cursor:pointer;
    border-radius:50%;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .booking-day:hover:not(:disabled){ background:rgba(250,247,241,0.1); }
  .booking-day.is-today{ box-shadow:inset 0 0 0 1px rgba(250,247,241,0.4); }
  .booking-day.is-selected{ background:var(--sage-ink); color:var(--paper); }
  .booking-day.is-selected:hover{ background:var(--sage-ink); }
  .booking-day:disabled{ color:rgba(250,247,241,0.2); cursor:default; }
  .booking-day.is-empty{ visibility:hidden; cursor:default; }
  .booking-step2{
    margin-top:36px;
    padding-top:32px;
    border-top:1px solid rgba(250,247,241,0.18);
    max-width:560px;
  }
  .booking-selected{
    font-family:var(--serif); font-style:italic; font-size:18px;
    color:var(--paper);
    margin-bottom:10px;
  }
  .booking-note{
    font-size:13.5px; line-height:1.6;
    color:rgba(250,247,241,0.6);
    margin-bottom:28px;
    max-width:48ch;
  }
  .booking-row-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .booking-field{ margin-bottom:22px; }
  .booking-field label, .booking-field-label{
    display:block;
    font-family:var(--sans); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(250,247,241,0.5);
    margin-bottom:9px;
  }
  .booking-optional{ text-transform:none; letter-spacing:0; }
  .booking-field input[type="text"],
  .booking-field input[type="email"],
  .booking-field textarea{
    display:block;
    width:100%;
    background:none;
    border:none;
    border-bottom:1px solid rgba(250,247,241,0.22);
    color:var(--paper);
    font-family:var(--serif); font-size:15px;
    padding:6px 0;
    resize:none;
    transition:border-color var(--dur-fast) var(--ease);
  }
  .booking-field input::placeholder, .booking-field textarea::placeholder{ color:rgba(250,247,241,0.35); }
  .booking-field input:focus, .booking-field textarea:focus{
    outline:none; border-bottom-color:var(--paper);
  }
  .booking-radio-row{ display:flex; gap:22px; flex-wrap:wrap; }
  .booking-radio-row label{
    display:flex; align-items:center; gap:7px;
    font-family:var(--sans); font-size:13px;
    color:rgba(250,247,241,0.86);
    text-transform:none; letter-spacing:0;
    cursor:pointer;
  }
  .booking-radio-row input[type="radio"]{
    accent-color:var(--sage-ink);
    width:14px; height:14px;
    cursor:pointer;
  }
  #bookingSubmit{ margin-top:4px; }
  @media(max-width:420px){
    .booking, .booking-step2{ max-width:none; }
    .booking-cal-head, .booking-weekdays, .booking-days{ max-width:none; }
    .booking-row-2{ grid-template-columns:1fr; gap:0; }
  }

  .btn-outline{
    display:inline-flex; align-items:center; gap:10px;
    font-family:inherit;
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
    padding:15px 30px;
    color:var(--sage-ink);
    background:none;
    border:1px solid var(--sage-ink);
    border-radius:0;
    cursor:pointer;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .btn-outline:hover{ background:var(--sage-ink); color:var(--paper); }

  /* ================= FOOTER =================
     A deep muted tone (in the existing blue family) as a calm, deliberate
     close to the page — generous whitespace, hairline dividers, no cards. */
  footer{
    --footer-bg:#3B4A4E;
    --footer-line:rgba(246,240,227,0.16);
    --footer-text:#F3EEE3;
    --footer-text-soft:rgba(243,238,227,0.66);
    --footer-text-faint:rgba(243,238,227,0.42);
    background:var(--footer-bg);
    color:var(--footer-text-soft);
    padding:72px 0 32px;
  }
  footer .brand-mark{ color:var(--sage); width:30px; margin-bottom:20px; }
  .footer-grid{
    display:grid;
    grid-template-columns:1.8fr 1.4fr 1fr 1fr;
    gap:44px;
    align-items:start;
    padding-bottom:56px;
    border-bottom:1px solid var(--footer-line);
  }
  .footer-word{
    font-family:var(--serif); font-size:21px; font-weight:400;
    color:var(--footer-text);
    margin-bottom:6px;
  }
  .footer-name{ font-size:13.5px; color:var(--footer-text-soft); margin-bottom:14px; }
  .footer-phone{ margin-top:14px; font-size:13.5px; }
  .footer-phone a{
    color:var(--footer-text-soft);
    border-bottom:1px solid transparent;
    transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .footer-phone a:hover{ color:var(--footer-text); border-color:var(--footer-text-soft); }
  .footer-tagline{
    font-family:var(--serif); font-style:italic; font-size:14.5px;
    color:var(--footer-text-soft); line-height:1.5;
    white-space:nowrap;
  }
  .footer-heading{
    font-family:var(--sans);
    color:var(--footer-text-faint);
    margin-bottom:22px;
  }
  .footer-list{ list-style:none; display:flex; flex-direction:column; gap:13px; }
  .footer-list li, .footer-list a{ font-size:14px; }
  .footer-list a{
    color:var(--footer-text-soft);
    border-bottom:1px solid transparent;
    transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .footer-list a:hover{ color:var(--footer-text); border-color:var(--footer-text-soft); }
  .footer-instagram{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:20px;
    font-size:14px;
    color:var(--footer-text-soft);
    transition:color var(--dur-fast) var(--ease);
  }
  .footer-instagram svg{ width:15px; height:15px; flex:none; }
  .footer-instagram:hover{ color:var(--footer-text); }
  .footer-cvr{
    margin-top:22px;
    font-size:12px; color:var(--footer-text-faint);
  }
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
    padding-top:24px;
    font-size:11px; letter-spacing:0.03em;
    color:var(--footer-text-faint);
  }
  .footer-credit{ font-size:10.5px; opacity:0.6; }
  @media(max-width:820px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:48px 32px; }
  }
  @media(max-width:560px){
    footer{ padding:72px 0 28px; }
    .footer-grid{ grid-template-columns:1fr; gap:44px; padding-bottom:48px; }
  }

  /* ================= MOBILE MENU ================= */
  .mobile-menu{
    position:fixed; inset:0; z-index:1100;
    background:var(--paper);
    display:flex; flex-direction:column;
    padding:26px 28px;
    transform:translateY(-100%);
    transition:transform var(--dur) var(--ease);
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:64px; }
  .mobile-menu .close-btn{ background:none; border:none; font-size:26px; color:var(--ink); line-height:1; cursor:pointer; }
  .mobile-menu ul{ list-style:none; display:flex; flex-direction:column; gap:26px; }
  .mobile-menu a{ font-family:var(--serif); font-size:28px; font-weight:400; }
  .mobile-menu a.is-active{ box-shadow:inset 0 -2px 0 var(--blush-ink); padding-bottom:2px; }
  .mobile-menu .cta-text{ margin-top:48px; align-self:flex-start; font-size:13px; }

  /* ================= MOBILE ================= */
  @media(max-width:900px){
    .wrap{ padding:0 24px; }
    .nav{ padding:22px 24px; }
    .nav-links{ display:none; }
    .nav .cta-text{ display:none; }
    .burger{
      display:flex; flex-direction:column; gap:5px;
      width:22px; cursor:pointer; background:none; border:none;
    }
    .burger span{ height:1px; background:var(--ink); width:100%; }

    .hero .hero-headline{ max-width:13ch; }

    .recognition{ padding:72px 0; }

    .therapy{ padding:56px 0 64px; }
    .therapy-head{ margin-bottom:36px; }

    .moment{ padding:0; }
    .moment-panel{ padding:64px 24px; }

    .contact{ padding:72px 0 80px; }
    .contact-grid{ grid-template-columns:1fr; gap:52px; }
    .contact .hero-headline{ white-space:normal; }
  }

  /* ================= SERVICE PAGE (Psykoterapi / Coaching) =================
     A dedicated template so these two pages read as designed destinations
     rather than long-form articles — full-width panels that alternate
     beige tones, an icon-bulleted list and a bordered feature grid, both
     using the brand-mark as their icon. No shadows, no new colours. */
  .service-lede{
    font-family:var(--serif);
    font-size:19px;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:58ch;
  }
  /* .service-panel intentionally uses the SAME .wrap as every other section
     (1280 max-width, centred) so its left edge lines up with the rest of
     the page grid — heading flush with the card grid / list beneath it,
     not stepped in. */
  .service-panel{ padding:88px 0; }
  .service-panel--tint{ background:var(--paper-2); }
  .service-panel-head{ max-width:44ch; margin-bottom:40px; }
  .service-panel-head .eyebrow{ margin-bottom:10px; }
  .service-panel-head h2{
    font-size:clamp(24px, 2.4vw, 30px);
    font-weight:300;
    line-height:1.3;
  }
  /* Manual one-line lock (Coaching's "To forskellige..." heading) — the
     44ch head container would otherwise wrap it. */
  .service-panel-head h2.h2--1l{
    white-space:nowrap;
    font-size:clamp(14px, calc(6vw - 3px), 30px);
  }
  .service-panel-foot{
    font-size:16px;
    line-height:1.75;
    color:var(--ink-soft);
    max-width:56ch;
    margin-top:32px;
  }
  .service-panel-foot--wide{ max-width:none; }
  .service-panel-foot--signoff{
    font-family:var(--serif);
    font-style:italic;
    font-size:17.5px;
    color:var(--ink);
  }

  .icon-list{ list-style:none; max-width:620px; }
  .icon-list li{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:18px;
    align-items:start;
    padding:16px 0;
    border-top:1px solid var(--line-soft);
  }
  .icon-list li:last-child{ border-bottom:1px solid var(--line-soft); }
  .icon-list .brand-mark{ width:15px; margin-top:6px; color:var(--sage-ink); flex:none; }
  .icon-list li span:last-child{
    font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--ink);
  }

  .feature-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    border-top:1px solid var(--line-soft);
    border-left:1px solid var(--line-soft);
  }
  .feature-card{
    padding:32px;
    border-bottom:1px solid var(--line-soft);
    border-right:1px solid var(--line-soft);
  }
  .feature-card .brand-mark{ width:19px; color:var(--sage-ink); margin-bottom:16px; }
  .feature-card h3{ font-size:18px; font-weight:400; margin-bottom:8px; }
  .feature-card p{ font-size:14.5px; line-height:1.7; }
  /* Small kicker naming which side of a two-sided comparison this column
     is (e.g. "Psykoterapi" / "Coaching"), sitting above the icon. */
  .feature-card > .eyebrow{ margin-bottom:14px; }

  /* Quiet "det kan fx være" line inside a feature-card — kept visually
     secondary (small label, italic serif list, hairline divider) so it
     reads as a soft scent of examples, not a checklist. */
  .feature-card-examples{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--line-soft);
  }
  .feature-card-examples-label{
    display:block;
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.03em;
    color:var(--ink-faint);
    margin-bottom:6px;
  }
  .feature-card-examples-list{
    font-family:var(--serif);
    font-style:italic;
    font-size:13.5px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  /* Two heading+body pairs stacked inside one feature-card column,
     separated by the same hairline treatment as .feature-card-examples —
     used on Psykoterapi's "Sådan arbejder jeg" to match Coaching's
     "Coaching eller psykoterapi" component instead of a 2x2 card grid. */
  .feature-card-group + .feature-card-group{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line-soft);
  }

  .feature-grid--3{ grid-template-columns:repeat(3, 1fr); }

  @media(max-width:900px){
    .feature-grid--3{ grid-template-columns:repeat(2, 1fr); }
  }

  @media(max-width:700px){
    .service-panel{ padding:56px 0; }
    .feature-grid{ grid-template-columns:1fr; }
  }

  /* ================= INTERNAL PAGE DESIGN SYSTEM =================
     Shared grid, spacing and colour rules for Psykoterapi / Coaching /
     Min tilgang / Om Christine, so every internal page reads as one
     family while keeping its own composition.

     GRID — every section sits inside the sitewide .wrap (1280 / 40px
     gutter, same as the homepage and the header). Two-column compositions
     use one of exactly two ratios, reused deliberately rather than
     invented per section:
       --split-wide   0.82fr / 1.18fr  → image-led pairs (hero, story)
       --split-narrow 0.94fr / 1.06fr  → text-pair sections (intro, help)

     SPACING SCALE — three section padding levels, used on purpose:
       --pad-compact  56–64px  → secondary/utility content (practical info)
       --pad-section  80–88px  → standard content sections
       --pad-feature  88–108px → the two special full-colour moments
                                 (statement pause, closing CTA)

     COLOUR — the page background (--paper) runs through hero, intro,
     image, help and structured-content sections without interruption.
     Only two moments break into full colour: the dusty-rose statement
     pause and the dark closing CTA. Everything else stays quiet cream,
     differentiated by grid, borders and type — not by colour banding. */

  :root{
    --split-wide: 0.82fr 1.18fr;
    --split-narrow: 0.94fr 1.06fr;
  }

  /* ---- Hero: compact split composition, text | image ---- */
  .svc-hero{ padding:clamp(88px, 11vw, 108px) 0 0; }
  /* Kontakt has no hero image, so this section has no photo column to
     supply its own bottom whitespace — give it one directly. */
  .svc-hero--kontakt{ padding-bottom:clamp(48px, 6vw, 72px); }
  .svc-hero-grid{
    display:grid;
    grid-template-columns:var(--split-wide);
    gap:5vw;
    align-items:center;
  }
  .svc-hero-text .eyebrow{ margin-bottom:16px; }
  .svc-hero-text .hero-headline{
    font-size:clamp(30px, 3.3vw, 42px);
    font-weight:300;
    line-height:1.2;
    max-width:13ch;
  }
  /* Manual two-line break (Psykoterapi hero) — needs more room than the
     default 13ch so the <br> controls the break, not auto-wrap. */
  .svc-hero-text .hero-headline.h1--2l{ max-width:22ch; }
  .svc-hero-text .hero-headline.h1--2l.h1--wide{ max-width:32ch; }
  /* Coaching hero: the copy is long enough that even the widest column
     (max ~466px, since .wrap caps at 1280) can't fit either line at the
     normal 42px ceiling — shrink a little further than the default clamp. */
  .svc-hero-text .hero-headline.h1--shrink{ font-size:clamp(24px, calc(4vw - 9px), 36px); }
  .svc-hero-text .hero-headline.h1--3l{ max-width:22ch; }
  /* Manual one-line lock (Om Christine hero) — the default 13ch would
     otherwise wrap it. */
  .svc-hero-text .hero-headline.h1--1l{
    white-space:nowrap;
    max-width:none;
    font-size:clamp(20px, calc(9vw - 6px), 42px);
  }
  @media(max-width:860px){
    .svc-hero-text .hero-headline.h1--2l br,
    .svc-hero-text .hero-headline.h1--3l br{ display:none; }
  }
  .svc-hero-image .photo{ aspect-ratio:5/4.3; border-radius:0; }
  .svc-hero-image img{ aspect-ratio:5/4.3; }
  @media(max-width:860px){
    .svc-hero{ padding:104px 0 0; }
    .svc-hero-grid{ grid-template-columns:1fr; gap:28px; }
    .svc-hero-image .photo, .svc-hero-image img{ aspect-ratio:16/11; }
  }

  /* ---- Intro: a statement + supporting copy, not article paragraphs ---- */
  .svc-intro{ padding:80px 0; }
  /* Same ratio and gap as .svc-hero-grid so the support column's left
     edge lines up exactly with the hero image's left edge above it. */
  .svc-intro-grid{
    display:grid;
    grid-template-columns:var(--split-wide);
    gap:5vw;
    align-items:center;
  }
  .svc-intro-statement{
    font-family:var(--serif);
    font-weight:300;
    font-size:clamp(25px, 2.8vw, 34px);
    line-height:1.3;
    letter-spacing:-0.005em;
    max-width:14ch;
  }
  /* Manual two-line break (Psykoterapi intro) — needs more room than the
     default 14ch so the <br> controls the break, not auto-wrap. */
  .svc-intro-statement--2l{ max-width:20ch; }
  .svc-intro-statement--2lw{ max-width:25ch; }
  .svc-intro-statement--3l{ max-width:26ch; }
  @media(max-width:760px){
    .svc-intro-statement--2l br, .svc-intro-statement--2lw br, .svc-intro-statement--3l br{ display:none; }
  }
  /* Optically align the first line of the support paragraph with the first
     line of the serif statement beside it — text glyphs sit at different
     offsets from their box top depending on font/line-height, so a small
     top nudge is needed even though both boxes share the same grid row. */
  .svc-intro-support{ padding-top:0.5px; }
  .svc-intro-support p{ font-size:16px; line-height:1.8; max-width:58ch; }
  .svc-intro-support p + p{ margin-top:18px; }
  @media(max-width:760px){
    .svc-intro{ padding:56px 0; }
    .svc-intro-grid{ grid-template-columns:1fr; gap:24px; }
  }

  /* ---- Help / list panel paired with an oversized faint watermark ---- */
  .svc-help{ padding:80px 0; }
  .svc-help-grid{
    display:grid;
    grid-template-columns:var(--split-narrow);
    gap:6vw;
    align-items:center;
  }
  .svc-help-visual{
    display:flex; align-items:center; justify-content:center;
    height:100%;
  }
  .svc-help-visual .brand-mark{
    width:100%; max-width:240px;
    color:var(--sage-ink);
    opacity:0.14;
  }
  @media(max-width:900px){
    .svc-help-visual{ display:none; }
    .svc-help-grid{ grid-template-columns:1fr; }
  }
  @media(max-width:700px){ .svc-help{ padding:56px 0; } }

  /* ---- Belief: a quieter, more personal editorial pause — small mark,
     eyebrow, a headline with real visual weight, then constrained body
     copy. Centred so it reads as a distinct moment, not another asymmetric
     text-pair section. ---- */
  .svc-belief{ padding:88px 0; }
  .svc-belief--sage{ background:var(--sage-ink); }
  .svc-belief-head{ max-width:46ch; margin-bottom:48px; }
  .svc-belief-head .eyebrow{ margin-bottom:14px; color:rgba(250,247,241,0.72); }
  .svc-belief-head h2{
    font-family:var(--serif); font-weight:300;
    font-size:clamp(14px, calc(6vw - 3px), 34px);
    line-height:1.25;
    letter-spacing:-0.005em;
    white-space:nowrap;
    color:var(--paper);
  }
  .svc-belief-columns{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:4vw;
  }
  .svc-belief-columns p{
    font-size:15.5px; line-height:1.8;
    color:rgba(250,247,241,0.86);
  }
  @media(max-width:900px){
    .svc-belief-columns{ grid-template-columns:1fr 1fr; gap:32px; }
    .svc-belief-columns p:last-child{ grid-column:1 / -1; }
  }
  @media(max-width:760px){
    .svc-belief{ padding:64px 0; }
    .svc-belief-head{ margin-bottom:32px; }
    .svc-belief-columns{ grid-template-columns:1fr; gap:22px; }
    .svc-belief-columns p:last-child{ grid-column:auto; }
  }

  /* ---- Editorial brand moment: colour + logo + one line, a real pause.
     One of only two full-colour moments on the page — kept short so it
     reads as a pause, not another banner. ---- */
  .svc-moment{ padding:72px 0; text-align:center; }
  .svc-moment--rose{ background:var(--blush-ink); }
  .svc-moment--sage{ background:var(--sage-ink); }
  .svc-moment-inner{ max-width:560px; margin:0 auto; }
  .svc-moment-inner--wide{ max-width:800px; }
  .svc-moment .brand-mark.lg{ width:56px; margin:0 auto 24px; color:var(--paper); opacity:0.9; }
  .svc-moment-quote{
    font-family:var(--serif); font-style:italic; font-weight:300;
    font-size:clamp(21px, 2.4vw, 28px);
    line-height:1.4;
    color:var(--paper);
  }
  .svc-moment-quote--tight{
    white-space:nowrap;
    font-size:clamp(11px, calc(4.2vw - 2.4px), 28px);
  }
  .svc-moment-sub{
    font-family:var(--sans);
    font-size:14.5px;
    line-height:1.6;
    color:var(--paper);
    opacity:0.72;
    margin-top:14px;
  }
  @media(max-width:700px){ .svc-moment{ padding:56px 0; } }

  /* ---- Practical info: compact, secondary, easy to scan. Reused as-is
     on Coaching — this is the one component that should stay identical
     across service pages. ---- */
  .svc-practical{ padding:64px 0; }
  .svc-practical-grid{
    display:grid;
    grid-template-columns:var(--split-narrow);
    gap:6vw;
    align-items:center;
  }
  .svc-practical-head{ padding-top:2px; }
  .svc-practical-head .eyebrow{ margin-bottom:8px; }
  .svc-practical-head h2{ font-size:clamp(19px, 1.8vw, 22px); font-weight:400; color:var(--ink-soft); }
  .svc-practical-list{ max-width:520px; }
  .svc-practical-row{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:20px;
    align-items:baseline;
    padding:16px 0;
    border-top:1px solid var(--line-soft);
  }
  .svc-practical-list .svc-practical-row:last-child{ border-bottom:1px solid var(--line-soft); }
  .svc-practical-row .label{ padding-top:2px; }
  .svc-practical-row .val{ font-family:var(--serif); font-size:17px; color:var(--ink); }
  .svc-practical-row .sub{ font-size:13px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
  /* Duration + price grouped as one pair under a session-type label,
     instead of two separately-labelled rows — keeps them reading as
     belonging together, with price a clear but secondary second line. */
  .svc-practical-row .price{ font-family:var(--serif); font-size:15px; color:var(--ink-soft); margin-top:3px; }
  @media(max-width:700px){
    .svc-practical{ padding:48px 0; }
    .svc-practical-grid{ grid-template-columns:1fr; gap:20px; }
    .svc-practical-row{ grid-template-columns:1fr; gap:5px; }
  }

  /* ---- FAQ: a quiet accordion, not another wall of article text ---- */
  .faq{ padding:80px 0; }
  /* Standalone /faq/ page: this section is the first thing under the fixed
     header, so it needs its own top clearance instead of the in-page value. */
  .faq-page{ padding-top:160px; }
  .faq-head{ max-width:56ch; margin-bottom:36px; }
  .faq-head .eyebrow{ margin-bottom:10px; }
  .faq-head h2{ font-size:clamp(22px, 2.2vw, 28px); font-weight:300; }
  .faq-list{ max-width:760px; }
  .faq-item{ border-top:1px solid var(--line-soft); }
  .faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
  .faq-item summary{
    padding:22px 34px 22px 0;
    cursor:pointer;
    font-family:var(--serif); font-size:17.5px; font-weight:400;
    color:var(--ink);
    list-style:none;
    position:relative;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    position:absolute; right:2px; top:20px;
    font-family:var(--sans); font-size:18px; font-weight:300;
    color:var(--ink-faint);
    transition:transform var(--dur-fast) var(--ease);
  }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item summary:hover{ color:var(--sage-ink); }
  .faq-item p{
    padding:0 40px 26px 0;
    font-size:15px; line-height:1.75;
    color:var(--ink-soft);
    max-width:60ch;
  }
  @media(max-width:700px){
    .faq{ padding:56px 0; }
    .faq-page{ padding-top:130px; }
    .faq-item summary{ font-size:16px; padding-right:28px; }
  }

  /* ---- Closing CTA: dark, quiet, the page's natural conclusion — the
     second and last full-colour moment on the page. ---- */
  .svc-cta{ padding:88px 0 56px; background:var(--blue-ink); text-align:center; }
  .svc-cta .brand-mark.lg{ width:38px; margin:0 auto 24px; color:var(--paper); opacity:0.85; }
  .svc-cta-line{
    font-family:var(--serif); font-weight:300;
    font-size:clamp(21px, 2.2vw, 27px);
    color:var(--paper);
    max-width:26ch; margin:0 auto 30px;
  }
  .svc-cta-line--tight{
    white-space:nowrap;
    max-width:none;
    font-size:clamp(14px, calc(6.3vw - 3.7px), 27px);
  }
  .svc-cta .btn-outline{ color:var(--paper); border-color:var(--paper); }
  .svc-cta .btn-outline:hover{ background:var(--paper); color:var(--blue-ink); }
  @media(max-width:700px){ .svc-cta{ padding:60px 0 44px; } }

  /* ---- Story: image-led narrative block, asymmetric ---- */
  .svc-story{ padding:80px 0; }
  .svc-story-grid{
    display:grid;
    grid-template-columns:var(--split-wide);
    gap:6vw;
    align-items:center;
  }
  .svc-story-image .photo{ aspect-ratio:4/4.6; border-radius:0; }
  .svc-story-image img{ aspect-ratio:4/4.6; }
  .svc-story-text .eyebrow{ margin-bottom:16px; }
  .svc-story-text p:not(.eyebrow){ font-size:16px; line-height:1.8; max-width:46ch; margin-bottom:18px; }
  .svc-story-text p:last-child{ margin-bottom:0; }
  @media(max-width:860px){
    .svc-story{ padding:56px 0; }
    .svc-story-grid{ grid-template-columns:1fr; gap:28px; }
    .svc-story-image .photo, .svc-story-image img{ aspect-ratio:16/11; }
  }

  /* ---- Image pause: a contained photographic moment with real margins —
     not an edge-to-edge stripe that crashes into the next section. Sits
     inside the page grid, wider than the text column but never full-bleed
     unless a page deliberately wants full-bleed impact. ---- */
  .svc-imagepause{ padding:16px 0 80px; }
  .svc-imagepause .photo{
    aspect-ratio:16/8;
    border-radius:0;
    max-width:1040px;
    margin:0 auto;
  }
  .svc-imagepause img{ aspect-ratio:16/8; }
  @media(max-width:700px){
    .svc-imagepause{ padding:8px 0 56px; }
    .svc-imagepause .photo, .svc-imagepause img{ aspect-ratio:4/3.4; }
  }

  /* ================= ARTICLE (blog post pages) ================= */
  .article-hero{
    padding:150px 0 0;
  }
  .article-head{
    max-width:700px;
    margin:0 auto;
    padding:0 40px 48px;
    text-align:left;
  }
  .article-head .eyebrow{ margin-bottom:20px; }
  .article-head h1{
    font-size:clamp(32px, 4.4vw, 50px);
    line-height:1.18;
    font-weight:300;
    margin-bottom:0;
  }
  .article-hero-image{ width:100%; }
  .article-hero-image .photo{
    aspect-ratio:16/5.5;
    border-radius:0;
  }
  .article-hero-image img{
    width:100%; height:100%;
    aspect-ratio:16/5.5;
    object-fit:cover;
    display:block;
  }
  .article-body{
    max-width:700px;
    margin:0 auto;
    padding:64px 40px 0;
  }
  .article-body p{
    font-size:17px;
    line-height:1.85;
    max-width:64ch;
    margin-bottom:24px;
  }
  .article-body h2{
    font-size:clamp(22px, 2.6vw, 28px);
    font-weight:300;
    margin:52px 0 20px;
    max-width:22ch;
  }
  /* Manual one-line lock for a subhead that reads better unbroken. */
  .article-body h2.h2--1l{
    white-space:nowrap;
    max-width:none;
    font-size:clamp(14px, calc(6.4vw - 2.6px), 28px);
  }
  .article-head h1.h1--1l{
    white-space:nowrap;
    font-size:clamp(14px, calc(8vw - 3.6px), 50px);
  }
  /* Faint closing mark — a quiet editorial full stop at the end of the
     article body, before the CTA. Same pale brand-mark treatment as the
     "Det, du mærker" divider. */
  .article-mark{
    max-width:700px;
    margin:56px auto 0;
    padding:0 40px;
    display:flex;
    justify-content:center;
  }
  .article-mark .brand-mark{
    width:18px;
    color:var(--ink-faint);
    opacity:0.34;
  }
  .article-body a{
    color:var(--ink);
    border-bottom:1px solid var(--sage-ink);
    transition:opacity var(--dur-fast) var(--ease);
  }
  .article-body a:hover{ opacity:0.65; }
  .article-meta-row{
    display:flex; align-items:center; gap:14px;
    margin-top:28px;
    font-size:12.5px; color:var(--ink-faint);
  }
  .article-back{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
    color:var(--ink-soft);
    margin-bottom:8px;
    transition:gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .article-back:hover{ gap:13px; color:var(--ink); }
  .article-cta{
    max-width:700px;
    margin:64px auto 0;
    padding:44px 40px;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .article-cta p{
    font-size:16px;
    max-width:56ch;
    margin-bottom:22px;
  }
  .article-related{
    max-width:700px;
    margin:0 auto;
    padding:64px 40px 130px;
  }
  .article-related .eyebrow{ margin-bottom:24px; }
  .article-related-list{ list-style:none; display:flex; flex-direction:column; }
  .article-related-item{
    border-top:1px solid var(--line-soft);
    padding:20px 0;
  }
  .article-related-list li:last-child{ border-bottom:1px solid var(--line-soft); }
  .article-related-item a{
    font-family:var(--serif); font-size:18px; color:var(--ink);
    border-bottom:none;
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  }
  .article-related-item a:hover{ opacity:0.65; }
  .article-related-cat{
    font-family:var(--sans);
    color:var(--ink-faint); flex:none;
  }
  @media(max-width:700px){
    .article-hero{ padding:120px 0 0; }
    .article-head{ padding:0 24px 36px; }
    .article-hero-image .photo, .article-hero-image img{ aspect-ratio:16/9; }
    .article-body{ padding:44px 24px 0; }
    .article-body h2{ margin:40px 0 16px; }
    .article-cta, .article-related{ padding-left:24px; padding-right:24px; }
    .article-related{ padding-bottom:90px; }
  }