/* Loopbaannederland.nl - gedeelde styles */

  /* ---------- Design tokens ----------
     --brand: blauw zoals in het Loopbaannederland-logo. Pas hier
     desgewenst de exacte hex aan; de rest van de site past zich aan. */
  :root{
    --brand:#55a0cc;
    --brand-dark:#3d7ea3;
    --brand-soft:#eef6fb;
    --cta:#22a447;            /* groen, conform jouw wens */
    --cta-dark:#1c8a3a;
    --ink:#1a1a1a;
    --muted:#5b6470;
    --line:#e6e8ec;
    --bg:#ffffff;
    --soft:#f5f7fa;
    --trust:#00b67a;          /* Trustpilot groen */
    --shadow:0 2px 8px rgba(20,30,60,.06);
    --radius:10px;
    --maxw:1140px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink); background:var(--bg); line-height:1.55; font-size:16px;
  }
  a{color:var(--brand); text-decoration:none}
  a:hover{text-decoration:underline}
  .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

  /* ---------- Top utility bar ---------- */
  .topbar{background:var(--brand); color:#fff; font-size:13.5px}
  .topbar .container{display:flex; align-items:center; justify-content:flex-end; gap:22px; height:38px}
  .topbar a{color:#fff; opacity:.92}
  .topbar a:hover{opacity:1; text-decoration:none}
  .topbar .phone{font-weight:600}
  .topbar .sep{opacity:.4}

  /* ---------- Hoofdnav ---------- */
  .nav{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
  .nav .container{display:flex; align-items:center; justify-content:space-between; height:80px}
  .logo{color:var(--brand); display:inline-flex; align-items:center}
  .logo svg{display:block; height:38px; width:auto}
  .logo img{display:block; height:46px; width:auto}
  .nav-links{display:flex; align-items:center; gap:28px}
  .nav-links a{color:#1a1a1a; font-weight:500; font-size:15px}
  .nav-links a:hover{color:var(--brand)}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    border:0; cursor:pointer; font-weight:600; font-size:15px;
    padding:11px 18px; border-radius:8px; text-decoration:none; line-height:1;
    transition:transform .04s ease, background .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--cta); color:#fff}
  .btn-primary:hover{background:var(--cta-dark); text-decoration:none}
  .btn-ghost{background:transparent; color:var(--brand); border:1px solid var(--line)}
  .btn-lg{padding:15px 26px; font-size:17px}

  /* ---------- HERO ---------- */
  .hero{background:linear-gradient(180deg, var(--brand-soft) 0%, #ffffff 100%); padding:48px 0 32px}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:24px} }
  .hero h1{
    font-size:38px; line-height:1.15; margin:0 0 14px; letter-spacing:-.6px; color:#0c1a3a;
  }
  .hero .lede{font-size:17px; color:var(--muted); margin:0 0 22px; max-width:540px}

  /* ---------- Stappen — compact, direct zichtbaar ---------- */
  .steps{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:0 0 22px;
  }
  @media (max-width:640px){ .steps{grid-template-columns:1fr} }
  .step{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
    box-shadow:var(--shadow);
  }
  .step .num{
    flex:0 0 auto;
    width:30px; height:30px; border-radius:50%;
    background:var(--brand); color:#fff;
    display:grid; place-items:center; font-weight:700; font-size:14px;
  }
  .step .body{font-size:14.5px; line-height:1.35}
  .step .body strong{display:block; color:#0c1a3a; font-size:15px; margin-bottom:2px}
  .step .body .sub{color:var(--muted); font-size:13px}

  /* ---------- Trustpilot blok ---------- */
  .trust-row{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 16px; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    max-width:520px;
  }
  .trust-stars{display:flex; gap:2px}
  .trust-stars .s{
    width:24px; height:24px; background:var(--trust);
    display:grid; place-items:center; border-radius:3px;
  }
  .trust-stars .s svg{width:16px; height:16px; fill:#fff}
  .trust-text{font-size:14px; color:var(--ink); line-height:1.3}
  .trust-text b{display:block; color:#0c1a3a}
  .trust-text a{color:var(--brand); font-weight:600}

  /* ---------- Hero rechts: formulier-card ---------- */
  .form-card{
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:0 10px 30px rgba(20,30,60,.08); padding:24px;
  }
  .form-card h3{margin:0 0 4px; font-size:20px; color:#0c1a3a}
  .form-card .sub{margin:0 0 16px; color:var(--muted); font-size:14px}
  .form-step-indicator{display:flex; gap:6px; margin-bottom:16px}
  .form-step-indicator span{flex:1; height:4px; background:var(--line); border-radius:2px}
  .form-step-indicator span.active{background:var(--brand)}
  .field{margin-bottom:14px}
  .field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#0c1a3a}
  .field select, .field input, .field textarea{
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
    font:inherit; color:var(--ink); background:#fff;
  }
  .field select:focus, .field input:focus{outline:2px solid #c7d6f7; border-color:var(--brand)}

  /* ---------- Counters ---------- */
  .counters{background:var(--soft); padding:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .counters .container{display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:center}
  @media (max-width:640px){ .counters .container{grid-template-columns:1fr} }
  .counter .num{font-size:34px; font-weight:800; color:var(--brand); letter-spacing:-1px}
  .counter .lbl{font-size:14px; color:var(--muted)}

  /* ---------- Logos ---------- */
  .logos{padding:36px 0}
  .logos h3{text-align:center; font-size:14px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); font-weight:600; margin:0 0 22px}
  .logo-row{display:grid; grid-template-columns:repeat(6,1fr); gap:24px; align-items:center; justify-items:center}
  @media (max-width:800px){ .logo-row{grid-template-columns:repeat(3,1fr)} }
  .logo-row img{
    max-width:100%; max-height:64px; width:auto; height:auto;
    object-fit:contain; filter:grayscale(.4); opacity:.85;
    transition:filter .15s ease, opacity .15s ease;
  }
  .logo-row img:hover{filter:none; opacity:1}

  /* ---------- Reviews ---------- */
  .reviews{padding:48px 0; background:var(--soft)}
  .reviews-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px}
  .reviews-head h2{margin:0; font-size:26px; color:#0c1a3a}
  .review-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  @media (max-width:900px){ .review-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .review-grid{grid-template-columns:1fr} }
  .review{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:18px; font-size:14.5px; line-height:1.5; box-shadow:var(--shadow);
  }
  .review .stars{display:flex; gap:2px; margin-bottom:8px}
  .review .stars .s{width:16px; height:16px; background:var(--trust); border-radius:2px}
  .review p{margin:0 0 12px; color:#1a1a1a}
  .review .who{color:var(--muted); font-size:13px; font-style:normal}
  .review .who b{color:#0c1a3a; font-style:normal; display:block}

  /* ---------- Footer ---------- */
  footer{background:var(--brand-dark); color:#f0f5fa; padding:40px 0 24px; margin-top:32px}
  footer .container{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
  @media (max-width:800px){ footer .container{grid-template-columns:1fr 1fr} }
  footer h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin:0 0 12px}
  footer a{color:#f0f5fa; display:block; padding:4px 0; font-size:14.5px}
  footer a:hover{color:#fff; text-decoration:none}
  footer .logo-foot svg{height:36px; width:auto; color:#ffffff}
  footer .logo-foot img{height:42px; width:auto; filter:brightness(0) invert(1)}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.2); margin-top:28px; padding-top:18px; font-size:13px; color:rgba(255,255,255,.7); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
  .socials{display:flex; gap:10px}
  .socials a{
    width:32px; height:32px; border:1px solid rgba(255,255,255,.3); border-radius:6px;
    display:grid; place-items:center; padding:0;
  }

  /* ---------- Hamburger (mobiel) ---------- */
  .hamburger{
    display:none; background:transparent; border:0; cursor:pointer;
    width:42px; height:42px; padding:8px;
    flex-direction:column; justify-content:center; gap:5px;
  }
  .hamburger span{display:block; height:2.5px; background:#1a1a1a; border-radius:2px; transition:transform .2s ease, opacity .2s ease}
  .hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ---------- Sticky mobiele CTA ---------- */
  .mobile-cta{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:#fff; padding:10px 16px;
    border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
  }
  .mobile-cta .btn{width:100%; justify-content:center}

  /* ---------- MOBIELE OVERRIDES ---------- */
  @media (max-width:800px){
    /* Topbar: compacter, e-mail verbergen op klein scherm */
    .topbar{font-size:12.5px}
    .topbar .container{gap:14px; height:36px; justify-content:flex-end}
    .topbar .sep{display:none}
    .topbar .email-link{display:none}

    /* Hoofdnav: hamburger ipv inline links */
    .nav .container{height:64px; position:relative}
    .logo img{height:38px}
    .hamburger{display:flex}
    .nav-links{
      display:none; position:absolute; top:100%; left:0; right:0;
      background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
      flex-direction:column; align-items:stretch; gap:0; padding:6px 0;
      box-shadow:0 8px 20px rgba(0,0,0,.06);
    }
    .nav-links.open{display:flex}
    .nav-links a{padding:14px 20px; border-bottom:1px solid var(--line)}
    .nav-links a:last-child{border-bottom:0}

    /* Hero: kleinere typografie, minder padding */
    .hero{padding:28px 0 20px}
    .hero h1{font-size:28px; line-height:1.18}
    .hero .lede{font-size:15.5px; margin-bottom:18px}

    /* Form-card iets compacter */
    .form-card{padding:18px}
    .form-card h3{font-size:18px}

    /* Trustpilot blok mag de volle breedte hebben */
    .trust-row{max-width:none}

    /* Reviews-head stacken */
    .reviews-head h2{font-size:22px}

    /* Counters wat strakker */
    .counter .num{font-size:28px}

    /* Sticky CTA aanzetten + extra padding onderaan body */
    .mobile-cta{display:block}
    body{padding-bottom:74px}

    /* Footer onderkant netjes stacken */
    .foot-bottom{flex-direction:column; align-items:flex-start; gap:14px}
  }

  @media (max-width:480px){
    .logo-row{grid-template-columns:repeat(2,1fr); gap:18px}
    .logo-row img{max-height:48px}
    footer .container{grid-template-columns:1fr}
    .hero h1{font-size:24px}
  }

  /* Multi-step formulier */
  .form-step.hidden{display:none}
  .form-step h3{margin:6px 0 4px}
  .form-step .step-label{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px}
  .form-step .opt{color:var(--muted); font-weight:400; font-size:12px}
  .form-step .hint{display:block; margin-top:6px; color:var(--muted); font-size:12.5px; line-height:1.4}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .field-row .field{margin-bottom:14px}
  .step-nav{display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:8px}
  .step-nav .btn-ghost{padding:11px 16px}
  .step-nav .btn-primary{flex:1; justify-content:center}
  .submit-btn{flex:1; justify-content:center}
  @media (max-width:520px){
    .field-row{grid-template-columns:1fr}
  }


  .benefit .ic{
    flex:0 0 44px; width:44px; height:44px; border-radius:50%;
    background:var(--brand-soft); color:var(--brand);
    display:grid; place-items:center;
  }
  .benefit .ic svg{width:24px; height:24px}
  .benefit h3{margin:0 0 4px; font-size:16px; color:#0c1a3a}
  .benefit p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5}
  .page-head h1{margin:0; font-size:32px; color:#0c1a3a; letter-spacing:-.5px}
  .page-head .lede{margin:6px 0 0; color:var(--muted); font-size:15.5px}
  .page-head h1{font-size:24px}
  .filters h2{margin:0 0 14px; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--muted)}
  .filter-group:first-of-type{border-top:0; padding-top:0}
  .filter-group h3{margin:0 0 10px; font-size:14px; color:#0c1a3a; font-weight:700}
  .check input{accent-color:var(--brand)}
  .check span{flex:1}
  .city-link:hover{color:var(--brand); text-decoration:none}
  .search input{
    flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
    font:inherit; color:var(--ink); background:#fff;
  }
  .search input:focus{outline:2px solid #c7d6f7; border-color:var(--brand)}
  .results-count b{color:var(--ink)}
  .sort select{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; background:#fff; color:var(--ink)}
  .company-card:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,30,60,.08)}
  .company-card h3{margin:0; font-size:19px; color:#0c1a3a}
  .company-card h3 a{color:#0c1a3a}
  .company-card h3 a:hover{color:var(--brand)}
  .pagination a, .pagination span{
    min-width:36px; height:36px; padding:0 10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); border-radius:8px;
    color:var(--ink); font-size:14px; font-weight:500;
  }
  .pagination a:hover{background:var(--soft); text-decoration:none}
  .pagination .active{background:var(--brand); color:#fff; border-color:var(--brand)}
  .pagination .nav-arrow{font-weight:600; color:var(--brand)}
  .city-search:focus{outline:2px solid #c7d6f7; border-color:var(--brand)}
  .city-list .check{padding:4px 0; font-size:13.5px}
  .city-list .check.hidden{display:none}
  .alt-cta-banner p{margin:0; font-size:14.5px; color:#0c1a3a}
  .alt-cta-banner b{color:var(--brand-dark)}
  .alt-cta-banner p{text-align:center}
  .service-link:hover{background:var(--brand-soft); border-color:var(--brand); text-decoration:none; color:var(--brand-dark)}
  .service-link:active{transform:translateY(1px)}
  /* ---------- Service links (home) ---------- */
  .service-link{
    display:block; background:#fff; border:1px solid var(--line); border-radius:10px;
    padding:14px 16px; color:#0c1a3a; font-size:14.5px; font-weight:600;
    text-align:center; text-decoration:none;
    transition:border-color .15s ease, background .15s ease, transform .04s ease;
  }
  .service-link:hover{background:var(--brand-soft); border-color:var(--brand); text-decoration:none; color:var(--brand-dark)}
  .service-link:active{transform:translateY(1px)}
  @media (max-width:800px){ .service-link{font-size:13.5px; padding:12px 10px} }
  @media (max-width:480px){
    section .container div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr) !important}
  }

  /* ---------- Page head (CMS / content pages) ---------- */
  .page-head{background:linear-gradient(180deg, var(--brand-soft) 0%, #fff 100%); padding:32px 0 16px}
  .page-head h1{margin:0; font-size:32px; color:#0c1a3a; letter-spacing:-.5px}
  .page-head .lede{margin:6px 0 0; color:var(--muted); font-size:15.5px}
  @media (max-width:800px){ .page-head h1{font-size:24px} }

  /* Generic content page wrapper */
  .content-page{padding:32px 0 48px; max-width:780px; margin:0 auto}
  .content-page h1,.content-page h2,.content-page h3{color:#0c1a3a}
  .content-page p{color:#2a2f38; font-size:15.5px; line-height:1.7}

  /* ---------- Bedrijvengids ---------- */
  .layout{display:grid; grid-template-columns:280px 1fr; gap:28px; padding:24px 0 40px}
  @media (max-width:900px){ .layout{grid-template-columns:1fr; gap:18px} }

  .filters{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:var(--shadow); align-self:start; position:sticky; top:96px}
  @media (max-width:900px){ .filters{position:static} }
  .filters h2{margin:0 0 14px; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--muted)}
  .filter-group{border-top:1px solid var(--line); padding:14px 0}
  .filter-group:first-of-type{border-top:0; padding-top:0}
  .filter-group h3{margin:0 0 10px; font-size:14px; color:#0c1a3a; font-weight:700}
  .check{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:14px; color:#2a2f38; cursor:pointer}
  .check input{accent-color:var(--brand)}
  .check span{flex:1}
  .city-link{display:block; padding:3px 0; font-size:13.5px; color:#2a2f38}
  .city-link:hover{color:var(--brand); text-decoration:none}
  .toggle-more{margin-top:8px; background:transparent; border:0; cursor:pointer; color:var(--brand); font:inherit; font-size:13px; font-weight:600; padding:4px 0}
  .hide-extra{display:none}
  .open .hide-extra{display:block}
  .filter-toggle{
    display:none; width:100%; background:#fff; border:1px solid var(--line); border-radius:8px;
    padding:11px 14px; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
    margin-bottom:14px; align-items:center; justify-content:space-between;
  }
  .city-search{
    width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
    font:inherit; font-size:13.5px; margin-bottom:8px; background:#fff;
  }
  .city-search:focus{outline:2px solid #c7d6f7; border-color:var(--brand)}
  .city-list{
    max-height:240px; overflow-y:auto; display:flex; flex-direction:column;
    border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  }
  .city-list .check{padding:4px 0}
  .city-list .check.hidden{display:none}
  .results-bar{
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .search{flex:1 1 320px; display:flex; gap:8px}
  .search input{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:#fff}
  .search input:focus{outline:2px solid #c7d6f7; border-color:var(--brand)}
  .results-count{color:var(--muted); font-size:14px}
  .results-count b{color:var(--ink)}
  .sort{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
  .sort select{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; background:#fff; color:var(--ink)}
  .companies{display:flex; flex-direction:column; gap:14px}
  .company-card{
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:20px 22px; box-shadow:var(--shadow); display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:flex-start;
    transition:transform .08s ease, box-shadow .15s ease;
  }
  .company-card:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,30,60,.08)}
  .company-avatar{
    width:64px; height:64px; border-radius:12px;
    display:grid; place-items:center;
    font-size:26px; font-weight:700; letter-spacing:-1px; flex-shrink:0;
  }
  .company-body{min-width:0}
  .company-head{display:flex; flex-direction:column; gap:4px; margin-bottom:8px}
  .company-card h3{margin:0; font-size:19px; color:#0c1a3a}
  .company-card h3 a{color:#0c1a3a}
  .company-card h3 a:hover{color:var(--brand)}
  .meta{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
  .stars-mini{color:#cfd5e6; letter-spacing:1px; font-size:13px}
  .reviews-link{color:var(--brand)}
  .city-badge{color:#2a2f38; font-weight:600}
  .dot{opacity:.6}
  .descr{margin:0 0 12px; color:#2a2f38; font-size:14.5px; line-height:1.55}
  .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
  .tag{background:var(--brand-soft); color:var(--brand-dark); font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px}
  .profile-link{font-size:14px; font-weight:600; color:var(--brand)}
  .pagination{display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:center; padding:20px 0 4px}
  .pagination a, .pagination span{
    min-width:36px; height:36px; padding:0 10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); border-radius:8px;
    color:var(--ink); font-size:14px; font-weight:500;
  }
  .pagination a:hover{background:var(--soft); text-decoration:none}
  .pagination .active{background:var(--brand); color:#fff; border-color:var(--brand)}
  .pagination .nav-arrow{font-weight:600; color:var(--brand)}
  @media (max-width:800px){
    .filter-toggle{display:flex !important}
    .filters{display:none}
    .filters.open{display:block}
    .sort{margin-left:0}
  }
  @media (max-width:480px){
    .company-card{grid-template-columns:48px 1fr; gap:12px; padding:16px}
    .company-avatar{width:48px; height:48px; font-size:20px; border-radius:10px}
  }

  /* ---------- Bedrijf aanmelden ---------- */
  .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start}
  @media (max-width:900px){ .grid{grid-template-columns:1fr; gap:24px} }
  .benefits{display:flex; flex-direction:column; gap:14px}
  .benefit{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow);
  }
  .benefit .ic{
    flex:0 0 44px; width:44px; height:44px; border-radius:50%;
    background:var(--brand-soft); color:var(--brand); display:grid; place-items:center;
  }
  .benefit .ic svg{width:24px; height:24px}
  .benefit h3{margin:0 0 4px; font-size:16px; color:#0c1a3a}
  .benefit p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5}
  .step-label{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px}

  /* ---------- Multi-step form ---------- */
  .form-step{display:block}
  .form-step.hidden{display:none}
  .form-step-indicator .bar{flex:1; height:4px; background:var(--line); border-radius:2px}
  .form-step-indicator .bar.active{background:var(--brand)}

  /* ---------- Multi-step form navigation ---------- */
  .step-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  @media (max-width:480px){ .field-row{grid-template-columns:1fr} }

  /* form-step-indicator bars */
  .form-step-indicator{display:flex; gap:6px; margin-bottom:16px}
  .form-step-indicator .bar{flex:1; height:4px; background:var(--line); border-radius:2px; transition:background .2s ease}
  .form-step-indicator .bar.active{background:var(--brand)}

  /* ---------- Third-party widget overrides ---------- */
  /* Kartik FileInput injects a Bootstrap modal — hide it without Bootstrap CSS */
  #kvFileinputModal, .file-zoom-dialog { display: none !important; }