/* /solar-panels-middlesbrough/ (16 Oct 2026): Teesside, both banks of the river. The hero is the map of the Tees
   estuary bleeding off the right; the two boroughs side by side; the Tees Valley grant as the one highlighted panel;
   the 87 miles from Retford with the milestone and the journey strip. */

/* ---------- Hero: the words, and the map off the right edge ---------- */
.mb-map { padding: 0; overflow: hidden; border-radius: 28px 0 0 28px; box-shadow: var(--ak-lift) !important; }
.mb-map.ak-map--badge { padding-top: 0; }
.mb-map .ak-map-badge { top: 20px; left: 20px; }
.mb-map .ak-map-svg { border-radius: 0; }
/* The caption is for screen readers here: the map runs off the edge of the page */
.mb-map figcaption { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; padding: 0 !important; }
.mb-map .lm-sea { fill: #dfe8ee; }
.mb-water { font-family: var(--display); font-style: italic; font-weight: 500; fill: #6f8494; }
@media (min-width: 1000px) {
  .mb-hero .ak-hero-aside { margin-top: 0; align-self: center; }
  .mb-hero h1 .display { max-width: 12ch; }
}
/* Between 1000 and 1180px the words' column is too narrow for the ratings pill on one line, so it is set a size smaller */
@media (min-width: 1000px) and (max-width: 1179px) { .mb-hero .hh-rating { font-size: .8125rem; gap: 6px 10px; padding: 7px 14px; } .mb-hero .hh-rating-g { padding-left: 10px; } .mb-hero .hh-rating .stars { font-size: .875rem; } }
@media (max-width: 999px) {
  .mb-map { border-radius: 22px; }
  .mb-hero .ak-hero-grid { display: flex; flex-direction: column; }
  .mb-hero .ak-hero-act { order: 2; }
  .mb-hero .ak-hero-aside { order: 3; }
}
/* On a phone the drawing shrinks, so the labels are set larger there (in map units, via --k). */
@media (max-width: 640px) {
  .mb-map .lm-label { font-size: calc(var(--k) * 24px) !important; stroke-width: calc(var(--k) * 6px) !important; }
  .mb-map .lm-label--here { font-size: calc(var(--k) * 30px) !important; }
  .mb-map .mb-water { font-size: calc(var(--k) * 23px) !important; }
  .mb-map .ak-map-badge { position: static; display: inline-block; margin: 14px 14px 10px; font-size: .875rem; }
}

/* ---------- Teesside homes: the two boroughs side by side ---------- */
.mb-homes-top { display: grid; gap: 28px; margin-bottom: clamp(32px, 4vw, 48px); }
@media (min-width: 900px) { .mb-homes-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; } }
.mb-homes-text > p { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.65; }
.mb-homes-text > p:first-child { color: var(--ink); font-size: 1.1875rem; }
.mb-homes-text > p + p { margin-top: 16px; }
.mb-banks { display: grid; gap: 16px; }
@media (min-width: 600px) { .mb-banks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mb-bank { padding: 20px 20px 22px; border-radius: 22px; background: var(--sky); }
.mb-bank-name { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mb-bank-name .ak-ring { width: 44px; height: 44px; } .mb-bank-name .sp-icon { width: 24px; height: 24px; }
.mb-bank-name span { display: flex; flex-direction: column; font: 500 1.25rem/1.2 var(--display); }
.mb-bank-name small { font: 400 .875rem/1.3 var(--text); color: var(--ink-soft); }
.mb-bank .ak-bars { padding: 16px; box-shadow: none; }
.mb-bank .ak-bars li { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) 3.4rem; gap: 10px; }
.mb-bank .ak-bars-label { font-size: .9375rem; }
.mb-bank .ak-bars-value { font-size: 1rem; }
.mb-banks-src { grid-column: 1 / -1; margin-top: -4px; font-size: .875rem; color: var(--ink-soft); }
@media (max-width: 520px) { .mb-bank .ak-bars li { grid-template-columns: minmax(0, 1fr) 3.4rem; } }
.mb-sub-cards h3 { margin-bottom: 4px; }

/* ---------- The North East's output, worked through ---------- */
.mb-chain { list-style: none; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 800px) { .mb-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }
.mb-chain li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; background: var(--paper); box-shadow: var(--ak-shadow); color: var(--ink-soft); line-height: 1.45; }
.mb-chain li:last-child { border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; }
.mb-chain-fig { font: 500 clamp(2.25rem, 1.7rem + 1.6vw, 3rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.mb-chain-fig small { display: block; margin-bottom: 6px; font: 500 .9375rem/1 var(--text); letter-spacing: 0; color: var(--ink-soft); }
@media (min-width: 800px) {
  .mb-chain li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -36px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23ec7a4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    box-shadow: 0 0 0 1px var(--line); }
}
.mb-solar .section-head p { color: var(--ink); font-size: 1.1875rem; }
.mb-solar-text { display: grid; gap: 16px; }
@media (min-width: 900px) { .mb-solar-text { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); } }
.mb-solar-text p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; }
.mb-more { margin-top: 22px; }
.mb-more a { font-weight: 600; color: var(--ink); }

/* ---------- Planning ---------- */
.mb-planning .ak-ticks--cards li:first-child { border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; box-shadow: var(--ak-shadow); }
.mb-planning .ak-ticks--cards li { line-height: 1.55; }
@media (min-width: 900px) { .mb-planning .ak-aside { padding-top: 86px; } }
.mb-planning .ak-text > p:last-child a { font-weight: 600; }

/* ---------- Costs: four tiles, then the words in two columns ---------- */
.mb-cost-tiles { margin-bottom: clamp(28px, 3vw, 40px); }
@media (min-width: 1000px) { .mb-cost-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mb-cost-tiles dd:not(.ak-stats-src) { font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.5rem); }
.mb-cost-text { display: grid; gap: 16px; }
@media (min-width: 900px) { .mb-cost-text { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); } }
.mb-cost-text p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; }
.mb-cost-text p + p { margin-top: 16px; }
.mb-cost-text a { font-weight: 600; color: var(--ink); }

/* ---------- The SEG: what a unit is worth ---------- */
.mb-seg .ak-aside { display: grid; gap: 18px; align-content: start; }
@media (min-width: 900px) { .mb-seg .ak-aside { position: sticky; top: 110px; margin-top: 78px; } }
.mb-seg .ak-text h3 { margin-top: 34px; }
.mb-unit { margin: 0; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); display: grid; gap: 20px; }
.mb-unit figcaption { font: 500 1.25rem/1.3 var(--display); }
.mb-unit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: end; }
.mb-unit-label { font-weight: 600; line-height: 1.3; }
.mb-unit-label small { display: block; margin-top: 2px; font-weight: 400; font-size: .875rem; color: var(--ink-soft); }
.mb-unit-row strong { font: 500 1.875rem/1 var(--display); letter-spacing: -0.02em; text-align: right; }
.mb-unit-track { grid-column: 1 / -1; position: relative; height: 14px; border-radius: 999px; background: var(--sky); }
.mb-unit-track span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
.mb-unit-row--low .mb-unit-track span { background: var(--line-strong); }
.mb-rise { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: var(--sky); color: var(--ink-soft); line-height: 1.4; }
.mb-rise strong { font: 500 2.25rem/1 var(--display); color: var(--ink); }

/* ---------- The Tees Valley grant: the one highlighted panel ---------- */
.mb-grant-panel { padding: clamp(24px, 3.4vw, 48px); background-size: 420px 420px; background-position: right -200px top -230px, 0 0, 0 0; }
.mb-grant-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .mb-grant-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); } }
.mb-grant-fig { margin: 0 !important; font: 500 clamp(3rem, 2.1rem + 2.8vw, 4.5rem)/1 var(--display) !important; letter-spacing: -0.03em; color: var(--ink) !important; }
.mb-grant-fig small { display: block; margin-bottom: 6px; font: 500 1rem/1 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.mb-grant-label { margin: 10px 0 14px !important; font-weight: 600; color: var(--ink) !important; }
.mb-grant-chips span { background: var(--sky); box-shadow: none; }
.mb-grant-facts { margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.mb-grant-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mb-grant-facts dt { color: var(--ink-soft); }
.mb-grant-facts dd { margin: 0; font-weight: 600; text-align: right; }
.mb-grant-text > p { color: var(--ink); font-size: 1.125rem; line-height: 1.65; }
.mb-grant-text > p + p { margin-top: 16px; }
.mb-grant-note { margin-top: 22px; background: var(--sky); box-shadow: none !important; }

/* ---------- Battery: three columns ---------- */
.mb-battery .section-head { max-width: 52rem; }
.mb-battery .section-head p { color: var(--ink); font-size: 1.1875rem; }
.mb-batt-cols { display: grid; gap: 28px; }
@media (min-width: 900px) { .mb-batt-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); } }
.mb-batt-cols > div { padding-top: 24px; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)) 1; }
.mb-batt-cols .ak-ring { margin-bottom: 16px; }
.mb-batt-cols h3 { font-size: 1.25rem; margin-bottom: 8px; }
.mb-batt-cols p { color: var(--ink-soft); line-height: 1.6; font-size: 1.0625rem; }

/* ---------- Coming to Teesside from Retford ---------- */
.mb-distance-top { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .mb-distance-top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); } }
.mb-distance .ak-mile { padding: 22px; border-radius: 24px; background: var(--paper); box-shadow: var(--ak-shadow); }
.mb-distance .ak-mile-dial { width: 140px; }
.mb-distance-text p { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.65; }
.mb-distance-text p + p { margin-top: 16px; }
.mb-journey { margin: clamp(28px, 3vw, 44px) 0; }
/* The dashes at the kit's .7, drawn in the colour itself, so the miles tag on the line stays full ink */
.mb-journey .ak-journey-line { opacity: 1; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 11px); }
.mb-steps-title { margin-bottom: 26px; font-size: 1.5rem; }
.mb-steps li h3 { font-size: 1.125rem; }
.mb-weeks { margin-top: 30px; font: 500 1.25rem/1.4 var(--display); color: var(--ink); }

/* ---------- Business ---------- */
.mb-business .ak-text > p { font-size: 1.125rem; }
.mb-business .ak-split { align-items: center; }
.mb-future h3 { font-size: 1.1875rem; margin-bottom: 6px; }

/* ---------- Reviews: one big, two under it ---------- */
.mb-reviews .ak-reviews--pair { margin-top: 20px; }
@media (max-width: 600px) { .mb-reviews .ak-reviews--quote .ak-review::before { display: none; } }

/* ---------- Nearby: the list across two columns ---------- */
@media (min-width: 800px) { .mb-near .ak-near-list { max-width: none; columns: 2; column-gap: 48px; } .mb-near .ak-near-list li { break-inside: avoid; } }

/* ---------- FAQs: cards, the first across the width ---------- */
@media (min-width: 900px) { .area-middlesbrough .ak-faq--cards .faq summary { display: flex; align-items: center; min-height: 86px; } }
@media (min-width: 900px) { .area-middlesbrough .ak-faq--cards .faq details:first-child { grid-column: 1 / -1; } }
.area-middlesbrough .ak-faq--cards .faq details:first-child { border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; }
.area-middlesbrough .ak-related { padding-bottom: clamp(24px, 3vw, 40px); }
.mb-distance .ak-mile-text { min-width: 0; }
@media (max-width: 480px) { .mb-distance .ak-mile { flex-direction: column; text-align: center; } .mb-distance .ak-mile-dial { width: 128px; } }
/* Six steps since the process fix (16 Oct 2026): three across, in two rows, until there's room for all six. */
@media (min-width: 900px) and (max-width: 1199px) {
  .ak-steps--row.mb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .ak-steps--row.mb-steps li:nth-child(3)::after { display: none; }
}