/* ============================================================
   How to Choose a DGMA-Approved MTI — career guide
   ============================================================ */
.dg-hero{position:relative;overflow:hidden;isolation:isolate;background:#1D161C;
  padding:clamp(56px,7vw,96px) 0 clamp(38px,5vw,60px)}
.dg-hero-bg{position:absolute;inset:0;z-index:-2}
.dg-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block}
.dg-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(29,22,28,.96) 0%,rgba(29,22,28,.9) 48%,rgba(74,35,30,.92) 100%)}
.dg-hero .ab-crumb{justify-content:flex-start;color:rgba(252,247,234,.72);margin-bottom:16px}
.dg-hero .ab-crumb a{color:var(--hb-gold-dot)}
.dg-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  padding:7px 16px 7px 10px;border-radius:999px;
  background:rgba(252,247,234,.09);border:1px solid rgba(226,177,93,.42);
  font:700 10.4px/1 var(--hb-text);letter-spacing:.15em;text-transform:uppercase;color:#F3D58C}
.dg-kicker img{width:17px;height:17px}
.dg-h1{margin:0 0 14px;max-width:22ch;
  font:800 clamp(27px,4.2vw,46px)/1.12 var(--hb-display);color:#FCF7EA;letter-spacing:-.015em}
.dg-deck{margin:0;max-width:74ch;font:400 15.6px/1.82 var(--hb-text);color:rgba(252,247,234,.85)}

/* five-question jump rail */
.dg-jump{list-style:none;counter-reset:dgq;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.dg-jump li{counter-increment:dgq}
.dg-jump a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 9px;
  border-radius:999px;text-decoration:none;
  font:700 12.4px/1 var(--hb-text);color:#F3D58C;
  background:rgba(252,247,234,.07);border:1px solid rgba(226,177,93,.36);
  transition:all .16s ease}
.dg-jump a::before{content:counter(dgq);display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  font:800 11px/1 var(--hb-display);color:#3F2F10;
  background:radial-gradient(circle at 35% 30%,#F3DA9A,#ECCE77 55%,#C9A44E)}
.dg-jump a:hover{background:rgba(226,177,93,.18);border-color:var(--hb-gold)}

/* numbered question sections */
.dg-qhead{display:flex;align-items:flex-start;gap:20px;max-width:900px;margin:0 auto 22px}
.dg-qn{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;
  font:800 28px/1 var(--hb-display);color:#3F2F10;
  background:radial-gradient(circle at 34% 28%,#F3DA9A,#ECCE77 52%,#C9A44E);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 4px rgba(0,0,0,.24),
    0 14px 26px -14px rgba(143,106,46,.7)}
.dg-qk{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;
  font:700 10px/1 var(--hb-text);letter-spacing:.16em;text-transform:uppercase;color:var(--hb-bronze)}
.dg-qk img{width:16px;height:16px}
.dg-qt{margin:0;font:800 clamp(19px,2.3vw,26px)/1.24 var(--hb-display);
  color:var(--hb-ink);letter-spacing:-.012em}
.dg-q .cs-body{max-width:900px}

@media (max-width:640px){
  .dg-qhead{gap:14px}
  .dg-qn{width:50px;height:50px;border-radius:16px;font-size:22px}
}