/* /solar-panels-darlington/ (16 Oct 2026): 87 miles north and the grant Darlington leads. The hero opens on the
   milestone dial and the Tees Valley grant; the homes come in two halves; sections pair up further down. */
.dl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Hero: the dial, then the grant in the sun-ringed panel */
.dl-hero-aside { display: grid; gap: 22px; max-width: 30rem; }
.dl-mile { gap: 20px; }
.dl-mile .ak-mile-dial { width: clamp(124px, 12vw, 152px); }
.dl-mile .ak-mile-text strong { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.dl-mile .ak-mile-text span { max-width: 15rem; }
.dl-teaser { padding: clamp(24px, 2.8vw, 32px); box-shadow: var(--ak-lift); }
.dl-teaser .ak-ring { margin-bottom: 16px; }
.ak-panel > p.dl-teaser-label { font-weight: 600; color: var(--ink); }
.ak-panel > p.dl-teaser-fig { margin-top: 6px; font: 500 clamp(2.5rem, 1.9rem + 2vw, 3.25rem)/1.05 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.dl-teaser-fig small { font: 500 1.0625rem/1 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.ak-panel > p.dl-teaser-text { margin-top: 8px; color: var(--ink); line-height: 1.5; }
.dl-teaser-facts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.dl-teaser-facts li { position: relative; padding-left: 24px; color: var(--ink-soft); line-height: 1.45; font-size: 1rem; }
.dl-teaser-facts li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 11px; border-radius: 50%; border: 3px solid transparent; background: var(--ak-ring-bg); }
.dl-teaser-link { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--ink); }
.dl-teaser-link::after { content: " \2193"; color: var(--sun-coral); }
@media (min-width: 1000px) {
  .dl-hero .ak-hero-aside { margin-top: 6px; }
  .dl-hero .ak-hero-text { padding-top: 4px; }
}
@media (max-width: 999px) { .dl-hero .ak-hero-aside { order: 3; } .dl-hero .ak-hero-act { order: 2; } .dl-hero-aside { max-width: 34rem; } }
@media (min-width: 640px) and (max-width: 999px) {
  .dl-hero-aside { max-width: none; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 28px; }
  .dl-mile { flex-direction: column; align-items: flex-start; padding-top: 8px; }
}

/* Darlington homes: the town and the villages */
.dl-halves { display: grid; gap: 22px; }
@media (min-width: 700px) { .dl-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); } }
@media (max-width: 699px) { .dl-homes .dl-half .ak-map { max-width: 440px; } }
.dl-half { display: flex; flex-direction: column; padding: clamp(22px, 2.8vw, 34px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.dl-half > p:not(.dl-half-label) { margin-top: auto; padding-top: 22px; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.65; }
.dl-half-label { align-self: flex-start; margin-bottom: 20px; padding: 5px 14px; border-radius: 999px; background: var(--ak-sun); font-weight: 600; font-size: .9375rem; color: var(--ink); }
.dl-shares { flex: 1 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 18px; padding: 8px 0 4px; }
.dl-share { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.dl-share-ring { display: grid; place-items: center; width: clamp(100px, 13vw, 156px); aspect-ratio: 1; }
.dl-share-ring > * { grid-area: 1 / 1; }
.dl-share-ring svg { width: 100%; height: 100%; }
.dl-share-track { fill: none; stroke: var(--sky); stroke-width: 9; }
.dl-share-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.dl-share-ring strong { font: 500 clamp(1.375rem, .9rem + 1.3vw, 2.25rem)/1 var(--display); letter-spacing: -0.02em; }
.dl-share p { max-width: 11rem; color: var(--ink); font-weight: 500; line-height: 1.4; }
.dl-homes .dl-half .ak-map { padding: 0; box-shadow: none; background: none; }
.dl-half .ak-map-svg { border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.dl-half .ak-map figcaption:not(.visually-hidden) { margin-top: 12px; padding: 0; }

/* Conservation areas: the names picked out in the sentence, the roundel and Northgate */
.dl-cons-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .dl-cons-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 88px); align-items: start; } }
.ak-text > p.dl-cons-names { margin-top: 20px; max-width: 44rem; color: var(--ink); line-height: 2.15; }
.dl-ca { margin-right: .05em; padding: .2em .6em .24em; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -8px rgba(38, 40, 42, .45);
  font-weight: 500; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dl-ca::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ak-sun); vertical-align: .12em; }
.dl-cons-text .ak-ticks--cards { margin-top: 26px; max-width: 44rem; }
.dl-cons-side { display: grid; gap: 28px; justify-items: center; }
@media (min-width: 960px) { .dl-cons-side { position: sticky; top: 110px; padding-top: 12px; } }
.dl-roundel { display: grid; place-items: center; align-content: center; width: clamp(190px, 19vw, 236px); aspect-ratio: 1; border-radius: 50%; border: 9px solid transparent;
  background: var(--ak-ring-bg); box-shadow: var(--ak-lift); text-align: center; }
.dl-roundel strong { font: 500 clamp(4.25rem, 3.2rem + 3vw, 5.75rem)/.95 var(--display); letter-spacing: -0.04em; }
.dl-roundel span { margin-top: 8px; max-width: 8.5rem; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink-soft); }
.dl-northgate { width: 100%; }
.dl-northgate-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.dl-northgate-top .ak-tag { margin: 0; }
.ak-panel.dl-northgate > p { color: var(--ink); font-size: 1.0625rem; }

/* The Tees Valley grant: the partnership as a line along the Tees, and the price */
.dl-grant-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .dl-grant-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 88px); align-items: center; } }
.dl-grant-text > p { color: var(--ink); }
.dl-line { margin: 30px 0 0; padding: 22px 26px 24px; border-radius: var(--ak-radius); background: var(--sky); max-width: 44rem; }
.dl-line figcaption { margin-bottom: 20px; font-weight: 600; font-size: .9375rem; color: var(--ink-soft); }
.dl-line ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dl-line ol::before { content: ""; position: absolute; left: 14px; right: calc(25% - 14px); top: 12px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
.dl-line li { position: relative; padding: 40px 10px 0 0; }
.dl-line li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); }
.dl-line li.dl-line-lead::before { left: 0; top: 0; width: 28px; height: 28px; border: 5px solid transparent; background: var(--ak-ring-bg); }
.dl-line strong { display: block; font-weight: 600; line-height: 1.3; }
.dl-line li span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.35; }
@media (max-width: 600px), (min-width: 960px) and (max-width: 1179px) {
  .dl-line ol { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dl-line ol::before { left: 12px; right: auto; top: 14px; bottom: 14px; width: 4px; height: auto; background: linear-gradient(180deg, var(--sun-coral), var(--sun-amber)); }
  .dl-line li { padding: 3px 0 0 46px; min-height: 28px; }
}
.dl-pay { padding: clamp(24px, 3vw, 36px); border-radius: var(--ak-radius); border: 3px solid transparent;
  background: url("../sun-arc.svg") right -150px top -170px / 290px 290px no-repeat padding-box, linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box;
  box-shadow: var(--ak-lift); }
.dl-pay-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.dl-pay-figs p { margin: 0; font: 500 clamp(1.875rem, 1.1rem + 1.7vw, 2.75rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.dl-pay-figs small { display: block; margin-bottom: 10px; font: 500 .9375rem/1.3 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.dl-pay > p { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
.dl-pay-q { font-weight: 600; color: var(--ink); }
.dl-pay .btn { margin-top: 22px; }

/* Getting connected, beside the reviews */
.dl-pair-grid { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .dl-pair-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .dl-connect { position: sticky; top: 110px; }
}
.dl-connect .ak-ring--lg { margin-bottom: 18px; }
.dl-connect > p { margin-top: 18px; max-width: 30rem; color: var(--ink); font-size: 1.1875rem; line-height: 1.6; }
.dl-fork { position: relative; list-style: none; margin: 28px 0 0; padding: 0 0 0 30px; display: grid; gap: 14px; max-width: 26rem; }
.dl-fork::before { content: ""; position: absolute; left: 9px; top: -14px; bottom: 30px; width: 2px; border-radius: 1px; background: linear-gradient(var(--sun-amber), var(--sun-coral)); }
.dl-fork li { position: relative; padding: 14px 18px; border-radius: 14px; background: var(--paper); box-shadow: var(--ak-shadow); font-weight: 600; line-height: 1.35; }
.dl-fork li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 21px; height: 2px; background: var(--sun-coral); }
.dl-fork li span { display: block; margin-bottom: 2px; font-weight: 400; font-size: .9375rem; color: var(--ink-soft); }
.dl-reviews h2 { margin-bottom: 24px; }
.dl-reviews .ak-reviews { gap: 18px; }
.dl-reviews .ak-review { padding: 22px 26px 18px; }
@media (min-width: 700px) { .dl-reviews .ak-review:nth-child(2) { margin-left: 8%; } .dl-reviews .ak-review:nth-child(3) { margin-left: 16%; } }

/* Nearby beside Read next */
.dl-links-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .dl-links-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; } }
.dl-near h2, .dl-related h2 { margin-bottom: 18px; }
.dl-near .ak-near-list li { border-color: var(--sky-deep); padding: 14px 0; }
.dl-near .ak-near-list li:first-child { border-top: 1px solid var(--sky-deep); }
.dl-near .ak-near-list a { font-size: 1.125rem; text-decoration: none; }
.dl-near .ak-near-list a::after { content: "\00a0\2192"; color: var(--sun-coral); }
.dl-near .ak-more a { white-space: nowrap; }
.dl-near .ak-near-list a:hover { text-decoration: underline; text-decoration-color: var(--sun-coral); }
.dl-related-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dl-related-list li { padding: 18px 22px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--ak-shadow); }
.dl-related-list a { font-weight: 600; }
.dl-related-list a::after { content: "\00a0\2192"; color: var(--sun-coral); }
@media (max-width: 420px) { .dl-pay { padding: 22px 18px; } .dl-pay .btn { width: 100%; padding: 0 16px; } }
.dl-grant-grid > * { min-width: 0; }