.hero-rotating-quote {
  position: relative;
  max-width: 56rem;
  margin: 1.5rem auto 2rem;
  padding: 1.25rem;
  border: 1px solid rgba(212, 175, 55, .18);
  border-left: 4px solid #d4af37;
  border-radius: 1rem;
  background: #101117;
  text-align: left;
}
.hero-rotating-quote > i {
  position: absolute;
  top: .65rem;
  left: .75rem;
  color: rgba(212, 175, 55, .2);
  font-size: 2.25rem;
}
.hero-rotating-quote blockquote {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  color: #d1d5db;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.65;
}
.hero-rotating-quote figcaption {
  margin-top: .5rem;
  color: #d4af37;
  font-size: .75rem;
  font-weight: 600;
  text-align: right;
}
.hero-rotating-quote blockquote,
.hero-rotating-quote figcaption { transition: opacity .4s ease; }
.hero-rotating-quote.is-changing blockquote,
.hero-rotating-quote.is-changing figcaption { opacity: 0; }
html.light .hero-rotating-quote { background: #fffdf5; }
html.light .hero-rotating-quote blockquote { color: #334155; }
html.light .hero-rotating-quote figcaption { color: #856610; }
@media (prefers-reduced-motion: reduce) {
  .hero-rotating-quote blockquote,
  .hero-rotating-quote figcaption { transition: none; }
}
.principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.principle-card { height: 256px; width: 100%; background: transparent; border: 0; padding: 0; perspective: 1000px; cursor: pointer; text-align: center; border-radius: 24px; }
.principle-inner { display: block; position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s; }
.principle-card:hover .principle-inner, .principle-card:focus-visible .principle-inner { transform: rotateY(180deg); }
.principle-card:focus-visible { outline: 2px solid #d4af37; outline-offset: 5px; }
.principle-front, .principle-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.principle-front { background: #101117; border: 1px solid #d4af3733; }
.principle-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #d4af371a; color: #d4af37; font-size: 24px; margin-bottom: 16px; }
.principle-title { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.principle-summary { color: #9ca3af; font-size: 12px; line-height: 1.65; }
.principle-back { background: linear-gradient(135deg, #900c3f, #581845); transform: rotateY(180deg); color: #e5e7eb; }
.principle-back .principle-title { color: #d4af37; font-size: 18px; margin-bottom: 12px; }
.principle-description { font-size: 12px; line-height: 1.65; }
.principle-action { color: #d4af37; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 600; margin-top: 16px; }
html.light .principle-front { background: #fffdf5; }
html.light .principle-front .principle-title { color: #1e293b; }
html.light .principle-summary { color: #475569; }
@media (max-width: 1023px) { .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .principles-grid { grid-template-columns: 1fr; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .principle-inner { transition: none; } }