/* career.css */
:root {
  --navy: #0F172A;
  --orange: #F0895E;
  --bg2: #F4F7F9;
  --fff9: #FFF9F6;
  --fff0: #FFF0E8;
  --bd: rgba(15,23,42,.07);
  --c64: #66666B;
  --c94: #94A3B8;
  --c33: #45454A;
  --c47: #45454A;
  --cbd: #CBD5E1;
  --text: #252527;
  --px: clamp(24px,4vw,64px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family:var(--font-family-base); color: var(--text); background: #fff; font-size:16px; line-height:1.8; }
img { display: block; }
a { text-decoration: none; color: inherit; }

.cr-orange { color: var(--orange); }

/* Shared wrap */
.cr-wrap { max-width: calc(1200px + var(--px) + var(--px)); margin: 0 auto; padding: 0 var(--px); }

/* ─── HERO ─────────────────────────────────────────────── */
.cr-hero { position: relative; overflow: hidden; height:min(650px,26vw); }
.cr-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.cr-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(15,23,42,.97) 0%, rgba(15,23,42,.82) 55%, rgba(15,23,42,.42) 100%);
}
.cr-hero-radial {
  position: absolute; bottom: 0; left: 0;
  width: 640px; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse at 0% 100%, rgba(240,137,94,.18) 0%, transparent 65%);
}
.cr-hero-inner {
  position: relative; z-index: 10;
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  max-width: calc(1200px + var(--px) + var(--px)); margin: 0 auto;
  padding: 80px var(--px) 32px; transform:translateY(-20px);
}
.cr-hero-content { max-width: 600px; }
.cr-hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.cr-hero-line { width: 1.5rem; height: 1px; background: var(--orange); flex-shrink: 0; }
.cr-hero-label { font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--orange); text-transform: uppercase; }
.cr-hero-h1 { font-size: clamp(24px, 2.7vw, 36px); font-weight: 700; color: #fff; line-height: 1.35; letter-spacing: -.03em; margin: 0 0 1.25rem; }
.cr-hero-desc { font-size: 16px; font-weight:500; color: #fff; line-height: 1.8; max-width: 560px; margin: 0; }

/* ─── キャリアパス (radio tabs) ──────────────────────────── */
.cr-lv-r { display: none; }

.cr-career-sec {
  padding: 6rem 0; background: #fff;
  position: relative;
}

/* section header */
.cr-sec-label {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: var(--orange); text-transform: uppercase; margin: 0 0 1.25rem;
}
.cr-sec-h2 {
  font-size: clamp(26px,3.4vw,36px); font-weight: 700; color: var(--text);
  letter-spacing: -.04em; line-height: 1.35; margin: 0 0 1.25rem;
}
.cr-cp-header {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 3.5rem;
}
.cr-cp-header .cr-sec-h2 { margin: 0; }
.cr-cp-sub {
  font-size: 16px; font-weight:500; color: var(--c33); line-height: 1.8;
  max-width: 1200px; text-align: left; margin: 0;
}

/* tab nav */
.cr-tabs-nav {
  display: flex; align-items: center; margin-bottom: 2.5rem;
}
.cr-tab-item { display: flex; align-items: center; flex: 1; }
.cr-lline, .cr-rline { flex: 1; height: 1px; background: var(--bd); transition: background .3s; }
.cr-badge-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  flex-shrink: 0; cursor: pointer; padding: 0 1rem; transition: transform .2s;
}
.cr-badge-wrap:hover { transform: scale(1.05); }
.cr-badge-circle {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 2px solid rgba(15,23,42,.15);
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.cr-badge-circle span { font-size: 12px; font-weight: 900; color: var(--c33); transition: color .2s; }
.cr-badge-label { font-size: 12px; font-weight: 700; color: var(--c33); white-space: nowrap; transition: color .2s; }

/* 3-col cards grid */
.cr-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.cr-card {
  border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--bd); cursor: pointer;
  transition: all .3s;
}
.cr-card:hover {
  background: #0C294B;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 24px rgba(12,41,75,.18);
  transform: translateY(-.125rem);
}
.cr-card:hover .cr-card-title { color: #fff; }
.cr-card:hover .cr-card-desc { color: rgba(255,255,255,.8); }
.cr-card:hover .cr-card-foot { border-color: rgba(255,255,255,.25); }
.cr-card:hover .cr-card-body { background: #0C294B; }
.cr-card:hover .cr-card-divider { border-color: rgba(255,255,255,.25); }
.cr-card:hover .cr-skill-dot { background: #fff; }
.cr-card:hover .cr-skill-text { color: rgba(255,255,255,.8); }
.cr-card:hover .cr-cert { color: #fff; background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.25); }
.cr-card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.cr-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cr-card-img-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.60), transparent);
  transition: background .3s;
}
.cr-card-badge-row { position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: .5rem; }
.cr-img-code {
  font-size: 12px; font-weight: 900; padding: .25rem .625rem; border-radius: .25rem;
  background: rgba(255,255,255,.20); color: #fff; border: 1px solid rgba(255,255,255,.30);
  transition: all .2s;
}
.cr-img-sub { font-size: 12px; color: rgba(255,255,255,.9); }
.cr-card-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--orange); display: none; }
.cr-card-body { padding: 1.5rem; background: #fff; transition: background .3s; }
.cr-card-title { font-size: 18px; font-weight: 700; color: var(--text); line-height:1.5; margin: 0 0 .75rem; transition: color .2s; }
.cr-card-desc { font-size: 14px; font-weight:500; color: var(--c33); line-height: 1.8; margin: 0 0 1.25rem; }
.cr-card-divider { border-top: 1px solid var(--bd); padding-top: 1rem; transition: border-color .3s; }
.cr-skill-list { display: flex; flex-direction: column; gap: .375rem; margin-bottom: .75rem; }
.cr-skill-item { display: flex; align-items: flex-start; gap: .5rem; }
.cr-skill-dot {
  width: .25rem; height: .25rem; border-radius: 9999px;
  flex-shrink: 0; margin-top: .375rem; background: var(--cbd); transition: background .2s;
}
.cr-skill-text { font-size: 14px; font-weight:500; line-height: 1.8; color: var(--c33); transition: color .2s; }
.cr-cert-list { display: flex; flex-wrap: wrap; gap: .375rem; padding-top: .75rem; }
.cr-cert {
  font-size: 12px; font-weight: 600; padding: .25rem .5rem; border-radius: .25rem;
  color: var(--c64); background: var(--bg2); border: 1px solid var(--bd);
  transition: all .2s;
}

/* ── ACTIVE STATES via radio ── */
/* Left lines turn orange when that level or a later level is active */
#lv0:checked ~ .cr-wrap .cr-lline-0,
#lv1:checked ~ .cr-wrap .cr-lline-0,
#lv2:checked ~ .cr-wrap .cr-lline-0,
#lv1:checked ~ .cr-wrap .cr-lline-1,
#lv2:checked ~ .cr-wrap .cr-lline-1,
#lv2:checked ~ .cr-wrap .cr-lline-2 { background: rgba(240,137,94,.5); }

/* Active badge (selected level) */
#lv0:checked ~ .cr-wrap .cr-badge-0 .cr-badge-circle,
#lv1:checked ~ .cr-wrap .cr-badge-1 .cr-badge-circle,
#lv2:checked ~ .cr-wrap .cr-badge-2 .cr-badge-circle {
  background: #0C294B; border-color: #0C294B;
  box-shadow: none;
}
#lv0:checked ~ .cr-wrap .cr-badge-0 .cr-badge-circle span,
#lv1:checked ~ .cr-wrap .cr-badge-1 .cr-badge-circle span,
#lv2:checked ~ .cr-wrap .cr-badge-2 .cr-badge-circle span { color: #fff; }
#lv0:checked ~ .cr-wrap .cr-badge-0 .cr-badge-label,
#lv1:checked ~ .cr-wrap .cr-badge-1 .cr-badge-label,
#lv2:checked ~ .cr-wrap .cr-badge-2 .cr-badge-label { color: var(--orange); }
#lv0:checked ~ .cr-wrap .cr-badge-0,
#lv1:checked ~ .cr-wrap .cr-badge-1,
#lv2:checked ~ .cr-wrap .cr-badge-2 { transform: scale(1.1); }

/* Active card */
#lv0:checked ~ .cr-wrap .cr-card-0,
#lv1:checked ~ .cr-wrap .cr-card-1,
#lv2:checked ~ .cr-wrap .cr-card-2 {
  border-color: #0C294B;
  box-shadow: 0 8px 36px rgba(12,41,75,.18);
  transform: translateY(-.375rem) scale(1.01);
}
#lv0:checked ~ .cr-wrap .cr-card-0:hover,
#lv1:checked ~ .cr-wrap .cr-card-1:hover,
#lv2:checked ~ .cr-wrap .cr-card-2:hover {
  transform: translateY(-.375rem) scale(1.01);
}
/* Active card image overlay */
#lv0:checked ~ .cr-wrap .cr-card-img-ov-0,
#lv1:checked ~ .cr-wrap .cr-card-img-ov-1,
#lv2:checked ~ .cr-wrap .cr-card-img-ov-2 {
  background: linear-gradient(to top, rgba(15,23,42,.70), rgba(240,137,94,.10));
}
/* Active card image scale */
#lv0:checked ~ .cr-wrap .cr-card-0 .cr-card-img,
#lv1:checked ~ .cr-wrap .cr-card-1 .cr-card-img,
#lv2:checked ~ .cr-wrap .cr-card-2 .cr-card-img { transform: scale(1.05); }
/* Active bottom bar */
#lv0:checked ~ .cr-wrap .cr-card-bar-0,
#lv1:checked ~ .cr-wrap .cr-card-bar-1,
#lv2:checked ~ .cr-wrap .cr-card-bar-2 { display: block; }
/* Active img code badge */
#lv0:checked ~ .cr-wrap .cr-card-0 .cr-img-code-0,
#lv1:checked ~ .cr-wrap .cr-card-1 .cr-img-code-1,
#lv2:checked ~ .cr-wrap .cr-card-2 .cr-img-code-2 {
  background: var(--orange); border-color: var(--orange);
}
/* Active card body bg */
#lv0:checked ~ .cr-wrap .cr-card-body-0,
#lv1:checked ~ .cr-wrap .cr-card-body-1,
#lv2:checked ~ .cr-wrap .cr-card-body-2 { background: #0C294B; }
/* Active card title */
#lv0:checked ~ .cr-wrap .cr-card-title-0,
#lv1:checked ~ .cr-wrap .cr-card-title-1,
#lv2:checked ~ .cr-wrap .cr-card-title-2 { color: #fff; }
/* Active card divider */
#lv0:checked ~ .cr-wrap .cr-card-divider-0,
#lv1:checked ~ .cr-wrap .cr-card-divider-1,
#lv2:checked ~ .cr-wrap .cr-card-divider-2 { border-color: rgba(240,137,94,.20); }
/* Active skill dots */
#lv0:checked ~ .cr-wrap .cr-card-0 .cr-skill-dot-0,
#lv1:checked ~ .cr-wrap .cr-card-1 .cr-skill-dot-1,
#lv2:checked ~ .cr-wrap .cr-card-2 .cr-skill-dot-2 { background: #fff; }
/* Active skill text */
#lv0:checked ~ .cr-wrap .cr-card-0 .cr-skill-text-0,
#lv1:checked ~ .cr-wrap .cr-card-1 .cr-skill-text-1,
#lv2:checked ~ .cr-wrap .cr-card-2 .cr-skill-text-2 { color: #fff; }
#lv0:checked ~ .cr-wrap .cr-card-0 .cr-card-desc,
#lv1:checked ~ .cr-wrap .cr-card-1 .cr-card-desc,
#lv2:checked ~ .cr-wrap .cr-card-2 .cr-card-desc { color: #fff; }
/* Active cert tags */
#lv0:checked ~ .cr-wrap .cr-card-0 .cr-cert-0,
#lv1:checked ~ .cr-wrap .cr-card-1 .cr-cert-1,
#lv2:checked ~ .cr-wrap .cr-card-2 .cr-cert-2 {
  color: #fff; background: #0C294B; border-color: rgba(255,255,255,.25);
}

/* ─── 資格マトリクス ──────────────────────────────────────── */
.cr-cert-sec { padding: 6rem 0; background: var(--bg2); }
.cr-cert-grid {
  display: grid; grid-template-columns: 1fr 500px; gap: 5rem; align-items: start;
}
.cr-cert-desc { font-size: 18px; font-weight:500; color: var(--c33); line-height: 1.8; margin: 0 0 2.5rem; }
.cr-cert-table {
  border: 1px solid var(--bd); border-radius: 1rem; overflow: hidden; background: #fff;
}
.cr-cert-row { display: grid; grid-template-columns: 140px 1fr; align-items: start; padding: 1.25rem 1.5rem; }
.cr-cert-row + .cr-cert-row { border-top: 1px solid var(--bd); }
.cr-cert-area { font-size: 14px; font-weight: 700; color: var(--c33); line-height: 1.5; padding-top: .125rem; }
.cr-cert-val { font-size: 14px; font-weight:500; color: var(--c33); line-height: 1.8; }
.cr-chart-card {
  background: #fff; border-radius: 1rem; border: 1px solid var(--bd); padding: 2rem;
}
.cr-chart-label {
  font-size: 12px; font-weight: 700; letter-spacing: .15em;
  color: var(--c33); text-transform: uppercase; margin-bottom: 2rem;
}
.cr-chart-bars { display: flex; flex-direction: column; gap: 1.25rem; }
.cr-bar-row { display: flex; align-items: center; gap: 1rem; }
.cr-bar-name { font-size: 14px; font-weight:500; color: var(--c33); width: 5rem; flex-shrink: 0; }
.cr-bar-track { flex: 1; background: var(--bg2); border-radius: 9999px; height: .375rem; overflow: hidden; }
.cr-bar-fill { height: 100%; background: var(--orange); border-radius: 9999px; }
.cr-bar-count { font-size: 14px; font-weight: 700; color: var(--text); width: 2rem; text-align: right; flex-shrink: 0; }

/* ─── 育成プログラム ──────────────────────────────────────── */
.cr-prog-sec { padding: 6rem 0; background: #fff; }
.cr-prog-grid { display: grid; grid-template-columns: 1fr 420px; gap: 5rem; align-items: start; }
.cr-prog-desc { font-size: 18px; font-weight:500; color: var(--c33); line-height: 1.8; margin: 0 0 3rem; }
.cr-prog-items { display: flex; flex-direction: column; }
.cr-prog-item {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 2rem 0;
}
.cr-prog-item + .cr-prog-item { border-top: 1px solid var(--bd); }
.cr-prog-item:first-child { padding-top: 0; }
.cr-prog-item:last-child { padding-bottom: 0; }
.cr-prog-icon-wrap {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  background: var(--fff0); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cr-prog-item-body { flex: 1; }
.cr-prog-item-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.cr-prog-item-title { font-size: 18px; font-weight: 700; color: var(--text); line-height:1.5; margin: 0; }
.cr-prog-num {
  font-size: 12px; font-weight: 700; color: var(--orange);
  background: var(--fff0); padding: .125rem .5rem; border-radius: 9999px;
}
.cr-prog-item-desc { font-size: 14px; font-weight:500; color: var(--c33); line-height: 1.8; margin: 0; }
.cr-prog-sticky { position: sticky; top: 6rem; }
.cr-prog-photo-wrap { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 3/4; }
.cr-prog-photo { width: 100%; height: 100%; object-fit: cover; }
.cr-prog-photo-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.60), transparent);
}
.cr-prog-photo-caption { position: absolute; bottom: 1.75rem; left: 1.75rem; right: 1.75rem; }
.cr-prog-photo-tag {
  font-size: 12px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .25rem;
}
.cr-prog-photo-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.5; }

/* ─── 活躍フィールド ──────────────────────────────────────── */
.cr-field-sec { padding: 6rem 0; background: var(--bg2); }
.cr-field-grid { display: grid; grid-template-columns: 480px 1fr; gap: 5rem; align-items: start; }
.cr-field-desc { font-size: 18px; font-weight:500; color: var(--c33); line-height: 1.8; margin: 0 0 2rem; }
.cr-field-photo-wrap { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; }
.cr-field-photo { width: 100%; height: 100%; object-fit: cover; }
.cr-field-photo-ov { position: absolute; inset: 0; background: rgba(15,23,42,.30); }
.cr-field-items { display: flex; flex-direction: column; padding-top: .5rem; }
.cr-field-item {
  display: flex; align-items: flex-start; gap: 1.75rem;
  padding: 2rem 0;
}
.cr-field-item + .cr-field-item { border-top: 1px solid var(--bd); }
.cr-field-num {
  font-size: 12px; font-weight: 700; letter-spacing: .15em;
  color: var(--cbd); flex-shrink: 0; padding-top: .25rem; width: 1.5rem;
}
.cr-field-item-body { flex: 1; }
.cr-field-item-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.cr-field-title { font-size: 18px; font-weight: 700; color: var(--text); line-height:1.5; margin: 0; transition: color .2s; }
.cr-field-item:hover .cr-field-title { color: var(--orange); }
.cr-field-tag {
  font-size: 12px; font-weight: 700; color: var(--c33);
  border: 1px solid rgba(15,23,42,.12); padding: .125rem .5rem;
  border-radius: 9999px; letter-spacing: .1em; white-space: nowrap;
}
.cr-field-item-desc { font-size: 14px; font-weight:500; color: var(--c33); line-height: 1.8; margin: 0; }

/* ─── Engineer Voices ─────────────────────────────────── */
.cr-voices-sec { padding: 6rem 0; background: var(--bg2); }
.cr-voices-h2 { margin-bottom: 1rem !important; }
.cr-voices-intro {
  font-size: 18px; font-weight:500; color: var(--c33); line-height: 1.8;
  margin: 0 0 3.5rem; max-width: 560px; white-space: nowrap;
}
.cr-voices-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.cr-voice-card {
  background: #fff; border-radius: .75rem; padding: 1.5rem;
  border: 1px solid rgba(15,23,42,.08);
  display: flex; flex-direction: column; gap: 1rem;
  transition: box-shadow .2s, transform .2s; cursor: pointer;
}
.cr-voice-card:hover { background: #0C294B; box-shadow: 0 4px 20px rgba(15,23,42,.10); transform: translateY(-.125rem); }
.cr-voice-top { display: flex; align-items: center; gap: .75rem; }
.cr-voice-avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.cr-voice-name { font-size: 18px; font-weight: 700; color: var(--text); line-height:1.5; }
.cr-voice-role { font-size: 14px; font-weight:500; color: var(--c33); margin-top: .1rem; }
.cr-voice-tagline { font-size: 14px; font-weight:500; color: var(--c33); line-height: 1.8; flex: 1; margin: 0; }
.cr-voice-card:hover .cr-voice-name { color: #fff; }
.cr-voice-card:hover .cr-voice-role, .cr-voice-card:hover .cr-voice-tagline { color: rgba(255,255,255,.8); }
.cr-voice-card:hover .cr-voice-link { color: #fff; }
.cr-voice-link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 14px; font-weight: 600; color: var(--orange);
  align-self: flex-start; transition: gap .2s;
}
.cr-voice-card:hover .cr-voice-link { gap: .625rem; }

/* ─── CTA ────────────────────────────────────────────── */
.cr-cta-sec { position: relative; overflow: hidden; height: 470px; min-height: 470px; max-height: 470px; flex: 0 0 470px; display: flex; align-items: center; justify-content: center; }
.cr-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cr-cta-ov { position: absolute; inset: 0; z-index: 5; background: rgba(7,27,53,.8); }
.cr-cta-dots {
  display: none;
}
.cr-cta-radial {
  display: none;
}
.cr-cta-inner {
  position: relative; z-index: 10;
  width: 100%; max-width: 920px; margin: 0 auto; padding: 0 32px; text-align: center;
}
.cr-cta-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(240,137,94,.15); border: 1px solid rgba(240,137,94,.30);
  padding: .375rem 1rem; border-radius: 9999px; margin-bottom: 2rem;
}
.cr-cta-dot { width: .375rem; height: .375rem; border-radius: 9999px; background: var(--orange); }
.cr-cta-badge-label { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--orange); text-transform: uppercase; }
.cr-cta-h2 { font-size: clamp(30px,3.4vw,36px); font-weight: 700; color: #fff; letter-spacing: -.04em; line-height: 1.3; margin: 0 0 1.25rem; }
.cr-cta-desc { font-size: 18px; font-weight:500; color: rgba(255,255,255,0.72); line-height: 1.8; margin: 0 auto 2.25rem; max-width: 560px; }
.cr-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.cr-btn-pri {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 16px;
  padding: 16px 40px; border-radius: 9999px;
  box-shadow: 0 8px 36px rgba(240,137,94,.45); transition: background .2s, transform .12s;
}
.cr-btn-pri:hover { background: #E07848; transform:translateY(-1px); }
.cr-btn-sec {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.20); color: #fff;
  font-size: 16px; font-weight:500; padding: 16px 40px; border-radius: 9999px; transition: all .2s;
}
.cr-btn-sec:hover { border-color: rgba(255,255,255,.40); color: #fff; }

/* ─── Footer ──────────────────────────────────────────── */
.site-footer { border-top: 4px solid var(--orange); background: var(--navy); }
.sf-inner { padding: 3rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sf-brand {}
.sf-logo { font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: -.02em; margin-bottom: .25rem; }
.sf-tagline { font-size: .7rem; color: rgba(255,255,255,.35); }
.sf-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sf-nav a { font-size: .75rem; color: rgba(255,255,255,.55); transition: color .2s; }
.sf-nav a:hover { color: var(--orange); }
.sf-copy { font-size: .68rem; color: rgba(255,255,255,.25); margin: 0; }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .cr-wrap { padding: 0 var(--px); }
  .cr-hero { height:auto; min-height:0; max-height:none; }
  .cr-hero-inner { padding: 56px var(--px) 40px; transform:none; }
  .cr-cp-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cr-cp-sub { text-align: left; }
  .cr-cert-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cr-prog-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cr-prog-sticky { position: static; }
  .cr-field-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cr-voices-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-inner { padding: 2.5rem 2rem; }
}
@media (max-width: 767px) {
  .career-development-page { --px: 20px; overflow-x: hidden; }
  .career-development-page .cr-wrap { padding: 0 var(--px); }
  .career-development-page .cr-hero-inner { height: auto !important; min-height: 0; padding: 44px var(--px) !important; transform: none; }
  .career-development-page .cr-hero-h1,.career-development-page .cr-sec-h2,.career-development-page .cr-cta-h2 { font-size:28px; line-height:1.4; }
  .career-development-page .cr-hero-desc,.career-development-page .cr-cert-desc,.career-development-page .cr-prog-desc,.career-development-page .cr-field-desc,.career-development-page .cr-voices-intro { font-size:16px; line-height:1.75; }
  .career-development-page .cr-cta-desc { font-size:16px; line-height:1.75; }
  .career-development-page .cr-career-sec, .career-development-page .cr-cert-sec, .career-development-page .cr-prog-sec, .career-development-page .cr-field-sec, .career-development-page .cr-voices-sec { padding: 56px 0; }
  .career-development-page .cr-cards-grid { grid-template-columns: 1fr; }
  .career-development-page .cr-card:hover { transform: none; }
  .career-development-page .cr-tabs-nav { width: calc(100% + 20px); margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .career-development-page .cr-tabs-nav::-webkit-scrollbar { display: none; }
  .career-development-page .cr-tab-item { flex: 0 0 116px; }
  .career-development-page .cr-lline, .career-development-page .cr-rline { min-width: 12px; }
  .career-development-page .cr-badge-wrap { min-width: 80px; padding: 0 .5rem; }
  .career-development-page .cr-badge-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .career-development-page .cr-cert-grid { grid-template-columns: 1fr; }
  .career-development-page .cr-cert-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .career-development-page .cr-cert-area { padding-top: 0; }
  .career-development-page .cr-cert-val,
  .career-development-page .cr-card-title,
  .career-development-page .cr-card-desc,
  .career-development-page .cr-skill-text,
  .career-development-page .cr-prog-item-title,
  .career-development-page .cr-prog-item-desc,
  .career-development-page .cr-field-title,
  .career-development-page .cr-field-item-desc,
  .career-development-page .cr-voice-role,
  .career-development-page .cr-voice-tagline,
  .career-development-page .cr-cta-desc { overflow-wrap: anywhere; }
  .career-development-page .cr-prog-grid { grid-template-columns: 1fr; }
  .career-development-page .cr-prog-item { gap: 16px; padding: 24px 0; }
  .career-development-page .cr-prog-item-head { flex-wrap: wrap; gap: 8px; }
  .career-development-page .cr-prog-num { flex: 0 0 auto; }
  .career-development-page .cr-prog-photo-caption { right: 20px; bottom: 20px; left: 20px; }
  .career-development-page .cr-field-grid { grid-template-columns: 1fr; }
  .career-development-page .cr-field-item { gap: 14px; padding: 24px 0; }
  .career-development-page .cr-field-item-head { flex-wrap: wrap; gap: 8px; }
  .career-development-page .cr-field-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .career-development-page .cr-voices-grid { grid-template-columns: 1fr; }
  .career-development-page .cr-voices-intro { white-space: normal; }
  .career-development-page .cr-cta-sec { height: auto; min-height: 0; max-height: none; padding: 64px 0; flex-basis: auto; }
  .career-development-page .cr-cta-bg { object-position: center; }
  .career-development-page .cr-cta-inner { padding:0 var(--px); }
  .career-development-page .cr-cta-btns { flex-direction:column; align-items:stretch; }
  .career-development-page .cr-btn-pri,.career-development-page .cr-btn-sec { width:100%; min-height:52px; padding:13px 20px; justify-content:center; text-align:center; white-space:normal; }
}