/* About page — shares the homepage system, with page-specific content layouts. */
.about-page { --about-ink: #10243a; }

.about-hero { position: relative; display: grid; min-height: min(640px, calc(100svh - 118px)); align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.about-hero__image { position: absolute; z-index: -2; inset: 0; background: url('../assets/images/about-hero-engineers.jpg') center 52% / cover no-repeat; transform: scale(1.025); }
.about-hero__overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 20, 33, .96) 0%, rgba(5, 24, 40, .84) 42%, rgba(7, 23, 36, .35) 100%); }
.about-hero__content { max-width: 820px; padding: 96px 0 146px; }
.about-hero h1 { max-width: 790px; margin-top: 22px; color: #fff; font: 800 clamp(2.7rem, 5.25vw, 5rem) / 1.08 var(--sans-display); letter-spacing: -.055em; }
.about-hero__content > p:last-child { max-width: 620px; margin-top: 26px; color: rgba(255, 255, 255, .84); font-size: 1.08rem; line-height: 1.75; }

.about-intro { padding: clamp(105px, 11vw, 160px) 0; background: var(--bg-primary); }
.about-intro__grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(380px, .82fr); align-items: center; gap: clamp(54px, 8vw, 120px); }
.about-intro__copy h2, .about-history h2 { max-width: 630px; margin-top: 18px; color: var(--ink); font: 800 clamp(2.2rem, 3.55vw, 3.25rem) / 1.15 var(--sans-display); letter-spacing: -.045em; }
.about-intro__copy > p:not(.eyebrow) { max-width: 620px; margin-top: 19px; color: var(--ink-soft); font-size: .98rem; line-height: 1.8; }
.about-intro__media { position: relative; min-height: 535px; overflow: hidden; }
.about-intro__media::after { position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border: 1px solid var(--signal); content: ''; }
.about-intro__media img { width: 100%; height: 100%; min-height: 535px; object-fit: cover; filter: saturate(.82); }
.about-intro__badge { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; gap: 14px; padding: 22px 26px; color: #fff; background: var(--blue); }
.about-intro__badge strong { font: 800 2.3rem / 1 var(--sans-display); letter-spacing: -.05em; }
.about-intro__badge span { font-size: .72rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase; }

.about-principles { padding: clamp(105px, 11vw, 155px) 0; color: #fff; background: var(--navy); }
.about-principles .section-heading { margin-bottom: 59px; }
.about-principles .section-heading h2 { color: #fff; }
.about-principles .section-heading > p { color: #c4d2dd; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .18); }
.principle-card { position: relative; min-height: 368px; padding: 32px 32px 36px; border-right: 1px solid rgba(255, 255, 255, .18); transition: background .25s ease; }
.principle-card:first-child { border-left: 1px solid rgba(255, 255, 255, .18); }
.principle-card:hover { background: rgba(255, 255, 255, .06); }
.principle-card__number { display: block; color: #8fb6d1; font: 700 .65rem var(--sans-display); letter-spacing: .12em; }
.principle-card__icon { display: grid; width: 48px; height: 48px; margin: 34px 0 27px; place-items: center; color: #fff; }
.principle-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.principle-card h3 { color: #fff; font: 700 1.2rem var(--sans-display); letter-spacing: -.025em; }
.principle-card p, .principle-card li { color: #c4d2dd; font-size: .9rem; line-height: 1.7; }
.principle-card p { margin-top: 14px; }
.principle-card ul { display: grid; gap: 5px; margin: 15px 0 0; padding: 0; list-style: none; }
.principle-card li { position: relative; padding-left: 15px; }
.principle-card li::before { position: absolute; top: .62em; left: 0; width: 5px; height: 5px; background: var(--signal); content: ''; }

.about-history { padding: clamp(105px, 11vw, 155px) 0; background: var(--surface); }
.about-history__heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, .55fr); gap: 26px 78px; align-items: end; margin-bottom: 68px; }
.about-history__heading h2 { grid-column: 1; }
.about-history__heading > p:last-child { grid-column: 2; margin-bottom: 7px; color: var(--ink-soft); font-size: .96rem; line-height: 1.7; }
.history-timeline { position: relative; display: grid; gap: 0; max-width: 1080px; margin: 0; padding: 0; list-style: none; }
.history-timeline::before { position: absolute; top: 12px; bottom: 12px; left: 104px; width: 1px; background: var(--line); content: ''; }
.history-timeline li { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 50px; padding: 0 0 41px; }
.history-timeline li:last-child { padding-bottom: 0; }
.history-timeline time { position: relative; z-index: 1; color: var(--signal); background: var(--surface); font: 800 1.05rem var(--sans-display); letter-spacing: -.03em; }
.history-timeline time::after { position: absolute; top: 5px; right: -6px; width: 11px; height: 11px; border: 2px solid var(--surface); border-radius: 50%; background: var(--blue); content: ''; }
.history-timeline h3 { color: var(--ink); font: 700 1.14rem var(--sans-display); letter-spacing: -.025em; text-transform: none; }
.history-timeline p { max-width: 690px; margin-top: 9px; color: var(--ink-soft); font-size: .94rem; line-height: 1.75; }

.about-concerns { padding: clamp(105px, 11vw, 155px) 0; background: var(--bg-primary); }
.about-concerns .section-heading { margin-bottom: 59px; }
.concerns-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.concern-card { min-height: 270px; padding: 30px 34px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .25s ease, background .25s ease; }
.concern-card:hover { color: #fff; background: var(--navy); }
.concern-card > span { display: block; color: var(--signal); font: 700 .65rem var(--sans-display); letter-spacing: .12em; }
.concern-card h3 { max-width: 470px; margin-top: 30px; color: var(--ink); font: 700 1.17rem / 1.35 var(--sans-display); letter-spacing: -.025em; transition: color .25s ease; }
.concern-card p { max-width: 520px; margin-top: 12px; color: var(--ink-soft); font-size: .89rem; line-height: 1.65; transition: color .25s ease; }
.concern-card p + p { margin-top: 10px; font-size: .83rem; }
.concern-card:hover h3 { color: #fff; }
.concern-card:hover p { color: #c4d2dd; }

.about-cta { position: relative; display: grid; min-height: 510px; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.about-cta__image { position: absolute; z-index: -2; inset: 0; background: url('../assets/images/power-generation.jpg') center / cover no-repeat; }
.about-cta__overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 20, 33, .94), rgba(4, 20, 33, .57)); }
.about-cta__content { max-width: 670px; padding: 75px 0; }
.about-cta h2 { max-width: 630px; margin-top: 19px; color: #fff; font: 800 clamp(2.25rem, 3.85vw, 3.7rem) / 1.1 var(--sans-display); letter-spacing: -.05em; }
.about-cta__content > p:not(.eyebrow) { max-width: 550px; margin: 20px 0 30px; color: rgba(255, 255, 255, .82); font-size: 1rem; line-height: 1.7; }

@media (max-width: 900px) {
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro__media { max-width: 680px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle-card, .principle-card:first-child { min-height: auto; border-bottom: 1px solid rgba(255, 255, 255, .18); border-left: 1px solid rgba(255, 255, 255, .18); }
  .principle-card__icon { margin: 24px 0 20px; }
  .about-history__heading { grid-template-columns: 1fr; gap: 18px; }
  .about-history__heading > p:last-child { grid-column: 1; margin: 0; }
}

@media (max-width: 620px) {
  .about-hero { min-height: 590px; }
  .about-hero__overlay { background: linear-gradient(90deg, rgba(4, 20, 33, .96), rgba(4, 20, 33, .61)); }
  .about-hero__content { padding: 75px 0 100px; }
  .about-hero h1 { font-size: clamp(2.45rem, 12vw, 3.2rem); }
  .about-hero__content > p:last-child { font-size: .95rem; }
  .about-intro, .about-principles, .about-history, .about-concerns { padding: 100px 0; }
  .about-intro__grid { gap: 52px; }
  .about-intro__media, .about-intro__media img { min-height: 390px; }
  .about-intro__media::after { inset: 12px -12px -12px 12px; }
  .about-intro__badge { padding: 17px 19px; }
  .about-intro__badge strong { font-size: 1.9rem; }
  .principle-card { padding: 26px 24px 29px; }
  .about-history__heading { margin-bottom: 45px; }
  .history-timeline::before { left: 70px; }
  .history-timeline li { grid-template-columns: 70px minmax(0, 1fr); gap: 29px; padding-bottom: 34px; }
  .history-timeline time { font-size: .92rem; }
  .history-timeline time::after { right: -6px; }
  .concerns-grid { grid-template-columns: 1fr; }
  .concern-card { min-height: auto; padding: 27px 24px 29px; }
  .concern-card h3 { margin-top: 23px; }
  .about-cta { min-height: 465px; }
  .about-cta__content { padding: 65px 0; }
}