/* /purpose-values/ — hero, vision & mission cards, values, dark "nurturing" band, corporate responsibility, stories.
   Built on the site tokens (Gilroy, #000 / #404040 / #797979, accent #06b22d, light grey #f8f9fa, square corners). */
.pv-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; background: #e0ffe7; color: #06b22d; }

/* hero */
html body.system-page main .pv-hero { padding: 80px 0 96px; }
html body.system-page main .pv-hero h1 { margin: 0 0 24px; }
html body.system-page main .pv-lead { max-width: 760px; margin: 0 auto; text-align: center; font-size: 20px; line-height: 28px; font-weight: 500; color: #404040; }

/* vision & mission */
html body.system-page main .pv-vm { background: #f8f9fa; }
.pv-vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pv-card { padding: 24px; background: #fff; border: 1px solid #e5e5e5; }
.pv-card-img { margin: 0 0 24px; overflow: hidden; aspect-ratio: 2136 / 444; background: #e5e5e5; }
.pv-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.system-page main .pv-card h2 { margin: 0 0 12px; font-size: 32px !important; line-height: 38px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
html body.system-page main .pv-card p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }

/* values */
.pv-values-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center; }
html body.system-page main .pv-values-copy h2 { margin: 0 0 16px; }
html body.system-page main .pv-values-copy p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.pv-values-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; padding: 0; list-style: none; }
.pv-values-list li { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #f8f9fa; border: 1px solid transparent; transition: border-color var(--dur-fast, 200ms) var(--ease, ease), background var(--dur-fast, 200ms) var(--ease, ease); }
.pv-values-list .pv-icon { margin-bottom: 12px; background: #fff; }
html body.system-page main .pv-values-list h3 { margin: 0; }
html body.system-page main .pv-values-list p { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: #404040; }

/* nurturing band (black with green glows, as the menu panels) */
html body.system-page main .pv-people { position: relative; isolation: isolate; overflow: hidden; background: #000; text-align: center; }
.pv-people::before, .pv-people::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; background: #06b22d; filter: blur(190px); pointer-events: none; }
.pv-people::before { left: -120px; bottom: -200px; }
.pv-people::after { right: -140px; top: -220px; opacity: .6; }
html body.system-page main .pv-people h2 { margin: 0 auto 64px; max-width: 860px; color: #fff; }
.pv-people-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; text-align: left; }
.pv-people-list li { display: flex; flex-direction: column; gap: 14px; padding: 32px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); transition: border-color var(--dur-base, 350ms) var(--ease, ease), background var(--dur-base, 350ms) var(--ease, ease); }
.pv-people .pv-icon { background: rgba(6, 178, 45, .14); margin-bottom: 8px; }
html body.system-page main .pv-people h3 { margin: 0; color: #fff; }
html body.system-page main .pv-people-list p { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: #c8c8c8; }
.pv-cta { display: flex; justify-content: center; margin: 56px 0 0; }

/* corporate responsibility */
.pv-resp-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
html body.system-page main .pv-resp-head h2 { margin: 0 0 16px; }
html body.system-page main .pv-resp-head p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.pv-resp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pv-resp-list { display: flex; flex-direction: column; gap: 48px; margin: 0; padding: 0; list-style: none; }
.pv-resp-list li { display: flex; gap: 24px; align-items: flex-start; }
html body.system-page main .pv-resp-list h3 { margin: 0 0 8px; }
html body.system-page main .pv-resp-list p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.pv-resp-img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f8f9fa; }
.pv-resp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) { .pv-values-grid { gap: 40px; } }
@media (max-width: 900px) {
  html body.system-page main .pv-hero { padding: 56px 0 64px; }
  .pv-vm-grid, .pv-values-grid, .pv-resp-grid { grid-template-columns: 1fr; }
  .pv-values-grid, .pv-resp-grid { gap: 32px; }
  .pv-people-list { grid-template-columns: 1fr; }
  html body.system-page main .pv-people h2 { margin-bottom: 40px; }
  .pv-resp-head { margin-bottom: 40px; }
}
@media (max-width: 700px) {
  html body.system-page main .pv-lead { font-size: 18px; line-height: 26px; }
  .pv-values-list { grid-template-columns: 1fr; }
  .pv-resp-list li { gap: 16px; }
}

/* values cards (light grey): icon only, no white box, a little larger */
.pv-values-list .pv-icon { width: auto; height: auto; background: none; margin-bottom: 12px; display: block; }
.pv-values-list .pv-icon svg { display: inline-block; vertical-align: top; width: 40px; height: 40px; }