/* /solar-panels-hartlepool/ (16 Oct 2026): the coast and the terraces. The hero is the map of the coast; the coast
   section is a sky band with a wave-cut edge; the reviews sit staggered like a tide line. */

/* Hero: the coast */
.hp-hero .ak-map { box-shadow: var(--ak-lift); }
.hp-map--phone { display: none; }
@media (min-width: 600px) and (max-width: 999px) { .hp-hero .ak-hero-aside { max-width: 520px; } }
@media (max-width: 599px) { .hp-map--wide { display: none; } .hp-map--phone { display: block; } }
/* The first extra place is the North Sea: a name on the water, without a dot */
.hp-map svg > circle.lm-place:nth-of-type(3) { display: none; }
.hp-map svg > text:nth-of-type(1) { font-style: italic; letter-spacing: .14em; fill: var(--ink-soft); font-weight: 500; }
@media (min-width: 1000px) { .hp-hero .ak-hero-aside { margin-top: 0; } }
@media (max-width: 560px) { .hp-map.ak-map--badge { padding-top: 12px; } .hp-map .ak-map-badge { position: relative; top: 0; left: 0; display: inline-block; margin: 0 0 10px; } }

/* A town of terraces */
.hp-terraces-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .hp-terraces-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 88px); align-items: center; } }
.hp-guide { list-style: none; margin: 28px 0 0 !important; padding: 0; display: grid; gap: 12px; max-width: 42rem; }
.hp-guide li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 16px; background: var(--sky); }
.hp-mini { display: block; width: 84px; height: auto; }
.hp-mini-nb { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }
.hp-mini-me { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.hp-guide-what { color: var(--ink-soft); line-height: 1.35; }
.hp-guide-what strong { display: block; font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.hp-count { display: grid; grid-template-columns: repeat(var(--cols), 16px); gap: 4px; }
.hp-count i { display: block; width: 16px; height: 24px; border-radius: 2px;
  background: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px) 0 -1px / 100% 33.4%, linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px) -1px 0 / 50% 100%, var(--ink); }
@media (max-width: 959px) { .hp-share { max-width: 560px; } }
.hp-share { position: relative; margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-lift); }
.hp-row { display: block; width: 100%; height: auto; margin: 0 0 24px; }
.hp-row-wall, .hp-row-stack, .hp-row-door { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.hp-row-roof { fill: var(--sky); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.hp-row-ridge { fill: none; stroke-width: 5; stroke-linecap: round; }
.hp-row-win { fill: var(--sky); stroke: var(--ink); stroke-width: 1.3; }
.hp-row-ground { stroke: var(--line-strong); stroke-width: 1.5; }
.hp-share-big { margin: 0; font: 500 clamp(4rem, 3rem + 3.2vw, 5.5rem)/.95 var(--display); letter-spacing: -0.035em; }
.hp-share-big span { display: block; margin-bottom: 10px; font: 600 1.0625rem/1.3 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.hp-share figcaption { margin-top: 12px; max-width: 22rem; font-weight: 500; color: var(--ink); line-height: 1.45; }
.hp-share-bars { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.hp-share-bars div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; gap: 12px; }
.hp-share-bars dt { font-weight: 500; font-size: 1rem; }
.hp-share-bars dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem; align-items: center; gap: 12px; font: 600 1.0625rem/1 var(--display); text-align: right; }
.hp-share-bars .hp-track { position: relative; height: 12px; border-radius: 999px; background: var(--sky); }
.hp-share-bars .hp-track span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
.hp-share-bars div + div .hp-track span { background: var(--line-strong); }
.hp-share-tag { display: inline-block; margin: 22px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--ak-sun); font-weight: 600; font-size: .9375rem; }
@media (max-width: 520px) { .hp-guide li { grid-template-columns: 64px minmax(0, 1fr); padding: 14px 16px; gap: 12px 14px; } .hp-mini { width: 64px; } .hp-count { grid-column: 2; } }

/* Building for the coast: a sky band cut by waves at both edges */
.hp-coast, .hp-reviews { position: relative; }
.hp-coast::before, .hp-coast::after, .hp-reviews::before { content: ""; position: absolute; left: 0; right: 0; height: 22px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cpath fill='%23fff' d='M0 0h160v8c-20 0-20 12-40 12S100 8 80 8 60 20 40 20 20 8 0 8z'/%3E%3C/svg%3E") 0 0 / 160px 22px repeat-x; }
.hp-coast::before, .hp-reviews::before { top: -1px; }
.hp-coast::after { bottom: -1px; transform: scaleY(-1); background-position: 80px 0; }
.hp-coast-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .hp-coast-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; } }
.ak-ring.hp-waves { width: 84px; height: 84px; border-width: 4px; }
.hp-waves .sp-icon { width: 46px; height: 46px; stroke-width: 1.5; }
.hp-coast-text > p { color: var(--ink); font-size: 1.1875rem; }
.hp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hp-notes .ak-note { align-items: center; padding: 20px 24px; }
.hp-notes .ak-note p { font-size: 1.0625rem; }

/* Warm Homes Hartlepool */
.hp-grant-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .hp-grant-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 88px); align-items: center; } }
.hp-grant-text > p { color: var(--ink); }
.hp-doors { display: grid; gap: 12px; margin-top: 26px !important; max-width: 44rem; }
.hp-door { display: flex; align-items: center; gap: 16px; padding: 16px 22px 16px 16px; border-radius: 16px; background: var(--sky); }
.hp-door .ak-ring { width: 44px; height: 44px; } .hp-door .sp-icon { width: 24px; height: 24px; }
.hp-door p { color: var(--ink); line-height: 1.55; font-size: 1.0625rem; }
.hp-scheme { padding: clamp(24px, 3vw, 34px); 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); }
.hp-scheme-tag { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--ak-sun); font-weight: 600; font-size: .9375rem; }
.hp-scheme-items { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-scheme-items li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 16px; background: var(--sky); font: 500 clamp(1.0625rem, .95rem + .5vw, 1.25rem)/1.25 var(--display); }
.hp-scheme-label { margin: 24px 0 10px; font-weight: 600; font-size: .9375rem; color: var(--ink-soft); }
.hp-scheme-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hp-scheme-rules li { position: relative; padding-left: 26px; line-height: 1.45; }
.hp-scheme-rules li::before { content: ""; position: absolute; left: 1px; top: .38em; width: 14px; height: 14px; border-radius: 50%; border: 3.5px solid transparent; background: var(--ak-ring-bg); }

/* Planning: the eight conservation areas */
.hp-planning-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .hp-planning-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 88px); align-items: center; } }
.hp-eight { padding: clamp(22px, 2.8vw, 30px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); }
.hp-eight-head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.hp-eight-head strong { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 4px solid transparent; background: var(--ak-ring-bg); font: 500 2.25rem/1 var(--display); }
.hp-eight-head span { font-weight: 600; line-height: 1.35; max-width: 12rem; }
.hp-eight ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; counter-reset: hp8; }
.hp-eight li { counter-increment: hp8; display: flex; align-items: center; gap: 10px; font-weight: 500; line-height: 1.3; }
.hp-eight li::before { content: counter(hp8); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); font: 600 .875rem/1 var(--text); }

/* From Retford to Hartlepool */
.hp-journey { margin: 4px 0 36px; padding: 22px 30px; box-shadow: 0 0 0 1px var(--line), var(--ak-lift); }
.hp-journey .ak-journey-end { font-size: 1.125rem; }
@media (max-width: 560px) {
  .hp-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; padding: 18px 20px; border-radius: 20px; }
  .hp-journey .ak-journey-line { grid-column: 1 / -1; grid-row: 2; margin: 4px 6px 6px; }
  .hp-journey .ak-journey-end--to { justify-content: flex-end; }
}
.hp-distance-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .hp-distance-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 88px); align-items: center; } }
.hp-distance-text { color: var(--ink); font-size: 1.1875rem; line-height: 1.65; }
.hp-same { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hp-same li { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); font-weight: 600; line-height: 1.3; }
@media (max-width: 560px) { .hp-same { grid-template-columns: minmax(0, 1fr); } }

/* Reviews, staggered along a tide line */
.hp-tide { position: relative; }
@media (min-width: 800px) { .hp-tide { padding-bottom: 44px; } .hp-tide .ak-review:nth-child(2) { transform: translateY(44px); } }

/* Nearby */
.hp-near-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .hp-near-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; } }
.hp-near .ak-chips a { min-height: 50px; padding: 8px 22px; font-size: 1.0625rem; }
.hp-near .ak-more { margin-top: 18px; }
.area-hartlepool .sources-section { border-top: 1px solid var(--line); }
@media (max-width: 799px) { .area-hartlepool .ak-related--cards .related { grid-template-columns: minmax(0, 1fr); } }