/* DCA page — People, Talent & Culture Professional (PTC) credential.
   Loaded only by app/views/dca/pages/people-talent-culture-credential.html.erb.
   Everything is scoped under .dca-ptc and built from the shared tokens in
   dca-tokens.css, reproducing the section, card, chip and button treatments the
   other credential pages use inline — so no other page is affected. */

.dca-ptc { width: 100%; overflow-x: hidden; font-family: var(--font-body); color: var(--text-body); }

/* ---- Section shells ---------------------------------------------------- */
.dca-ptc .ptc-section { padding: 92px 32px; background: var(--white); }
.dca-ptc .ptc-section--page { background: var(--surface-page); }
.dca-ptc .ptc-section--navy { background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%); color: var(--white); }
.dca-ptc .ptc-section--deep { background: var(--navy-900); color: var(--white); }
.dca-ptc .ptc-wrap { max-width: 1320px; margin: 0 auto; }
.dca-ptc .ptc-wrap--narrow { max-width: 1100px; margin: 0 auto; }
.dca-ptc .ptc-center { text-align: center; }

.dca-ptc .ptc-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 14px; }
.dca-ptc .ptc-on-navy .ptc-eyebrow { color: var(--gold-300); }
.dca-ptc .ptc-h2 { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.14; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 22px; }
.dca-ptc .ptc-h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--text-strong); margin: 0 0 16px; }
.dca-ptc .ptc-on-navy .ptc-h2, .dca-ptc .ptc-on-navy .ptc-h3 { color: var(--white); }
.dca-ptc .ptc-lead { font-size: 19px; line-height: 1.62; color: var(--text-body); margin: 0 0 16px; }
.dca-ptc .ptc-p { font-size: 17px; line-height: 1.74; color: var(--text-body); margin: 0 0 16px; }
.dca-ptc .ptc-on-navy .ptc-p, .dca-ptc .ptc-on-navy .ptc-lead { color: rgba(255, 255, 255, 0.86); }
.dca-ptc .ptc-p:last-child { margin-bottom: 0; }
.dca-ptc .ptc-strong { font-weight: 700; color: var(--text-strong); }
.dca-ptc .ptc-on-navy .ptc-strong { color: var(--white); }
.dca-ptc .ptc-meta { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); margin: 0; }
.dca-ptc .ptc-on-navy .ptc-meta { color: rgba(255, 255, 255, 0.72); }

/* ---- Buttons & links (same values as the credential pages' .scp2/.scp3/.scp7) */
.dca-ptc .ptc-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.dca-ptc .ptc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.2; padding: 16px 32px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: 220ms; border: 1.5px solid transparent; }
.dca-ptc .ptc-btn:hover { text-decoration: none; }
.dca-ptc .ptc-btn svg { flex: 0 0 auto; }
.dca-ptc .ptc-btn--gold { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--shadow-md); }
.dca-ptc .ptc-btn--gold:hover { background: var(--gold-700); color: var(--white); }
.dca-ptc .ptc-btn--glass { background: rgba(255, 255, 255, 0.1); color: var(--white); border-color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); }
.dca-ptc .ptc-btn--glass:hover { background: rgba(255, 255, 255, 0.18); }
.dca-ptc .ptc-btn--navy { background: var(--navy-800); color: var(--white); box-shadow: var(--shadow-md); }
.dca-ptc .ptc-btn--navy:hover { background: var(--navy-900); }
.dca-ptc .ptc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--gold-700); text-decoration: underline; text-underline-offset: 4px; }
.dca-ptc .ptc-link:hover { color: var(--navy-800); }
.dca-ptc .ptc-on-navy .ptc-link { color: var(--gold-300); }
.dca-ptc .ptc-on-navy .ptc-link:hover { color: var(--white); }
.dca-ptc .ptc-link-row { margin-top: 36px; }

/* ---- Chips ------------------------------------------------------------- */
.dca-ptc .ptc-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dca-ptc .ptc-chips li { font-size: 14px; font-weight: 600; color: var(--navy-800); background: var(--gold-100); border-radius: var(--radius-pill); padding: 8px 16px; }

/* ---- 1. Hero ----------------------------------------------------------- */
.dca-ptc .ptc-hero { position: relative; background: var(--navy-900); overflow: hidden; color: var(--white); }
.dca-ptc .ptc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.dca-ptc .ptc-hero-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 26, 49, 0.94) 0%, rgba(10, 35, 66, 0.84) 52%, rgba(10, 35, 66, 0.55) 100%); }
.dca-ptc .ptc-hero-glow { position: absolute; inset: 0; background: radial-gradient(circle at 84% 16%, rgba(212, 175, 55, 0.2), transparent 46%); }
.dca-ptc .ptc-hero-grid { position: relative; max-width: 1320px; margin: 0 auto; padding: 92px 32px 100px; display: grid; grid-template-columns: minmax(0, 820px); gap: 56px; align-items: center; }
.dca-ptc .ptc-hero-copy { animation: 600ms cubic-bezier(0.16, 1, 0.3, 1) both dca-fade-up; }
.dca-ptc .ptc-tag { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.dca-ptc .ptc-code { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; color: var(--navy-900); background: var(--gold-300); border-radius: var(--radius-xs); padding: 5px 12px; }
.dca-ptc .ptc-tag-label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); }
.dca-ptc .ptc-h1 { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1.08; letter-spacing: -0.02em; color: var(--white); margin: 0 0 18px; }
.dca-ptc .ptc-since { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; color: var(--gold-300); margin: 0 0 24px; }
.dca-ptc .ptc-hero .ptc-lead { color: rgba(255, 255, 255, 0.88); max-width: 60ch; margin-bottom: 32px; }
.dca-ptc .ptc-hero .ptc-meta { margin-top: 26px; }
.dca-ptc .ptc-badges { display: flex; flex-direction: column; align-items: center; gap: 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-xl); animation: 700ms cubic-bezier(0.16, 1, 0.3, 1) both dca-fade-up; }
.dca-ptc .ptc-badge { display: block; background: var(--white); border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-md); }
.dca-ptc .ptc-badge img { width: 100%; height: auto; }
.dca-ptc .ptc-badge--iacet { width: 230px; }
.dca-ptc .ptc-badge--shrm { width: 150px; }
.dca-ptc .ptc-badge--round { width: 104px; padding: 0; border-radius: 50%; overflow: hidden; }

/* ---- 2. Group banner --------------------------------------------------- */
.dca-ptc .ptc-banner { padding: 0 32px 92px; background: var(--surface-page); }
.dca-ptc .ptc-banner-img { max-width: 1320px; margin: -44px auto 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); background: var(--navy-800); aspect-ratio: 3 / 1; }
.dca-ptc .ptc-banner-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---- 3. Professional certification (4 capability cards + copy) --------- */
.dca-ptc .ptc-cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dca-ptc .ptc-cards-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dca-ptc .ptc-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 28px 24px; transition: 220ms; }
.dca-ptc .ptc-card:hover { transform: translateY(-4px); border-color: var(--gold-500); box-shadow: var(--shadow-lg); }
.dca-ptc .ptc-card-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.dca-ptc .ptc-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--text-strong); margin: 0 0 8px; }
.dca-ptc .ptc-card p { font-size: 15px; line-height: 1.6; color: var(--text-body); margin: 0; }
.dca-ptc .ptc-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 52px; }

/* ---- 4. Two paths ------------------------------------------------------ */
.dca-ptc .ptc-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
.dca-ptc .ptc-path { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 36px 34px; text-align: center; }
.dca-ptc .ptc-path-img { width: 220px; height: 220px; margin: 0 auto 26px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.dca-ptc .ptc-path-img--round { border-radius: 50%; }
.dca-ptc .ptc-path-img img { width: 100%; height: 100%; object-fit: cover; }
.dca-ptc .ptc-path h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--text-strong); margin: 0 0 18px; }

/* Check-mark list (same icon + rhythm as "What You Will Learn"). */
.dca-ptc .ptc-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.dca-ptc .ptc-checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.62; color: var(--text-body); }
.dca-ptc .ptc-checks svg { flex: 0 0 auto; color: var(--gold-700); margin-top: 2px; }
.dca-ptc .ptc-on-navy .ptc-checks li { color: rgba(255, 255, 255, 0.86); }
.dca-ptc .ptc-on-navy .ptc-checks svg { color: var(--gold-300); }

/* ---- 5. Why certification matters ------------------------------------- */
.dca-ptc .ptc-matters { position: relative; overflow: hidden; background: var(--navy-800); color: var(--white); padding: 84px 32px; }
.dca-ptc .ptc-matters-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dca-ptc .ptc-matters-shade { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(8, 26, 49, 0.93) 0%, rgba(10, 35, 66, 0.82) 60%, rgba(18, 58, 102, 0.72) 100%); }
.dca-ptc .ptc-matters-grid { position: relative; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.dca-ptc .ptc-matters-logo { width: 340px; background: var(--white); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-xl); }
.dca-ptc .ptc-matters-logo img { width: 100%; height: auto; }
.dca-ptc .ptc-matters .ptc-h2 { font-size: 46px; margin-bottom: 14px; }
.dca-ptc .ptc-matters-sub { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.35; color: var(--gold-300); margin: 0; }
.dca-ptc .ptc-quote { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.45; color: var(--navy-800); border-left: 4px solid var(--gold-500); background: var(--gold-100); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 22px 26px; margin: 26px 0; }
.dca-ptc .ptc-pillars { margin-top: 30px; }

/* ---- 6/7. Professional education + learning for organizations ---------- */
.dca-ptc .ptc-edu-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.dca-ptc .ptc-portrait { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--border-on-navy); background: var(--navy-700); aspect-ratio: 900 / 1070; }
.dca-ptc .ptc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dca-ptc .ptc-help-label { font-size: 18px; font-weight: 600; color: var(--white); margin: 30px 0 16px; }
.dca-ptc .ptc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dca-ptc .ptc-tiles li { display: flex; gap: 12px; align-items: center; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--white); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-md); padding: 16px 18px; transition: 220ms; }
.dca-ptc .ptc-tiles li:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(212, 175, 55, 0.55); }
.dca-ptc .ptc-tiles svg { flex: 0 0 auto; color: var(--gold-300); }
.dca-ptc .ptc-tiles--single { grid-template-columns: 1fr; }
.dca-ptc .ptc-org-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 64px; align-items: center; }
.dca-ptc .ptc-org-label { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--white); margin: 0 0 18px; }
.dca-ptc .ptc-decisions { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.4; color: var(--gold-300); margin: 0 0 18px; }
/* Learning for Organizations sits on the light page background so it reads as
   its own section after the navy Professional Education block; its tiles use
   the page's white card treatment instead of the translucent on-navy one. */
.dca-ptc .ptc-org .ptc-org-label { color: var(--text-strong); }
.dca-ptc .ptc-org .ptc-decisions { color: var(--navy-700); }
.dca-ptc .ptc-org .ptc-tiles li { color: var(--navy-800); background: var(--surface-card); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.dca-ptc .ptc-org .ptc-tiles li:hover { background: var(--gold-100); border-color: var(--gold-300); }
.dca-ptc .ptc-org .ptc-tiles svg { color: var(--gold-700); }

/* ---- 8. Six-step approach --------------------------------------------- */
.dca-ptc .ptc-motto { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--navy-700); margin: 0 0 44px; }
/* Column-major on desktop, exactly as the reference lays the six steps out
   (read down the left column, then the right); the DOM is in process order, so
   the single-column mobile layout reads 1 → 6. */
.dca-ptc .ptc-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 20px 28px; text-align: left; }
.dca-ptc .ptc-step { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-md); transition: 220ms; }
.dca-ptc .ptc-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.dca-ptc .ptc-step img { flex: 0 0 auto; width: 104px; height: 104px; border-radius: var(--radius-md); object-fit: cover; }
.dca-ptc .ptc-step h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); margin: 0 0 8px; }
.dca-ptc .ptc-step p { font-size: 14px; line-height: 1.5; color: var(--gold-300); margin: 0; }

/* ---- 9. Overview ------------------------------------------------------- */
.dca-ptc .ptc-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dca-ptc .ptc-media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); }
.dca-ptc .ptc-media img { width: 100%; height: auto; }

/* ---- 10. Already hold a credential ------------------------------------ */
.dca-ptc .ptc-credit-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.dca-ptc .ptc-credit-sub { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold-300); margin: 0 0 14px; }
.dca-ptc .ptc-credit-grid .ptc-tiles { margin-top: 30px; }
.dca-ptc .ptc-credit-grid .ptc-tiles li { justify-content: center; text-align: center; font-family: var(--font-display); font-size: 17px; min-height: 84px; }
.dca-ptc .ptc-credit-grid .ptc-media { border-color: var(--border-on-navy); box-shadow: var(--shadow-xl); }

/* ---- 11. Teams --------------------------------------------------------- */
.dca-ptc .ptc-team-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; margin-top: 44px; }
.dca-ptc .ptc-team-media .ptc-btn { margin-top: 24px; width: 100%; }
.dca-ptc .ptc-rule { border: 0; border-top: 1px solid var(--border-default); margin: 26px 0; }
.dca-ptc .ptc-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dca-ptc .ptc-areas li { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 58px; font-size: 15.5px; font-weight: 600; color: var(--navy-800); background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 16px; transition: 220ms; }
.dca-ptc .ptc-areas li:hover { background: var(--gold-100); border-color: var(--gold-300); }

/* ---- 12–14. Infographics ----------------------------------------------- */
.dca-ptc .ptc-figure { margin: 40px auto 0; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 20px; overflow: hidden; }
.dca-ptc .ptc-figure img { width: 100%; height: auto; border-radius: var(--radius-md); }
/* Vector redraw of the three-tier graphic (dca/pages/_ptc_three_tiers). */
.dca-ptc .ptc-figure .ptc-tiers-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.dca-ptc .ptc-figure--flush { margin-top: 0; }
.dca-ptc .ptc-figure--tiers { max-width: 900px; }
.dca-ptc .ptc-figure--why { max-width: 1060px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .dca-ptc .ptc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .dca-ptc .ptc-badges { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .dca-ptc .ptc-badge--iacet { width: 200px; }
  .dca-ptc .ptc-badge--shrm { width: 120px; }
  .dca-ptc .ptc-badge--round { width: 96px; }
  .dca-ptc .ptc-cap-grid, .dca-ptc .ptc-edu-grid, .dca-ptc .ptc-org-grid,
  .dca-ptc .ptc-credit-grid, .dca-ptc .ptc-team-grid, .dca-ptc .ptc-overview-grid { grid-template-columns: 1fr; gap: 40px; }
  .dca-ptc .ptc-portrait { max-width: 420px; margin: 0 auto; }
  /* Stacked: lead the organizations section with its heading, not its list. */
  .dca-ptc .ptc-org .ptc-org-grid > div:last-child { order: -1; }
  .dca-ptc .ptc-matters-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  .dca-ptc .ptc-section { padding: 64px 20px; }
  .dca-ptc .ptc-hero-grid { padding: 64px 20px 72px; }
  .dca-ptc .ptc-matters { padding: 64px 20px; }
  .dca-ptc .ptc-banner { padding: 0 20px 64px; }
  .dca-ptc .ptc-banner-img { margin-top: -28px; aspect-ratio: 2 / 1; }
  .dca-ptc .ptc-h1 { font-size: 38px; }
  .dca-ptc .ptc-since { font-size: 20px; }
  .dca-ptc .ptc-h2, .dca-ptc .ptc-matters .ptc-h2 { font-size: 32px; }
  .dca-ptc .ptc-matters-sub { font-size: 20px; }
  .dca-ptc .ptc-matters-logo { width: 260px; }
  .dca-ptc .ptc-paths, .dca-ptc .ptc-steps { grid-template-columns: 1fr; }
  .dca-ptc .ptc-steps { grid-template-rows: none; grid-auto-flow: row; }
  .dca-ptc .ptc-figure { padding: 10px; }
}
@media (max-width: 560px) {
  .dca-ptc .ptc-cards-2x2, .dca-ptc .ptc-tiles, .dca-ptc .ptc-areas { grid-template-columns: 1fr; }
  .dca-ptc .ptc-btns .ptc-btn, .dca-ptc .ptc-cta-row .ptc-btn { width: 100%; }
  .dca-ptc .ptc-path { padding: 28px 22px; }
  .dca-ptc .ptc-path-img { width: 180px; height: 180px; }
  .dca-ptc .ptc-step img { width: 84px; height: 84px; }
  .dca-ptc .ptc-quote { font-size: 19px; }
}


/* ---- Hero trust row (accreditation logos under the hero copy) ---------- */
.dca-ptc .ptc-trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dca-ptc .ptc-trust li { display: flex; align-items: center; justify-content: center; height: 76px; background: var(--white); border-radius: var(--radius-md); padding: 8px 12px; box-shadow: var(--shadow-md); }
.dca-ptc .ptc-trust img { height: 100%; width: auto; }
.dca-ptc .ptc-trust--round { width: 76px; padding: 0 !important; border-radius: 50% !important; overflow: hidden; }
.dca-ptc .ptc-trust--round img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Why it matters: text card overlaps the navy banner -------------- */
.dca-ptc .ptc-matters { padding-bottom: 132px; }
.dca-ptc .ptc-matters-body { padding-top: 0; }
.dca-ptc .ptc-matters-card { position: relative; margin-top: -72px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 44px 48px; }

/* ---- Learning Pathway + Why DTUI (HTML rebuilds of the client graphics) */
.dca-ptc .ptc-pathway, .dca-ptc .ptc-why { padding: 40px 36px; text-align: center; }
.dca-ptc .ptc-pathway-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--text-strong); margin: 0 0 10px; }
.dca-ptc .ptc-pathway-sub { font-size: 16px; line-height: 1.6; color: var(--text-body); max-width: 68ch; margin: 0 auto 32px; }
.dca-ptc .ptc-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
.dca-ptc .ptc-stage { position: relative; display: flex; flex-direction: column; align-items: center; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 44px 18px 24px; margin-top: 22px; }
.dca-ptc .ptc-stage-num { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--navy-800); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.dca-ptc .ptc-stage h4 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-strong); margin: 0 0 10px; }
.dca-ptc .ptc-stage p { font-size: 14.5px; line-height: 1.55; color: var(--text-body); margin: 0 0 18px; }
.dca-ptc .ptc-stage-icon { margin-top: auto; color: var(--gold-700); }
.dca-ptc .ptc-stage--current { background: var(--gold-100); border: 2px solid var(--gold-500); box-shadow: var(--shadow-gold); }
.dca-ptc .ptc-stage--current .ptc-stage-num { background: var(--gold-500); color: var(--navy-900); }
.dca-ptc .ptc-stage-flag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-700); margin: -12px 0 8px; }
.dca-ptc .ptc-stage-btn { margin-top: 18px; font-size: 14px; padding: 11px 18px; }

.dca-ptc .ptc-why-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.dca-ptc .ptc-why-col { background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px; }
.dca-ptc .ptc-why-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.dca-ptc .ptc-why-head .ptc-card-icon { margin: 0; flex: 0 0 auto; }
.dca-ptc .ptc-why-head h4 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-strong); margin: 0; }
.dca-ptc .ptc-why-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-700); margin-top: 4px; }
.dca-ptc .ptc-why .ptc-checks li { font-size: 15px; line-height: 1.5; }
.dca-ptc .ptc-why .ptc-checks strong { color: var(--text-strong); }

@media (max-width: 1024px) {
  .dca-ptc .ptc-stages { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
}
@media (max-width: 820px) {
  .dca-ptc .ptc-matters { padding-bottom: 104px; }
  .dca-ptc .ptc-matters-card { margin-top: -56px; padding: 28px 22px; }
  .dca-ptc .ptc-why-cols { grid-template-columns: 1fr; }
  .dca-ptc .ptc-pathway, .dca-ptc .ptc-why { padding: 28px 18px; }
  .dca-ptc .ptc-trust li { height: 60px; }
  .dca-ptc .ptc-trust--round { width: 60px; }
}
@media (max-width: 560px) {
  .dca-ptc .ptc-stages { grid-template-columns: 1fr; }
  .dca-ptc .ptc-pathway-title { font-size: 24px; }
}

/* Overview: the photo takes the height of the text column instead of its own
   square height, so the two sides end together. The image is positioned out
   of flow so it cannot stretch the row; object-fit crops rather than distorts. */
.dca-ptc .ptc-overview .ptc-overview-grid { align-items: stretch; }
.dca-ptc .ptc-overview .ptc-overview-grid > div:first-child { display: flex; flex-direction: column; }
.dca-ptc .ptc-overview .ptc-media { position: relative; flex: 1 1 auto; min-height: 320px; }
.dca-ptc .ptc-overview .ptc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.dca-ptc .ptc-overview .ptc-overview-grid > div:last-child { align-self: end; }
@media (max-width: 1024px) {
  .dca-ptc .ptc-overview .ptc-media { min-height: 0; aspect-ratio: 4 / 3; }
}
/* Overview: slightly larger photo and a roomier text column. */
@media (min-width: 1025px) {
  .dca-ptc .ptc-overview .ptc-media { min-height: 440px; }
  .dca-ptc .ptc-overview .ptc-overview-grid > div:last-child { align-self: center; }
  .dca-ptc .ptc-overview .ptc-overview-grid .ptc-p { font-size: 18px; line-height: 1.8; margin-bottom: 22px; }
  .dca-ptc .ptc-overview .ptc-overview-grid .ptc-meta { font-size: 15px; margin-top: 28px !important; }
}
/* "Overview" sub-heading in the DCA gold accent, so it reads apart from the H2 above. */
.dca-ptc .ptc-overview .ptc-h3 { color: var(--gold-700); }

/* ---- Learning Pathway + Why DTUI: the client PDF's visual treatment ----
   Colours sampled from the PDF's two graphics (not the images themselves):
   deep-navy ink, bright blue accents, pale-blue panels. Scoped to these two
   blocks; fonts and layout stay DCA. */
.dca-ptc .ptc-pathway, .dca-ptc .ptc-why {
  --pdf-ink: #040f34; --pdf-blue: #0364e5; --pdf-blue-dark: #122556;
  --pdf-pale: #e4f2fc; --pdf-soft: #d9eefd; --pdf-edge: #acd8f6; --pdf-dot: #4d9be3;
  --pdf-body: #444e71; --pdf-rule: #d4e0ef;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9fe 100%);
  border-color: var(--pdf-rule);
}
.dca-ptc .ptc-pathway .ptc-pathway-title, .dca-ptc .ptc-why .ptc-pathway-title { color: var(--pdf-ink); }
.dca-ptc .ptc-pathway .ptc-pathway-sub, .dca-ptc .ptc-why .ptc-pathway-sub { color: var(--pdf-body); }

/* Pathway stages */
.dca-ptc .ptc-pathway .ptc-stage { background: var(--white); border-color: var(--pdf-pale); box-shadow: 0 6px 20px rgba(3, 100, 229, 0.08); }
.dca-ptc .ptc-pathway .ptc-stage-num { background: linear-gradient(145deg, var(--pdf-blue), var(--pdf-blue-dark)); color: var(--white); box-shadow: 0 0 0 5px var(--pdf-pale), 0 6px 14px rgba(3, 100, 229, 0.3); }
.dca-ptc .ptc-pathway .ptc-stage:first-child .ptc-stage-num { background: linear-gradient(145deg, var(--pdf-blue-dark), var(--pdf-ink)); }
.dca-ptc .ptc-pathway .ptc-stage h4 { color: var(--pdf-ink); padding-bottom: 12px; position: relative; }
.dca-ptc .ptc-pathway .ptc-stage h4::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--pdf-dot); transform: translateX(-50%); }
.dca-ptc .ptc-pathway .ptc-stage p { color: var(--pdf-body); }
.dca-ptc .ptc-pathway .ptc-stage-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--pdf-pale); color: var(--pdf-blue-dark); display: flex; align-items: center; justify-content: center; }
.dca-ptc .ptc-pathway .ptc-stage--current { background: var(--pdf-pale); border: 1.5px solid var(--pdf-edge); box-shadow: 0 10px 30px rgba(3, 100, 229, 0.18); }
.dca-ptc .ptc-pathway .ptc-stage--current .ptc-stage-num { background: linear-gradient(145deg, #2f86f5, var(--pdf-blue)); color: var(--white); }
.dca-ptc .ptc-pathway .ptc-stage--current .ptc-stage-icon { background: var(--white); }
.dca-ptc .ptc-pathway .ptc-stage-flag { background: var(--pdf-soft); color: var(--pdf-blue); border-radius: var(--radius-pill); padding: 4px 12px; margin: -12px 0 10px; }
.dca-ptc .ptc-pathway .ptc-stage-btn { background: var(--pdf-blue); color: var(--white); border-radius: var(--radius-pill); box-shadow: 0 6px 16px rgba(3, 100, 229, 0.35); }
.dca-ptc .ptc-pathway .ptc-stage-btn:hover { background: var(--pdf-blue-dark); }

/* Why DTUI columns */
.dca-ptc .ptc-why .ptc-why-col { background: var(--white); border-color: var(--pdf-pale); padding: 0; overflow: hidden; box-shadow: 0 6px 20px rgba(3, 100, 229, 0.08); }
.dca-ptc .ptc-why .ptc-why-head { background: linear-gradient(180deg, var(--pdf-pale), #f1f7fd); margin: 0; padding: 24px 28px; border-bottom: 1px solid var(--pdf-rule); }
.dca-ptc .ptc-why .ptc-why-head .ptc-card-icon { width: 64px; height: 64px; background: var(--white); color: var(--pdf-blue); box-shadow: 0 4px 14px rgba(3, 100, 229, 0.18); }
.dca-ptc .ptc-why .ptc-why-head > div:last-child { padding-left: 18px; border-left: 2px solid var(--pdf-edge); }
.dca-ptc .ptc-why .ptc-why-head h4 { color: var(--pdf-ink); }
.dca-ptc .ptc-why .ptc-why-tag { color: var(--pdf-blue); font-weight: 600; letter-spacing: 0.18em; }
.dca-ptc .ptc-why .ptc-checks { gap: 0; padding: 8px 28px 16px; }
.dca-ptc .ptc-why .ptc-checks li { padding: 14px 0; border-bottom: 1px solid var(--pdf-rule); color: var(--pdf-body); align-items: center; }
.dca-ptc .ptc-why .ptc-checks li:last-child { border-bottom: 0; }
.dca-ptc .ptc-why .ptc-checks strong { color: var(--pdf-ink); }
.dca-ptc .ptc-why .ptc-checks svg { width: 30px; height: 30px; padding: 7px; margin-top: 0; border-radius: 50%; background: var(--pdf-blue); color: var(--white); box-shadow: 0 0 0 5px var(--pdf-pale); }