.directionsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border:1px solid #23404d;border-radius:7px;overflow:hidden;background:#223642}
.directionCard{position:relative;isolation:isolate;min-height:390px;aspect-ratio:5/3;overflow:hidden;display:flex;align-items:center;background:#06151c}
.directionScene{position:absolute;inset:0;z-index:-3;width:100%;height:100%;overflow:hidden;transition:transform 1s cubic-bezier(.2,.6,.2,1)}

.directionCard::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#030c12bd 0%,#030c1277 44%,#030c121a 100%),linear-gradient(0deg,#030c12a6,transparent 70%)}
.directionCard::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,transparent),transparent 80%);opacity:.65;transition:opacity .4s}
.directionCard:hover .directionScene{transform:scale(1.035)}.directionCard:hover::after{opacity:.9}.directionCard:focus-visible{outline-offset:-5px;outline-color:var(--accent)}
.directionContent{padding:38px 36px;width:100%;position:relative}.directionIcon{width:54px;height:54px;display:grid;place-items:center;margin-bottom:19px;border-radius:7px;color:#fff;background:color-mix(in srgb,var(--accent) 65%,#02101c);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 15%,transparent)}.directionIcon svg{width:30px;height:30px;stroke-width:1.6}
.directionContent h3{font-family:Montserrat,Inter,sans-serif;font-size:clamp(1.8rem,3vw,2.75rem);letter-spacing:-.025em;line-height:1.13;text-shadow:0 2px 18px #0005;max-width:440px}
.directionContent p{color:#dfebf2;line-height:1.65;font-size:.95rem;max-width:325px;margin-top:15px;min-height:76px;text-shadow:0 1px 9px #0007}
.directionCta{display:inline-flex;align-items:center;gap:28px;margin-top:24px;padding-bottom:6px;border-bottom:1px solid #adc5d491;font-size:.875rem;color:#edf9ff}.directionCta svg{width:22px;transition:transform .3s}.directionCard:hover .directionCta svg{transform:translateX(4px)}
.elementVisual{min-height:440px}.elementVisual::after{content:none}.elementVisual::before{width:285px;height:285px;border-color:#25506155;background:radial-gradient(circle,#12597d24,transparent 70%)}
.elementVisual .elementMark{width:285px;height:285px;overflow:visible;z-index:1;filter:drop-shadow(0 0 22px #248ad92a)}
.elementVisual .elementLabel{font-size:.85rem;letter-spacing:.18em}.elementLabel .elementName{font-size:.75rem;letter-spacing:.08em;color:#bfced8;margin:0 0 7px}.elementLabel strong{font-family:Michroma,Inter,sans-serif;font-weight:400;font-size:.85rem;letter-spacing:.15em;color:var(--elementColor);text-shadow:0 0 20px color-mix(in srgb,var(--elementColor) 30%,transparent)}
.elementIgnis{--elementColor:#ff896e}.elementAer{--elementColor:#ffe29a}.elementTerra{--elementColor:#87e2a3}.elementAqua{--elementColor:#63c8ff}
.elementVisual .elementFire,.elementVisual .elementAir{top:20px}.elementVisual .elementEarth,.elementVisual .elementWater{bottom:20px}
@media(max-width:1150px){.directionCard{min-height:390px;aspect-ratio:auto}.directionContent{padding:30px}.directionContent p{max-width:300px}.elementVisual .elementMark{width:260px;height:260px}.elementVisual::before{width:260px;height:260px}}
@media(max-width:850px){.directionCard{min-height:365px}.directionContent{padding:27px 24px}.directionContent h3{font-size:1.8rem}.directionContent p{font-size:.875rem;max-width:270px}.directionIcon{width:47px;height:47px}.directionIcon svg{width:27px;height:27px}.directionCta{margin-top:20px}.elementVisual{min-height:420px}}
@media(max-width:600px){.directionsGrid{grid-template-columns:1fr;gap:2px}.directionCard{min-height:385px;aspect-ratio:auto}.directionContent{padding:31px 25px}.directionContent h3{font-size:2.15rem}.directionContent p{font-size:.9rem;max-width:265px;min-height:69px}.directionIcon{width:50px;height:50px;margin-bottom:19px}.directionCard::before{background:linear-gradient(90deg,#030c12c0,#030c1266),linear-gradient(0deg,#030c12a6,transparent 75%)}.elementVisual{min-height:365px}.elementVisual .elementMark{width:238px;height:238px}.elementVisual::before{width:208px;height:208px}.elementVisual .elementLabel{font-size:.75rem}.elementLabel .elementName{font-size:.7rem}.elementLabel strong{font-size:.75rem}.elementVisual .elementFire,.elementVisual .elementAir{top:0}.elementVisual .elementEarth,.elementVisual .elementWater{bottom:0}.elementCaption{bottom:-34px}}
@media(prefers-reduced-motion:reduce){.directionCard:hover .directionScene,.directionCard:hover .directionCta svg{transform:none}}

.platform.inView{transform:none}.elementVisual .elementMark{filter:none}

.brandFilters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}