:root{
    color-scheme: dark;
    --ink:    #05070B;
    --text:   #EDF0F4;
    --muted:  rgba(233,238,245,.62);
    --faint:  rgba(233,238,245,.34);
    --hair:   rgba(255,255,255,.13);
    --paper:  #F4F6F9;
    --blue:   #3D9BE9;

    --f-display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    /* het merkschrift van het Verzorgdhuis.nl-logo */
    --f-brand: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* scale: 11 / 14 / 16 / 20 / 28 / 40 / 64 / 104 */
    --t-micro: 11px;
    --t-ui:    14px;
    --t-body:  16px;
    --t-lede:  clamp(18px, 1.5vw, 22px);
    --t-sub:   clamp(15px, 1.15vw, 17px);
    --t-hero:  clamp(34px, 4.6vw, 56px);

    --gutter: clamp(22px, 5.2vw, 84px);
    /* de ruimte tussen de drie tekeningen, en los daarvan die erboven en eronder */
    --plaatruimte: clamp(28px, 4.2vw, 72px);
    --plaatlucht: clamp(56px, 8.5vw, 140px);
  }

  *{ box-sizing: border-box; }
  body{
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--f-display);
    font-size: var(--t-body);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .hero{
    position: relative;
    isolation: isolate;
    height: clamp(620px, 100svh, 1000px);
    overflow: hidden;
    background: var(--ink);
    display: flex;
    flex-direction: column;
  }

  .shell{
    position: relative;
    z-index: 3;
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(20px, 3vw, 34px) var(--gutter) clamp(24px, 3.4vw, 42px);
    max-width: 1680px;
    width: 100%;
    margin-inline: auto;
  }

  /* ---------- top bar ---------- */
  /* de balk blijft boven het menupaneel staan, zodat het logo en de sluitknop zichtbaar blijven */
  .topbar{ position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  .wordmark{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    white-space: nowrap;
  }
  .wordmark img{ display: block; height: clamp(22px, 2.15vw, 28px); width: auto; }
  .wordmark .wm{
    font-family: var(--f-brand);
    font-optical-sizing: none;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1;
    color: #FFFFFF;
    text-shadow: 0 1px 24px rgba(0,0,0,.7);
  }
  .wm .b{ font-weight: 700; letter-spacing: -.05em; }
  .wm .t{ font-weight: 400; letter-spacing: -.012em; }

  .nav{ display: flex; align-items: center; gap: clamp(14px, 1.7vw, 27px); list-style: none; margin: 0; padding: 0; }
  .nav a{
    color: var(--muted);
    text-decoration: none;
    font-size: var(--t-ui);
    font-weight: 400;
    transition: color .22s ease;
    white-space: nowrap;
    text-shadow: 0 1px 12px rgba(0,0,0,.85);
  }
  .nav a:hover, .nav a:focus-visible{ color: #fff; }
  .nav .sep{ width: 1px; height: 15px; background: var(--hair); }

  /* ---------- stage ---------- */
  .stage{ align-self: center; max-width: 760px; padding-block: clamp(20px, 5vh, 60px); }
  h1{
    margin: 0;
    font-size: var(--t-hero);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.02;
    text-wrap: balance;
    color: #FCFDFE;
    text-shadow: 0 6px 60px rgba(0,0,0,.6);
  }
  .lede{
    margin: clamp(18px, 2.2vw, 28px) 0 0;
    font-size: var(--t-lede);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -.009em;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    color: rgba(240,243,247,.87);
    max-width: 52ch;
    text-shadow: 0 2px 26px rgba(0,0,0,.6);
  }
  .sub{
    margin: 14px 0 0;
    font-size: var(--t-sub);
    font-weight: 400;
    line-height: 1.55;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    color: var(--muted);
    max-width: 48ch;
    text-shadow: 0 2px 22px rgba(0,0,0,.6);
  }

  .cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.4vw, 44px); }
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px 13px 22px;
    border-radius: 3px;
    font-size: var(--t-body);
    font-weight: 500;
    letter-spacing: -.006em;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .btn svg{ flex: none; transition: transform .2s ease; }
  .btn:hover svg{ transform: translateX(3px); }
  .btn--solid{ background: var(--paper); color: #0A0C10; }
  .btn--solid:hover{ background: #fff; }
  .btn--ghost{
    background: rgba(10,13,19,.55);
    border-color: rgba(255,255,255,.2);
    color: #F0F3F7;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .btn--ghost:hover{ background: rgba(26,31,40,.75); border-color: rgba(255,255,255,.34); }
  a:focus-visible, .btn:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

  /* ---------- brand row ---------- */
  .footrow{ display: grid; gap: clamp(16px, 2vw, 24px); }
  /* de streep loopt door tot de linkerrand van het beeld, niet tot de kolommarge */
  .rule{
    height: 1px;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 62%, transparent);
  }
  /* drie placeholders in dezelfde lijnentaal als de animatie erboven:
     alleen lijnen, geen vullingen. De grondlijn van de drie tekeningen staat op
     dezelfde hoogte, dus ze vormen samen de onderrand van de hero. */
  .record .plates{ margin: var(--plaatlucht) 0; }
  .plates{
    display: flex;
    align-items: flex-end;
    gap: var(--plaatruimte);
  }
  /* alle drie even breed; op smalle schermen krimpen ze samen mee */
  .plate{ flex: 0 1 clamp(112px, 22vw, 340px); }
  .plate svg{
    display: block;
    width: 100%;
    height: auto;
    color: rgba(198,224,252,.6);
  }
  /* de lijnen blijven haarlijnen, hoe groot de tekening ook staat */
  .plate svg *{ vector-effect: non-scaling-stroke; }
  .brands{ display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
  .marks{ display: flex; align-items: center; gap: clamp(22px, 2.9vw, 46px); flex-wrap: wrap; }
  .mark{ display: inline-flex; align-items: center; gap: 9px; opacity: .82; transition: opacity .22s ease; text-decoration: none; }
  .mark:hover{ opacity: 1; }
  .mark img{ display: block; height: clamp(19px, 1.7vw, 23px); width: auto; }
  .mark--vve img{ height: clamp(21px, 1.9vw, 26px); }
  .mark .lock{ font-family: var(--f-brand); font-optical-sizing: none; font-size: clamp(17px, 1.55vw, 21px); color: #fff; line-height: 1; white-space: nowrap; }
  .lock .thin{ font-weight: 400; letter-spacing: -.012em; }
  .lock .bold{ font-weight: 700; letter-spacing: -.05em; }


  /* ================= scene ================= */
  .scene{ position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); pointer-events: none; }
  .scene > *{ position: absolute; }

  .halo{
    inset: 0;
    background:
      radial-gradient(46% 52% at var(--vx, 30%) var(--vy, 50%), rgba(32,72,126,.4) 0%, rgba(15,35,62,.18) 42%, rgba(5,7,11,0) 76%);
  }
  #city{ inset: 0; width: 100%; height: 100%; display: block; opacity: 0; animation: fade 2.2s ease forwards .3s; }
  .floor{
    left: 0; right: 0; bottom: 0; height: 34%;
    background: radial-gradient(58% 100% at 64% 100%, rgba(61,155,233,.13), rgba(61,155,233,0) 74%);
    filter: blur(12px);
    animation: breathe 17s ease-in-out infinite;
  }
  @keyframes breathe{ 0%,100%{ opacity:.78 } 50%{ opacity:1 } }
  .veil{
    inset: 0;
    background:
      radial-gradient(30% 34% at var(--vx, 30%) var(--vy, 50%),
        rgba(2,3,6,.9) 0%, rgba(2,3,6,.5) 58%, rgba(2,3,6,0) 100%),
      radial-gradient(122% 114% at 50% 50%, rgba(2,3,6,0) 48%, rgba(2,3,6,.34) 100%),
      linear-gradient(to bottom, rgba(2,3,6,.88) 0%, rgba(2,3,6,.34) 7%, rgba(2,3,6,0) 16%),
      linear-gradient(to top, rgba(2,3,6,.9) 0%, rgba(2,3,6,.4) 8%, rgba(2,3,6,0) 18%);
  }
  .grain{
    inset: -50%;
    opacity: .042;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: grainShift 1.1s steps(3) infinite;
  }
  @keyframes grainShift{
    0%  { transform: translate3d(0,0,0) }
    33% { transform: translate3d(-3px, 2px, 0) }
    66% { transform: translate3d(2px, -3px, 0) }
    100%{ transform: translate3d(0,0,0) }
  }

  /* ---------- entrance ---------- */
  .rise{ opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.25,1) forwards; }
  .d1{ animation-delay: .18s } .d2{ animation-delay: .3s } .d2b{ animation-delay: .38s } .d3{ animation-delay: .48s } .d4{ animation-delay: .6s }
  @keyframes rise{ to{ opacity: 1; transform: none; } }
  .fade{ opacity: 0; animation: fade 1.5s ease forwards .1s; }
  @keyframes fade{ to{ opacity: 1 } }

  @media (prefers-reduced-motion: reduce){
    .rise, .fade, .grain, .floor, #city{ animation: none !important; opacity: 1; transform: none; }
  }

  @media (max-width: 760px){
    .veil{
      background:
        radial-gradient(46% 27% at var(--vx, 50%) var(--vy, 50%),
          rgba(2,3,6,.92) 0%, rgba(2,3,6,.52) 60%, rgba(2,3,6,0) 100%),
        radial-gradient(124% 112% at 50% 50%, rgba(2,3,6,0) 46%, rgba(2,3,6,.34) 100%),
        linear-gradient(to bottom, rgba(2,3,6,.9) 0%, rgba(2,3,6,.3) 8%, rgba(2,3,6,0) 17%),
        linear-gradient(to top, rgba(2,3,6,.92) 0%, rgba(2,3,6,.4) 9%, rgba(2,3,6,0) 19%);
    }
    .floor{ height: 22%; background: radial-gradient(70% 100% at 50% 100%, rgba(61,155,233,.12), rgba(61,155,233,0) 74%); }

    /* Op een telefoon kost elk scrollframe al genoeg. De filmkorrel blijft liggen in
       plaats van te verspringen — een laag van drie schermen groot die bij elke stap
       opnieuw samengesteld moest worden. Het beeld zelf verandert niet. */
    .grain{ animation: none; }

    /* en de vervaging achter de tweede knop vervalt: die moest tijdens het scrollen
       elk frame opnieuw door de bewegende achtergrond heen rekenen */
    .btn--ghost{
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(9,12,18,.93);
    }
  }

  @media (max-width: 1080px){
    .stage{ max-width: none; }
    .lede{ max-width: 34ch; }
    .sub{ max-width: 36ch; }
    .brands{ gap: 18px; }
  }

  /* ---------- taalwisselaar ---------- */
  .lang{ display: flex; align-items: center; gap: 7px; }
  .nav .lang a{ color: var(--faint); }
  .nav .lang a[aria-current="true"]{ color: var(--text); }
  .nav .lang a:hover, .nav .lang a:focus-visible{ color: #fff; }
  .lang .slash{ color: rgba(255,255,255,.2); font-size: var(--t-ui); line-height: 1; }

  /* ---------- sprong naar de inhoud ---------- */
  .skip{
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--paper); color: #0A0D13;
    font-family: var(--f-display); font-size: var(--t-ui); font-weight: 500;
    padding: 10px 16px; text-decoration: none;
  }
  .skip:focus{ left: 12px; top: 12px; }

  /* ---------- zichtbare focus ---------- */
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--blue);
    outline-offset: 3px;
  }


  /* ================= tweede sectie ================= */
  .record{
    background: var(--ink);
    padding: clamp(64px, 9vh, 116px) var(--gutter) 0;
  }
  .rwrap{ max-width: 1680px; margin-inline: auto; }

  .record h2{
    margin: 0;
    font-size: clamp(26px, 3.4vw, 48px);
    font-weight: 400;
    letter-spacing: -.028em;
    line-height: 1.08;
    color: #FCFDFE;
    max-width: 24ch;
    text-wrap: balance;
  }
  .rintro{
    margin: clamp(14px, 1.6vw, 20px) 0 0;
    max-width: 62ch;
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--muted);
  }
  /* de slotzin draagt de gedachte, dus die staat een maat groter en lichter */
  .rclose{
    margin: clamp(20px, 2.4vw, 30px) 0 0;
    max-width: 44ch;
    font-size: var(--t-lede);
    line-height: 1.4;
    letter-spacing: -.012em;
    color: rgba(240,243,247,.92);
  }

  /* ---------- Engelse tekstlengte ---------- */
  /* de Engelse zin is langer dan de Nederlandse; iets meer regelbreedte houdt hem
     op dezelfde ene regel zonder de kolom van de kop te doorbreken */
  html[lang="en"] .lede{ max-width: none; }
  @media (max-width: 1080px){
    html[lang="en"] .lede{ max-width: 34ch; }
  }

  /* de sprongbestemming mag geen omlijning krijgen als ze focus ontvangt */
  main:focus{ outline: none; }

  /* ================= paginafooter ================= */
  .pagefoot{
    position: relative;
    background: var(--ink);
    padding: 0 var(--gutter) clamp(32px, 4.5vh, 48px);
  }
  .fwrap{ max-width: 1680px; margin-inline: auto; }

  .fmain{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: clamp(28px, 4vw, 72px);
    flex-wrap: wrap;
  }
  .fbrand .wordmark{ pointer-events: auto; }
  .pagefoot .wordmark img{ height: clamp(20px, 1.9vw, 25px); }
  .pagefoot .wm{ font-size: clamp(17px, 1.6vw, 21px); }
  .fclaim{
    margin: clamp(12px, 1.4vw, 18px) 0 0;
    max-width: 34ch;
    font-size: var(--t-ui);
    line-height: 1.55;
    color: var(--muted);
  }

  /* doorlopend, over de hele breedte van de kolom */
  .frule{
    height: 1px;
    margin: clamp(32px, 4.5vh, 56px) 0 clamp(18px, 2.2vh, 24px);
    background: var(--hair);
  }
  .fbottom{
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
  }
  .fcopy{ margin: 0; font-size: var(--t-micro); letter-spacing: .04em; color: var(--faint); }
  .pagefoot .lang a{ font-size: var(--t-ui); color: var(--faint); text-decoration: none; }
  .pagefoot .lang a[aria-current="true"]{ color: var(--text); }
  .pagefoot .lang a:hover, .pagefoot .lang a:focus-visible{ color: #fff; }

  @media (max-width: 620px){
    .fmain{ gap: 30px; }
  }