/* ============================================================
   Manufacturing Excellence v2 — AKFA-inspired editorial layout
   ============================================================ */

.mev2-accent { color: var(--accent); }

/* Body copy uses Raleway like the rest of the site (the global body
   default is Inter). Scoped to page content only — nav/footer are
   injected outside #main-content. Deliberate Inter (e.g. .mev2-acc__num)
   keeps its own explicit rule. */
#main-content { font-family: 'Raleway', sans-serif; }

/* ────── 1. CINEMATIC BANNER - lede under the title ────── */
/* .au-hero is normally sticky inside an .au-hero-pin parallax wrapper.
   Used standalone here, so we override sticky → relative to prevent
   the next sections scrolling over it. */
.au-hero.mev2-hero{
  position: relative;
  height: clamp(560px, 80svh, 760px);
  min-height: 560px;
}
.mev2-hero__container{
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}
/* The shared .au-hero__title carries a margin-bottom of var(--s-3)
   for the other (non-mev2) pages. On the mev2 hero, the flex
   container handles spacing via gap, so neutralise the title's
   margin-bottom to avoid stacking 16px on top of the 14px gap. */
.mev2-hero .au-hero__title{ margin-bottom: 0; }
.mev2-hero__title em,
.mev2-hero__title .mev2-accent{
  font-style: normal;
  color: var(--accent);
}
.mev2-hero__lede{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-m);
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
  margin: 0;
  max-width: 62ch;
  font-weight: 400;
}
@media (max-width: 767px){
  .mev2-hero__lede{ font-size: var(--fs-s); line-height: 1.55; max-width: 100%; }
}

/* ────── 3. PILLARS INTRO + 4 OUTCOME CARDS ────── */
.mev2-pillars{
  max-width: var(--container, 1320px);
  margin: 0 auto;
  padding: 72px var(--gutter, 32px) 64px;
}
.mev2-pillars__intro{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
@media (min-width: 900px){
  .mev2-pillars__intro{ grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
  /* No-title variant: collapse to a single column so the intro paragraph
     isn't stranded in the right half with an empty left column. */
  .mev2-pillars__intro--solo{ grid-template-columns: 1fr; }
}
.mev2-pillars__title{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.mev2-pillars__right p{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--ink-80);
  margin: 0;
  max-width: 56ch;
}
/* No-title variant: let the intro paragraph span the full section width
   (no 56ch cap) so it fills the row instead of sitting in the left third.
   Also drop the intro's bottom margin (it exists to separate the intro from
   following pillar cards, which this variant has none of) so the gap to the
   next section isn't excessive. */
.mev2-pillars__intro--solo{ margin-bottom: 0; }
.mev2-pillars__intro--solo .mev2-pillars__right p{ max-width: none; }

.mev2-outcomes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px){ .mev2-outcomes{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .mev2-outcomes{ grid-template-columns: repeat(4, 1fr); } }

.mev2-outcome{
  background: var(--paper-elev, #F5F4F1);
  border: 1px solid var(--ink-06);
  border-radius: 4px;
  padding: 28px 24px 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 220ms, transform 220ms;
}
.mev2-outcome:hover{
  border-color: var(--accent);
  transform: translateY(-2px);
}
.mev2-outcome__icon{
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(245,130,32,0.12);
  color: var(--accent);
}
.mev2-outcome__icon svg{ width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; }
.mev2-outcome__title{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}
.mev2-outcome__body{
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-60);
  margin: 0 0 auto 0;
}

/* ────── 4. PILLARS TAB CAROUSEL (theme-aware) ────── */
.mev2-pillars-tabs{
  background: var(--paper);
  color: var(--ink);
  padding: 80px 0;
  border-top: 1px solid var(--ink-06);
}
.mev2-pillars-tabs__inner{
  max-width: var(--container, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 32px);
}
.mev2-pillars-tabs__header{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 900px){
  .mev2-pillars-tabs__header{ grid-template-columns: 1.1fr 1fr; gap: 56px; }
}
.mev2-pillars-tabs__title{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.mev2-pillars-tabs__lede{
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
  max-width: 56ch;
}

.mev2-tabs__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.mev2-tab{
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink-12);
  color: var(--ink-80);
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-s);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.mev2-tab:hover{ color: var(--ink); border-color: var(--ink-40); }
.mev2-tab.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* Panel */
.mev2-panel{
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: clamp(360px, 45vw, 560px);
}
.mev2-panel[hidden]{ display: none; }
.mev2-panel__media{ position: absolute; inset: 0; }
.mev2-panel__media img,
.mev2-panel__media video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mev2-panel::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,8,9,0.85) 0%, rgba(10,8,9,0.45) 45%, rgba(10,8,9,0.10) 100%);
  pointer-events: none;
}
.mev2-panel__overlay{
  position: relative;
  z-index: 2;
  padding: 40px 32px;
  max-width: 540px;
}
@media (min-width: 768px){
  .mev2-panel__overlay{ padding: 56px 48px; }
}
.mev2-panel__eyebrow{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.mev2-panel__title{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 14px;
}
.mev2-panel__body{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-m);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0 0 24px;
  max-width: 44ch;
}
.mev2-panel__actions{ display: flex; gap: 12px; }

.mev2-panel__nav{
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.mev2-arrow{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
  font-size: var(--fs-l);
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.mev2-arrow:hover{
  background: var(--accent);
  border-color: var(--accent);
}

/* ────── 5. INSTRUMENTATION BAND (theme-aware) ────── */
.mev2-instr{
  background: var(--paper-elev);
  color: var(--ink);
  padding: 80px 0;
}
.mev2-instr__inner{
  max-width: var(--container, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 32px);
}
.mev2-instr__cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px){
  .mev2-instr__cols{ grid-template-columns: 1fr 1.15fr; gap: 64px; }
}

.mev2-instr__left{
  position: relative;
}
@media (min-width: 1024px){
  .mev2-instr__left{ position: sticky; top: 96px; }
}
.mev2-instr__title{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--ink);
}
.mev2-instr__lede{
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--ink-60);
  margin: 0;
  max-width: 48ch;
}

/* ─── Accordion ─── */
.mev2-acc-group{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-12);
}
.mev2-acc{
  border-bottom: 1px solid var(--ink-12);
}
.mev2-acc__head{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  font-family: 'Raleway', sans-serif;
  color: var(--ink);
  transition: color 220ms, padding 220ms;
}
.mev2-acc__head::-webkit-details-marker{ display: none; }
.mev2-acc__head:hover{ color: var(--accent); padding-left: 10px; }

.mev2-acc__num{
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  min-width: 28px;
}
.mev2-acc__name{
  font-size: var(--fs-l);
  font-weight: 600;
  letter-spacing: -0.005em;
  flex: 1;
}
.mev2-acc__chev{
  width: 18px; height: 18px;
  position: relative;
  flex: 0 0 auto;
}
.mev2-acc__chev::before,
.mev2-acc__chev::after{
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 220ms;
}
.mev2-acc__chev::before{
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
}
.mev2-acc__chev::after{
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
}
.mev2-acc[open] .mev2-acc__chev::after{
  transform: translateX(-50%) scaleY(0);
}

.mev2-acc__list{
  list-style: none;
  margin: 0;
  padding: 0 4px 18px;
  animation: mev2AccIn 280ms cubic-bezier(.2,.7,.2,1);
}
@keyframes mev2AccIn{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mev2-acc__list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--ink-06);
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-m);
  color: var(--ink-80);
  transition: color 200ms, padding 200ms;
}
.mev2-acc__list li:hover{ color: var(--accent); padding-left: 8px; }
.mev2-acc__list li em{
  font-style: normal;
  font-size: var(--fs-s);
  color: var(--ink-40);
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
}

/* ────── 6. TWIN PROMISE CARDS ────── */
.mev2-promises{
  max-width: var(--container, 1320px);
  margin: 0 auto;
  padding: 72px var(--gutter, 32px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px){
  .mev2-promises{ grid-template-columns: 1fr 1fr; gap: 20px; }
}
.mev2-promise{
  border-radius: 6px;
  padding: 40px 32px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px){ .mev2-promise{ padding: 52px 44px; } }
.mev2-promise--paper{
  background: var(--paper-elev, #F5F4F1);
  border: 1px solid var(--ink-06);
  color: var(--ink);
}
.mev2-promise--dark{
  background: #0A0809;
  color: #FFFFFF;
}
.mev2-promise__label{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.mev2-promise__statement{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
.mev2-promise--paper .mev2-promise__statement{ color: var(--ink); }
.mev2-promise--dark .mev2-promise__statement{ color: #FFFFFF; }
.mev2-promise__body{
  font-size: var(--fs-m);
  line-height: 1.6;
  margin: 0;
}
.mev2-promise--paper .mev2-promise__body{ color: var(--ink-80); }
.mev2-promise--dark .mev2-promise__body{ color: rgba(255,255,255,0.82); }
.mev2-promise__signoff{
  font-size: var(--fs-s);
  line-height: 1.55;
  margin: auto 0 0;
  font-style: normal;
}
.mev2-promise--paper .mev2-promise__signoff{ color: var(--ink-60); }
.mev2-promise--dark .mev2-promise__signoff{ color: rgba(255,255,255,0.62); }

/* ────── 7. OTHER CAPABILITIES BAND (theme-aware) ────── */
.mev2-other{
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  border-top: 1px solid var(--ink-06);
}
.mev2-other__inner{
  max-width: var(--container, 1320px);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter, 32px);
}
.mev2-other__head{ margin: 0 0 clamp(22px, 3vw, 34px); }
.mev2-other__head h2{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

/* Full-width grid of image tiles; each links to another industry and
   carries its name in a frosted-glass label. */
.mev2-other__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
@media (min-width: 640px){
  .mev2-other__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .mev2-other__grid{ grid-template-columns: repeat(4, 1fr); }
}
.mev2-other__tile a{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(35, 31, 32, 0.12);
}
.mev2-other__tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}
.mev2-other__tile a::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.12) 46%, rgba(0,0,0,0) 72%);
}
.mev2-other__tile a:hover img,
.mev2-other__tile a:focus-visible img{ transform: scale(1.06); }
.mev2-other__label{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 11px;
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  transition: background 220ms, border-color 220ms;
}
.mev2-other__label span{
  color: var(--accent);
  opacity: 0.92;
  transform: translateX(-3px);
  transition: opacity 220ms, transform 220ms;
}
.mev2-other__tile a:hover .mev2-other__label,
.mev2-other__tile a:focus-visible .mev2-other__label{
  background: rgba(245, 130, 32, 0.24);
  border-color: rgba(245, 130, 32, 0.60);
}
.mev2-other__tile a:hover .mev2-other__label span,
.mev2-other__tile a:focus-visible .mev2-other__label span{ opacity: 1; transform: translateX(0); }

/* ────── 8. DRAWER ────── */
.mev2-drawer{
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.mev2-drawer[hidden]{ display: none; }
.mev2-drawer__scrim{
  position: absolute;
  inset: 0;
  background: rgba(10,8,9,0.55);
  opacity: 0;
  transition: opacity 280ms;
}
.mev2-drawer.is-open .mev2-drawer__scrim{ opacity: 1; }

.mev2-drawer__panel{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(540px, 100%);
  background: var(--paper, #FFFFFF);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
  padding: 64px 36px 56px;
  box-shadow: -10px 0 40px rgba(0,0,0,0.18);
}
.mev2-drawer.is-open .mev2-drawer__panel{ transform: translateX(0); }
.mev2-drawer__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--ink-12);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-m);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.mev2-drawer__close:hover{ background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

.mev2-drawer__eyebrow{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.mev2-drawer__title{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 28px;
}

.mev2-d-block{
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--ink-06);
}
.mev2-d-block:last-child{ border-bottom: 0; }
.mev2-d-block h3{
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.2;
}
.mev2-d-block p{
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--ink-80);
  margin: 0 0 12px;
}
.mev2-d-block p:last-child{ margin-bottom: 0; }

.mev2-d-dots{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.mev2-d-dots li{
  position: relative;
  padding-left: 18px;
  margin: 0 0 8px;
  font-size: var(--fs-m);
  line-height: 1.55;
  color: var(--ink-80);
}
.mev2-d-dots li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.mev2-d-callout{
  background: rgba(245,130,32,0.08);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  margin: 12px 0 0;
  font-size: var(--fs-s);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}

/* ────── Dark theme adjustments ────── */
:root[data-theme="dark"] .mev2-outcome{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .mev2-outcome__title{ color: #FFFFFF; }
:root[data-theme="dark"] .mev2-outcome__body{ color: rgba(255,255,255,0.65); }
:root[data-theme="dark"] .mev2-promise--paper{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #FFFFFF;
}
:root[data-theme="dark"] .mev2-promise--paper .mev2-promise__statement{ color: #FFFFFF; }
:root[data-theme="dark"] .mev2-promise--paper .mev2-promise__body{ color: rgba(255,255,255,0.82); }
:root[data-theme="dark"] .mev2-promise--paper .mev2-promise__signoff{ color: rgba(255,255,255,0.62); }
:root[data-theme="dark"] .mev2-drawer__panel{
  background: #1a1719;
  color: #FFFFFF;
}
:root[data-theme="dark"] .mev2-drawer__close{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #FFFFFF;
}
:root[data-theme="dark"] .mev2-drawer__title{ color: #FFFFFF; }
:root[data-theme="dark"] .mev2-d-block h3{ color: #FFFFFF; }
:root[data-theme="dark"] .mev2-d-block p{ color: rgba(255,255,255,0.82); }
:root[data-theme="dark"] .mev2-d-dots li{ color: rgba(255,255,255,0.82); }
:root[data-theme="dark"] .mev2-d-block{ border-bottom-color: rgba(255,255,255,0.10); }
:root[data-theme="dark"] .mev2-d-callout{ color: #FFFFFF; }

/* ============================================================
   Inline application grid - used on Oil & Gas industries page
   in place of the side-drawer reveal. Cards float at the bottom
   of the active stage panel, half over the photo and half over
   the section background (Apple-style spec strip / AKFA pattern).
   ============================================================ */
.og-apps {
  /* Pull the grid up so the cards overlap the lower half of the
     panel photo above. The clamp keeps the overlap proportional
     to viewport width without crushing on phones. */
  margin-top: clamp(-160px, -12vw, -64px);
  position: relative;
  z-index: 5;
  padding: 0 0 clamp(28px, 4vh, 48px) 0;
}
.og-apps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
/* Restore [hidden] semantics - our display:grid above otherwise
   beats the UA default and shows every stage's grid at once. */
.og-apps__grid[hidden] { display: none; }
@media (min-width: 600px) {
  .og-apps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .og-apps__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }

  /* Spread cards to fill the row when the count is below 4 so the
     grid never looks half-finished. :has() detects 'this is the
     Nth child AND the last child' = total count is N. */
  .og-apps__grid:has(> :nth-child(1):last-child) {
    grid-template-columns: minmax(0, 540px);
    justify-content: center;
  }
  .og-apps__grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
  }
  .og-apps__grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: center;
  }
  /* 5+ children: fixed-width tracks centred in the row, with
     grid-auto-rows:1fr so EVERY card is the same height (a short
     last-row card no longer ends up shorter than the rows above).
     232px tracks land 3-per-row at tablet (5 cards => 3 + 2) and fit
     more per row on wider viewports - always equal width AND height. */
  .og-apps__grid:has(> :nth-child(5)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, 232px);
    grid-auto-rows: 1fr;
    justify-content: center;
  }
  .og-apps__grid:has(> :nth-child(5)) > .og-app {
    max-width: none;
  }
}

/* Phones don't have room for the overlap - apps drop below the
   photo as a clean stack. */
@media (max-width: 599px) {
  .og-apps { margin-top: clamp(18px, 3vh, 28px); }
}

.og-app {
  background: rgba(14, 11, 12, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}
.og-app:hover {
  border-color: rgba(245, 130, 32, 0.40);
  background: rgba(20, 17, 18, 0.94);
  transform: translateY(-2px);
}

/* Hide the panel prev/next arrows now that the cards sit in the
   visual space where they used to live. Navigation lives in the
   tab pills above. */
.mev2-pillars-tabs .mev2-panel__nav { display: none; }
/* Per-app icon (24x24 outline svg, accent-tinted). Sits above the
   app name; replaces the previous 01/02/03 number badge. */
.og-app__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--accent, #F58220);
  margin: 0 0 4px;
}
.og-app__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.og-app__name {
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  margin: 0;
}
.og-app__body {
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-s);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* Light-theme flip */
:root[data-theme="light"] .og-app {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  /* The dark-theme shadow (0 22px 50px /0.55) is far too harsh on warm
     paper; soften it to a subtle light-card shadow. */
  box-shadow: 0 10px 30px rgba(35, 31, 32, 0.08);
}
:root[data-theme="light"] .og-app:hover {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 16px 40px rgba(35, 31, 32, 0.12);
}
:root[data-theme="light"] .og-app__name { color: var(--ink); }
:root[data-theme="light"] .og-app__body { color: var(--ink-80); }

/* ============================================================
   POWER GENERATION - per-plant stacked sections
   Each plant type renders as its own <section> with a
   .mev2-panel image-overlay block on top and a card grid
   (optionally fronted by .pg-subtabs) below. No top-level tab
   carousel; no overlap between cards and photo.
   ============================================================ */
.pg-section {
  background: var(--paper);
  color: var(--ink);
  padding: 64px 0;
  border-top: 1px solid var(--ink-06);
}
.pg-section__inner {
  max-width: var(--container, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 32px);
}

/* Drop the .og-apps negative overlap when used inside .pg-section -
   cards sit cleanly below the photo with a normal gap. */
.pg-section .og-apps {
  margin-top: clamp(20px, 3vh, 32px);
  padding: 0;
}

/* Secondary sub-tab strip (used by Coal + Hydro) - smaller and
   more understated than the primary .mev2-tab pills. */
.pg-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  border-top: 1px solid var(--ink-06);
  padding-top: 20px;
}
.pg-subtab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink-12);
  color: var(--ink-60);
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.pg-subtab:hover { color: var(--ink); border-color: var(--ink-40); }
.pg-subtab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* When a sub-tab strip is present, the og-apps grid right below
   it doesn't need its own top margin - the strip already spaces
   things out cleanly. */
.pg-subtabs + .og-apps { margin-top: 18px; }

/* Caption strip used under .og-apps grids to summarise the
   engineering characteristics of a category (Steel etc.). */
.pg-characteristics {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-06);
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-s);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 92ch;
}
.pg-characteristics__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ============================================================
   Centred pull-quote conclusion band (reusable across static
   industry pages). Sits above the "Other industries" cross-link.
   ============================================================ */
.mev2-conclusion {
  background: #0A0809;
  color: #FFFFFF;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 80px);
}
.mev2-conclusion__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.mev2-conclusion__mark {
  display: block;
  margin: 0 auto 18px;
  color: var(--accent, #F58220);
}
.mev2-conclusion__quote {
  font-family: "Raleway", sans-serif;
  font-size: var(--fs-l);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}