/* Valorem — openbare website, september 2026.
   Lichte leesvlakken, goud op marineblauw en de bestaande merkbeweging. */
:root{--site-copy:58ch}
html:not(.is-app){scroll-padding-top:94px}
:where(.pakket-hulp-stap,.pakket-hulp-resultaat,.contact-formkaart){scroll-margin-top:12px}
.hero--focus{padding-block:104px 60px}
.hero--focus .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:64px}
.hero--focus h1{max-width:18ch;font-size:clamp(2.35rem,4.4vw,3.65rem);line-height:1.12;margin-bottom:25px}
.hero--focus .lead{max-width:47ch;line-height:1.65}
.hero--focus .hero-offer{font-family:var(--serif);font-size:1.7rem;line-height:1.4;color:var(--gold-soft);margin:25px 0 0}
.hero-offer span{display:inline-block;font:400 .875rem var(--sans);color:#d1d9e5;margin-left:7px;white-space:nowrap}
.hero--focus .hero-btns{margin-top:20px;gap:12px}
.hero--focus .hero-points{margin-top:24px;gap:10px 24px}
.hero--focus .hero-points li{font-size:.9rem;align-items:flex-start}
.hero--focus .hero-points svg{margin-top:4px}
.hero--focus .hero-badge{font-size:.8125rem;letter-spacing:.12em;line-height:1.75;max-width:52ch;margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(219,185,104,.25);color:#dfc17d}
.hero--focus .hero-panel{padding:34px 32px 26px;position:relative;box-shadow:0 30px 80px -40px #000, inset 0 1px rgba(255,255,255,.09)}
.hero--focus .hero-panel-kop{font-size:.8125rem;margin-bottom:24px}
.hero--focus .hero-panel-lijst{gap:18px}
.hero--focus .hero-panel-lijst li{padding-top:18px}
.hero--focus .hero-panel-lijst li:first-child{padding-top:0}
.hero--focus .hero-panel-lijst strong{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:5px}
.hero--focus .hero-panel-lijst span{font-size:.9375rem;color:#d5ddeb;max-width:34ch}
.hero-adviser{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:21px;border-top:1px solid rgba(219,185,104,.25);font-size:.875rem;color:var(--gold-soft);text-decoration:none}
.hero-adviser svg{width:18px;height:18px;transition:transform .2s ease}
.hero-adviser:hover svg{transform:translateX(4px)}
.signup-choice{display:flex;flex-direction:column;align-items:flex-start;gap:17px;border-top:3px solid var(--gold)}
.signup-choice h3{font-size:1.65rem;margin:0}
.signup-choice p{margin:0;color:var(--text-soft)}
.signup-choice .btn{width:100%;justify-content:center;margin-top:4px}
.signup-seal{display:block;margin-bottom:4px}
.signup-seal .brand-mark{width:56px;height:56px}
.signup-meet{display:inline-flex;gap:9px;align-items:center;color:var(--ink);font-size:.9375rem;text-underline-offset:4px}
.signup-meet svg{width:18px;height:18px}
.footer-disclaimer{font-size:.875rem;color:rgba(255,255,255,.74);line-height:1.7}
.hero-badge,.price-badge{font-size:.8125rem;line-height:1.55}
html:not(.is-app) :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--gold-ink);outline-offset:4px}
html:not(.is-app) :where(.hero,.page-hero,.section--dark,.site-footer,.cta) :where(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--gold-soft)}
.section :where(h2,h3){text-wrap:balance}
.section p{max-width:70ch}
@media (max-width:1100px){
  .hero--focus .hero-grid{gap:38px}
  .hero--focus .hero-panel{padding:28px 24px}
}
@media (max-width:960px){
  .hero--focus .hero-grid{grid-template-columns:1fr}
  .hero--focus .hero-text{max-width:680px}
}
@media (max-width:720px){
  .hero--focus{padding:100px 0 38px}
  .hero--focus h1{font-size:clamp(2rem,7.5vw,2.7rem);max-width:19ch;margin-bottom:18px;line-height:1.16}
  .hero--focus .lead{font-size:1rem;max-width:43ch}
  .hero--focus .hero-offer{font-size:1.45rem;margin-top:19px}
  .hero--focus .hero-btns{margin-top:18px;gap:10px}
  .hero--focus .hero-btns .btn{min-height:50px;padding-block:12px}
  .hero--focus .hero-points{display:grid;gap:8px;margin-top:20px}
  .hero--focus .hero-badge{margin-top:22px;padding-top:16px;font-size:.8125rem;letter-spacing:.1em}
  .price-badge{font-size:.8125rem;letter-spacing:.075em}
  .page-hero{padding-block:112px 38px}
  .page-hero .crumbs{font-size:.875rem}
  .page-hero p:not(.crumbs){font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.hero-adviser svg{transition:none}}
/* Ook de bestaande tweekolomslijsten passen binnen een kleine telefoon. */
html:not(.is-app) .ticks--2{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}