/* Tempolessen – speelse, rustige pakkethero. Alleen Normaal, Spoed en Turbo.
   Pakketprijzen, formulierkoppelingen, selectors en betaalflow blijven onaangeraakt. */
body[data-trajectory] .site-header {
  background:#fffaf6 !important;
  border-bottom:1px solid #f0dfd0;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body[data-trajectory] .site-header .header-inner nav { display:none !important; }

body[data-trajectory="normaal"] .tl-pakket-hero { --tl-hero-glow:rgba(201,226,190,.58); }
body[data-trajectory="spoed"] .tl-pakket-hero { --tl-hero-glow:rgba(255,210,167,.58); }
body[data-trajectory="turbo"] .tl-pakket-hero { --tl-hero-glow:rgba(255,182,146,.56); }

body[data-trajectory] .hero.tl-pakket-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(28px,4vw,56px);
  width:min(1200px,calc(100% - 48px));
  margin:26px auto 28px;
  padding:clamp(32px,4.4vw,58px);
  overflow:hidden;
  border:1px solid #f1d8c4;
  border-radius:36px;
  background:
    radial-gradient(circle at 94% 4%,var(--tl-hero-glow),transparent 49%),
    linear-gradient(125deg,#fffdfb 0%,#fff3e9 100%);
  box-shadow:0 22px 60px rgba(105,61,30,.075);
}
body[data-trajectory] .hero.tl-pakket-hero::before {
  content:"";
  position:absolute;
  top:-180px;
  right:-105px;
  width:420px;
  height:420px;
  border:3px solid rgba(237,138,77,.17);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
body[data-trajectory] .hero.tl-pakket-hero::after {
  content:"";
  position:absolute;
  left:-100px;
  bottom:-190px;
  width:380px;
  height:380px;
  background:radial-gradient(circle,rgba(255,206,169,.42),transparent 70%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
body[data-trajectory] .tl-pakket-hero .hero-copy,
body[data-trajectory] .tl-pakket-hero .hero-visual {
  position:relative;
  z-index:1;
  min-width:0;
}
body[data-trajectory] .tl-pakket-hero .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:11px;
  width:fit-content;
  max-width:100%;
  padding:6px 15px 6px 7px;
  margin:0 0 23px;
  border:1px solid #f0d8c6;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(99,56,29,.04);
  color:#a95024;
  font-size:11px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.11em;
}
body[data-trajectory] .tl-pakket-hero .eyebrow .small-line { display:none; }
body[data-trajectory] .tl-pakket-hero .eyebrow::before {
  content:"01";
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:10px;
  background:#f57831;
  color:#fff;
  font-family:'Outfit',Manrope,Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  transform:rotate(-6deg);
}
body[data-trajectory="spoed"] .tl-pakket-hero .eyebrow::before { content:"02"; }
body[data-trajectory="turbo"] .tl-pakket-hero .eyebrow::before { content:"03"; }

body[data-trajectory] .tl-pakket-hero h1 {
  margin:0 0 22px;
  color:#24302e;
  font-family:'Outfit','DM Sans',Manrope,Arial,sans-serif;
  font-size:clamp(40px,4.4vw,64px);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:1.07;
  overflow-wrap:normal;
}
body[data-trajectory] .tl-pakket-hero h1 span {
  position:relative;
  display:inline-block;
  color:#c55123;
}
body[data-trajectory] .tl-pakket-hero h1 span::after {
  content:"";
  position:absolute;
  bottom:-.075em;
  left:1%;
  right:12%;
  height:7px;
  border-bottom:3px solid rgba(231,117,56,.35);
  border-radius:50%;
  transform:rotate(-1deg);
  pointer-events:none;
}
body[data-trajectory] .tl-pakket-hero .hero-intro {
  max-width:525px;
  margin:0;
  color:#645a53;
  font-size:15px;
  line-height:1.75;
}
body[data-trajectory] .tl-pakket-hero .hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:27px;
}
body[data-trajectory] .tl-pakket-hero .hero-actions > a.button {
  max-width:100%;
  width:min(100%,304px);
  min-height:65px !important;
  border-radius:999px !important;
}
body[data-trajectory] .tl-pakket-hero .hero-actions > a.button > svg {
  display:none !important; /* De ronde pijl wordt al door de bestaande knopcode gemaakt. */
}
body[data-trajectory] .tl-pakket-hero .hero-actions > button[data-choice-start] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:11px 17px;
  border:1px solid #efd9c8;
  border-radius:999px;
  background:rgba(255,251,247,.88);
  box-shadow:0 4px 12px rgba(103,65,39,.045);
  color:#ae4f24;
  font-family:'DM Sans',Manrope,Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  white-space:normal;
}
body[data-trajectory] .tl-pakket-hero .hero-actions > button[data-choice-start]:hover {
  border-color:#e8b894;
  background:#ffeadb;
}
body[data-trajectory] .tl-pakket-hero .hero-note {
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  margin-top:20px;
  padding:10px 14px;
  border:1px solid #efd6c2;
  border-radius:14px;
  background:rgba(255,255,255,.76);
  color:#665144;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}
body[data-trajectory] .tl-pakket-hero .hero-note svg {
  width:18px;
  height:18px;
  color:#e96e30;
}
body[data-trajectory] .tl-pakket-hero .hero-visual {
  width:100%;
  height:430px;
  margin:0;
  overflow:hidden;
  border:6px solid #fff;
  border-radius:29px;
  background:#e8d8c8;
  box-shadow:0 22px 46px rgba(77,45,27,.16);
  transform:rotate(1.3deg);
}
body[data-trajectory] .tl-pakket-hero .hero-visual > img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:54% center;
}
body[data-trajectory] .tl-pakket-hero .hero-visual::after {
  inset:30% 0 0;
  background:linear-gradient(180deg,transparent,rgba(15,28,26,.73));
}
body[data-trajectory] .tl-pakket-hero .image-label {
  top:16px;
  right:16px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,250,245,.9);
  color:#57483d;
  font-size:10px;
}
body[data-trajectory] .tl-pakket-hero .visual-caption {
  bottom:25px;
  left:24px;
  right:24px;
}
body[data-trajectory] .tl-pakket-hero .visual-kicker {
  color:#fff0e0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}
body[data-trajectory] .tl-pakket-hero .visual-caption p {
  max-width:360px;
  margin-top:9px;
  color:#fff;
  font-family:'Outfit','DM Sans',Manrope,Arial,sans-serif;
  font-size:clamp(20px,2vw,25px);
  font-weight:800;
  line-height:1.27;
  letter-spacing:-.035em;
}
@media(max-width:1050px) {
  body[data-trajectory] .hero.tl-pakket-hero {
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    gap:25px;
    padding:32px;
  }
  body[data-trajectory] .tl-pakket-hero h1 { font-size:clamp(37px,4.5vw,50px); }
  body[data-trajectory] .tl-pakket-hero .hero-visual { height:365px; }
}
@media(max-width:760px) {
  body[data-trajectory] .site-header .header-inner {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:calc(100% - 28px);
    min-height:74px !important;
    height:auto !important;
    padding:9px 0;
  }
  body[data-trajectory] .site-header .brand {
    flex:0 0 auto;
    width:clamp(130px,35vw,171px);
    height:46px;
  }
  body[data-trajectory] .site-header .brand img {
    width:100%;
    top:-17px;
  }
  body[data-trajectory] .site-header .header-cta {
    flex:0 1 auto;
    max-width:54%;
    min-height:44px;
    padding:9px 11px;
    font-size:clamp(9px,2.5vw,11px);
    line-height:1.22;
  }
  body[data-trajectory] .site-header .header-cta svg { width:16px; height:16px; }

  body[data-trajectory] .hero.tl-pakket-hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    width:calc(100% - 22px);
    margin:12px auto 22px;
    padding:24px 19px 19px;
    border-radius:28px;
    box-shadow:0 12px 32px rgba(105,61,30,.06);
  }
  body[data-trajectory] .hero.tl-pakket-hero::before {
    top:-155px;
    right:-125px;
    width:300px;
    height:300px;
  }
  body[data-trajectory] .tl-pakket-hero .eyebrow {
    gap:7px;
    padding:5px 11px 5px 5px;
    margin-bottom:17px;
    font-size:10px;
    letter-spacing:.08em;
    white-space:normal;
  }
  body[data-trajectory] .tl-pakket-hero .eyebrow::before {
    flex-basis:26px;
    width:26px;
    height:26px;
    border-radius:9px;
    font-size:10px;
  }
  body[data-trajectory] .tl-pakket-hero h1 {
    margin:0 0 16px;
    font-size:clamp(34px,9.2vw,48px);
    line-height:1.075;
    letter-spacing:-.055em;
  }
  body[data-trajectory] .tl-pakket-hero .hero-intro {
    max-width:none;
    font-size:14px;
    line-height:1.62;
  }
  body[data-trajectory] .tl-pakket-hero .hero-actions {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:21px;
  }
  body[data-trajectory] .tl-pakket-hero .hero-actions > a.button {
    width:100% !important;
    min-height:60px !important;
    font-size:14px !important;
  }
  body[data-trajectory] .tl-pakket-hero .hero-actions > button[data-choice-start] {
    width:100%;
    min-height:43px;
    padding:9px 12px;
    background:rgba(255,250,246,.86);
    font-size:12px;
  }
  body[data-trajectory] .tl-pakket-hero .hero-note {
    display:flex;
    width:100%;
    justify-content:center;
    margin-top:14px;
    padding:10px;
    font-size:11px;
    text-align:center;
  }
  body[data-trajectory] .tl-pakket-hero .hero-visual {
    flex:none;
    width:100%;
    height:clamp(200px,55vw,265px);
    margin:2px 0 0;
    border:4px solid #fff;
    border-radius:23px;
    box-shadow:0 13px 26px rgba(77,45,27,.14);
    transform:none;
  }
  body[data-trajectory] .tl-pakket-hero .hero-visual > img { object-position:50% 58%; }
  body[data-trajectory] .tl-pakket-hero .visual-caption { left:19px; bottom:16px; right:17px; }
  body[data-trajectory] .tl-pakket-hero .visual-kicker { font-size:9px; }
  body[data-trajectory] .tl-pakket-hero .visual-caption p {
    max-width:260px;
    font-size:19px;
    line-height:1.25;
  }
}
@media(max-width:370px) {
  body[data-trajectory] .tl-pakket-hero h1 { font-size:33px; }
  body[data-trajectory] .tl-pakket-hero .hero-visual { height:195px; }
  body[data-trajectory] .site-header .header-cta { font-size:9px; padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-trajectory] .tl-pakket-hero,
  body[data-trajectory] .tl-pakket-hero * {
    animation:none !important;
    transition:none !important;
  }
}

/* Tempolessen pakketintro zonder lesautofoto 2026-11-06 */
body[data-trajectory] .hero.tl-pakket-hero {
  display: block;
  width: min(1040px, calc(100% - 48px));
  min-height: 0;
  padding: clamp(30px, 4.1vw, 50px);
}
body[data-trajectory] .hero.tl-pakket-hero .hero-copy {
  width: 100%;
  max-width: 830px;
}
@media (max-width: 1050px) {
  body[data-trajectory] .hero.tl-pakket-hero {
    display: block;
    grid-template-columns: none;
  }
}
@media (max-width: 760px) {
  body[data-trajectory] .hero.tl-pakket-hero {
    display: block;
    width: calc(100% - 22px);
    margin: 12px auto 22px;
    padding: 24px 19px 25px;
    gap: 0;
  }
}