/* FuturePath v5.19 — discrete polish: hover/focus feedback, progress hairline, section pill. Loaded last. */
:root{--fp-ease:cubic-bezier(.2,.7,.3,1)}
/* tabular numbers for precise figures */
[data-result-number],[data-fps-result],.calc-result strong{font-variant-numeric:tabular-nums}
/* ---- hover / focus feedback (colour only; no layout change) ---- */
.fp-guide-card{transition:border-color .2s ease,box-shadow .2s ease}
.fp-guide-card:hover,.fp-guide-card:focus-within{border-color:#f38c48;box-shadow:0 10px 25px rgba(1,33,71,.09)}
.fp-rd .fp-rd-card:focus-within{border-color:#f38c48;box-shadow:0 10px 25px rgba(1,33,71,.09)}
.button-navy:hover{background:var(--primary)}
.button-outline:hover{background:#ffffff14}
.board-tab:not([aria-selected=true]):hover{color:#fff;background:#ffffff14}
.faq-list summary:hover{color:var(--primary)}
.languages a:hover{color:var(--navy)}
.fp58-languages summary:hover{border-color:#f86f1d}
.menu-toggle:hover,.menu-toggle[aria-expanded=true]{border-color:var(--orange)}
.fp-assistant-send:hover{background:#ff823e}
.fp-assistant-close:hover{background:#ffffff33}
.fp-assistant-actions a:hover{background:#ffe6d4}
.fp-assistant-input:focus-visible{border-color:#f86f1d}
.field input:not([aria-invalid=true]):hover,.field select:not([aria-invalid=true]):hover{border-color:#a8b6c7}
.fp-consent-buttons button:hover{filter:brightness(.96)}
.calc-reset:hover{color:var(--primary)}
.footer-links a,.fp58-footer a{text-underline-offset:3px;transition:color .15s ease}
/* ---- new small components ---- */
.fp-hook{margin:.9rem 0 .7rem;padding-left:.7rem;border-left:2px solid var(--orange);font-weight:600;font-size:.98rem;line-height:1.45;letter-spacing:.005em}
.fp-invest-note{margin:1.25rem 0;padding:1.1rem 1.25rem;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:12px;background:#fff;transition:box-shadow .2s ease,border-color .2s ease}
.fp-invest-note h3{margin:0 0 .4rem;font-size:15px;line-height:1.35}
.fp-invest-note p{margin:0 0 .6rem;font-size:14px;line-height:1.6}
.fp-invest-note a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.fp-invest-note:hover,.fp-invest-note:focus-within{box-shadow:0 10px 25px rgba(1,33,71,.09)}
/* ---- motion (only when the visitor allows it) ---- */
@media (prefers-reduced-motion:no-preference){
  .button:active,.fp58-btn:active,.fp-rd-primary:active{transform:translateY(0)}
  .example-card:active,.fp-industry-link:active{transform:translateY(-2px)}
  .faq-list summary:after{transition:transform .2s ease}
  .text-link:hover svg,.button:hover svg{transform:translateX(3px)}
  .text-link svg,.button svg{transition:transform .2s ease}
  .fp-invest-note a{transition:color .15s ease}
}
/* scroll progress hairline: pure CSS, only where scroll-driven animations exist */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    html::after{content:"";position:fixed;top:0;left:0;width:100%;height:2px;background:var(--orange);transform-origin:0 50%;transform:scaleX(0);z-index:90;pointer-events:none;animation:fp-progress linear both;animation-timeline:scroll(root)}
    @keyframes fp-progress{to{transform:scaleX(1)}}
  }
}
/* section pill (desktop): shows the current section, expands to the contact action */
.fp-pill{position:fixed;left:50%;bottom:22px;z-index:200;display:none;align-items:center;gap:.55rem;max-width:calc(100vw - 32px);padding:.55rem .95rem;border-radius:999px;background:var(--navy);color:#fff;font-size:.86rem;font-weight:600;text-decoration:none;box-shadow:0 14px 34px rgba(1,33,71,.28);transform:translate(-50%,16px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .35s var(--fp-ease),visibility 0s linear .35s}
.fp-pill.is-on{opacity:1;transform:translate(-50%,0);visibility:visible;pointer-events:auto;transition-delay:0s}
.fp-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.fp-pill-label{white-space:nowrap}
.fp-pill-act{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s var(--fp-ease),opacity .25s ease,margin .4s var(--fp-ease)}
.fp-pill:hover .fp-pill-act,.fp-pill:focus-visible .fp-pill-act{max-width:260px;opacity:1;margin-left:.35rem}
.fp-pill:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (min-width:1000px){.fp-pill{display:inline-flex}}
@media (prefers-reduced-motion:reduce){.fp-pill,.fp-pill-act{transition:none}}
/* ---- v5.19.1: hero entrance, number tick, card spotlight, tagline ---- */
.fp-tagline{margin:.9rem 0 .35rem;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.fp-rd-card,.fp-guide-card,.fp-invest-note{background-repeat:no-repeat}
.fp-spot:hover{background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(248,111,29,.08),transparent 70%)}
@keyframes fp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fp-fade{from{opacity:0}to{opacity:1}}
@keyframes fp-tick{0%{opacity:.15;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero .kicker,.hero h1,.hero .hero-intro,.hero .hero-actions,.hero .fp-tagline,.hero .hero-note{animation:fp-rise .6s var(--fp-ease) backwards}
  .hero h1{animation-delay:.06s}
  .hero .hero-intro{animation-delay:.14s}
  .hero .hero-actions{animation-delay:.22s}
  .hero .fp-tagline{animation-delay:.3s}
  .hero .hero-note{animation-delay:.36s}
  .hero .hero-board{animation:fp-fade .8s ease .2s backwards}
  [data-board-rate].fp-tick,[data-board-base].fp-tick{animation:fp-tick .35s var(--fp-ease) both}
}
/* ---- investeringsaftrek page ---- */
.fp-inv-wrap{max-width:var(--max,1240px);margin:0 auto;padding:0 24px}
.fp-inv-hero{background:linear-gradient(135deg,#012147,#173e66);color:#fff;padding:64px 0 52px}
.fp-inv-kicker{margin:0 0 .8rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffa365}
.fp-inv-hero h1{margin:0 0 .9rem;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1;color:#fff}
.fp-inv-lead{margin:0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#dbe6f2}
.fp-inv-notice{margin:28px 0;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:12px;background:#fff;font-size:.95rem;line-height:1.55}
.fp-inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:12px}
.fp-inv-card{padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.fp-inv-card:hover,.fp-inv-card:focus-within{border-color:#f38c48;box-shadow:0 10px 25px rgba(1,33,71,.09)}
.fp-inv-card h2{margin:0 0 .5rem;font-size:1.1rem}
.fp-inv-rate{margin:0 0 .7rem;font-size:1.35rem;font-weight:800;line-height:1.25;color:var(--navy);font-variant-numeric:tabular-nums}
.fp-inv-card p{margin:0 0 .6rem;font-size:.95rem;line-height:1.6}
.fp-inv-block{margin:28px 0}
.fp-inv-block h2{margin:0 0 .7rem;font-size:1.3rem}
.fp-inv-block p{max-width:70ch;line-height:1.65}
.fp-inv-list{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.fp-inv-list li{position:relative;padding-left:1.6rem;line-height:1.55;max-width:75ch}
.fp-inv-list li:before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.fp-inv-cta{margin:36px 0;padding:28px;border-radius:16px;background:var(--navy);color:#fff}
.fp-inv-cta h2{margin:0 0 .5rem;color:#fff;font-size:1.3rem}
.fp-inv-cta p{margin:0 0 1rem;max-width:62ch;color:#dbe6f2;line-height:1.6}
.fp-inv-btn{display:inline-block;padding:.8rem 1.2rem;border-radius:999px;background:var(--orange);color:#fff;font-weight:700;text-decoration:none;transition:background .2s ease}
.fp-inv-btn:hover{background:#ff823e}
.fp-inv-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fp-inv-source{margin:0 0 48px;font-size:.82rem;color:var(--muted)}
.fp-inv-more{margin:0 0 .6rem}
@media (max-width:900px){.fp-inv-grid{grid-template-columns:1fr}.fp-inv-hero{padding:44px 0 36px}}
@media (prefers-reduced-motion:no-preference){.fp-inv-hero .fp-inv-wrap>*{animation:fp-rise .6s var(--fp-ease) backwards}.fp-inv-hero h1{animation-delay:.06s}.fp-inv-lead{animation-delay:.14s}}
/* accessibility: small orange text on light backgrounds (2.9:1) -> darker orange (>=4.5:1) */
.process-index,.fp58-calc-kicker{color:#c2410c}
/* ---- v5.20: more present, still controlled ---- */
.fp-spot:hover{background-image:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(248,111,29,.15),transparent 72%);box-shadow:0 16px 38px rgba(248,111,29,.14)}
@media (prefers-reduced-motion:no-preference){
  /* h3 answers the pointer; h1/h2 get the magnifier (script) */
  main h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:.2em;transition:text-decoration-color .3s ease}
  main h3:hover{text-decoration-color:var(--orange)}
  /* orange buttons: a light sweep on hover */
  .button-orange,.fp58-btn-orange,.fp-rd-primary,.fp-inv-btn{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat;transition:background-position .5s ease,background-color .2s ease,transform .2s ease}
  .button-orange:hover,.fp58-btn-orange:hover,.fp-rd-primary:hover,.fp-inv-btn:hover{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);background-size:260% 100%;background-position:-30% 0;background-repeat:no-repeat;transition:background-position .7s ease,background-color .2s ease,transform .2s ease}
  /* scroll reveal for the newer blocks (class added by script, only below the fold) */
  .fp-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s var(--fp-ease)}
  .fp-rv.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s var(--fp-ease),border-color .2s ease,box-shadow .2s ease}
}


/* ---- v5.21: investeringsaftrek block as a clear banner (was washed out inside .fp-rd) ---- */
.fp-invest-note,.fp-rd .fp-invest-note,.fp-guide-main .fp-invest-note{margin:1.5rem 0;padding:1.4rem 1.6rem;border:0;border-left:4px solid var(--orange);border-radius:14px;background:var(--navy);color:#fff;box-shadow:0 14px 34px rgba(1,33,71,.18);opacity:1}
.fp-invest-note h3,.fp-rd .fp-invest-note h3{margin:0 0 .5rem;font-size:1.15rem;line-height:1.3;color:#fff!important}
.fp-invest-note p,.fp-rd .fp-invest-note p{margin:0 0 .8rem;font-size:15px;line-height:1.6;color:#dbe6f2!important;opacity:1!important;max-width:70ch}
.fp-invest-note p.fp-inv-more{margin:0 0 .4rem}
.fp-invest-note p.fp-inv-more a{display:inline-block;padding:.65rem 1.1rem;border-radius:999px;background:var(--orange);color:#fff!important;font-weight:700;text-decoration:none;transition:background-color .2s ease}
.fp-invest-note p.fp-inv-more a:hover{background:#ff823e}
.fp-invest-note a{color:#ffd2b3;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.fp-invest-note a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fp-invest-note:hover,.fp-invest-note:focus-within{box-shadow:0 18px 40px rgba(1,33,71,.26)}

@media print{.fp-rv{opacity:1!important;transform:none!important}.fp-pill{display:none!important}}

/* ---- v5.22: whole-heading hover (h1/h2): smooth zoom + orange underline, no per-letter effects ---- */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  main h1,main h2{transform-origin:left center;transition:transform .45s var(--fp-ease),text-decoration-color .3s ease;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:.2em}
  main h1:hover,main h2:hover{transform:scale(1.04);text-decoration-color:var(--orange)}
}
/* ---- v5.23: investeringsaftrek as a full third branch ---- */
@media (min-width:1100px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fp58-flips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:951px) and (max-width:1099px){.service-grid>.flip-card:nth-child(3){grid-column:1/-1}.fp58-flips>.fp58-flip:nth-child(3){grid-column:1/-1}}
.board-tabs .board-tab{flex:1 1 0}
.board-number strong{white-space:nowrap}
.service-badge strong{white-space:nowrap}
.service-grid .flip-card:nth-child(3) .service-badge strong{font-size:42px}
