.company-page .company-values {
  position: relative;
  isolation: isolate;
  padding-block: 64px;
  color: #143b51;
  background-color: #edf3f6;
  background-image: linear-gradient(rgba(246, 250, 252, .65), rgba(246, 250, 252, .70)), url("../images/company-team-collaboration-v1.webp");
  background-position: center, center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
  scroll-margin-top: var(--header-height);
}
/* Blur the photo beneath this layer without filtering text or SVG artwork. */
.company-values::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.values-shell { position: relative; max-width: 1440px; }
.values-heading { position: relative; margin-bottom: 38px; }
.company-values .values-heading h2 { margin: 0 0 12px; font-size: 40px; font-weight: 400; }
.company-values .values-heading h2 strong { color: #0068b7; font-weight: 600; }
.company-values .values-heading p { margin: 0; font-size: 12px; color: #35556a; }
.values-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.values-panel { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 12px 28px 24px; border-left: 1px solid rgba(61, 107, 132, .28); transition: background-color 220ms ease; }
.values-panel:first-child { border-left: 0; }
.values-panel:hover { background: rgba(255, 255, 255, .38); }
.values-copy { width: 100%; min-width: 0; text-align: center; }
.values-english { display: block; color: #0068b7; font-size: 11px; font-weight: 600; }
.company-values .values-copy h3 { margin: 10px 0 16px; font-size: 34px; font-weight: 500; }
.company-values .values-copy p { max-width: 19em; margin: 0 auto; color: #27495e; font-size: 15px; line-height: 1.9; text-wrap: pretty; }
.values-art { order: -1; display: block; flex-shrink: 0; width: min(100%, 248px); height: auto; aspect-ratio: 5 / 4; margin-bottom: 20px; overflow: visible; stroke: #0068b7; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.values-guides { stroke: #7295ac; stroke-width: .65; opacity: .65; }
.values-guides circle { stroke-dasharray: 2 9; }
.values-core { fill: #dd5a27; stroke: none; }
.values-accent { stroke: #d85124; stroke-width: 3; }
.values-wheel, .values-rays { transform-origin: 200px 160px; }
.values-check { stroke-width: 5; }
@media (prefers-reduced-motion: no-preference) {
  .values-panel.is-playing .values-draw { animation: values-draw 1.4s cubic-bezier(.22, 1, .36, 1) both; }
  .values-panel.is-playing .values-accent { animation-delay: 180ms; }
  .values-panel.is-playing .values-wheel { animation: values-turn 1.8s cubic-bezier(.22, 1, .36, 1) both; }
  .values-panel.is-playing .values-caliper { animation: values-measure 1.6s cubic-bezier(.22, 1, .36, 1) both; }
  .values-panel.is-playing .values-rays { animation: values-rays 1.6s ease-out both; }
  .values-panel.is-playing .values-check { animation-duration: 850ms; animation-delay: 450ms; }
}
@keyframes values-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes values-turn { from { transform: rotate(-45deg); } to { transform: rotate(0deg); } }
@keyframes values-measure { from { transform: translateX(34px); } to { transform: translateX(0); } }
@keyframes values-rays { 0%, 35% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 1100px) {
  .values-panel { padding-inline: 18px; }
  .company-values .values-copy h3 { font-size: 30px; }
  .company-values .values-copy p { font-size: 14px; }
}
@media (max-width: 800px) {
  .company-page .company-values { padding-block: 44px; }
  .company-values .values-heading h2 { font-size: 32px; }
  .values-heading { margin-bottom: 24px; }
  .values-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .values-panel { padding: 4px 20px 16px; }
  .values-panel:nth-child(odd) { border-left: 0; }
  .values-art { width: min(100%, 200px); margin-bottom: 10px; }
}
@media (max-width: 600px) {
  .company-page .company-values { padding-block: 36px; background-position: center, 48% center; }
  .company-values .values-heading h2 { font-size: 28px; }
  .company-values .values-heading p { font-size: 10px; }
  .values-stage { row-gap: 22px; }
  .values-panel { padding: 0 10px 8px; }
  .values-art { width: min(100%, 156px); margin-bottom: 10px; }
  .values-english { font-size: 9px; }
  .company-values .values-copy h3 { margin: 7px 0 10px; font-size: 25px; }
  .company-values .values-copy p { font-size: 13px; line-height: 1.8; }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .company-page .company-values { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .company-values *, .company-values *::after { animation: none !important; transition: none !important; }
}