/* Eettiset toimintaperiaatteet, ympäristölupaus ja ilmoituskanava (Toimintaperiaatteet.dc.html) */
.et-kicker { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action-text); }
.et-kicker::before { content: ""; width: 9px; height: 9px; background: var(--brand-red); transform: rotate(45deg); flex: none; }
.et-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.03; letter-spacing: -0.028em; text-wrap: balance; }
.et-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-muted); }

/* Sivun sisäinen navigaatio heron alla */
.et-jump { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.et-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; transition: background-color 0.25s, border-color 0.25s; }
.et-jump a:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }
.et-jump a span { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #ff6b6f; }

/* Kymmenen periaatetta */
.et-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.et-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 290px; padding: 26px 24px 28px; border-radius: var(--radius-lg); background: var(--surface-alt); overflow: hidden; transition: background-color 0.45s var(--kk-ease), color 0.45s var(--kk-ease), translate 0.45s var(--kk-ease); }
.et-card::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 92px; height: 92px; background: var(--brand-red); transform: rotate(45deg) scale(0.4); opacity: 0; transition: transform 0.6s var(--kk-ease), opacity 0.45s; }
.et-card:hover { background: var(--surface-inverse); color: var(--on-inverse); translate: 0 -6px; }
.et-card:hover::after { opacity: 1; transform: rotate(45deg) scale(1); }
.et-card:hover .et-card-text { color: var(--on-inverse-muted); }
.et-card-no { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--brand-red); font-variant-numeric: tabular-nums; }
.et-card-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.2; }
.et-card-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); transition: color 0.45s; }

/* Toimintaohje (Code of Conduct): tumma osio, avattavat rivit */
.et-coc { background: var(--surface-inverse); color: var(--on-inverse); }
.et-coc .et-kicker { color: #ff6b6f; }
.et-coc .et-lead { color: var(--on-inverse-muted); }
.et-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.et-who div { padding: 18px 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: 6px; }
.et-who strong { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.et-who span { font-size: 14px; line-height: 1.5; color: var(--on-inverse-muted); }
.et-acc { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.et-item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.et-item summary { list-style: none; display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 24px 0; cursor: pointer; }
.et-item summary::-webkit-details-marker { display: none; }
.et-item-no { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #ff6b6f; font-variant-numeric: tabular-nums; }
.et-item-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.2; transition: color 0.25s; }
.et-item-quote { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: 15px; font-style: italic; color: var(--on-inverse-muted); }
.et-item summary:hover .et-item-title { color: #ff8a8d; }
.et-plus { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); justify-self: end; transition: background-color 0.3s, border-color 0.3s; }
.et-plus::before, .et-plus::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: #fff; transition: transform 0.35s var(--kk-ease); }
.et-plus::after { transform: rotate(90deg); }
.et-item[open] .et-plus { background: var(--brand-red); border-color: var(--brand-red); }
.et-item[open] .et-plus::after { transform: rotate(0deg); }
.et-item-body { padding: 0 0 28px 64px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; animation: et-open 0.45s var(--kk-ease) both; }
.et-item-body p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--on-inverse-muted); }
.et-item-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.et-item-body li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--on-inverse); }
.et-item-body li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; background: var(--brand-red); transform: rotate(45deg); }
@keyframes et-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Ympäristölupaus: koko leveyden kuva */
.et-env { position: relative; overflow: hidden; color: #fff; background: #12221a; }
.et-env-media { position: absolute; inset: -8% 0; }
.et-env-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-env-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 24, 18, 0.72) 0%, rgba(14, 24, 18, 0.55) 40%, rgba(14, 24, 18, 0.88) 100%); }
.et-env-inner { position: relative; padding: 160px 40px 120px; max-width: 1280px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 64px; }
.et-env .et-kicker { color: #b9e3a8; }
.et-env .et-kicker::before { background: #8fd17a; }
.et-env-lead { margin: 0; max-width: 820px; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.14; letter-spacing: -0.025em; text-wrap: balance; }
.et-env-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.et-env-grid > .et-env-card { grid-column: span 2; }
.et-env-grid > .et-env-card:nth-child(-n+2) { grid-column: span 3; min-height: 240px; padding: 36px 34px; }
.et-env-grid > .et-env-card:nth-child(-n+2) .et-env-title { font-size: 28px; }
.et-env-grid > .et-env-card:nth-child(-n+2) .et-env-text { font-size: 16.5px; max-width: 46ch; }
.et-env-card .et-env-text { margin-top: auto; }
@media (max-width: 1000px) { .et-env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .et-env-grid > .et-env-card, .et-env-grid > .et-env-card:nth-child(-n+2) { grid-column: span 1; min-height: 0; } .et-env-grid > .et-env-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .et-env-grid { grid-template-columns: minmax(0, 1fr); } .et-env-grid > .et-env-card:last-child { grid-column: auto; } }
.et-env-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color 0.4s, translate 0.45s var(--kk-ease); }
.et-env-card:hover { background: rgba(255, 255, 255, 0.14); translate: 0 -4px; }
.et-env-no { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #b9e3a8; }
.et-env-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.2; }
.et-env-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.et-env-sign { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.015em; display: flex; align-items: center; gap: 16px; }
.et-env-sign::before { content: ""; width: 40px; height: 2px; background: #8fd17a; }

/* Ilmoituskanava */
.et-wb { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
.et-wb-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.et-wb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-wb-badge { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: rgba(28, 26, 26, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 14px; font-weight: 500; }
.et-wb-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #5bd17a; box-shadow: 0 0 0 0 rgba(91, 209, 122, 0.6); animation: et-pulse 2.4s infinite; }
@keyframes et-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 209, 122, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(91, 209, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 209, 122, 0); } }
.et-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.et-tag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--surface-alt); font-size: 14px; font-weight: 500; }
.et-tag::before { content: ""; width: 6px; height: 6px; background: var(--brand-red); transform: rotate(45deg); }
.et-steps { list-style: none; margin: 0; padding: 0; counter-reset: et; display: flex; flex-direction: column; }
.et-steps li { counter-increment: et; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.et-steps li::before { content: counter(et, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--action-text); padding-top: 3px; }
.et-steps strong { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.et-steps span { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

.et-form { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(28, 26, 26, 0.06), 0 24px 60px rgba(28, 26, 26, 0.1); border: 1px solid var(--line); }
.et-form-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; }
.et-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: var(--radius-md); background: var(--surface-alt); }
.et-seg label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.25s, box-shadow 0.25s; }
.et-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.et-seg strong { font-size: 15px; font-weight: 600; }
.et-seg span { font-size: 12.5px; color: var(--ink-muted); }
.et-seg label.is-on { background: var(--surface); box-shadow: 0 1px 3px rgba(28, 26, 26, 0.14); }
.et-seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.et-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.et-file { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.et-file:hover { border-color: var(--ink); background: var(--surface-alt); }
.et-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.et-file-icon { width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--surface-alt); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.et-note { margin: 0; display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
.et-note::before { content: ""; flex: none; width: 14px; height: 16px; margin-top: 1px; border: 2px solid var(--ink-muted); border-radius: 3px 3px 4px 4px; box-sizing: border-box; }
.et-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0; animation: et-open 0.5s var(--kk-ease) both; }
.et-sent-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--success); display: grid; place-items: center; }
.et-sent-mark::before { content: ""; width: 20px; height: 10px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(2px, -2px); }

/* Vierityksen mukaan porrastuvat kortit */
@supports (animation-timeline: view()) {
  .et-card, .et-env-card { animation: kk-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .et-card:nth-child(5n+2), .et-env-card:nth-child(2) { animation-range: entry 8% entry 78%; }
  .et-card:nth-child(5n+3), .et-env-card:nth-child(3) { animation-range: entry 16% entry 86%; }
  .et-card:nth-child(5n+4), .et-env-card:nth-child(4) { animation-range: entry 24% entry 94%; }
  .et-card:nth-child(5n+5), .et-env-card:nth-child(5) { animation-range: entry 32% entry 100%; }
  .et-env-media { animation: et-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes et-drift { from { transform: translateY(-6%) scale(1.06); } to { transform: translateY(6%) scale(1.06); } }
}

@media (max-width: 1100px) {
  .et-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .et-wb { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .et-form { position: static; }
}
@media (max-width: 900px) {
  .et-h2 { font-size: 36px; }
  .et-lead { font-size: 16.5px; }
  .et-card { min-height: 0; }
  .et-who { grid-template-columns: minmax(0, 1fr); }
  .et-item-title { font-size: 20px; }
  .et-item-body { padding-left: 0; }
  .et-env-inner { padding: 96px 16px 80px; gap: 44px; }
  .et-form { padding: 24px; }
  .et-row2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .et-grid { grid-template-columns: minmax(0, 1fr); }
  .et-seg { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .et-card, .et-env-card, .et-env-media, .et-item-body, .et-sent { animation: none !important; opacity: 1 !important; transform: none !important; }
  .et-card, .et-card::after, .et-env-card, .et-plus, .et-plus::before, .et-plus::after { transition: none !important; }
  .et-wb-badge::before { animation: none; }
}