.elementals-hero,
.elementals-sections,
.elementals-backlink { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
.elementals-hero { padding: clamp(4rem, 10vw, 8rem) 0 2.5rem; }
.elementals-hero h1 { margin: .35rem 0 1rem; font-size: clamp(4rem, 11vw, 8.5rem); line-height: .86; }
.elementals-hero > p:not(.eyebrow) { max-width: 660px; color: #c1c8da; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.elementals-index { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.elementals-index a { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--white); font-size: .8rem; font-weight: 800; text-decoration: none; }
.elementals-index a:hover, .elementals-index a:focus-visible { border-color: var(--orange); color: var(--orange-light); }
.elemental-section { --element-accent: #ff7256; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); align-items: center; min-height: 390px; margin: 1.5rem 0; padding: clamp(1.4rem, 5vw, 3.5rem); overflow: hidden; border: 1px solid rgba(215,222,255,.18); border-radius: 1.1rem; background-color: #101735; background-image: linear-gradient(90deg, rgba(8,12,31,.94) 0%, rgba(8,12,31,.78) 54%, rgba(8,12,31,.4) 100%), var(--element-bg), radial-gradient(ellipse at 75% 30%, rgba(255,255,255,.12), transparent 55%); background-position: left top; background-repeat: no-repeat; background-size: cover; box-shadow: 0 1rem 3rem rgba(0,0,0,.2); }
.elemental-water { --element-accent: #69d9f4; }
.elemental-earth { --element-accent: #a9d58a; }
.elemental-air { --element-accent: #c0dfff; }
.elemental-light { --element-accent: #ffe6a3; }
.elemental-dark { --element-accent: #d2a0ff; }
.elemental-copy { position: relative; z-index: 2; max-width: 650px; min-height: 290px; display: flex; flex-direction: column; justify-content: center; }
.elemental-copy .eyebrow { margin-bottom: .5rem; color: var(--element-accent); }
.elemental-copy h2 { margin: 0 0 .8rem; color: var(--white); font-size: clamp(3rem, 6vw, 5.3rem); line-height: .95; }
.elemental-copy p:last-child { max-width: 610px; margin: 0; color: #e1e5f0; font-size: clamp(1rem, 1.7vw, 1.14rem); line-height: 1.7; }
.elemental-art { position: relative; z-index: 1; width: 100%; height: 350px; margin: 0; display: grid; place-items: center; }
.elemental-art > img:first-child { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 1rem 1.4rem rgba(0,0,0,.55)); }
.elemental--left .elemental-art { grid-column: 1; grid-row: 1; }
.elemental--left .elemental-copy { grid-column: 2; grid-row: 1; margin-left: auto; }
.elemental-art--dark > img:first-child { position: relative; z-index: 1; }
.elemental-art--dark .elemental-fragments { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; animation: dark-fragments-drift 7s ease-in-out infinite; }
.elementals-backlink { padding: .5rem 0 5rem; }
.elementals-backlink a { color: var(--orange-light); font-weight: 800; }
@keyframes dark-fragments-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -10px, 0) rotate(.7deg); } }
@media (max-width: 760px) {
  .elementals-hero h1 { font-size: clamp(3.4rem, 16vw, 5.5rem); }
  .elemental-section { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 1.2rem; background-image: linear-gradient(180deg, rgba(8,12,31,.72) 0%, rgba(8,12,31,.9) 60%, rgba(8,12,31,.96) 100%), var(--element-bg), radial-gradient(ellipse at 75% 30%, rgba(255,255,255,.12), transparent 55%); }
  .elemental-art, .elemental--left .elemental-art { grid-column: 1; grid-row: 1; width: min(100%, 340px); height: min(68vw, 320px); margin: 0 auto .6rem; }
  .elemental-copy, .elemental--left .elemental-copy { grid-column: 1; grid-row: 2; max-width: none; min-height: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .elemental-art--dark .elemental-fragments { animation: none; } }