.energy-header.site-header {
  background: #f5f4ff;
  border-bottom-color: transparent;
}

.energy-header[data-over-hero="true"] {
  background: transparent;
  backdrop-filter: none;
}

.energy-header .header-inner {
  width: min(1344px, calc(100% - 96px));
  min-height: 88px;
}

.energy-header .brand { color: #133584; font: 34px/1.2 "Times New Roman", Georgia, serif; }
.energy-header .brand img { width: 54px; height: 54px; object-fit: contain; }
.energy-header .main-nav a { color: #133584; font-family: Georgia, serif; font-size: 18px; }
.energy-header .menu-toggle { min-width: 44px; min-height: 44px; }

#top.energy-hero {
  --energy-blue: #153b85;
  --energy-header-height: 89px;
  position: relative;
  isolation: isolate;
  padding: 0;
  margin: 0;
  min-height: 0;
  background: transparent;
  overflow: visible;
}

#top.energy-hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: calc(-1 * var(--energy-header-height)) 0 0;
  z-index: -2;
  background: linear-gradient(180deg, transparent calc(100% - 180px), #f8f8ff 100%), #f2f1ff url("assets/hero-cleanplate.webp") center bottom / cover no-repeat;
  pointer-events: none;
}
#top.energy-hero::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  z-index: -1;
  background: linear-gradient(120deg, transparent 22%, #fff 49%, transparent 65%);
  opacity: .08;
  pointer-events: none;
  animation: energy-background 24s ease-in-out infinite alternate;
  mask-image: linear-gradient(180deg, #000 calc(100% - 180px), transparent 100%);
}

.energy-stage {
  position: relative;
  width: min(1435px, calc(100% - 72px));
  min-height: 957px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 176fr 175fr 159fr minmax(320px, 416fr) 172fr 174fr 163fr;
  align-items: start;
}

.energy-center { grid-column: 4; grid-row: 1; text-align: center; padding: 160px 0 0; color: var(--energy-blue); }
.energy-eyebrow { font-family: Georgia, serif; font-size: 16px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 26px; }
.energy-eyebrow::after { content: ""; display: block; width: 92px; height: 1px; background: #536c9b; margin: 16px auto 0; }
#top.energy-hero #hero-title { margin: 0; font-family: "Times New Roman", Georgia, serif; font-weight: 400; color: var(--energy-blue); line-height: 1; letter-spacing: 0; text-align: center; }
.energy-school { display: block; font-size: 66px; line-height: 1.08; margin-bottom: 0; }
.energy-name { display: block; font-size: clamp(78px, 7.1vw, 107px); line-height: .87; letter-spacing: 0; }
.energy-name > span { display: block; }
.energy-tagline { font-family: "Times New Roman", Georgia, serif; font-size: clamp(29px, 2.6vw, 39px); line-height: 1.25; margin: 41px -18px 0; color: var(--energy-blue); }
.energy-actions { display: grid; gap: 18px; width: min(306px, calc(100% - 36px)); margin: 52px auto 0; }
.energy-actions .button { display: flex; justify-content: center; align-items: center; min-height: 62px; font: 23px/1.25 "Times New Roman", Georgia, serif; border-radius: 10px; padding: 12px 16px; text-decoration: none; }
.energy-actions .energy-primary { background: #536c9b; color: #fff; border: 1px solid #536c9b; }
.energy-actions .energy-secondary { background: rgba(255,255,255,.8); border: 1px solid #345b9d; color: #153b85; }
.energy-actions .button:hover { transform: translateY(-2px); box-shadow: 0 4px 16px #536c9b21; }
#top .energy-center .social-transition {
  width: 100%;
  margin: 28px auto 0;
  padding: 0;
  border: 0;
  justify-content: center;
  gap: 10px;
}

.energy-keys { display: contents; padding: 0; margin: 0; list-style: none; }
.energy-key { --key-tint: #bad4fa; --key-color: #173b85; position: relative; grid-row: 1; height: 806px; margin: 32px 14px 0 0; min-width: 0; container-type: inline-size; }
.energy-key-specialists { grid-column: 1; }
.energy-key-spiritual { grid-column: 2; --key-tint: #dfcaff; --key-color: #3f2484; }
.energy-key-learning { grid-column: 3; margin-right: 0; --key-tint: #c3f3e9; --key-color: #16496b; }
.energy-key-potential { grid-column: 5; --key-tint: #dad1ff; }
.energy-key-parents { grid-column: 6; --key-tint: #ffe0df; --key-color: #8c2930; }
.energy-key-life { grid-column: 7; margin-right: 0; --key-tint: #f3e7d7; }
.energy-key-control { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 2px solid #fff; outline: 1px solid #ffffffb3; outline-offset: 3px; border-radius: 5px; color: var(--key-color); background: linear-gradient(180deg, color-mix(in srgb, var(--key-tint) 35%, transparent), color-mix(in srgb, var(--key-tint) 22%, transparent)); box-shadow: inset 0 0 24px #fff8, 0 0 7px #ffffffa6; cursor: default; font-family: "Times New Roman", Georgia, serif; transition: transform 260ms ease, box-shadow 260ms ease; -webkit-tap-highlight-color: transparent; }
.energy-key-control::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(ellipse, #fff 0%, transparent 70%); opacity: .1; animation: energy-key-light 9s ease-in-out infinite alternate; pointer-events: none; }
.energy-key-control:hover { transform: translateY(-3px); box-shadow: inset 0 0 25px #fff9, 0 4px 20px #536c9b22; }
.energy-key-control:active { transform: translateY(1px); transition-duration: 100ms; }
.energy-key-control:focus-visible { outline: 3px solid #355a9b; outline-offset: 5px; }
.energy-key-label { position: absolute; top: 75%; left: 3px; right: 3px; min-height: calc(2.2em + 20px); text-align: center; font-size: clamp(20px, 1.74vw, 26px); line-height: 1.1; letter-spacing: -.015em; }
.energy-key-label::after { content: ""; display: block; position: absolute; top: calc(2.2em + 19px); left: 50%; transform: translateX(-50%); width: 62px; height: 1px; background: currentColor; }

.energy-object { --crop-x: 41; --crop-y: 338; --crop-width: 155; --crop-height: 258; position: absolute; display: block; width: calc(var(--crop-width) / 162 * 100%); left: calc(var(--object-left) * 1%); top: calc(var(--object-top) * 1px); aspect-ratio: var(--crop-width) / var(--crop-height); pointer-events: none; transform-origin: center; animation: energy-object-float 9s ease-in-out infinite alternate; }
.energy-crop { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 2%, #000 94%, transparent); mask-composite: intersect; }
.energy-crop img { position: absolute; display: block; max-width: none; width: calc(1506 / var(--crop-width) * 100%); height: auto; left: calc(-1 * var(--crop-x) / var(--crop-width) * 100%); top: calc(-1 * var(--crop-y) / var(--crop-height) * 100%); user-select: none; }
.energy-object::after { content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(ellipse, #fff 0%, transparent 68%); opacity: .1; animation: energy-object-light 10s ease-in-out infinite alternate; animation-duration: inherit; z-index: -1; }
.energy-object-specialists { --object-left: 3.0864; --object-top: 218; }
.energy-object-lotus { --crop-x: 220; --crop-y: 397; --crop-width: 150; --crop-height: 180; --object-left: 5; --object-top: 277; width: 93.75%; animation-name: energy-lotus; animation-duration: 7.5s; }
.energy-object-walnut { --crop-x: 398; --crop-y: 405; --crop-width: 140; --crop-height: 165; --object-left: 6.9182; --object-top: 285; width: 88.05%; animation-duration: 10s; }
.energy-object-diamond { --crop-x: 970; --crop-y: 414; --crop-width: 144; --crop-height: 150; --object-left: 5.0633; --object-top: 294; width: 91.139%; animation-name: energy-diamond; animation-duration: 11s; }
.energy-object-family { --crop-x: 1136; --crop-y: 354; --crop-width: 156; --crop-height: 225; --object-left: 1.25; --object-top: 234; width: 97.5%; animation-duration: 12s; }
.energy-object-woman { --crop-x: 1312; --crop-y: 348; --crop-width: 156; --crop-height: 202; --object-left: 2.454; --object-top: 228; width: 95.706%; animation-duration: 10s; }
.energy-object-house { --crop-x: 1394; --crop-y: 546; --crop-width: 65; --crop-height: 75; --object-left: 52.76; --object-top: 426; width: 39.877%; animation-duration: 9s; animation-delay: -3s; }
.energy-object-coins { --crop-x: 1354; --crop-y: 591; --crop-width: 46; --crop-height: 48; --object-left: 28.22; --object-top: 471; width: 28.22%; animation-duration: 13s; animation-delay: -6s; }
.energy-object-lotus::after { animation-name: energy-lotus-light; }
.energy-object-walnut::after { animation-name: energy-walnut-light; }
.energy-object-family::after { animation-name: energy-family-light; }
.energy-object-specialists .energy-crop { mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 2%, #000 87%, transparent); }
.energy-object-lotus .energy-crop { mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 90%, transparent 100%), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 2%, #000 94%, transparent); }
.energy-object-walnut .energy-crop, .energy-object-diamond .energy-crop { mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 90%, transparent 100%); }
.energy-object-house .energy-crop, .energy-object-coins .energy-crop { mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 92%, transparent); }
.energy-object-family .energy-crop { mask-image: url("assets/hero-mask-family.svg"); mask-size: 100% 100%; }
.energy-object-woman .energy-crop { mask-image: url("assets/hero-mask-woman.svg"); mask-size: 100% 100%; }
.energy-object-house .energy-crop { mask-image: url("assets/hero-mask-house.svg"); mask-size: 100% 100%; }
.energy-object-coins .energy-crop { mask-image: url("assets/hero-mask-coins.svg"); mask-size: 100% 100%; }

.energy-controls { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 24px 0; color: #405476; }
.energy-motion-toggle { min-height: 44px; padding: 8px 16px; border: 1px solid #7890b5; border-radius: 9px; font: 14px Arial, sans-serif; color: #244775; background: #ffffffd9; cursor: pointer; }
.energy-controls p { font: 13px/1.4 Arial, sans-serif; margin: 0; }
.energy-motion-toggle:focus-visible, .energy-actions .button:focus-visible { outline: 3px solid #355a9b; outline-offset: 4px; }
#top.energy-hero[data-motion="paused"] *, #top.energy-hero[data-motion="paused"]::after { animation-play-state: paused !important; }
#top.energy-hero[data-motion="paused"] .energy-key-control::before, #top.energy-hero[data-motion="paused"] .energy-object::after { animation-play-state: paused; }
#top.energy-hero[data-motion="paused"] .energy-object { transform: none !important; }

@keyframes energy-background { from { transform: translateX(-2.5px); opacity: .08; } to { transform: translateX(2.5px); opacity: .13; } }
@keyframes energy-key-light { from { opacity: .1; } to { opacity: .16; } }
@keyframes energy-object-light { from { opacity: .1; } to { opacity: .16; } }
@keyframes energy-lotus-light { from { opacity: .1; } to { opacity: .22; } }
@keyframes energy-walnut-light { from { opacity: .08; } to { opacity: .16; } }
@keyframes energy-family-light { from { opacity: .08; } to { opacity: .15; } }
@keyframes energy-object-float { from { transform: translateY(-.75px); } to { transform: translateY(.75px); } }
@keyframes energy-lotus { from { transform: scale(1); } to { transform: scale(1.012); } }
@keyframes energy-diamond { from { transform: rotate(-.3deg); } to { transform: rotate(.3deg); } }

@media (min-width: 1180px) and (max-width: 1399px) {
  .energy-stage { width: calc(100% - 40px); grid-template-columns: 176fr 175fr 159fr minmax(320px, 416fr) 172fr 174fr 163fr; }
  .energy-key-label { font-size: 20px; }
  .energy-school { font-size: 52px; }
  .energy-name { font-size: 89px; }
  .energy-tagline { font-size: 31px; }
}

@media (max-width: 1179px) {
  #top.energy-hero { --energy-header-height: 81px; }
  .energy-header .header-inner { min-height: 80px; }
  .energy-header .brand { font-size: 27px; }
  .energy-header .main-nav a { font-family: Arial, sans-serif; font-size: 15px; }
  .energy-stage { display: flex; flex-direction: column; width: min(960px, calc(100% - 40px)); min-height: 0; padding: 40px 0 12px; }
  .energy-center { width: 100%; padding: 0; }
  .energy-eyebrow { font-size: 14px; margin-bottom: 20px; }
  .energy-school { font-size: 40px; }
  .energy-name { font-size: 76px; line-height: .92; }
  .energy-tagline { font-size: 30px; margin: 18px 0 0; }
  .energy-actions { margin-top: 28px; gap: 12px; }
  .energy-actions .button { min-height: 56px; font-size: 22px; }
  .energy-keys { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .energy-key { grid-column: auto; grid-row: auto; height: 370px; margin: 0; }
  .energy-object { top: 50px; width: calc(var(--crop-width) / 162 * 160px); left: calc(50% - var(--crop-width) / 162 * 80px); }
  .energy-key-life { --life-art-width: 150px; --life-art-top: 10px; }
  .energy-key-life .energy-object-woman { width: calc(156 / 163 * var(--life-art-width)); top: var(--life-art-top); left: calc(50% - var(--life-art-width) / 2 + 4 / 163 * var(--life-art-width)); }
  .energy-key-life .energy-object-house { width: calc(65 / 163 * var(--life-art-width)); top: calc(var(--life-art-top) + 198 / 163 * var(--life-art-width)); left: calc(50% - var(--life-art-width) / 2 + 86 / 163 * var(--life-art-width)); }
  .energy-key-life .energy-object-coins { width: calc(46 / 163 * var(--life-art-width)); top: calc(var(--life-art-top) + 243 / 163 * var(--life-art-width)); left: calc(50% - var(--life-art-width) / 2 + 46 / 163 * var(--life-art-width)); }
  .energy-key-label { top: auto; bottom: 34px; font-size: 24px; min-height: calc(2.2em + 15px); }
  .energy-key-life .energy-key-label { bottom: 20px; }
  .energy-key-label::after { top: calc(2.2em + 14px); }
  .energy-controls { width: 100%; padding: 20px 0 12px; flex-wrap: wrap; gap: 10px; text-align: center; }
}

@media (max-width: 767px) {
  #top.energy-hero { --energy-header-height: 73px; }
  .energy-header[data-over-hero="true"] { background: #f5f4ff; }
  .energy-header .header-inner { width: calc(100% - 32px); min-height: 72px; }
  .energy-header .brand { font-size: 23px; gap: 9px; }
  .energy-header .brand img { width: 42px; height: 46px; }
  .energy-stage { width: calc(100% - 32px); padding-top: 32px; }
  .energy-eyebrow { font-size: 12px; letter-spacing: .2em; }
  .energy-school { font-size: 34px; }
  .energy-name { font-size: 64px; }
  .energy-tagline { font-size: 26px; }
  .energy-actions { width: min(306px, 100%); }
  .energy-actions .button { font-size: 22px; }
  .energy-keys { display: none; }
  .energy-key { height: auto; }
  .energy-key-control {
    height: 100%;
    min-height: 232px;
    padding: 160px 8px 24px;
    border: 1px solid color-mix(in srgb, var(--key-tint) 65%, #fff);
    outline: none;
    border-radius: 10px;
    box-shadow: inset 0 0 12px #fff5;
  }
  .energy-key-control:hover { transform: none; box-shadow: inset 0 0 12px #fff5; }
  .energy-key-control::before { display: none; }
  .energy-object { --mobile-art-height: 120px; width: calc(var(--crop-width) / var(--crop-height) * var(--mobile-art-height)); left: calc(50% - var(--crop-width) / var(--crop-height) * var(--mobile-art-height) / 2); top: 16px; }
  .energy-object-specialists { --mobile-art-height: 142px; top: 10px; }
  .energy-object-lotus { --mobile-art-height: 122px; top: 20px; }
  .energy-object-walnut { --mobile-art-height: 108px; top: 28px; }
  .energy-object-diamond { --mobile-art-height: 110px; top: 28px; }
  .energy-object-family { --mobile-art-height: 138px; top: 12px; }
  .energy-key-life .energy-object-woman { width: calc(156 / 202 * 124px); left: calc(50% - 56px); top: 16px; }
  .energy-key-life .energy-object-house { width: 37px; left: calc(50% + 20px); top: 96px; }
  .energy-key-life .energy-object-coins { width: 26px; left: calc(50% + 8px); top: 122px; }
  .energy-key-label { position: relative; display: block; top: auto; bottom: auto; left: auto; right: auto; min-height: 46px; font-size: clamp(17px, 4.6vw, 18px); line-height: 1.28; overflow-wrap: anywhere; }
  .energy-key-life .energy-key-label { bottom: auto; }
  .energy-key-label::after { display: none; }
  .energy-controls p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #top.energy-hero *, #top.energy-hero::after, .energy-key-control::before, .energy-object::after { animation: none !important; transition: none !important; }
  .energy-key-control:hover, .energy-key-control:active, .energy-actions .button:hover { transform: none; }
}