@font-face{font-family:"Familjen Grotesk";src:url(/en-gb/energy-price-cap/fonts/familjen-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/en-gb/energy-price-cap/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:98%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Source Serif Fallback";src:local("Georgia"),local("Charter"),local("Liberation Serif");size-adjust:96%;ascent-override:100%;descent-override:34%;line-gap-override:0%}

:root{
  --paper:#F6F5F9; --ink:#1B1830; --plum:#3E2A6B; --slate:#55526A; --stmt:#E7E3F1;
  --sponsor:#FFE3B8; --hair:#CBC7DA; --up:#A5321C; --down:#1B6B45; --focus:#1E4FD8; --onplum:#F6F5F9;
  --display:"Familjen Grotesk","Familjen Fallback",system-ui,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4","Source Serif Fallback",Charter,Georgia,serif;
  --r:4px; --gap:1rem; --measure:62ch;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#14111F; --ink:#ECE9F5; --plum:#BFA9F5; --slate:#A9A4C0; --stmt:#1F1B30;
  --hair:#352F4E; --up:#FF9C80; --down:#6FCF9D; --focus:#8AB4F8; --onplum:#14111F}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--serif)}
.wrap{max-width:62rem;margin:0 auto;padding:0 1rem}
main.wrap>p,main.wrap>details,main.wrap>h2,main.wrap>section,main.wrap>h1{max-width:var(--measure)}
a{color:var(--plum);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem .75rem;z-index:5}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

header.top{border-bottom:1px solid var(--hair)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.wordmark{font:400 1.25rem/1 var(--display);letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.wordmark b{font-weight:700}
header.top .hl{display:inline-flex;align-items:center;min-height:44px;font:600 .95rem var(--display)}

h1,h2,h3{font-family:var(--display);text-wrap:balance}
p{text-wrap:pretty}
h1{font-weight:700;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.15;letter-spacing:-.015em;margin:1.8rem 0 .4rem}
h2{font-weight:600;font-size:1.66rem;line-height:1.3;margin:2.4rem 0 .6rem}
h3{font-weight:600;font-size:1.0625rem;margin:1.2rem 0 .3rem}
.scope{font:400 .875rem/1.5 var(--display);color:var(--slate);margin:0 0 1.2rem}
.lede{font-size:1.33rem;line-height:1.45;margin:.4rem 0 1rem}

/* form and statement */
.grid{display:grid;gap:1.6rem;margin:1.6rem 0}
@media(min-width:48rem){.grid{grid-template-columns:22rem minmax(0,1fr);align-items:start;gap:2rem}.stmt{position:sticky;top:1rem}}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font:600 1.0625rem/1.4 var(--display);padding:0;margin-bottom:.5rem}
.inputs>fieldset>legend{font-size:1.33rem;margin-bottom:1rem}
.field{margin:0 0 1.2rem}
label,.radios legend{font:600 1rem/1.4 var(--display)}
label{display:block}
.help{font-size:.875rem;line-height:1.5;color:var(--slate);margin:.2rem 0 .5rem}
select,input[type=text]{width:100%;min-height:48px;background:var(--stmt);color:var(--ink);border:2px solid var(--slate);border-radius:var(--r);padding:.4rem .75rem;font:400 1.0625rem var(--display);font-variant-numeric:tabular-nums}
select{appearance:auto}
input[aria-invalid=true]{border-color:var(--up)}
input:disabled{opacity:.55}
.num{position:relative}
.num input{padding-right:6.5rem}
.num .unit{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font:400 .875rem var(--display);color:var(--slate);pointer-events:none}
.radios{margin:0 0 1.2rem}
.opt{display:flex;align-items:flex-start;gap:.6rem;min-height:44px;padding:.55rem 0;font:400 1rem/1.4 var(--display);cursor:pointer}
.opt input{width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--plum);flex:none}
.opt .kwh{display:block;font-size:.875rem;color:var(--slate)}
.nogas{margin-top:.2rem}
.err{color:var(--up);font:600 .9rem/1.4 var(--display);margin:.4rem 0 0}
.errors{border:2px solid var(--up);border-radius:var(--r);padding:.4rem .8rem;margin:0 0 1rem}
.errors p{margin:.2rem 0;font:600 .95rem/1.4 var(--display);color:var(--up)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem}
button[type=submit]{min-height:48px;padding:.5rem 1.2rem;background:var(--plum);color:var(--onplum);border:2px solid var(--plum);border-radius:var(--r);font:600 1rem var(--display);cursor:pointer}
button[type=submit]:hover{filter:brightness(1.12)}
.linklike{background:none;border:0;padding:0;min-height:44px;color:var(--plum);font:400 1rem var(--display);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}

.stmt{background:var(--stmt);border-top:4px solid var(--plum);border-radius:0 0 var(--r) var(--r);padding:1rem 1rem 1.2rem}
.stmt h2{font-size:1.0625rem;margin:0 0 .3rem}
.stmt .total{margin:0;font:400 1.0625rem/1.1 var(--display);color:var(--ink)}
.stmt .total output{display:block}
.stmt .total strong{font-size:clamp(2.6rem,9vw,4.5rem);line-height:1;font-weight:700;color:var(--plum);letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin-right:.2em}
.stmt .sub{font:400 .9rem/1.5 var(--display);color:var(--slate);margin:.4rem 0 1rem}
.lines{width:100%;border-collapse:collapse;font-family:var(--display);font-variant-numeric:tabular-nums}
.lines thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lines tbody tr{display:block;border-top:1px solid var(--hair);padding:.7rem 0}
.lines tbody th,.lines tbody td{display:block;padding:0;text-align:left;font-weight:400}
.lines tbody th{font:600 1rem var(--display);margin-bottom:.2rem}
.lines td[data-label]{display:flex;justify-content:space-between;gap:1rem;padding:.12rem 0}
.lines td[data-label]::before{content:attr(data-label);color:var(--slate);font-size:.9rem}
.lines td.cost{align-items:flex-start}
.lines td.cost .n{font-weight:700}
.lines .v{text-align:right}
.lines .n{display:inline}
.lines td.cost .n{display:block}
.lines .work{display:block;text-align:right;font-size:.85rem;color:var(--slate);font-weight:400}
.lines .none{color:var(--slate)}
.lines tfoot tr{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--plum);padding-top:.7rem}
.lines tfoot th,.lines tfoot td{display:block;padding:0;text-align:left;font-weight:700}
.lines tfoot td{text-align:right;font-size:1.33rem}
.how,.caveat{font-size:.875rem;line-height:1.5;color:var(--slate)}
.how{margin:1rem 0 0}
.stmt h3{margin-top:1.2rem}
.chg{margin:.2rem 0;font:400 1rem/1.5 var(--display)}
.chg.up{color:var(--up)}
.chg.down{color:var(--down)}
.note-vat{font-size:.875rem;line-height:1.5;margin:.2rem 0 0}
.stmt .caveat{margin:1rem 0 0}

.stale{border-left:4px solid var(--up);background:var(--stmt);padding:.6rem .9rem;max-width:var(--measure)}
.nextnote{max-width:var(--measure)}
.source{font-size:.9375rem;line-height:1.7}
.noscript{border-left:4px solid var(--plum);background:var(--stmt);padding:.6rem .9rem}

details{border-top:1px solid var(--hair);padding:.7rem 0}
details:last-of-type{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;font:600 1.0625rem/1.4 var(--display);min-height:44px;display:flex;align-items:center}
summary::after{content:"+";margin-left:auto;padding-left:1rem;font-size:1.3rem}
details[open]>summary::after{content:"\2212"}
details p{margin:.3rem 0 .4rem}

.offer{background:var(--sponsor);color:#1B1830;border-left:4px solid #1B1830;padding:1rem;margin:2rem 0}
.offer h2{margin-top:0;color:#1B1830}
.offer a{color:#1B1830}
.offer .disclosure{font-size:.95rem}

/* rates by region */
details.rates{max-width:none}
details.rates table{width:100%;border-collapse:collapse;font-family:var(--display);font-variant-numeric:tabular-nums;font-size:.9rem;margin:.4rem 0 .8rem}
details.rates caption{text-align:left;color:var(--slate);font-size:.875rem;line-height:1.5;padding-bottom:.4rem}
details.rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
details.rates tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1rem;border-top:1px solid var(--hair);padding:.55rem 0}
details.rates tbody th{grid-column:1/-1;text-align:left;font-weight:600}
details.rates tbody td{display:flex;justify-content:space-between;gap:.5rem}
details.rates tbody td::before{content:attr(data-label);color:var(--slate);font-size:.8rem;max-width:60%}
details.rates tr.avg th{font-weight:700}
@media(min-width:48rem){
  details.rates thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  details.rates tbody tr{display:table-row;padding:0}
  details.rates tbody th,details.rates tbody td,details.rates thead th{display:table-cell;padding:.5rem .5rem;border-top:1px solid var(--hair);text-align:right}
  details.rates tbody th,details.rates thead th:first-child{text-align:left}
  details.rates tbody td::before{content:none}
  details.rates thead th{background:var(--stmt);font:600 .85rem/1.35 var(--display);vertical-align:bottom;border-top:0}
}

footer{background:var(--stmt);margin-top:3rem;padding:1.4rem 0 2rem;font-size:.9375rem}
footer p{margin:.3rem 0}
footer .disc{font-size:.875rem;color:var(--slate);margin-bottom:.6rem}
footer .foot{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:center}
footer .brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;margin:0}
footer .wordmark{font-size:1rem}
footer .links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.4rem}
footer .links a{display:inline-flex;align-items:center;min-height:44px}

.legal h1{margin-bottom:.6rem}
.legal h2{font-size:1.33rem;margin-top:2rem}
.legal{max-width:calc(62ch + 2rem)}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}