/* Energy Industry Edition — shared site tokens, Figma 2630:4587 / 2630:6827. */
.energy-page {
   background-image: url('../images/energy/2630-4587-imgUuid1E08462295F64752B5980492Facbb607.svg');
   background-repeat: no-repeat;
   background-size: 89.01vw auto;
   background-position: 5.52vw 50.94vw
}

.energy-schedule {
   background-image: url('../images/energy/2630-6827-imgUuid1E08462295F64752B5980492Facbb607.svg');
   background-position: -24.69vw 50.94vw
}

.energy-hero {
   height: 46.875rem;
   position: relative;
   overflow: hidden;
   padding: 9.6875rem 10.46875% 3.875rem
}

.energy-hero-background {
   position: absolute;
   inset: 0;
   pointer-events: none
}

.energy-hero-background img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.energy-hero-background:after {
   content: '';
   position: absolute;
   inset: 0;
   background: #1b0b5680
}

.energy-hero-inner {
   position: relative;
   display: flex;
   align-items: center;
   gap: 5.25rem
}

.energy-hero-copy {
   flex: 0 0 56.1875rem
}

.energy-hero-copy .eyebrow {
   font-weight: 400;
   margin-bottom: 1.875rem;
   line-height: 1
}

.energy-hero h1 {
   font-size: 5rem;
   line-height: 1.125
}

.energy-chevron {
   width: 25.125rem;
   height: 33.5rem;
   flex: none
}

.energy-chevron img {
   width: 100%;
   height: auto
}

.energy-page .site-header .nav-dropdown:first-of-type>summary {
   color: var(--lime)
}

.energy-sidebar {
   padding: .375rem 1.5rem .875rem
}

a .energy-sidebar>a,
.energy-sidebar summary {
   padding: 1.125rem 0
}

.energy-sidebar summary {
   padding-right: 1.5rem
}

.energy-sidebar details a span {
   display: block;
   font-size: .75rem;
   color: #ffffff80;
   margin-top: .25rem
}

.energy-sidebar>button {
   display: block;
   text-align: left;
   font-weight: 700;
   color: #fff6;
   padding: 1.125rem 0;
   width: 100%
}

.energy-sidebar>button:hover {
   color: var(--lime)
}

.energy-prose p {
   font-size: 1rem;
   line-height: 1.4;
   margin-bottom: 1.4rem
}

.energy-prose p:last-child {
   margin-bottom: 0
}

.energy-photos {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .875rem;
   margin-top: 1.875rem
}

.energy-photos img {
   width: 100%;
   aspect-ratio: 520/285;
   object-fit: cover
}

.energy-schedule .energy-layout {
   grid-template-columns: 22.625rem minmax(0, 1fr);
   gap: 2.0625rem
}

.energy-schedule-content .past-title {
   margin-bottom: 2rem;
   line-height: 1
}

.energy-timeline {
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative
}

.energy-timeline:before {
   content: '';
   position: absolute;
   left: 50%;
   width: 2px;
   top: 7.4rem;
   bottom: 7.4rem;
   background: #ffffff26;
   transform: translateX(-50%)
}

.energy-milestone {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 6.25rem minmax(0, 1fr);
   align-items: center;
   position: relative;
   scroll-margin-top: 2rem
}

.milestone-copy {
   grid-column: 1;
   grid-row: 1;
   width: calc(100% - 1.40625rem);
   justify-self: end;
   background: #ffffff1a;
   border: 1px solid #a9277899;
   padding: 2rem
}

.milestone-number {
   grid-column: 2;
   grid-row: 1;
   justify-self: center;
   width: 3rem;
   height: 3rem;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: 2px solid var(--lime);
   background: var(--lime);
   color: var(--purple);
   font-size: 1rem;
   font-weight: 900;
   letter-spacing: .05em;
   box-shadow: -2px 2px var(--magenta)
}

.milestone-image {
   grid-column: 3;
   grid-row: 1;
   width: 100%;
   height: 8.5rem;
   object-fit: cover
}

.energy-milestone:nth-child(even) .milestone-copy {
   grid-column: 3;
   justify-self: start
}

.energy-milestone:nth-child(even) .milestone-image {
   grid-column: 1
}

.milestone-date {
   display: inline-block;
   background: var(--magenta);
   padding: .375rem .75rem;
   font-size: .6875rem;
   font-weight: 700;
   line-height: 1.18;
   text-transform: uppercase
}

.milestone-label {
   color: var(--lime);
   opacity: .8;
   font-size: .75rem;
   letter-spacing: .3rem;
   text-transform: uppercase;
   line-height: 1.2;
   margin-top: .625rem
}

.milestone-copy h3 {
   font-size: 1.5rem;
   font-weight: 900;
   line-height: 1.2;
   text-transform: none;
   margin: 1rem 0
}

.milestone-description {
   font-size: .875rem;
   line-height: 1.5;
   opacity: .9
}

.energy-milestone.is-future {
   opacity: .4
}

.is-future .milestone-number {
   background: var(--blue);
   color: white
}

@media(max-width:1000px) {
   .energy-hero {
      height: auto;
      min-height: 500px;
      padding: 160px 24px 70px
   }

   .energy-hero-inner {
      gap: 20px
   }

   .energy-hero-copy {
      flex: 1;
      min-width: 0
   }

   .energy-hero h1 {
      font-size: 3.5rem
   }

   .energy-chevron {
      width: 25%;
      height: auto
   }

   .energy-hero-copy .eyebrow {
      font-size: .85rem
   }

   .energy-layout,
   .energy-schedule .energy-layout {
      grid-template-columns: 15rem minmax(0, 1fr);
      gap: 20px
   }

   .energy-milestone {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 0 16px;
      margin-bottom: 28px
   }

   .energy-milestone:last-child {
      margin-bottom: 0
   }

   .energy-timeline:before {
      left: 20px;
      top: 24px;
      bottom: 24px
   }

   .energy-milestone .milestone-copy,
   .energy-milestone:nth-child(even) .milestone-copy {
      grid-column: 2;
      grid-row: 1;
      justify-self: stretch;
      width: 100%;
      padding: 20px
   }

   .energy-milestone .milestone-number {
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      margin-top: 16px;
      width: 40px;
      height: 40px
   }

   .energy-milestone .milestone-image,
   .energy-milestone:nth-child(even) .milestone-image {
      grid-column: 2;
      grid-row: 2;
      height: auto;
      aspect-ratio: 472.5/136;
      margin-top: 12px
   }

   .milestone-label {
      letter-spacing: .14em
   }

   .milestone-copy h3 {
      font-size: 1.25rem
   }

   .milestone-description {
      font-size: 1rem
   }

   .energy-photos {
      grid-template-columns: 1fr
   }
}

@media(max-width:600px) {
   .energy-hero {
      min-height: 440px;
      padding: 155px 20px 70px
   }

   .energy-hero h1 {
      font-size: clamp(2rem, 8.5vw, 2.65rem);
      letter-spacing: -.04em
   }

   .energy-hero-copy {
      position: relative;
      z-index: 1
   }

   .energy-chevron {
      position: absolute;
      right: -40px;
      top: -35px;
      width: 180px;
      opacity: .45
   }

   .energy-hero-copy .eyebrow {
      font-size: .7rem;
      letter-spacing: .19rem
   }

   .energy-layout,
   .energy-schedule .energy-layout {
      display: flex
   }

   .energy-sidebar {
      padding: 0 16px
   }

   .energy-sidebar>a,
   .energy-sidebar summary,
   .energy-sidebar>button {
      padding-block: 14px
   }

   .energy-timeline:before {
      left: 15px
   }

   .energy-milestone {
      grid-template-columns: 30px minmax(0, 1fr);
      column-gap: 12px
   }

   .energy-milestone .milestone-number {
      width: 30px;
      height: 30px;
      font-size: .75rem
   }

   .energy-milestone .milestone-copy {
      padding: 16px
   }

   .milestone-label {
      font-size: .6rem;
      overflow-wrap: anywhere
   }

   .milestone-copy h3 {
      font-size: 1.1rem
   }

   .milestone-description {
      font-size: .875rem
   }

   .energy-page {
      background-size: 180% auto;
      background-position: center 800px
   }
}

.energy-page {
   position: relative;
   isolation: isolate
}

.energy-backdrop {
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   pointer-events: none
}

.energy-backdrop:before {
   content: '';
   position: absolute;
   left: 21.77vw;
   top: 126.4vw;
   width: 89.01vw;
   aspect-ratio: 1709/1904;
   transform: rotate(180deg);
   background: url('../images/energy/2630-4587-imgUuid1E08462295F64752B5980492Facbb609.svg') center/contain no-repeat
}

.energy-schedule .energy-backdrop:before {
   background-image: url('../images/energy/2630-6827-imgUuid1E08462295F64752B5980492Facbb609.svg')
}

.energy-sidebar summary>img {
   position: absolute;
   right: 0;
   top: 50%;
   width: 1.5rem;
   height: auto;
   transform: translateY(-50%)
}

.energy-sidebar details[open] summary>img {
   transform: translateY(-50%) rotate(45deg)
}

@media(max-width:1000px) {
   .energy-backdrop:before {
      top: auto;
      bottom: 200px;
      left: 10%;
      width: 130%
   }
}

/* Abstract brand artwork replaces illustrative timeline scenes. */
.timeline-draft {
   font-size: .875rem;
   color: #ffffffb3;
   margin: -.5rem 0 2rem;
   line-height: 1.5
}

.energy-schedule-content .timeline-draft {
   margin-top: -.5rem
}

.milestone-art {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   background: var(--art-bg);
   --art-bg: #1b0b56;
   --art-ink: #c8ff24;
   --art-accent: #a92778
}

.milestone-art:before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(125deg, transparent 35%, #ffffff0d 35.2%, transparent 65%), repeating-linear-gradient(135deg, transparent 0 25px, #ffffff10 26px, transparent 27px)
}

.emblem-solid {
   position: absolute;
   width: 27%;
   height: 125%;
   right: 23%;
   top: -12%;
   background: var(--art-ink);
   mask: url('../images/2280-6617-Vector.svg') center/contain no-repeat;
   -webkit-mask: url('../images/2280-6617-Vector.svg') center/contain no-repeat;
   transform: rotate(-8deg);
   filter: drop-shadow(8px 8px 0 #0002)
}

.milestone-art .emblem-outline {
   position: absolute;
   width: 36%;
   height: auto;
   max-width: none;
   right: -3%;
   top: -45%;
   opacity: .65;
   transform: rotate(-8deg)
}

.emblem-orbit {
   position: absolute;
   width: 60%;
   aspect-ratio: 1;
   border: 1px solid var(--art-accent);
   border-radius: 50%;
   left: -18%;
   top: -60%;
   box-shadow: 0 0 0 15px #ffffff08, 0 0 0 30px #ffffff08, 0 0 0 45px #ffffff08
}

.art-2 {
   --art-bg: #c8ff24;
   --art-ink: #1b0b56;
   --art-accent: #a92778
}

.art-2 .emblem-outline,
.art-5 .emblem-outline {
   filter: brightness(0);
   opacity: .18
}

.art-3 {
   --art-bg: #a92778;
   --art-ink: #fff;
   --art-accent: #c8ff24
}

.art-3 .emblem-solid {
   right: 48%;
   transform: rotate(8deg)
}

.art-4 {
   --art-bg: #241e68;
   --art-ink: #c8ff24;
   --art-accent: #fff
}

.art-4 .emblem-orbit {
   left: auto;
   right: -12%
}

.art-4 .emblem-solid {
   right: 48%
}

.art-5 {
   --art-bg: #f4f2fa;
   --art-ink: #a92778;
   --art-accent: #241e68
}

.art-5 .emblem-solid {
   transform: rotate(8deg)
}

.art-6 {
   --art-bg: #1b0b56;
   --art-ink: #fff;
   --art-accent: #c8ff24;
   background: linear-gradient(120deg, #1b0b56 25%, #a92778)
}

.art-6 .emblem-solid {
   right: 43%
}

.art-6 .emblem-outline {
   right: 7%
}

.energy-sidebar>a:last-child {
   border-bottom: 0
}

@media(max-width:600px) {
   .energy-sidebar {
      position: sticky;
      top: var(--header-height);
      z-index: 4;
      display: flex;
      gap: 24px;
      padding: 0 18px;
      box-shadow: 0 6px 18px #10063233
   }

   .energy-sidebar>a {
      border-bottom: 0;
      flex: 1
   }
}

/* Schedule milestone labels were 9.6px on phones. */
@media(max-width:600px) {
   .milestone-label {
      font-size: 11px
   }
}

/* A single photo spans the full content width at its natural proportions (client asked for no crop).
   Plain class (no :has()) and height:auto so older or cached browsers never stretch it. */
.energy-photos img {
   height: auto
}

.energy-photos--single {
   grid-template-columns: 1fr
}

.energy-photos--single img {
   aspect-ratio: auto;
   object-fit: contain
}

/* Timeline phase photos (Unsplash): photo under a brand-purple tint, chevron outline on top.
   The solid chevron and orbit ring are retired on photo tiles so the image reads clearly. */
.milestone-art.has-photo {
   height: 11rem;
   background: #1b0b56
}

.milestone-photo {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2
}

.milestone-art.has-photo:after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(100deg, rgb(27 11 86 / .78) 0%, rgb(27 11 86 / .35) 55%, rgb(169 39 120 / .35) 100%)
}

.milestone-art.has-photo:before {
   z-index: 0;
   opacity: .6
}

.milestone-art.has-photo :is(.emblem-solid, .emblem-orbit) {
   display: none
}

.milestone-art.has-photo .emblem-outline {
   filter: none;
   opacity: .8;
   z-index: 1
}

@media(max-width:1000px) {
   .energy-milestone .milestone-art.has-photo {
      height: auto;
      aspect-ratio: 3/1
   }
}