/* Only the four transformation overview entry cards. */
.transformation-card-grid { align-items: stretch; }
.transformation-card-grid .transformation-card { display: flex; flex-direction: column; min-width: 0; height: 380px; box-sizing: border-box; border: 1px solid #dfd5c8; border-radius: 10px; overflow: hidden; background: #faf8f5; text-decoration: none; box-shadow: 0 5px 18px #29375008; transition: transform 240ms ease, box-shadow 240ms ease; }
.transformation-card-art { height: 140px; flex: 0 0 140px; display: grid; place-items: center; background: transparent; }
.transformation-card-grid .transformation-card.theme-sage { background: linear-gradient(180deg, #E0E6D9 0%, #ECF0E6 38%, #FAF7F1 100%); }
.transformation-card-grid .transformation-card.theme-warm-rose { background: linear-gradient(180deg, #EBDCD5 0%, #F3E8E0 38%, #FAF7F1 100%); }
.transformation-card-grid .transformation-card.theme-mist-blue { background: linear-gradient(180deg, #DDE6E9 0%, #EAF0EF 38%, #FAF7F1 100%); }
.transformation-card-grid .transformation-card.theme-dusty-purple { background: linear-gradient(180deg, #E5DFE9 0%, #EFE9EF 38%, #FAF7F1 100%); }
.transformation-card-art svg { width: 88px; height: 88px; fill: none; stroke: #a88b60; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; opacity: .9; transition: opacity 240ms ease; }
.transformation-card-art .symbol-dot { fill: #a88b60; stroke: none; }
.transformation-card-copy { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 22px 24px; background: transparent; box-sizing: border-box; }
.transformation-card-copy small { font: 11px Arial, sans-serif; letter-spacing: .18em; color: #876c49; }
.transformation-card-copy h3 { font: 500 21px "Noto Serif TC", "Microsoft JhengHei", serif; letter-spacing: .08em; color: #293750; margin: 14px 0 9px; }
.transformation-card-copy p { font-size: 14px; line-height: 1.95; color: #5c667a; margin: 0 0 18px; }
.transformation-card-link { align-self: flex-start; position: relative; margin-top: auto; padding-bottom: 5px; font-size: 12px; color: #89683f; }
.transformation-card-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 35%; height: 1px; background: #c1a47a; transition: width 240ms ease; }
.transformation-card-grid .transformation-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #29375012; }
.transformation-card:hover .transformation-card-art svg { opacity: 1; }
.transformation-card:hover .transformation-card-link::after { width: 100%; }
.transformation-card:focus-visible { outline: 2px solid #a88b60; outline-offset: 4px; }
@media (max-width: 760px) {
 .transformation-card-grid .transformation-card { height: auto; min-height: 380px; }
 .transformation-card-art { height: 130px; flex-basis: 130px; }
 .transformation-card-art svg { width: 84px; height: 84px; }
 .transformation-card-copy { padding: 12px 16px 22px; min-height: 0; }
 .transformation-card-copy h3 { font-size: 19px; }
 .transformation-card-copy p { font-size: 13px; line-height: 1.85; }
}
@media (prefers-reduced-motion: reduce) {
 .transformation-card-grid .transformation-card, .transformation-card-art svg, .transformation-card-link::after { transition: none; }
 .transformation-card-grid .transformation-card:hover { transform: none; }
}