.energy-projection-page{
  --projection-cyan:#67e8f9;
  --projection-green:#34d399;
  --projection-yellow:#facc15;
  --projection-orange:#fb923c;
  --projection-red:#f43f5e;
  --projection-purple:#a78bfa;
}
.energy-projection-page .projection-hero{
  background:
    radial-gradient(circle at 72% 24%, rgba(52,211,153,.22), transparent 28%),
    radial-gradient(circle at 22% 0%, rgba(103,232,249,.18), transparent 30%),
    linear-gradient(135deg, rgba(10,22,38,.96), rgba(6,14,26,.98))!important;
}
.energy-projection-page .projection-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(94,234,212,.12) 43%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
  opacity:.75;
  pointer-events:none;
}
.energy-projection-page .projection-hero h1{max-width:900px;}
.projection-cache-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(94,234,212,.22);
  background:rgba(8,17,30,.70);
  color:#dffcff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:850;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.projection-cache-pill span{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 18px rgba(34,197,94,.75);}
.projection-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  border-radius:28px!important;
  padding:24px 26px!important;
}
.projection-controls h2{margin:.15rem 0 .35rem;color:#fff;letter-spacing:-.035em;}
.projection-controls p{margin:0;color:#c3d2df;max-width:760px;line-height:1.55;}
.projection-control-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px;
  padding:10px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(8,17,30,.55);
  border-radius:22px;
}
.projection-control-actions button,
.projection-control-actions select{
  min-height:42px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(13,24,40,.9);
  color:#eef8ff;
  font-weight:900;
  padding:0 15px;
}
.projection-control-actions button.active,
.projection-control-actions button:hover{
  background:linear-gradient(135deg,#67e8f9,#14b8a6);
  color:#001014;
  border-color:rgba(94,234,212,.55);
}
.projection-kpis .history-kpi strong small{font-size:1rem;color:#cbd5e1;letter-spacing:0;}
.projection-main-grid{align-items:stretch;}
.energy-projection-page canvas{width:100%;max-width:100%;display:block;}
.scenario-bars{display:grid;gap:16px;margin-top:10px;}
.scenario-bar{display:grid;gap:8px;}
.scenario-bar-head{display:flex;justify-content:space-between;gap:14px;color:#f8fbff;font-weight:950;}
.scenario-bar-track{height:14px;border-radius:999px;background:rgba(148,163,184,.13);overflow:hidden;border:1px solid rgba(255,255,255,.06);}
.scenario-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--projection-cyan),var(--projection-green));box-shadow:0 0 20px rgba(52,211,153,.35);}
.scenario-bar p{margin:0;color:#b8c6d3;font-size:.92rem;line-height:1.45;}
.projection-table-wrap{overflow:auto;border-radius:20px;border:1px solid rgba(148,163,184,.12);background:rgba(7,16,29,.5);}
.projection-table{width:100%;border-collapse:collapse;min-width:820px;}
.projection-table th,.projection-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(148,163,184,.10);}
.projection-table th{color:#9eefff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;background:rgba(8,17,30,.72);}
.projection-table td{color:#eaf6ff;font-weight:760;}
.projection-table td small{display:block;margin-top:3px;color:#9fb0c0;font-weight:650;}
.projection-table tbody tr:hover{background:rgba(94,234,212,.055);}
.projection-disclaimer{
  border-left:3px solid var(--projection-yellow);
  padding:12px 14px!important;
  background:rgba(250,204,21,.08);
  border-radius:14px;
}
@media (max-width:1100px){
  .projection-controls{grid-template-columns:1fr;}
  .projection-control-actions{justify-content:flex-start;}
}
@media (max-width:820px){
  body.energy-projection-page{padding-bottom:86px;}
  .energy-projection-page .page-shell{padding:14px 12px 36px;}
  .energy-projection-page .standard-top-nav{display:none!important;}
  .energy-projection-page .projection-hero{display:none!important;}
  .projection-controls{padding:18px!important;border-radius:22px!important;}
  .projection-control-actions{display:grid;grid-template-columns:1fr 1fr;}
  .projection-control-actions button,.projection-control-actions select{width:100%;}
  .projection-control-actions select{grid-column:1/-1;}
  .projection-kpis{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .projection-kpis .history-kpi{min-height:120px!important;padding:15px!important;}
  .projection-kpis .history-kpi strong{font-size:1.55rem!important;}
  .energy-projection-page .history-grid.two-col{grid-template-columns:1fr!important;}
}

/* Align UK Energy Projection with the standard secondary-page hero used by Demand, Carbon, Mix, Interconnectors, About, Historical and Records. */
.energy-projection-page .page-shell{max-width:1500px;padding:22px 22px 40px;margin:0 auto;}
.energy-projection-page .standard-page-hero{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:22px!important;
  align-items:center!important;
  border-radius:30px!important;
  padding:28px 34px!important;
  margin-bottom:24px!important;
  border:1px solid rgba(120,160,190,.18)!important;
  background:
    radial-gradient(circle at 16% 0%, rgba(45,212,191,.12), transparent 32%),
    linear-gradient(180deg, rgba(17,28,47,.92), rgba(8,17,30,.96))!important;
  box-shadow:0 22px 65px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(14px)!important;
}
.energy-projection-page .standard-page-hero:after{
  content:""!important;
  position:absolute!important;
  left:34px!important;
  bottom:24px!important;
  width:520px!important;
  max-width:42%!important;
  height:4px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#34d399,#67e8f9,transparent)!important;
  opacity:.9!important;
}
.energy-projection-page .standard-page-hero .site-header-copy{position:relative!important;z-index:2!important;max-width:920px!important;}
.energy-projection-page .standard-page-hero .eyebrow{color:#7fffd4!important;font-size:.78rem!important;letter-spacing:.14em!important;font-weight:900!important;text-transform:uppercase!important;margin:0 0 10px!important;}
.energy-projection-page .standard-page-hero h1{font-size:clamp(3.1rem,5vw,5.6rem)!important;line-height:.96!important;letter-spacing:-.055em!important;margin:0 0 8px!important;max-width:980px!important;color:#f8fbff!important;}
.energy-projection-page .standard-page-hero .tagline{max-width:820px!important;font-size:1.06rem!important;line-height:1.62!important;color:#c7d4df!important;margin:0!important;}
.energy-projection-page .standard-page-hero .hero-proof{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:18px!important;}
.energy-projection-page .standard-page-hero .hero-proof span{display:inline-flex!important;align-items:center!important;gap:8px!important;border-radius:999px!important;padding:8px 12px!important;font-size:.84rem!important;font-weight:850!important;border:1px solid rgba(125,211,252,.16)!important;background:rgba(8,17,30,.64)!important;color:#dff8ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;}
.energy-projection-page .standard-page-hero .hero-proof span:before{content:""!important;width:7px!important;height:7px!important;border-radius:999px!important;background:#5eead4!important;box-shadow:0 0 18px rgba(94,234,212,.55)!important;}
.energy-projection-page .standard-page-hero .shared-header-actions-simple{position:relative!important;z-index:2!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;align-self:center!important;}
.energy-projection-page .standard-page-hero .shared-header-actions-simple:before{display:none!important;content:none!important;}
.energy-projection-page .standard-page-hero .status-pill{white-space:nowrap!important;}
.energy-projection-page .projection-cache-pill{display:none!important;}
@media (max-width:820px){
  .energy-projection-page .standard-page-hero{display:none!important;}
}


/* v2: exact standard-page alignment fixes */
.energy-projection-page .page-shell{max-width:1500px!important;margin:0 auto!important;padding:22px 22px 40px!important;}
.energy-projection-page .standard-top-nav{margin-left:auto!important;margin-right:auto!important;}
.energy-projection-page .projection-controls,
.energy-projection-page .history-kpi,
.energy-projection-page .history-card{
  border:1px solid rgba(120,160,190,.18);
  background:radial-gradient(circle at 16% 0%,rgba(45,212,191,.10),transparent 32%),linear-gradient(180deg,rgba(17,28,47,.92),rgba(8,17,30,.96));
  box-shadow:0 18px 48px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);
}
.energy-projection-page .history-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px;}
.energy-projection-page .history-kpi{border-radius:22px;padding:18px;min-height:132px;}
.energy-projection-page .history-kpi span{display:block;color:#9eefff;font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.energy-projection-page .history-kpi strong{display:block;color:#fff;font-size:clamp(1.7rem,2.4vw,2.6rem);line-height:1;letter-spacing:-.04em;}
.energy-projection-page .history-kpi small{display:block;color:#b8c6d3;margin-top:8px;line-height:1.4;}
.energy-projection-page .history-grid.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px;}
.energy-projection-page .history-card{border-radius:26px;padding:22px;overflow:hidden;}
@media(max-width:900px){.energy-projection-page .history-kpis,.energy-projection-page .history-grid.two-col{grid-template-columns:1fr!important;}}

/* v3: projection intelligence panels */
.energy-projection-page .projection-intelligence-grid{margin-top:0;}
.projection-confidence-list,
.projection-change-list{display:grid;gap:12px;margin-top:14px;}
.projection-confidence-row,
.projection-change-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(8,17,30,.48);
}
.projection-confidence-row strong,
.projection-change-row span{display:block;color:#f8fbff;font-weight:900;}
.projection-confidence-row small{display:block;color:#9fb0c0;font-size:.85rem;margin-top:3px;line-height:1.35;}
.confidence-pill{
  flex:0 0 auto;
  min-width:84px;
  text-align:center;
  border-radius:999px;
  padding:7px 11px;
  font-size:.78rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.12);
}
.confidence-pill.high{background:rgba(34,197,94,.15);color:#86efac;border-color:rgba(34,197,94,.28);}
.confidence-pill.medium{background:rgba(250,204,21,.14);color:#fde68a;border-color:rgba(250,204,21,.28);}
.confidence-pill.low{background:rgba(251,146,60,.14);color:#fdba74;border-color:rgba(251,146,60,.28);}
.projection-movement-highlight{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:17px 18px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(94,234,212,.14),rgba(8,17,30,.58));
  border:1px solid rgba(94,234,212,.22);
}
.projection-movement-highlight strong{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1;color:#fff;letter-spacing:-.05em;}
.projection-movement-highlight span{color:#c7d4df;font-weight:850;text-align:right;}
.projection-change-row strong{font-size:1.05rem;color:#eaf6ff;white-space:nowrap;}
.projection-change-row strong.positive{color:#86efac;}
.projection-change-row strong.warning{color:#fdba74;}
@media(max-width:820px){
  .projection-confidence-row,.projection-change-row{padding:12px;}
  .projection-movement-highlight{align-items:flex-start;flex-direction:column;}
  .projection-movement-highlight span{text-align:left;}
}

/* v4: calculation info icons */
.energy-projection-page .box-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.energy-projection-page .box-title-row > .section-kicker,
.energy-projection-page .box-title-row > h2,
.energy-projection-page .box-title-row > span{
  margin-top:0;
}
.energy-projection-page .history-kpi .box-title-row span{
  margin-bottom:8px;
}
.energy-projection-page .info-dot{
  position:relative;
  z-index:5;
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.28);
  background:rgba(8,17,30,.74);
  color:#9eefff;
  font-size:.78rem;
  line-height:1;
  font-weight:950;
  font-family:inherit;
  cursor:help;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 16px rgba(94,234,212,.08);
}
.energy-projection-page .info-dot:hover,
.energy-projection-page .info-dot:focus-visible{
  color:#06131f;
  background:linear-gradient(135deg,#5eead4,#67e8f9);
  border-color:rgba(94,234,212,.9);
  outline:none;
}
.energy-projection-page .info-dot::after{
  content:attr(data-tooltip);
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(320px,80vw);
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(125,211,252,.24);
  background:rgba(5,13,24,.98);
  color:#dff6ff;
  font-size:.82rem;
  line-height:1.45;
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  pointer-events:none;
  white-space:normal;
}
.energy-projection-page .info-dot::before{
  content:"";
  position:absolute;
  right:8px;
  top:calc(100% + 4px);
  width:10px;
  height:10px;
  background:rgba(5,13,24,.98);
  border-left:1px solid rgba(125,211,252,.24);
  border-top:1px solid rgba(125,211,252,.24);
  transform:rotate(45deg);
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease,visibility .16s ease;
  pointer-events:none;
}
.energy-projection-page .info-dot:hover::after,
.energy-projection-page .info-dot:focus-visible::after,
.energy-projection-page .info-dot:hover::before,
.energy-projection-page .info-dot:focus-visible::before{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.energy-projection-page .info-dot:hover::before,
.energy-projection-page .info-dot:focus-visible::before{
  transform:rotate(45deg);
}
.energy-projection-page .history-kpi{overflow:visible!important;}
.energy-projection-page .history-card{overflow:visible!important;}
@media(max-width:820px){
  .energy-projection-page .info-dot{width:26px;height:26px;}
  .energy-projection-page .info-dot::after{right:-4px;width:min(280px,78vw);font-size:.8rem;}
}


/* v5: match standard secondary-page top navigation behaviour/positioning */
.energy-projection-page .standard-top-nav{
  position:sticky!important;
  top:10px!important;
  z-index:80!important;
  width:max-content!important;
  max-width:calc(100vw - 44px)!important;
  margin:20px auto 22px!important;
  padding:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  border:1px solid rgba(120,160,190,.18)!important;
  border-bottom:1px solid rgba(120,160,190,.18)!important;
  border-radius:999px!important;
  background:rgba(8,17,30,.78)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(14px)!important;
}
.energy-projection-page .standard-top-nav::-webkit-scrollbar{display:none!important;}
.energy-projection-page .standard-top-nav a{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  min-height:36px!important;
}
@media(max-width:1180px){
  .energy-projection-page .standard-top-nav{
    width:100%!important;
    justify-content:flex-start!important;
    border-radius:22px!important;
  }
}
@media(max-width:820px){
  .energy-projection-page .standard-top-nav{display:none!important;}
}


/* v6 desktop-only hero lock: match the standard page-template hero exactly without touching mobile. */
@media (min-width:821px){
  body.energy-projection-page .standard-page-hero{
    position:relative!important;overflow:hidden!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:22px!important;align-items:center!important;min-height:auto!important;border-radius:30px!important;padding:28px 34px!important;margin:0 0 24px!important;border:1px solid rgba(45,212,191,.18)!important;background:radial-gradient(circle at 8% 10%,rgba(45,212,191,.12),transparent 34%),radial-gradient(circle at 78% 0%,rgba(56,189,248,.08),transparent 34%),linear-gradient(180deg,rgba(10,18,31,.94),rgba(8,15,28,.96))!important;box-shadow:0 22px 64px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
  body.energy-projection-page .standard-page-hero:before{display:none!important;content:none!important;}
  body.energy-projection-page .standard-page-hero:after{content:""!important;position:absolute!important;left:34px!important;right:auto!important;bottom:24px!important;width:520px!important;max-width:42%!important;height:4px!important;border-radius:999px!important;background:linear-gradient(90deg,#34d399,#67e8f9,transparent)!important;opacity:.9!important;pointer-events:none!important;}
  body.energy-projection-page .standard-page-hero .site-header-copy{position:relative!important;z-index:2!important;max-width:none!important;}
  body.energy-projection-page .standard-page-hero .site-header-copy:after{display:none!important;content:none!important;}
  body.energy-projection-page .standard-page-hero .eyebrow{margin:0 0 8px!important;color:#86efac!important;font-size:12px!important;letter-spacing:.14em!important;font-weight:950!important;text-transform:uppercase!important;}
  body.energy-projection-page .standard-page-hero h1{font-size:clamp(32px,4vw,52px)!important;line-height:.98!important;letter-spacing:-.04em!important;margin:0 0 6px!important;max-width:720px!important;color:#f3f7fb!important;text-shadow:none!important;}
  body.energy-projection-page .standard-page-hero .tagline{font-size:16px!important;line-height:1.55!important;max-width:720px!important;margin:0!important;color:#a8b3c5!important;}
  body.energy-projection-page .standard-page-hero .hero-proof{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:18px!important;}
  body.energy-projection-page .standard-page-hero .hero-proof span{font-size:.84rem!important;font-weight:850!important;padding:8px 12px!important;}
  body.energy-projection-page .standard-page-hero .shared-header-actions-simple{display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center!important;gap:14px!important;align-self:center!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
}