/* Export Energy, shared styles.
   Dark ground, light type, one signal colour. Layout variables and the
   colour palette are set in :root below; everything else derives from them. */

:root {
  --paper:    #0A1A2E;   /* the page itself */
  --paper-2:  #102540;   /* raised panels */
  --surface:  #163152;   /* cards */
  --ink:      #F3F6F8;   /* text */
  --ink-2:    #93A3B1;   /* secondary text */
  --deep:     #061223;   /* bands darker than the page */
  --rule:     rgba(243, 246, 248, 0.16);
  --rule-2:   rgba(243, 246, 248, 0.09);
  --accent:   #E2C044;   /* the signal colour */
  --accent-2: #6FA8C7;
  --gen:      #E2C044;
  --buy:      #6FA8C7;
  --gen-fill: #E2C044;
  --buy-fill: #6FA8C7;
  --gen-soft: rgba(226, 192, 68, 0.12);
  --buy-soft: rgba(111, 168, 199, 0.12);
  --navy:     #1E3F6B;

  --display: "Poppins", system-ui, sans-serif;
  --body:    "Poppins", system-ui, sans-serif;
  --mono:    "Poppins", system-ui, sans-serif;
  --radius:  18px;
  --figure-w: 100%;

  --wrap: 1080px;                      /* content column */
  --pad:  clamp(26px, 6vw, 92px);      /* gutter either side */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: 0.004em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); font-weight: 200; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); font-weight: 200; }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 400; letter-spacing: 0.01em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  display: block;
}
.label.gen { color: var(--gen); }
.label.buy { color: var(--buy); }

.lede {
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-2);
  }

.measure { }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 26, 46, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-2);
}

.head-inner {
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding: 1.25rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.brand strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
}
.brand span {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a:not(.nav-cta) {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:not(.nav-cta):hover, .nav a:not(.nav-cta):focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rule); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- logo ---------- */

.brand-mark {
  width: auto;
  display: block;
}
/* the full lockup, strapline included, on anything but a phone */
.brand-full { height: 52px; max-width: 420px; }
.brand-compact { display: none; height: 22px; max-width: 270px; }
.brand-mark-foot { height: 48px; max-width: 380px; }

@media (max-width: 480px) {
  .brand-full { display: none; }
  .brand-compact { display: block; }
  .brand span { display: none; }
}

/* ---------- grouped navigation ---------- */

.nav-group { position: relative; }
.nav-top {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
}
.nav-group:hover .nav-top,
.nav-group:focus-within .nav-top { color: var(--ink); }

.nav-panel {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: -1.6rem;
  max-width: min(22rem, calc(100vw - 2rem));
  min-width: 17rem;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  box-shadow: 0 18px 44px rgba(30, 63, 107, 0.1);
  padding: 1.4rem 1.6rem 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-lead {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule-2);
}
.nav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.nav-panel a {
  display: block;
  padding: 0.42rem 0;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
  text-decoration: none;
  border: 0;
}
.nav-panel a:hover { color: var(--gen); }

.nav-group:last-of-type .nav-panel { left: auto; right: -1.6rem; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #0A1A2E;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  padding: 0.72rem 1.5rem;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: #F0D66A; border-color: #F0D66A; color: #0A1A2E; }

/* ---------- the seam ---------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--rule);
  opacity: 1;
  transform-origin: top;
  border-radius: 2px;
}

.split > * { padding-block: clamp(2.6rem, 5vw, 4.2rem); }
.split > *:first-child { padding-right: clamp(1.6rem, 4vw, 3.4rem); }
.split > *:last-child  { padding-left:  clamp(1.6rem, 4vw, 3.4rem); }

/* signature: the seam is tagged where the two sides meet */
.split.tagged::after {
  content: attr(data-seam);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
  padding: 0.9rem 0.15rem;
}

/* ---------- sections ---------- */

.section { padding-block: clamp(3.2rem, 7vw, 6rem); }
.section-tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.section-alt { background: var(--paper-2); border-block: 1px solid var(--rule-2); }

.hero { padding-top: clamp(3rem, 8vw, 6rem); }
.hero h1 { }
.hero .lede { margin-top: 1.6rem; }
.hero .lede em { font-style: normal; font-weight: 600; }
.hero .lede .g { color: var(--gen); }
.hero .lede .b { color: var(--buy); }

.side h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1.1rem; }

.list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; }
.list li {
  padding: 0.62rem 0 0.62rem 1.5rem;
  border-top: 1px solid var(--rule-2);
  position: relative;
  font-size: 0.97rem;
  line-height: 1.45;
}
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.24rem;
  width: 7px;
  height: 1px;
  background: currentColor;
}
.side-gen .list li::before { background: var(--gen); }
.side-buy .list li::before { background: var(--buy); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.btn:hover, .btn:focus-visible { background: var(--accent); color: #0A1A2E; border-color: var(--accent); }
.btn-gen { border-color: var(--gen); color: var(--gen); }
.btn-gen:hover, .btn-gen:focus-visible { background: var(--gen); color: #fff; }
.btn-buy { border-color: var(--buy); color: var(--buy); }
.btn-buy:hover, .btn-buy:focus-visible { background: var(--buy); color: #fff; }
.btn-light { border-color: rgba(237,239,242,0.5); color: var(--ink); }
.btn-light:hover, .btn-light:focus-visible { background: var(--paper); color: var(--ink); }

/* ---------- dark band: the seam has closed ---------- */

.band {
  background: var(--deep);
  color: var(--ink);
  padding-block: clamp(3.4rem, 7vw, 5.6rem);
}
.band .label { color: rgba(255, 255, 255, 0.55); }
.band h2 { color: var(--ink); }
.band p { color: rgba(255, 255, 255, 0.76); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 900px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}
.card h3 { color: var(--ink); margin-bottom: 0.7rem; }
.card p { font-size: 0.95rem; line-height: 1.5; }

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.steps .step { border-top-color: var(--rule); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  display: block;
  margin-bottom: 0.9rem;
}
.step h3 { margin-bottom: 0.55rem; }
.step p { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- note / disclosure block ---------- */

.note {
  border-left: 1px solid var(--gen);
  padding: 0.2rem 0 0.2rem 1.5rem;
  }

.facts { display: grid; gap: 1.4rem; margin-top: 2rem; }
.fact { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.fact dt {
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.45rem;
}
.fact dd { margin: 0; font-size: 0.98rem; line-height: 1.5; }

/* ---------- form ---------- */

.form { display: grid; gap: 1.1rem; margin-top: 2rem; max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: transparent;
}
.hp { position: absolute; left: -9999px; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.4rem, 5vw, 3.6rem) 1.6rem;
  font-size: 0.92rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.foot-head {
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.9rem;
}
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  line-height: 1.7;
}

/* ---------- matched supply: the hour strip ---------- */

.hours {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: var(--figure-w);
}
.hour {
  height: clamp(48px, 7vw, 74px);
  border: 1px solid var(--rule);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hour.matched { background: var(--buy-fill); border-color: var(--buy-fill); }
.hour.partial {
  background: linear-gradient(to top, var(--buy-fill) 45%, transparent 45%);
  border-color: var(--buy-fill);
}
.hour.covered {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 3px,
    var(--rule) 3px 4px
  );
}

.hour-scale {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-top: 0.5rem;
  max-width: var(--figure-w);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.hour-scale span { text-align: center; }

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.6rem;
  max-width: var(--figure-w);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.key span { display: flex; align-items: center; gap: 0.55rem; }
.key i {
  width: 15px;
  height: 15px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: block;
}
.key i.matched { background: var(--buy-fill); border-color: var(--buy-fill); }
.key i.partial { background: linear-gradient(to top, var(--buy-fill) 45%, transparent 45%); border-color: var(--buy-fill); }
.key i.covered { background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--rule) 3px 4px); }

.two-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.8rem, 4vw, 3.2rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
.two-up > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.two-up .gen-rule { border-top-color: var(--gen); }
.two-up .buy-rule { border-top-color: var(--buy); }
.two-up h3 { margin-bottom: 0.6rem; }
.two-up p { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 600px) {
  .hours { gap: 1px; }
  .hour { height: 44px; }
  .hour-scale { font-size: 0.52rem; }
}

/* ---------- hero: full bleed, with the hour profile as texture ---------- */

.hero-band {
  background: var(--deep);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.8rem, 6vw, 4.6rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.hero-band:not(.bg-photo)::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05) 0 2.6%,
    transparent 2.6% 4.16%
  );
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero-band > * { position: relative; }
.hero-band h1 { color: var(--ink); }
.hero-band .label { color: rgba(255, 255, 255, 0.55); margin-bottom: 1.1rem; }
.hero-band .label.gen { color: #A8C4B4; }
.hero-band .label.buy { color: #9FB0BD; }
.hero-band h1 {
  /* an inner page banner should not run at homepage scale */
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  max-width: 19ch;
}
/* article headlines are longer sentences and need a smaller size, wider measure */
.hero-band.hero-article h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); max-width: 24ch; }
.hero-band .lede {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.55;
  max-width: 50ch;
  margin-top: clamp(1.2rem, 2.2vw, 1.7rem);
}
.hero-band .lede a { color: var(--ink); }


.hero-dark {
  background: var(--deep);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.4rem, 8vw, 6.5rem) 0;
}

/* an hour profile, sitting far back */
.hero-dark:not(.bg-photo)::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05) 0 2.6%,
    transparent 2.6% 4.16%
  );
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero-dark > * { position: relative; }

.hero-dark h1 {
  color: var(--ink);
  font-size: clamp(2.5rem, 6.6vw, 5rem);
  max-width: 16ch;
}
.hero-dark .label { color: rgba(255, 255, 255, 0.55); }
.hero-dark .lede {
  color: rgba(255, 255, 255, 0.78);
  max-width: 54ch;
  margin-top: 1.5rem;
}
.hero-dark .lede .g { color: #A8C4B4; font-weight: 600; }
.hero-dark .lede .b { color: #9FB0BD; font-weight: 600; }

.routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.routes::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}
.route {
  padding: clamp(1.8rem, 3.2vw, 2.8rem) clamp(1.6rem, 3.4vw, 3rem) clamp(2.4rem, 4vw, 3.4rem);
}
.route:first-child { padding-left: 0; }
.route:last-child { padding-right: 0; }
.route h2 { color: var(--ink); font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 0.9rem; }
.route > p { color: rgba(255, 255, 255, 0.72); font-size: 0.98rem; }
.route .list li {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
}
.route-gen .list li::before { background: var(--gen-fill); }
.route-buy .list li::before { background: var(--buy-fill); }

/* ---------- light cards ---------- */

.cards.on-light .card {
  background: var(--surface);
  border-radius: 16px;
  border-color: var(--rule);
}
.cards.on-light .card h3 { color: var(--ink); }
.cards.on-light .card p { color: var(--ink-2); }

.card {
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.cards .card:hover { transform: translateY(-3px); }
.cards .card:hover { border-color: var(--gen); }

/* ---------- the hour strip builds as you reach it ---------- */

.hours .hour {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.hours.in .hour { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .hours .hour { transform: none; }
}

@media (max-width: 760px) {
  .routes { grid-template-columns: 1fr; }
  .routes::before { display: none; }
  .route, .route:first-child, .route:last-child { padding-inline: 0; }
  .route-gen { border-left: 2px solid var(--gen-fill); padding-left: 1.1rem !important; }
  .route-buy { border-left: 2px solid var(--buy-fill); padding-left: 1.1rem !important; margin-top: 1.6rem; }
}

/* ---------- the flow diagram: how power and money actually move ---------- */

.flow { margin-top: clamp(2rem, 4vw, 3rem); }
.flow input { position: absolute; opacity: 0; pointer-events: none; }

.flow-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
}
.flow-tabs label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-2);
  background: var(--surface);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.flow-tabs label:hover { border-color: var(--ink); color: var(--ink); }

.flow-panel { display: none; }
.flow-panel figcaption {
  margin-top: 1.4rem;
  color: var(--ink-2);
  font-size: 0.98rem;
}
.flow-panel figcaption strong { color: var(--ink); font-weight: 600; }

#flow-a:checked ~ .flow-tabs label[for="flow-a"],
#flow-b:checked ~ .flow-tabs label[for="flow-b"],
#flow-c:checked ~ .flow-tabs label[for="flow-c"] {
  background: var(--deep);
  border-color: var(--ink);
  color: var(--ink);
}
#flow-a:checked ~ .flow-stage .flow-a,
#flow-b:checked ~ .flow-stage .flow-b,
#flow-c:checked ~ .flow-stage .flow-c { display: block; }

.flow svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}
.flow-node { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; }
.flow-node-gen { stroke: var(--gen-fill); }
.flow-node-buy { stroke: var(--buy-fill); }
.flow-label {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
}
.flow-sub {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.flow-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.flow-power-gen { stroke: var(--gen-fill); stroke-dasharray: 9 7; animation: flow 1.1s linear infinite; }
.flow-power-buy { stroke: var(--buy-fill); stroke-dasharray: 9 7; animation: flow 1.1s linear infinite; }
.flow-money { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 6; opacity: 0.5; }

@keyframes flow { to { stroke-dashoffset: -16; } }

@media (prefers-reduced-motion: reduce) {
  .flow-power-gen, .flow-power-buy { animation: none; }
}

/* ---------- a statement, at a scale nothing else on the page uses ---------- */

.statement {
  padding-block: clamp(3.4rem, 7vw, 5.6rem);
  border-block: 1px solid var(--rule-2);
}
.statement p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.9vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: var(--ink);
}
.statement .sub {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: 1.6rem;
}

/* ---------- hours become inspectable ---------- */

.hours .hour { cursor: help; }
.hours .hour:hover { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 620px) {
  .flow-tabs label { flex: 1 1 auto; text-align: center; padding-inline: 0.7rem; }
}

/* ---------- hero layout ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-dark h1 {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  max-width: 13ch;
}
.hero-dark .lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  max-width: 44ch;
}
.hero-dark .lede em { font-style: normal; }

.profile { width: 100%; height: auto; overflow: visible; }
.profile .axis { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.profile .gen-line {
  fill: none;
  stroke: var(--gen-fill);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.profile .dem-line {
  stroke: var(--buy-fill);
  stroke-width: 2.6;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
}
.profile .chart-key {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.profile .chart-key.gen { fill: #A8C4B4; }
.profile .chart-key.dem { fill: #9FB0BD; }
.profile .chart-tick {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.45);
}
.profile-note {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  max-width: 40ch;
}

.wipe-rect { animation: wipe 1.5s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; transform-origin: left; }
@keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .wipe-rect { animation: none; }
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-dark h1 { max-width: none; }
}

/* ---------- photography ---------- */

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0;
  background: var(--deep);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--deep);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}
/* the old full duotone, kept as an option */

.photo-plain img { filter: none; }
.photo-plain::after { display: none; }

.photo-16x9 { aspect-ratio: 16 / 9; }
.photo-4x3  { aspect-ratio: 4 / 3; }
.photo-1x1  { aspect-ratio: 1 / 1; }

/* until a file is dropped in, the slot says what belongs there */
.photo.is-empty {
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.05) 0 10px,
      transparent 10px 20px),
    var(--surface);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.28);
}
.photo.is-empty::after { display: none; }
.photo.is-empty::before { background: none; z-index: 2; }
.photo.is-empty::before {
  content: attr(data-placeholder);
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  max-width: 30ch;
  line-height: 1.7;
}

/* a full width image with the seam colours along its edge */
.photo-band {
  position: relative;
  margin-block: clamp(2.6rem, 5vw, 4rem);
}
.photo-band .photo { aspect-ratio: 21 / 8; max-height: 420px; }
.photo-band .caption {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-2);
}


/* image beside text */
.photo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
.photo-split .photo { aspect-ratio: 4 / 3; }

@media (max-width: 760px) {
  .photo-split { grid-template-columns: 1fr; }
  .photo-band .photo { aspect-ratio: 3 / 2; }
}

/* images inside cards */
.card .photo {
  aspect-ratio: 16 / 9;
  margin: -0.4rem 0 1.15rem;
  border-radius: calc(var(--radius) - 2px);
}
.card .photo.is-empty { padding: 0.9rem; }
.card .photo.is-empty::before { font-size: 0.66rem; letter-spacing: 0.1em; }

/* ---------- photographs behind text ---------- */

.bg-photo { position: relative; isolation: isolate; }
.bg-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  mask-image: none;
  -webkit-mask-image: none;
  background-image: var(--bg);
  background-size: cover;
  background-position: var(--bgpos, center);
  filter: grayscale(0.82) contrast(1.14) brightness(1.02);
  z-index: -2;
}
/* navy laid over the top, so text stays readable whatever the photo does */
.bg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(6, 18, 35,0.92) 0%,
              rgba(6, 18, 35,0.78) 45%,
              rgba(6, 18, 35,0.55) 100%);
  z-index: -1;
}
.bg-photo-soft::after {
  background: linear-gradient(100deg,
              rgba(30, 63, 107, 0.96) 0%,
              rgba(30, 63, 107, 0.86) 42%,
              rgba(30, 63, 107, 0.60) 100%);
}

/* the statement, now set over a photograph */
.statement.bg-photo {
  border: none;
  color: var(--ink);
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.statement.bg-photo p { color: var(--ink); }
.statement.bg-photo .sub { color: rgba(255, 255, 255, 0.8); }

/* ---------- FAQ ---------- */

.faq { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 74ch; }

.faq details {
  border-top: 1px solid var(--rule);
  padding: 0.2rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.35;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 1.6rem;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--gen);
  border-bottom: 1px solid var(--gen);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--buy); }

.faq .answer { padding: 0 2.5rem 1.5rem 0; }
.faq .answer p { font-size: 0.99rem; line-height: 1.6; color: var(--ink-2); }
.faq .answer p strong { color: var(--ink); font-weight: 600; }
.faq .answer p:last-child { margin-bottom: 0; }

.faq-group { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.faq-group > h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: 0.4rem; }

/* the one people actually want answered */
.faq details.flagged {
  border-left: 1px solid var(--gen);
  padding-left: 1.4rem;
}

/* the chart needs its own ground, or the photograph cuts through it */
.hero-panel {
  background: rgba(11, 44, 76, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.3rem, 2.4vw, 2rem) clamp(1.1rem, 2vw, 1.5rem);
}
.hero-panel .profile-note { margin-top: 1.1rem; max-width: none; }

@media (max-width: 860px) {
  .hero-panel { padding: 1.2rem 1rem 1rem; }
}

/* ---------- full bleed hero: photograph and headline, nothing else ---------- */

.hero-full {
  min-height: min(76vh, 720px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(4rem, 12vw, 8rem) clamp(2.6rem, 5vw, 4rem);
}
.hero-full h1 {
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
  max-width: 15ch;
  color: var(--ink);
}
.hero-full .label { color: rgba(255, 255, 255, 0.62); margin-bottom: 1.1rem; }
.hero-full .lede {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  max-width: 46ch;
  margin-top: 1.5rem;
}
.hero-full .lede em { font-style: normal; font-weight: 600; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
}
.btn-hero-gen, .btn-hero-buy {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(30, 63, 107, 0.28);
}
.btn-hero-gen:hover, .btn-hero-gen:focus-visible {
  background: var(--gen-fill);
  border-color: var(--gen-fill);
  color: #0F2A4A;
}
.btn-hero-buy:hover, .btn-hero-buy:focus-visible {
  background: var(--buy-fill);
  border-color: var(--buy-fill);
  color: #fff;
}

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: 100%; text-align: center; }
}
.hero-full .lede .g { color: #A8C4B4; }
.hero-full .lede .b { color: #9FB0BD; }

/* photo readable at the bottom, open at the top */
.bg-photo-bottom::after {
  background: linear-gradient(to bottom,
              rgba(30, 63, 107, 0.42) 0%,
              rgba(30, 63, 107, 0.58) 45%,
              rgba(30, 63, 107, 0.93) 100%);
}

/* the intro, now standing on its own beneath the photograph */
.intro p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  max-width: 40ch;
  color: var(--ink);
}
.intro p .g { color: var(--gen); font-weight: 600; }
.intro p .b { color: var(--buy); font-weight: 600; }

/* the day profile chart, on a light ground */
.profile-light .axis { stroke: rgba(30, 63, 107, 0.22); }
.profile-light .chart-key.gen { fill: var(--gen); }
.profile-light .chart-key.dem { fill: var(--buy); }
.profile-light .chart-tick { fill: var(--ink-2); }
.profile-light .gen-line { stroke: var(--gen); }
.profile-light .dem-line { stroke: var(--buy); }

/* ---------- hourly matching, stacked by source ---------- */

.stackchart { width: 100%; height: auto; display: block; overflow: visible; }
.stackchart .s-solar { fill: #C9A227; }
.stackchart .s-wind  { fill: var(--gen-fill); }
.stackchart .s-store { fill: var(--buy-fill); }
.stackchart .s-cert  { fill: rgba(30, 63, 107, 0.10); stroke: rgba(30, 63, 107, 0.22); stroke-width: 1; stroke-dasharray: 3 3; }
.stackchart .load-line { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 10 8; }
.stackchart .axis { stroke: rgba(30, 63, 107, 0.25); stroke-width: 1.5; }
.stackchart .chart-key { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.stackchart .chart-key.load { fill: var(--ink-2); }
.stackchart .chart-tick { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: 0.08em; fill: var(--ink-2); }

.coverage {
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem 1.6rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-bottom: 0.4rem;
}
.coverage .figure {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.coverage .figure span { color: var(--buy); }
.coverage .caption { font-family: var(--display); font-size: 0.95rem; color: var(--ink-2); max-width: 38ch; }

.sources {
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-top: 1.4rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sources span { display: flex; align-items: center; gap: 0.5rem; }
.sources i { width: 14px; height: 14px; border-radius: 2px; display: block; }
.sources i.solar { background: #C9A227; }
.sources i.wind  { background: var(--gen-fill); }
.sources i.store { background: var(--buy-fill); }
.sources i.cert  { background: rgba(30, 63, 107, 0.10); border: 1px dashed rgba(30, 63, 107, 0.4); }

/* body copy that fills the page under a full width figure */
.prose-wide {
  margin-top: clamp(2.4rem, 4vw, 3rem);
  column-count: 2;
  column-gap: clamp(2.4rem, 5vw, 4rem);
}
.prose-wide p { break-inside: avoid; margin-bottom: 1.1em; }
.prose-wide p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .prose-wide { column-count: 1; }
}

/* ---------- glossary ---------- */

.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.term { border-top: 1px solid var(--rule); padding-top: 1rem; break-inside: avoid; }
.term h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.term p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.term:target h3 { color: var(--buy); }

/* ---------- insights ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.8rem, 3.5vw, 3rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.post-card { border-top: 2px solid var(--rule); padding-top: 1.1rem; }
.post-card { border-top-color: var(--rule); }
.post-meta {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.7rem;
}
.post-card h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-bottom: 0.7rem; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--buy); }
.post-card p { font-size: 0.96rem; line-height: 1.55; color: var(--ink-2); }
.post-more {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--buy);
  text-decoration: none;
  border-bottom: 1px solid var(--buy);
  padding-bottom: 2px;
}

.post { max-width: 68ch; }
.post h2 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  margin: clamp(2.2rem, 4vw, 3rem) 0 0.9rem;
}
.post h2:first-child { margin-top: 0; }
.post p { font-size: 1.02rem; line-height: 1.68; }
.post p strong { font-weight: 600; }
.post-list { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; }
.post-list li {
  padding: 0.6rem 0 0.6rem 1.5rem;
  border-top: 1px solid var(--rule-2);
  position: relative;
  font-size: 0.99rem;
  line-height: 1.55;
}
.post-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 8px;
  height: 1px;
  background: var(--buy);
}
.post-foot {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  max-width: 68ch;
}
.next-label {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}
.next-title { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.next-title a { text-decoration: none; }
.next-title a:hover { color: var(--buy); }

/* a heading on the left, its introduction on the right, across the page */
.split-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split-lead h2 { max-width: 16ch; }
.split-lead p { font-size: 1.02rem; line-height: 1.6; }

/* facts running the page width rather than hugging the left edge */
.facts-wide {
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}

@media (max-width: 760px) {
  .split-lead { grid-template-columns: 1fr; gap: 1.4rem; }
  .split-lead h2 { max-width: none; }
}

/* ---------- services grid ---------- */

.services {
  display: grid;
  border-radius: 16px;
  /* six tiles, so fixed columns rather than auto-fit: no empty cell can show */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 620px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service {
  background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background 0.18s ease;
}
.service:hover { background: var(--paper-2); }
.service h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.service h3 span { color: var(--gen); font-weight: 400; transition: transform 0.18s ease; }
.service:hover h3 span { color: var(--gen); }
.service p { font-size: 0.93rem; line-height: 1.5; color: var(--ink-2); margin: 0; }

/* ---------- alternating image and text rows ---------- */

.alt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.alt-row:first-of-type { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.alt-row .photo { aspect-ratio: 4 / 3; }
.alt-row.flip > *:first-child { order: 2; }
.alt-row h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); margin-bottom: 0.9rem; }
.alt-row p { color: var(--ink-2); }

@media (max-width: 760px) {
  .alt-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .alt-row.flip > *:first-child { order: 0; }
}

/* ---------- watermark words ---------- */

.watermark { position: relative; overflow: hidden; }
.watermark::before {
  content: attr(data-word);
  z-index: 0;
  position: absolute;
  right: -0.06em;
  bottom: -0.22em;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(7rem, 20vw, 17rem);
  line-height: 0.8;
  letter-spacing: -0.045em;
  color: var(--ink);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.watermark > * { position: relative; z-index: 2; }
.watermark .photo { z-index: 2; }
.band.watermark::before { color: var(--ink); opacity: 0.07; }

/* ---------- counterparty wall ---------- */

.counterparties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.counterparty {
  background: var(--surface);
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- video behind the hero ---------- */

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -3;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.55) contrast(1.06) brightness(0.92);
}

/* the still image sits underneath, so it shows while the video loads,
   if the file is missing, and wherever autoplay is refused */
.hero-dark.has-video::before,
.hero-band.has-video::before { z-index: -4; }

/* a slow drift on the still, so there is movement even with no video */
.hero-dark.bg-photo::before,
.hero-band.bg-photo::before {
  animation: drift 32s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media { display: none; }
  .hero-dark.bg-photo::before,
  .hero-band.bg-photo::before { animation: none; }
}

/* on a phone the video is a waste of their data: show the still instead */
@media (max-width: 640px) {
  .hero-media { display: none; }
}

/* ---------- market ticker ---------- */

.ticker {
  background: var(--deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  padding: 0.6rem var(--pad);
  animation: ticker-scroll 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tick {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}
.tick b { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }
.tick .up   { color: #A8C4B4; }
.tick .down { color: #E8846B; }
.ticker-note {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--pad) 0 2.5rem;
  background: linear-gradient(to right, rgba(11,44,76,0) 0%, #0F2A4A 22%);
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
@media (max-width: 700px) { .ticker-note { display: none; } }

/* ---------- numbered process, at scale ---------- */

.steps-big { counter-reset: bigstep; margin-top: clamp(2rem, 4vw, 3rem); }
.big-step {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  border-top: 1px solid var(--rule);
}
.big-step:last-child { border-bottom: 1px solid var(--rule); }
.big-step::before {
  counter-increment: bigstep;
  content: counter(bigstep, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--rule);
}
.big-step::before { color: rgba(22, 58, 46, 0.3); }
.big-step h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin-bottom: 0.5rem; }
.big-step p { color: var(--ink-2); font-size: 0.99rem; line-height: 1.6; max-width: 62ch; }

@media (max-width: 620px) {
  .big-step { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---------- contact block on the homepage ---------- */

.contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-block .form { margin-top: 0; max-width: none; }

@media (max-width: 760px) { .contact-block { grid-template-columns: 1fr; } }

/* ---------- closing call to action ---------- */

.closing {
  background: var(--deep);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.closing h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  max-width: 22ch;
}
.closing p {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--display);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 54ch;
  margin-top: 1.1rem;
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.closing .btn { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.closing .btn:hover { background: var(--surface); color: var(--ink); border-color: #fff; }
.closing-tel {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.closing-tel:hover { color: #fff; }

/* ---------- dark theme corrections ---------- */

body { background: var(--paper); color: var(--ink); }
.section-alt { background: var(--paper-2); border-block: 1px solid var(--rule-2); }

.site-head { border-bottom: 1px solid var(--rule-2); }
.nav-panel { background: var(--surface); border-color: var(--rule-2); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.nav-lead { color: var(--ink); border-bottom-color: var(--rule-2); }
.nav-panel a { color: var(--ink-2); }
.nav-panel a:hover { color: var(--accent); }
.nav-top, .nav a:not(.nav-cta) { color: var(--ink-2); }
.nav-group:hover .nav-top, .nav a:not(.nav-cta):hover { color: var(--ink); }

/* the logo needs its reversed form on this ground */
.brand-mark { filter: none; }

/* form fields */
.field input, .field select, .field textarea {
  background: var(--surface);
  border-color: var(--rule);
  color: var(--ink);
  border-radius: 10px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--accent); }

/* cards and panels on the dark ground */
.cards.on-light .card { background: var(--surface); border-color: var(--rule-2); }
.cards.on-light .card h3 { color: var(--ink); }
.cards.on-light .card p { color: var(--ink-2); }
.counterparty.logo-tile { background: #F3F6F8; padding: 1.1rem 1.4rem; }
.counterparty.logo-tile img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.card { border-color: var(--rule-2); }
.cards .card:hover { border-color: var(--accent); }
.counterparty { background: var(--surface); color: var(--ink-2); }
.counterparties { background: var(--rule-2); border-color: var(--rule-2); border-radius: 16px; }
.service { background: var(--surface); }
.service:hover { background: #1B3A60; }
.service h3 { color: var(--ink); }
.service h3 span { color: var(--accent); }
.service p { color: var(--ink-2); }
.services { background: var(--rule-2); border-color: var(--rule-2); }

/* the closing band needs to differ from the page */
.closing { background: var(--paper-2); border-top: 1px solid var(--rule-2); }
.closing h2, .band h2 { color: var(--ink); }
.closing p, .band p { color: var(--ink-2); }
.closing .btn { border-color: var(--rule); color: var(--ink); }
.closing .btn:hover { background: var(--accent); color: #0A1A2E; border-color: var(--accent); }
.closing-tel { color: var(--ink-2); }

/* footer */
.site-foot { border-top: 1px solid var(--rule-2); }
.foot-head { color: var(--accent); }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.legal { color: var(--ink-2); }

/* diagrams and charts */
.flow-tabs label { background: var(--surface); border-color: var(--rule-2); color: var(--ink-2); border-radius: 999px; }
.flow-tabs label:hover { border-color: var(--accent); color: var(--ink); }
#flow-a:checked ~ .flow-tabs label[for="flow-a"],
#flow-b:checked ~ .flow-tabs label[for="flow-b"],
#flow-c:checked ~ .flow-tabs label[for="flow-c"] {
  background: var(--accent); border-color: var(--accent); color: #0A1A2E;
}
.flow-node { fill: var(--surface); stroke: var(--rule); }
.flow-node-gen { stroke: var(--accent); }
.flow-node-buy { stroke: var(--accent-2); }
.flow-label { fill: var(--ink); }
.flow-sub { fill: var(--ink-2); }
.flow-money { stroke: var(--ink-2); }
.flow-panel figcaption { color: var(--ink-2); }
.flow-panel figcaption strong { color: var(--ink); }

.profile-light .axis { stroke: var(--rule); }
.profile-light .chart-tick { fill: var(--ink-2); }
.profile-light .gen-line { stroke: var(--accent); }
.profile-light .dem-line { stroke: var(--accent-2); }
.profile-light .chart-key.gen { fill: var(--accent); }
.profile-light .chart-key.dem { fill: var(--accent-2); }

.stackchart .s-wind { fill: var(--accent); }
.stackchart .s-store { fill: var(--accent-2); }
.stackchart .s-solar { fill: #E2C044; }
.stackchart .s-cert { fill: rgba(243, 246, 248,0.06); stroke: var(--rule); }
.stackchart .load-line { stroke: var(--ink); }
.stackchart .axis { stroke: var(--rule); }
.stackchart .chart-key.load { fill: var(--ink-2); }
.stackchart .chart-tick { fill: var(--ink-2); }
.sources i.wind { background: var(--accent); }
.sources i.store { background: var(--accent-2); }
.sources i.solar { background: #E2C044; }
.sources i.cert { background: rgba(243, 246, 248,0.06); border-color: var(--rule); }
.coverage .figure { color: var(--ink); }
.coverage .figure span { color: var(--accent); }
.coverage .caption { color: var(--ink-2); }

/* glossary, faq, insights */
.term { border-top-color: var(--rule-2); }
.term p { color: var(--ink-2); }
.faq details { border-top-color: var(--rule-2); }
.faq details:last-of-type { border-bottom-color: var(--rule-2); }
.faq summary { color: var(--ink); }
.faq summary:hover { color: var(--accent); }
.faq summary::after { border-color: var(--accent); }
.faq .answer p { color: var(--ink-2); }
.faq .answer p strong { color: var(--ink); }
.faq details.flagged { border-left-color: var(--accent); }
.post-card { border-top-color: var(--rule-2); }
.post-card p { color: var(--ink-2); }
.post-more { color: var(--accent); border-bottom-color: var(--accent); }
.post p { color: var(--ink); }
.post-list li { border-top-color: var(--rule-2); }
.post-list li::before { background: var(--accent); }
.post-foot { border-top-color: var(--rule); }
.next-title a:hover { color: var(--accent); }

.big-step { border-top-color: var(--rule-2); }
.big-step::before { color: rgba(226, 192, 68, 0.4); }
.big-step p { color: var(--ink-2); }
.step { border-top-color: var(--rule-2); }
.step p { color: var(--ink-2); }
.fact { border-top-color: var(--rule-2); }
.fact dt { color: var(--accent); }
.list li { border-top-color: var(--rule-2); }
.list li::before { background: var(--accent); }
.note { border-left-color: var(--accent); }
.lede, .intro p, .alt-row p { color: var(--ink-2); }
.statement p { color: var(--ink); }
.watermark::before { color: var(--ink); opacity: 0.028; }

/* photographs sit well on black with less tinting */
/* photographs are duotoned into the palette: colour out, contrast kept so
   nothing looks soft, then tinted toward the site's own dark green */
.photo img {
  filter: grayscale(1) contrast(1.18) brightness(0.86);
}
.photo::after {
  background: linear-gradient(160deg, #1B3A60 0%, #0A1820 60%, #0A1A2E 100%);
  mix-blend-mode: color;
  opacity: 0.9;
}
.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 26, 46,0.45), rgba(10, 26, 46,0));
  z-index: 1;
  pointer-events: none;
}
.photo-plain img { filter: none; }
.photo-plain::after, .photo-plain::before { display: none; }

.photo { border-radius: 16px; }
.alt-row .photo, .photo-4x3, .photo-16x9 { border-radius: 16px; }

/* the hero already sits on a photograph */
.bg-photo::after {
  background: linear-gradient(to bottom, rgba(6, 18, 35,0.55) 0%, rgba(6, 18, 35,0.72) 45%, rgba(6, 18, 35,0.96) 100%);
}
.bg-photo-soft::after {
  background: linear-gradient(100deg, rgba(6, 18, 35,0.9) 0%, rgba(6, 18, 35,0.72) 50%, rgba(6, 18, 35,0.5) 100%);
}

/* audience pills in the hero, as theirs are */
.hero-cta { gap: 0.9rem; }
.btn-hero-gen, .btn-hero-buy, .btn-hero-tpi {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A1A2E;
  border-radius: 999px;
  backdrop-filter: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.btn-hero-gen:hover, .btn-hero-buy:hover, .btn-hero-tpi:hover {
  background: #F0D66A; border-color: #F0D66A; color: #0A1A2E;
}
.btn-hero-gen .arw, .btn-hero-buy .arw, .btn-hero-tpi .arw { font-size: 1rem; line-height: 1; }

.ticker { background: var(--deep); border-bottom-color: var(--rule-2); }
.tick { color: var(--ink-2); }
.tick b { color: var(--ink); }
.tick .up { color: var(--accent); }
.tick .down { color: #E8846B; }
.ticker-note { background: linear-gradient(to right, rgba(6, 18, 35,0) 0%, var(--deep) 22%); color: var(--ink-2); }
.ticker-track { animation-duration: 60s; }

.nav-toggle { color: var(--ink); border-color: var(--rule); border-radius: 999px; }
.hero-panel { background: rgba(22, 49, 82,0.7); border-color: var(--rule-2); }
.prose-wide p { color: var(--ink-2); }

/* ---------- featured insights ---------- */

.featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.feature-lead .photo { aspect-ratio: 4 / 3; }
.feature-meta {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-top: 1.4rem;
}
.feature-cat {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.feature-date {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-2);
}
.feature-lead h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 200;
  margin: 0.9rem 0 0.8rem;
}
.feature-lead h3 a, .feature-item h3 a { text-decoration: none; color: inherit; }
.feature-lead h3 a:hover, .feature-item h3 a:hover { color: var(--accent); }
.feature-lead p { color: var(--ink-2); max-width: 50ch; }

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.read-more:hover { color: var(--accent); border-bottom-color: var(--accent); }

.feature-list { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); align-content: start; }
.feature-item { display: grid; grid-template-columns: 180px 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.feature-item .photo { aspect-ratio: 4 / 3; }
.feature-item h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 200;
  margin: 0.6rem 0 0;
  line-height: 1.25;
}
.feature-item .read-more { font-size: 0.76rem; margin-top: 0.8rem; }

@media (max-width: 860px) {
  .featured { grid-template-columns: 1fr; }
  .feature-item { grid-template-columns: 120px 1fr; }
}

/* ---------- core issues: a heading against stacked points ---------- */

.issues {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.4rem, 6vw, 5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.issues-lead h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); max-width: 14ch; }
.issues-lead p { color: var(--ink-2); margin-top: 1.4rem; }
.issue { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.issue:last-child { margin-bottom: 0; }
.issue .label { margin-bottom: 0.7rem; }
.issue h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 200;
  margin-bottom: 0.8rem;
}
.issue p { color: var(--ink-2); max-width: 56ch; }

@media (max-width: 860px) { .issues { grid-template-columns: 1fr; } }

/* ---------- full bleed section heroes ---------- */

.hero-band.hero-tall {
  min-height: min(62vh, 560px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: 0;
}
.hero-band.hero-tall h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 16ch; }
.hero-band.hero-tall .lede { max-width: 54ch; }

/* ---------- asset map ---------- */

.map-wrap {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.map-copy p { color: var(--ink-2); max-width: 52ch; }
.map-note { font-size: 0.86rem; opacity: 0.75; margin-top: 1.2rem; }

.map-key {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.map-key li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--ink-2);
}
.dot { width: 9px; height: 9px; border-radius: 50%; display: block; flex: 0 0 auto; }
.dot-wind, .pin-wind circle { fill: var(--accent); background: var(--accent); }
.dot-solar, .pin-solar circle { fill: #E2C044; background: #E2C044; }
.dot-store, .pin-store circle { fill: var(--accent-2); background: var(--accent-2); }
.dot-hydro, .pin-hydro circle { fill: #6FA8C7; background: #6FA8C7; }
.dot-ad, .pin-ad circle { fill: #C58E6A; background: #C58E6A; }

.map-fig { display: grid; place-items: center; }
.assetmap { width: 100%; max-width: 360px; height: auto; display: block; }
.assetmap .uk {
  fill: rgba(243, 246, 248, 0.04);
  stroke: var(--rule);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.pin { cursor: help; }
.pin .halo { fill: currentColor; opacity: 0; }
.pin-wind  { color: var(--accent); }
.pin-solar { color: #E2C044; }
.pin-store { color: var(--accent-2); }
.pin-hydro { color: #6FA8C7; }
.pin-ad    { color: #C58E6A; }
.pin .halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 3.6s ease-out infinite;
}
.pin:nth-of-type(odd) .halo { animation-delay: 1.2s; }
@keyframes pulse {
  0%   { opacity: 0.4; transform: scale(0.45); }
  70%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.pin:hover circle:first-child { r: 8; }

@media (prefers-reduced-motion: reduce) { .pin .halo { animation: none; opacity: 0; } }
@media (max-width: 860px) {
  .map-wrap { grid-template-columns: 1fr; }
  .map-fig { order: -1; }
}

/* ---------- spotlight band ---------- */

.spotlight {
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.spotlight .label { display: block; }
.spotlight h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  max-width: 18ch;
  margin-inline: auto;
}
.spotlight p {
  color: rgba(243, 246, 248, 0.8);
  max-width: 62ch;
  margin: 1.4rem auto 0;
}
.spotlight .read-more { margin-top: 1.8rem; }

/* ---------- stop anything widening the document ---------- */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* grid and flex children default to min-width:auto, which lets long content
   push a track wider than its container */
.split > *, .issues > *, .map-wrap > *, .featured > *, .contact-block > *,
.alt-row > *, .split-lead > *, .hero-grid > * { min-width: 0; }

.ticker { width: 100%; max-width: 100vw; overflow: hidden; }
.ticker-track { will-change: transform; }

.wrap { width: 100%; }
.hero-full .wrap, .hero-band .wrap { width: 100%; }

/* tables, code and figures scroll inside themselves rather than the page */
/* figures are drawn at a fixed canvas size, so cap them or the contents magnify */
.flow svg { max-width: 760px; }
.profile  { max-width: 880px; }
.stackchart { max-width: 880px; }
.assetmap { max-width: 320px; }

/* ---------- one vertical rhythm for every section ---------- */

/* every section gets the same band of space, so the page breathes evenly */
.section        { padding-block: clamp(3.4rem, 7vw, 6rem); }
.section-tight  { padding-block: clamp(2.6rem, 5vw, 4rem); }
.band           { padding-block: clamp(3.4rem, 7vw, 6rem); }
.closing        { padding-block: clamp(3.4rem, 7vw, 5.5rem); }

/* label, heading, intro, content: always the same four steps */
.wrap > .label,
.issues-lead > .label,
.split-lead .label        { display: block; margin: 0 0 1rem; }

.section > .wrap > h2,
.band > .wrap > h2,
.section > .wrap > h1     { margin: 0; max-width: 20ch; }

.section-intro {
  max-width: 62ch;
  margin: 1.1rem 0 0;
  color: var(--ink-2);
}
.section-intro + .section-intro { margin-top: 0.9rem; }

/* the first block of content after the heading always sits the same distance down */
.wrap > .cards,
.wrap > .services,
.wrap > .steps,
.wrap > .steps-big,
.wrap > .post-grid,
.wrap > .terms,
.wrap > .faq-group,
.wrap > .featured,
.wrap > .flow,
.wrap > .issues,
.wrap > .split,
.wrap > .split-lead,
.wrap > .contact-block,
.wrap > .map-wrap,
.wrap > .alt-row,
.wrap > .coverage,
.wrap > .prose-wide,
.wrap > figure            { margin-top: clamp(2rem, 3.6vw, 2.8rem); }

/* a button or link row closing a section */
.wrap > .btn,
.wrap > p > .btn          { margin-top: 0; }
.action-row               { margin-top: clamp(1.8rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; gap: 0.8rem; }

.note                     { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.foot-blurb               { max-width: 34ch; color: var(--ink-2); margin-top: 0.9rem; }

/* headings inside long-form pages keep their own spacing */
.post h2, .faq-group > h2 { margin-top: 0; }
.faq-group                { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.faq-group:last-of-type   { margin-bottom: 0; }

/* stop sections of the same tone sitting next to each other */
.section-alt + .section-alt { border-top: 0; padding-top: 0; }

.muted { color: var(--ink-2); }
.small { font-size: 0.92rem; }

/* ---------- layout corrections ---------- */

/* figures carry a browser default margin of 1em 40px, which was indenting
   every diagram and chart away from the text above it */
figure { margin: 0; }
.flow-panel, .feature-lead .photo, .wrap > figure { margin: 0; }

/* a heading needs more air beneath it than a paragraph does */
.section-intro { margin-top: 1.7rem; }
.hero-band .lede, .hero-full .lede { margin-top: 1.5rem; }
.issues-lead p { margin-top: 1.6rem; }

/* the diagram tabs sat a long way above the drawing */
.flow-stage { margin-top: 0.4rem; }
.flow-tabs { margin-bottom: 1.4rem; }

/* the closing band was a narrow column against an empty right half */
.closing .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.closing h2 { max-width: 16ch; }
.closing p { margin-top: 0; max-width: 46ch; }
.closing-actions { margin-top: 1.6rem; }
.closing-copy { align-self: end; }

@media (max-width: 760px) {
  .closing .wrap { grid-template-columns: 1fr; align-items: start; }
}

/* long-form sections: let the measure use more of the column */



/* ---------- matched supply block: one width for everything in it ---------- */

.coverage, .sources, .matched-fig, .stackchart, .profile,
.wrap > .prose-wide, .wrap > .two-up, .matched-fig figcaption { max-width: var(--figure-w); }

/* the chart caption belongs to the chart, so keep it tight beneath it */
.matched-fig figcaption { margin-top: 1rem; }

.stackchart .s-cert { fill: url(#certhatch); stroke: none; }
.sources i.cert {
  background: repeating-linear-gradient(45deg,
    rgba(243, 246, 248,0.06) 0 4px, rgba(243, 246, 248,0.22) 4px 6px);
  border: 0;
}
.stackchart .load-line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 9 7; }
.stackchart .chart-key.load { font-size: 15px; }
.stackchart .chart-tick { font-size: 15px; }

/* ---------- one measure ---------- */

/* headings share a single limit, set in characters so it tracks the font size */
.section > .wrap > h1,
.section > .wrap > h2,
.band > .wrap > h2,
.hero-band h1,
.hero-dark h1,
.hero-full h1,
.closing h2,
.issues-lead h2,
.spotlight h2      { max-width: 22ch; }
.hero-band.hero-article h1 { max-width: 26ch; }

/* nothing inside a section sets its own width any more: the column does it */
.measure,
.section-intro,
.hero-band .lede,
.hero-full .lede,
.section > .wrap > h1,
.section > .wrap > h2,
.band > .wrap > h2,
.hero-band h1,
.closing h2,
.closing p,
.issues-lead h2,
.spotlight h2,
.spotlight p,
.coverage .caption,
.issue p,
.note,
.alt-row p,
.map-copy p,
.feature-lead p   { max-width: none; }

/* long-form reading is the one exception: a 900px line is too long to track */
.post, .post p, .post h2, .post-foot,
.faq, .terms       { max-width: 70ch; }

/* two-column text halves the measure anyway, so it can keep the full column */
.prose-wide        { max-width: none; }

/* ---------- motion ---------- */

.js .reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }

.split::before { animation: draw 0.9s ease forwards; }
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--pad) 1.2rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.7rem 0; border-bottom: none; }
  .nav-group { width: 100%; }
  .nav-top { width: 100%; text-align: left; padding: 0.9rem 0 0.4rem; }
  .nav-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.6rem 0.9rem;
    min-width: 0;
  }
  .nav-lead { display: none; }
  .nav-cta { margin-top: 1rem; width: 100%; text-align: center; }
  .nav-toggle { display: block; }
  .site-head { position: relative; }

  .split { grid-template-columns: 1fr; }
  .split::before, .split.tagged::after { display: none; }
  .split > *, .split > *:first-child, .split > *:last-child {
    padding-inline: 0 0;
    padding-block: 2.2rem;
  }
  .split > *:first-child { border-bottom: 1px solid var(--rule); }
  .side-gen { border-left: 2px solid var(--gen); padding-left: 1.2rem !important; }
  .side-buy { border-left: 2px solid var(--buy); padding-left: 1.2rem !important; }

  .foot-grid { grid-template-columns: 1fr; }
  .lede, .hero .lede { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .split::before { animation: none; }
  * { transition: none !important; }
}

.foot-head { margin: 0 0 0.9rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   FINAL MEASURE
   Everything above may propose a width; this decides it. Two values only:
   headings wrap at 22 characters, body text and every figure fill the
   column. That is what makes one section line up with the next.
   ========================================================================= */

.section h1, .section h2,
.band h1, .band h2,
.hero-band h1, .hero-dark h1, .hero-full h1,
.closing h2, .spotlight h2, .issues-lead h2, .split-lead h2,
section h1, section h2 {
  max-width: 26ch;
}
.hero-article h1 { max-width: 30ch; }

section p,
section .lede,
section .measure,
section .section-intro,
section .note,
section figcaption,
.coverage .caption,
.map-copy p,
.issue p,
.big-step p,
.feature-lead p,
.closing p,
.spotlight p,
.intro p,
.profile-note,
.prose-wide,
.two-up,
.coverage,
.sources,
.stackchart,
.profile,
.assetmap,
figure {
  max-width: none;
}
.assetmap { max-width: 300px; }
.flow svg { max-width: 100%; }

/* long-form pages read better on a shorter line, and have no figures to
   line up against */
.post, .post p, .post h2, .post-foot,
.faq, .terms, .privacy-body { max-width: 76ch; }

/* two-column text keeps each column readable without changing the block width */
.prose-wide { column-gap: clamp(2rem, 4vw, 3.4rem); }


.scroll-hint { display: none; }

/* =========================================================================
   PHONE
   ========================================================================= */

@media (max-width: 640px) {

  /* ---- type: smaller steps, tighter leading, nothing oversized */
  h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); line-height: 1.14; }
  h2 { font-size: clamp(1.45rem, 6.2vw, 1.9rem); }
  h3 { font-size: 1.02rem; }
  body { font-size: 16.5px; line-height: 1.68; }
  .label { font-size: 0.62rem; letter-spacing: 0.18em; }

  /* ---- heroes: a phone screen is tall, so stop the banner eating all of it */
  .hero-full { min-height: 68vh; padding-block: 5rem 2.4rem; }
  .hero-full h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .hero-band { padding-block: 2.4rem 2rem; }
  .hero-band.hero-tall { min-height: 42vh; padding-block: 3.5rem 2rem; }
  .hero-band h1, .hero-band.hero-tall h1 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }
  .hero-full .lede, .hero-band .lede { font-size: 1rem; margin-top: 1.1rem; }

  /* ---- sections: less air, so there is less scrolling between ideas */
  .section, .band { padding-block: 2.6rem; }
  .section-tight { padding-block: 2rem; }
  .closing { padding-block: 2.6rem; }
  .wrap > .cards, .wrap > .services, .wrap > .steps-big, .wrap > .post-grid,
  .wrap > .terms, .wrap > .featured, .wrap > .flow, .wrap > .issues,
  .wrap > .split, .wrap > .contact-block, .wrap > .map-wrap,
  .wrap > figure, .wrap > .prose-wide { margin-top: 1.6rem; }

  /* ---- tap targets: nothing smaller than a fingertip */
  .btn, .nav-cta, .nav-panel a, .nav-top, .foot-links a, .read-more, .post-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot-links a, .nav-panel a { min-height: 40px; }
  .btn { width: 100%; justify-content: center; padding-block: 0.95rem; }
  .hero-cta { flex-direction: column; gap: 0.6rem; width: 100%; }
  .closing-actions { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .closing-tel { text-align: center; padding: 0.6rem 0; }

  /* ---- the diagrams: a 24 hour chart does not fit a phone, so let it scroll */
  .flow-stage, .matched-fig, .coverage + .stackchart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .flow svg { min-width: 560px; }
  .stackchart { min-width: 520px; }
  .profile { min-width: 420px; }
  .scroll-hint {
    display: block;
    font-family: var(--display);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-top: 0.6rem;
  }
  .flow-tabs { gap: 0.4rem; }
  .flow-tabs label { flex: 1 1 30%; text-align: center; font-size: 0.68rem; letter-spacing: 0.1em; padding: 0.8rem 0.4rem; }

  /* ---- the coverage figure was set for a desktop column */
  .coverage { display: block; }
  .coverage .figure { font-size: 2.4rem; }
  .coverage .caption { margin-top: 0.8rem; }
  .sources { gap: 0.8rem 1.1rem; font-size: 0.64rem; }

  /* ---- insights: the small thumbnails become too small to be worth it */
  .feature-item { grid-template-columns: 1fr; gap: 0.9rem; }
  .feature-item .photo { aspect-ratio: 16 / 9; }

  /* ---- the asset map and its key */
  .map-fig { order: -1; }
  .assetmap { max-width: 240px; }

  /* ---- footer: four columns is two too many */
  .foot-grid { gap: 2rem; }
  .legal { font-size: 0.68rem; }

  /* ---- ticker: slower, since there is less width to cross */
  .ticker-track { animation-duration: 42s; gap: 1.8rem; }
  .tick { font-size: 0.66rem; }

  /* ---- menu: the panels are open by default on a phone, so tighten them */
  .nav { padding-bottom: 1.6rem; }
  .nav-top { font-size: 0.74rem; letter-spacing: 0.16em; color: var(--ink); }
  .nav-panel { padding-left: 0.8rem; }
  .nav-panel a { font-size: 0.92rem; padding: 0.5rem 0; }
  .nav-cta { width: 100%; justify-content: center; margin-top: 1.2rem; }

  /* ---- big watermark words are noise on a small screen */
  .watermark::before { display: none; }

  /* ---- two column prose was already single column; make the gap count */
  .prose-wide p { margin-bottom: 1em; }
}

@media (max-width: 400px) {
  :root { --pad: 20px; }
  .hero-full { min-height: 62vh; }
  .brand-compact { height: 20px; }
}

.page[hidden]{display:none}
.preview-bar{background:var(--ink);color:rgba(237,240,244,.72);font-family:var(--display);font-size:.63rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.55rem 1rem}
.preview-bar strong{color:var(--paper);font-weight:600}

/* ---------- distinct source colours (wind no longer shares solar's gold, hydro no longer shares storage's blue) ---------- */
.stackchart .s-wind { fill: #E8EDF1; }
.sources i.wind { background: #E8EDF1; }
.dot-wind, .pin-wind circle { fill: #E8EDF1; background: #E8EDF1; }
.pin-wind { color: #E8EDF1; }
.dot-hydro, .pin-hydro circle { fill: #5CC2A8; background: #5CC2A8; }
.pin-hydro { color: #5CC2A8; }

/* breathing room between a card grid and the button that follows it */
.cards + p { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* form submit buttons: solid, matching "Get in touch", so the main action on the page is unmistakable */
.form button.btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A1A2E;
  font-weight: 600;
}
.form button.btn:hover, .form button.btn:focus-visible { filter: brightness(1.08); }
.faq-group + p { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- logo lockup: wordmark image with a real-text strapline beneath it ---------- */
.brand .brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.brand .brand-word { height: 31px; max-width: none; }
.brand .brand-word-foot { height: 29px; }
.brand .brand-tag {
  display: block;
  padding-left: 6px;               /* lines up with the E of the wordmark */
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.665em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #B9C6D0;
}
@media (max-width: 480px) {
  .brand .brand-lockup { display: flex; gap: 5px; }
  .brand .brand-word { height: 22px; }
  .brand .brand-tag { display: block; font-size: 8.5px; letter-spacing: 0.61em; padding-left: 5px; }
}
.site-foot .brand .brand-tag { font-size: 10.75px; }   /* the footer wordmark is 29px, not 31px */

/* ---------- case studies ---------- */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.cs-stats > div { background: var(--deep, #0A1A2E); padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.cs-stats dt {
  font-family: var(--display); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.cs-stats dd {
  margin: 0.5rem 0 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--ink);
}
.cs-stats dd small { font-size: 0.42em; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-2); }
.cs-stats .cs-accent { color: var(--accent); }

.cs-table-wrap { margin: 1.6rem 0 1.4rem; }
.cs-table { width: 100%; border-collapse: collapse; font-family: var(--display); }
.cs-table caption {
  caption-side: top; text-align: left; padding-bottom: 0.9rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.cs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cs-table th, .cs-table td { padding: 0.85rem 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.cs-table th[scope="row"] { width: 38%; padding-right: 1rem; font-weight: 500; color: var(--ink); }
.cs-table td { display: flex; align-items: center; gap: 0.9rem; }
.cs-bar {
  display: block; height: 12px; width: var(--w); min-width: 6px;
  border-radius: 999px; background: rgba(159, 176, 189, 0.45);
}
.cs-val { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cs-win .cs-bar { background: var(--accent); }
.cs-win th, .cs-win .cs-val { color: var(--accent); }
@media (max-width: 560px) { .cs-table th[scope="row"] { width: 46%; font-size: 0.88rem; } }

/* homepage case study teaser */
.cs-teaser {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
.cs-teaser .cs-stats { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .cs-teaser { grid-template-columns: 1fr; } }

/* client logo that links to its case study */
.counterparty.logo-tile { position: relative; transition: box-shadow 0.2s ease; }
.counterparty .logo-link { display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; }
.counterparty .logo-link::after {
  content: "Case study \2192";
  position: absolute; left: 0; right: 0; bottom: 0.45rem;
  font-family: var(--display); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
  color: #1E3F6B; opacity: 0.75;
}
.counterparty.logo-tile:has(.logo-link):hover,
.counterparty.logo-tile:has(.logo-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.counterparty .logo-link:hover::after, .counterparty .logo-link:focus-visible::after { opacity: 1; }

/* an odd logo out at the end of a two-column grid spans the full row instead of leaving an empty cell */
@media (max-width: 700px) { .counterparties > .counterparty:last-child:nth-child(odd) { grid-column: 1 / -1; } }

.post .note { margin: 1.8rem 0; }

/* stat strips made of phrases rather than figures */
.cs-stats.cs-text dd { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.3; }

/* ---------- matched supply section: two framed chart panels ---------- */
.wrap > h2.measure + p.measure { margin-top: 1.1rem; max-width: 68ch; }
.mx-panel {
  max-width: var(--figure-w);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background: rgba(243, 246, 248, 0.025);
  border: 1px solid var(--rule);
  border-radius: 16px;
}
.mx-panel .mx-step {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem);
  font-family: var(--display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.mx-panel .mx-step span {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; border: 1px solid var(--accent); color: var(--accent);
  letter-spacing: 0; font-size: 0.75rem;
}
.mx-panel .matched-fig, .mx-panel .coverage, .mx-panel .stackchart, .mx-panel .sources { max-width: none; margin-top: 0; }
.mx-panel .matched-fig figcaption { margin-top: 1.1rem; }
.mx-panel .coverage { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); align-items: center; }
.mx-panel .coverage .figure { font-weight: 500; letter-spacing: -0.01em; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.mx-panel .coverage .caption { max-width: 52ch; line-height: 1.5; }
.mx-panel .sources { margin-top: 1.4rem; }
.mx-panel + .prose-wide { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 640px) { .mx-panel { padding: 1rem; border-radius: 12px; } }

/* the two matched supply panels sit side by side, at half size */
.mx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: var(--figure-w);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}
.mx-grid .mx-panel { margin-top: 0; max-width: none; padding: clamp(1rem, 2vw, 1.5rem); display: flex; flex-direction: column; }
.mx-grid .mx-panel .mx-step { margin-bottom: 1rem; font-size: 0.66rem; }
/* chart text is drawn in chart units, so it is enlarged to stay readable at half width */
.mx-grid .profile .chart-key, .mx-grid .stackchart .chart-key { font-size: 30px; letter-spacing: 0.1em; }
.mx-grid .profile .chart-tick, .mx-grid .stackchart .chart-tick { font-size: 28px; letter-spacing: 0.04em; }
.mx-grid .coverage { display: block; margin-bottom: 1rem; }
.mx-grid .coverage .figure { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.mx-grid .coverage .caption { margin-top: 0.5rem; font-size: 0.85rem; }
.mx-grid .matched-fig figcaption { margin-top: auto; padding-top: 1rem; font-size: 0.85rem; }
.mx-grid .matched-fig { display: flex; flex-direction: column; flex: 1; }
.mx-grid .sources { margin-top: 1rem; gap: 0.5rem 1rem; font-size: 0.62rem; }
.mx-grid + .prose-wide { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) {
  .mx-grid { grid-template-columns: 1fr; }
}
.mx-grid .matched-fig { justify-content: center; }
.mx-grid .matched-fig figcaption { margin-top: 1.2rem; padding-top: 0; }
.mx-grid > .mx-panel, .mx-grid .matched-fig { min-width: 0; }
@media (max-width: 700px) {
  /* inside the panels both charts fit the screen rather than scrolling sideways */
  .mx-grid .stackchart, .mx-grid .profile { min-width: 0; }
  .mx-grid .matched-fig { overflow: visible; }
  .mx-grid .profile .chart-key, .mx-grid .stackchart .chart-key { font-size: 34px; letter-spacing: 0.04em; }
  .mx-grid .profile .chart-tick, .mx-grid .stackchart .chart-tick { font-size: 36px; letter-spacing: 0; }
}

/* two-column text: let paragraphs flow across the columns so both end level */
.prose-wide { column-fill: balance; }
.prose-wide p { break-inside: auto; orphans: 3; widows: 3; }

.prose-wide.prose-three { column-count: 3; }
.prose-wide.prose-three p { break-inside: avoid; }
@media (max-width: 1000px) { .prose-wide.prose-three { column-count: 1; max-width: 68ch; } }