.about-principles.principles-redesign{min-height:0;padding-block:96px;display:grid;gap:48px}
.principles-redesign .principle{
 --row-accent:var(--color-accent);
 position:relative;display:grid;grid-template-columns:48px minmax(0,300px) 56px minmax(0,1fr);
 align-items:start;gap:24px;min-height:180px;padding:28px 28px 28px 0
}
.principles-redesign .principle:nth-child(even){--row-accent:var(--color-mark)}
.principles-redesign .principle::before,.principles-redesign .principle::after{
 content:'';position:absolute;width:24px;height:24px;border:1px solid var(--row-accent);opacity:.7;pointer-events:none;transition:opacity 200ms ease-out
}
.principles-redesign .principle::before{left:72px;top:8px;border-right:0;border-bottom:0}
.principles-redesign .principle::after{right:0;bottom:8px;border-left:0;border-top:0}
.principles-redesign .principle>.eyebrow{position:static;grid-column:1;padding-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.principle-marker{display:block;width:8px;height:8px;background:var(--row-accent);transition:transform 200ms ease-out}
.principles-redesign .principle h2{grid-column:2;padding-left:24px;font-size:36px;line-height:44px}
.principle-divider{grid-column:3;display:block;width:40px;height:1px;background:var(--row-accent);margin-top:24px;transition:width 200ms ease-out}
.principles-redesign .principle>p:last-child{grid-column:4;max-width:720px;font-size:18px;line-height:28px;padding-top:4px}
@media(hover:hover) and (pointer:fine){
 .principles-redesign .principle:hover::before,.principles-redesign .principle:hover::after{opacity:1}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .principles-redesign .principle:hover .principle-marker{transform:scale(1.15)}
 .principles-redesign .principle:hover .principle-divider{width:48px}
}
@media(min-width:768px) and (max-width:1199px){
 .about-principles.principles-redesign{padding-block:80px;gap:32px}
 .principles-redesign .principle{grid-template-columns:32px minmax(0,200px) 32px minmax(0,1fr);gap:16px;padding-right:20px}
 .principles-redesign .principle::before{left:48px}
 .principles-redesign .principle h2{font-size:28px;line-height:36px;padding-left:16px}
 .principles-redesign .principle>p:last-child{font-size:16px;line-height:24px}
 .principle-divider{width:24px;margin-top:20px}
 @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .principles-redesign .principle:hover .principle-divider{width:32px}
 }
}
@media(max-width:767px){
 .about-principles.principles-redesign{padding-block:64px;gap:32px}
 .principles-redesign .principle{grid-template-columns:minmax(0,1fr);gap:20px;min-height:0;padding:24px 20px}
 .principles-redesign .principle::before{left:0;top:0;width:18px;height:18px}
 .principles-redesign .principle::after{bottom:0;width:18px;height:18px}
 .principles-redesign .principle>.eyebrow{grid-column:1;flex-direction:row;align-items:center;gap:12px;padding:0}
 .principles-redesign .principle h2{grid-column:1;padding:0;font-size:28px;line-height:36px}
 .principles-redesign .principle>p:last-child{grid-column:1;padding:0;font-size:16px;line-height:24px}
 .principle-divider{display:none}
}
@media(prefers-reduced-motion:reduce){
 .principle-marker,.principle-divider,.principles-redesign .principle::before,.principles-redesign .principle::after{transition:none;transform:none}
}