/* The Power Trifecta(TM): shared triangle (Home band + Inner Blueprint page) */
.tri-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.tri-split-full { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); margin-top: 56px; }
.tri-copy .copy p + p { margin-top: 14px; }
.tri-copy .copy p:first-child { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .02em; color: var(--white); line-height: 1.25; }
.tri-copy .actions { margin-top: 34px; }

.tri { position: relative; }
.tri-stage { position: relative; width: 100%; max-width: 620px; margin: 0 auto 64px; aspect-ratio: 600 / 520; }
.tri-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tri-fill { fill: rgba(239, 61, 50, .05); stroke: none; transition: fill .5s ease; }
.tri-inner { fill: none; stroke: rgba(255, 253, 249, .12); stroke-width: 1; stroke-dasharray: 3 7; }
.tri-edge { stroke: rgba(255, 253, 249, .28); stroke-width: 2; stroke-linecap: round; transition: stroke .45s ease, stroke-width .45s ease; }
.tri-flow { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70 1300; stroke-dashoffset: 0; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .tri-flow { animation: tri-flow 7s linear infinite; }
  .tri-node.is-active .tri-illo { animation: tri-pulse 2.8s ease-in-out infinite; }
}
.motion-paused .tri-flow, .motion-paused .tri-node.is-active .tri-illo { animation: none; }
@keyframes tri-flow { to { stroke-dashoffset: -1370; } }
@keyframes tri-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 61, 50, .5); } 50% { box-shadow: 0 0 0 14px rgba(239, 61, 50, 0); } }
.tri[data-active="finances"] .e-finances,
.tri[data-active="health"] .e-health,
.tri[data-active="relationships"] .e-relationships { stroke: var(--red); stroke-width: 3; }
.tri[data-active] .tri-fill { fill: rgba(239, 61, 50, .09); }

.tri-core { position: absolute; left: 50%; top: 63%; transform: translate(-50%, -50%); text-align: center; margin: 0; pointer-events: none; line-height: 1; }
.tri-core span { display: block; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #aaa49b; margin-bottom: 8px; }
.tri-core strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 54px); letter-spacing: .02em; color: var(--white); text-transform: uppercase; }

.tri-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; padding: 0; color: var(--white); cursor: pointer; font: inherit; }
.tri-top { left: 50%; top: 11.9%; }
.tri-left { left: 10.3%; top: 88.1%; }
.tri-right { left: 89.7%; top: 88.1%; }
.tri-left .tri-label, .tri-right .tri-label { position: absolute; top: calc(100% + 12px); white-space: nowrap; }
.tri-top { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 56px)); }
.tri-illo { display: block; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 253, 249, .3); background: var(--ink); transition: border-color .35s ease, transform .35s ease; }
.tri-illo picture, .tri-illo img { display: block; width: 100%; height: 100%; }
.tri-illo img { object-fit: cover; object-position: 50% 45%; transform: scale(1.35); }
.tri-label { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #d8d3cb; transition: color .35s ease; }
.tri-node:hover .tri-illo, .tri-node:focus-visible .tri-illo { transform: scale(1.06); border-color: var(--white); }
.tri-node:focus-visible { outline: none; }
.tri-node:focus-visible .tri-illo { outline: 2px solid var(--red); outline-offset: 5px; }
.tri-node.is-active .tri-illo { border-color: var(--red); }
.tri-node.is-active .tri-label { color: var(--red); }

.tri-panel { border-top: 1px solid var(--dark-line); padding-top: 22px; max-width: 620px; margin: 0 auto; min-height: 150px; }
.tri-hint { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #8f8a82; margin: 0 0 14px; }
.tri-detail + .tri-detail { margin-top: 20px; }
.tri-ready .tri-detail { display: none; }
.tri-ready .tri-detail.is-active { display: block; animation: tri-in .45s ease both; }
@keyframes tri-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tri-detail-k { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; letter-spacing: .02em; color: var(--white); margin: 0; line-height: 1.05; }
.tri-detail-line { font-size: 19px; color: var(--white); margin: 10px 0 0; line-height: 1.5; }
.tri-detail-more { font-size: 16px; color: #aaa49b; margin: 8px 0 0; line-height: 1.6; }

.tri-side { display: flex; flex-direction: column; gap: 22px; }
.tri-video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--dark-line); color: var(--white); text-decoration: none; }
.tri-video img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .6s ease, opacity .4s ease; opacity: .82; }
.tri-video:hover img, .tri-video:focus-visible img { transform: scale(1.06); opacity: 1; }
.tri-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82)); pointer-events: none; }
.tri-video-play { position: absolute; left: 50%; top: 44%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: var(--red); z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .3s ease; }
.tri-video-play::before { content: ""; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--white); }
.tri-video:hover .tri-video-play { transform: scale(1.08); }
.tri-video-cap { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.tri-video-cap span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.tri-video-cap strong { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.tri-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.tri-video.is-playing::after, .tri-video.is-playing .tri-video-play, .tri-video.is-playing .tri-video-cap { display: none; }

@media (max-width: 980px) {
  .tri-split, .tri-split-full { grid-template-columns: 1fr; }
  .tri-home .tri { order: 2; }
}
@media (max-width: 600px) {
  .tri-stage { margin-bottom: 58px; width: 92%; }
  .tri-illo { width: 78px; height: 78px; }
  .tri-top { transform: translate(-50%, calc(-100% + 39px)); }
  .tri-label { font-size: 12px; letter-spacing: .14em; }
  .tri-left { left: 9%; }
  .tri-right { left: 91%; }
  .tri-left .tri-label { left: -6px; }
  .tri-right .tri-label { right: -6px; }
  .tri-core strong { font-size: 30px; }
  .tri-core span { font-size: 11px; letter-spacing: .22em; }
  .tri-detail-line { font-size: 18px; }
  .tri-video-play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .tri-video-play::before { left: 24px; top: 19px; border-width: 12px 0 12px 19px; }
}

/* Review fixes: room for the top corner label, spacing under the Home headline */
.tri-stage { margin-top: 44px; }
.tri-copy .copy { margin-top: 26px; }
@media (max-width: 980px) {
  .tri-home .tri { margin-top: 30px; }
}
@media (max-width: 600px) {
  .tri-label { letter-spacing: .1em; }
}
@media (max-width: 600px) {
  .tri-video { aspect-ratio: 4 / 3; }
  .tri-video-play { top: 36%; }
}