/* Tactile task selection; one shared state with the contact form. */
.hero-image { mask-image: linear-gradient(to right, transparent, #000 7%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 94%, transparent); mask-composite: intersect; }
.solutions { background: #f5f7fa; padding-block: 60px; }
.solutions .section-heading { margin-bottom: 30px; align-items: center; }
.solutions .section-heading > p { font-size: 22px; }
.task-console { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border: 0; padding: 0; margin: 0; min-width: 0; }
.task-key { display: flex; flex-direction: column; position: relative; isolation: isolate; min-width: 0; min-height: 226px; padding: 22px 26px 25px; cursor: pointer; border-radius: 8px; border: 1px solid #d8e1eb; background: linear-gradient(145deg, #fff 5%, #f5f9ff 70%, #eaf0f8); box-shadow: inset 0 2px 1px #fff, inset 0 -3px 2px #b4c4d326, 0 4px 0 #dbe3ec, 0 8px 12px #16345b08; transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease, background 130ms ease; }
.task-key input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.key-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.key-symbol { display: grid; place-items: center; width: 44px; height: 44px; font-size: 28px; line-height: 1; font-weight: 600; color: #6584a8; text-shadow: 0 1px #fff, 0 2px 2px #53709426; }
.key-symbol svg { width: 35px; height: 35px; stroke-width: 1.7; filter: drop-shadow(0 1px 0 white) drop-shadow(0 2px 1px #7c97b247); }
.key-check { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #b1c1d1; border-radius: 5px; color: transparent; background: #ffffff80; box-shadow: inset 0 1px 3px #6884a217; }
.key-check svg { width: 19px; height: 19px; stroke-width: 2.5; }
.key-title { display: block; font-size: 26px; font-weight: 500; line-height: 1.18; color: var(--ink); }
.key-description { display: block; font-size: 18px; line-height: 1.5; color: #596979; margin-top: 12px; max-width: 360px; }
@media (hover: hover) {
  .task-key:hover { transform: translateY(-2px); border-color: #9ab7da; box-shadow: inset 0 2px 1px white, inset 0 -3px 2px #b4c4d326, 0 5px 0 #d4e0ef, 0 10px 16px #16345b0d; }
}
.task-key:has(input:checked) { background: linear-gradient(145deg, #f7fbff, #e0edff 75%, #d6e7fc); border-color: #6e9dde; box-shadow: inset 0 2px 4px #537bb828, inset 0 -1px 2px #fff, 0 1px 0 #a6bfdf, 0 2px 5px #16345b08; transform: translateY(2px); }
.task-key:has(input:checked) .key-symbol { color: var(--blue); }
.task-key:has(input:checked) .key-check { color: white; border-color: #275fde; background: #2864e0; box-shadow: 0 0 7px #5e99ee32; }
.task-key:active { transform: translateY(3px) scale(.985); box-shadow: inset 0 3px 6px #597da32e, inset 0 -1px 1px white; }
.task-key:has(input:focus-visible) { outline: 3px solid #1855d4; outline-offset: 5px; }
.selection-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 28px; min-height: 60px; }
.selection-bar p { font-size: 20px; color: #596979; font-variant-numeric: tabular-nums; }
.selection-cta { width: 365px; white-space: normal; text-align: left; }
.selection-cta svg { margin-left: auto; flex-shrink: 0; }
.competency-list { min-height: 660px; grid-template-columns: minmax(310px, .75fr) minmax(0, 1.5fr); gap: 0 52px; }
.competency-content { overflow: visible; }
.competency-content::before { display: none; }
.competency-content > p { max-width: 790px; }
.capability-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .88fr); align-items: center; gap: 26px; margin-top: 28px; }
.capability-change { display: grid; grid-template-columns: 1fr; gap: 24px; }
.capability-change > div { padding-top: 16px; border-top: 1px solid #ccd5dd; }
.capability-change > div:last-child { border-color: var(--blue); }
.capability-change dt { font-size: 20px; margin-bottom: 10px; }
.capability-change dd, .capability-change dd p { font-size: 21px; line-height: 1.5; }
.capability-change dd p + p { margin-top: 10px; }
.capability-change div:last-child dd { color: var(--ink); }
.capability-visual { width: 100%; height: 330px; object-fit: contain; mix-blend-mode: multiply; }
.pricing-statement { text-align: center; max-width: 1040px; }
.pricing-statement h2 { font-size: 52px; }
.pricing-promise { font-size: 32px; line-height: 1.35; margin: 34px auto 20px; font-weight: 500; }
.pricing-explanation { font-size: 22px; line-height: 1.6; max-width: 780px; margin: 0 auto 28px; color: var(--muted); }
.pricing-audit { font-size: 20px; line-height: 1.6; margin: 36px auto 0; padding-top: 26px; border-top: 1px solid var(--line); max-width: 780px; color: var(--muted); }
.pricing-audit strong { color: var(--ink); font-weight: 500; }
.about-heading { align-items: center; }
.about h2 { font-size: 48px; }
.experience-accent { color: var(--blue); }
.about-intro { font-size: 22px; }
.experience { border: 0; padding: 0; }
.certificate-link { display: flex; flex-direction: column; align-items: start; gap: 22px; margin: 0; }
.certificate-link img { width: 270px; max-width: 100%; box-shadow: 0 8px 24px #1627400d; }
.certificate-link > span { font-size: 24px; line-height: 1.35; max-width: 350px; }
.certificate-since { display: block; font-size: 20px; color: var(--muted); margin-top: 10px; }
.topic-options input { border-radius: 4px; width: 22px; height: 22px; flex-basis: 22px; appearance: auto; accent-color: #2158d6; }
.topic-options input:checked { box-shadow: none; background: initial; }
.topic-options label { min-height: 78px; }
.topic-options label:has(input:checked) { color: #154db9; }
@media (max-width: 1190px) {
  .task-key { padding: 20px; min-height: 240px; }
  .key-title { font-size: 24px; }
  .competency-list { grid-template-columns: minmax(275px, .7fr) minmax(0, 1.3fr); gap: 0 35px; min-height: 840px; }
  .capability-result { grid-template-columns: 1fr; gap: 10px; }
  .capability-change { grid-template-columns: 1fr 1fr; gap: 22px; }
  .capability-visual { height: 245px; width: 100%; }
  .about h2 { font-size: 42px; }
}
@media (max-width: 900px) {
  .task-console { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-key { min-height: 230px; }
  .competency-list { min-height: 0; }
  .capability-result { grid-template-columns: 1fr 260px; gap: 26px; }
  .capability-change { grid-template-columns: 1fr; }
  .capability-visual { height: 300px; }
  .pricing-statement h2 { font-size: 44px; }
  .experience { display: block; }
  .certificate-link { flex-direction: row; align-items: center; }
  .certificate-link img { width: 230px; }
}
@media (max-width: 560px) {
  .solutions { padding-block: 48px; }
  .solutions .section-heading > p { font-size: 20px; }
  .task-console { grid-template-columns: 1fr; gap: 16px; }
  .task-key { min-height: 132px; display: grid; grid-template-columns: 35px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; padding: 18px 20px; }
  .key-top { display: contents; margin: 0; }
  .key-symbol { grid-column: 1; grid-row: 1; }
  .key-title { grid-column: 2; grid-row: 1; padding-right: 26px; font-size: 22px; align-self: center; }
  .key-check { position: absolute; top: 20px; right: 17px; width: 21px; height: 21px; }
  .key-description { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .selection-bar { flex-direction: column; align-items: stretch; gap: 18px; }
  .selection-bar p { font-size: 18px; }
  .selection-cta { width: 100%; font-size: 18px; }
  .capability-result { grid-template-columns: 1fr; gap: 12px; }
  .capability-change { gap: 24px; }
  .capability-change dd, .capability-change dd p { font-size: 20px; }
  .capability-visual { height: 250px; width: 100%; }
  .pricing-statement h2 { font-size: 34px; }
  .pricing-promise { font-size: 26px; margin-top: 28px; }
  .pricing-promise br { display: none; }
  .pricing-explanation, .pricing-audit { font-size: 20px; }
  .about h2 { font-size: 34px; }
  .about-intro { font-size: 20px; }
  .certificate-link { flex-direction: column; align-items: start; }
  .certificate-link img { width: 250px; }
  .certificate-link > span { font-size: 24px; }
  .topic-options label { min-height: 68px; }
}
@media (max-width: 360px) {
  .task-key { padding: 20px 16px; column-gap: 10px; grid-template-columns: 35px minmax(0, 1fr); }
  .key-symbol { width: 35px; }
  .key-title { font-size: 22px; padding-right: 20px; }
  .key-check { right: 12px; top: 20px; }
  .pricing-statement h2, .about h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-key { transition: none; }
  .task-key:hover, .task-key:active, .task-key:has(input:checked) { transform: none; }
}