/* Shared type roles and spacing. Loaded last so every page uses this contract. */
:root {
  --type-display: clamp(40px, 4.5vw, 52px);
  --type-section: clamp(32px, 3.1vw, 36px);
  --type-editorial: 28px;
  --type-card: 20px;
  --type-body: 16px;
  --type-ui: 14px;
  --leading-body: 1.7;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --section-space: var(--space-16);
  --column-space: var(--space-12);
  --reading-section-space: var(--space-12);
  --borough-body-size: var(--type-body);
  --borough-subheading-size: var(--type-editorial);
}

body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.coverage-directory h1,
.borough-intro-copy h1,
.journal-masthead h1,
.notebook-article .article-heading h1 {
  font-size: var(--type-display);
  line-height: 1.12;
}
.section-heading h2,
.about-heading h2,
.borough-work-intro h2,
.journal-guides-heading h2,
.journal-feature-single .journal-story h2,
.filter-feature h2,
.notebook-article .article-next-heading h2 {
  font-size: var(--type-section);
  line-height: 1.2;
}
.borough-visit h2,
.borough-local-planning h2,
.borough-planning-note h3,
.coverage-contact-copy h2,
.journal-guides h3,
.notebook-article .article-body h2 {
  font-size: var(--type-editorial);
  line-height: 1.25;
}
.service-card h3,
.paper-steps .step-heading h3,
.at-a-glance h3,
.enquiry-info h3,
.section.dark .enquiry-paper h3,
.notebook-article .article-related h3 {
  font-size: var(--type-card);
  line-height: 1.4;
}

.workbench-copy,
.section-heading > p:not(.eyebrow),
.about-copy p,
.service-card p,
.paper-steps p,
.at-a-glance dl,
.enquiry-info > p,
.contact-checklist,
.enquiry-info li,
.other-contact,
.enquiry-paper > p,
.enquiry-paper .form-note,
.coverage-note,
.coverage-directory > p,
.coverage-directory .coverage-postcode-note,
.borough-intro-copy > p,
.coverage-contact-copy p,
.journal-story-copy p,
.journal-masthead p,
.journal-guides-heading p,
.filter-feature p,
.notebook-article .article-deck,
.notebook-article .article-body,
.notebook-article .article-table,
.faq summary,
.faq details > div {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.prepared-enquiry p {
  font-size: var(--type-body);
}
.text-link,
.service-card .text-link,
.journal-page .text-link,
.notebook-article .article-related .text-link,
.borough-local-context .text-link,
.borough-practical .text-link {
  font-size: var(--type-body);
}
.button,
.borough-intro-copy > .button,
.mobile-nav .button,
.article-aside .button,
.form-field label,
.enquiry-paper label span,
.notebook-article .article-byline,
.article-cover-captioned figcaption,
.workbench-picture figcaption,
.about-picture figcaption,
.detail-badges li,
.notebook-article .article-aside,
.notebook-article .article-contents > summary,
.notebook-article .toc h2,
.notebook-article .article-table-hint,
.notebook-article .article-sources,
.notebook-article .article-sources h2,
.site-footer,
.footer-bottom,
.preview-banner,
.site-footer .coverage-map-attribution,
.site-footer :is(h2, h3, p, a):not(.brand),
.coverage-credit {
  font-size: var(--type-ui);
}

.pricing-section h2 {
  margin-bottom: var(--space-6);
  text-align: left;
  font-family: var(--heading-font);
  font-size: var(--type-section);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
}
.pricing-rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--space-2) var(--space-6);
  margin-block: var(--space-6);
  max-width: 780px;
}
.pricing-rates > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}
.pricing-rates dt {
  font-size: var(--type-ui);
}
.pricing-rates dd {
  margin: 0;
  font-size: var(--type-card);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.pricing-section p,
.pricing-block p {
  max-width: 70ch;
}
.pricing-section p + p,
.notebook-article .article-body .pricing-block p + p {
  margin-top: var(--space-4);
}
#prices {
  scroll-margin-top: 86px;
}
@media (max-width: 479.98px) {
  .pricing-rates {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--space-4);
  }
  .pricing-rates > div {
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: baseline;
    gap: var(--space-4);
  }
}
.coverage-borough-name {
  font-size: var(--type-editorial);
}
.notebook-article .article-sources h2,
.notebook-article .toc h2 {
  line-height: 1.5;
}
.form-field :is(input, textarea) {
  font-size: var(--type-body);
}
.button,
.button.secondary,
.blueprint-section .button.secondary,
.section.dark .button {
  font-weight: 400;
}

/* Section boundaries and related groups share one rhythm. */
.section {
  padding-block: var(--section-space);
}
.coverage-hero {
  padding-block: var(--space-12);
}
.workbench-intro {
  margin-bottom: var(--space-8);
}
.workbench-copy {
  margin-block: var(--space-6);
}
.workbench-actions {
  gap: var(--space-6);
}
.workbench-picture figcaption {
  padding: var(--space-4);
}
.about-picture figcaption,
.article-cover-captioned figcaption {
  margin-top: var(--space-3);
}
.coverage-directory > p,
.borough-intro-copy > p,
.borough-intro-copy > .button {
  margin-top: var(--space-6);
}
.coverage-borough-index {
  margin-top: var(--space-8);
}
.coverage-borough-link {
  padding-block: var(--space-4);
}
.section-heading {
  margin-bottom: var(--space-8);
}
.enquiry-section .section-heading {
  max-width: none;
  text-align: left;
}
.enquiry-section .section-heading > p {
  max-width: 70ch;
}
.section-heading > p:not(.eyebrow),
.about-heading + p,
.borough-work-intro p,
.journal-story-copy p,
.notebook-article .article-deck {
  margin-top: var(--space-4);
}
.service-grid,
.service-paper-grid {
  gap: var(--space-6);
}
.about-grid,
.enquiry-grid,
.split-grid,
.coverage-map-layout,
.borough-practical-layout,
.borough-local-planning,
.notebook-article .article-intro {
  gap: var(--column-space);
}
.service-card,
.step-paper,
.at-a-glance,
.enquiry-paper {
  padding: var(--space-6);
}
.service-card-title,
.at-a-glance h3 {
  margin-bottom: var(--space-3);
}
.service-illustration {
  margin-bottom: var(--space-6);
}
.service-card p {
  margin-bottom: var(--space-4);
}
.step-heading {
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.paper-steps {
  --timeline-gap: var(--space-8);
}
.about-copy p + p,
.other-contact p,
.faq details > div p + p {
  margin-top: var(--space-4);
}
.other-contact p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}
.other-contact p:last-child {
  margin-bottom: 0;
}
.contact-checklist {
  gap: var(--space-3);
  margin-block: var(--space-6);
}
.enquiry-paper > p {
  margin-block: var(--space-3) var(--space-6);
}
.form-field {
  margin-bottom: var(--space-6);
}
.enquiry-fields {
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.enquiry-fields .form-field {
  margin-bottom: 0;
}
.form-field label {
  margin-bottom: var(--space-2);
}
.faq summary {
  padding-block: var(--space-6);
}
.faq details > div {
  padding-bottom: var(--space-6);
}
#faqs .section-heading {
  max-width: 840px;
  text-align: left;
}

.borough-local-context {
  padding-top: var(--space-8);
}
.borough-practical-layout,
.borough-planning-note,
.borough-local-planning {
  margin-top: var(--space-8);
}
.borough-planning-note p,
.borough-planning-note ul,
.borough-council-links {
  margin-top: var(--space-4);
}
.borough-reading ul {
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.borough-local-planning h2 {
  margin-bottom: var(--space-4);
}
.borough-access-advice > p + p {
  margin-top: var(--space-4);
}
.borough-job-list > div {
  padding-block: var(--space-4);
}
.coverage-contact-strip {
  padding-block: var(--space-6);
}
.coverage-contact-layout {
  gap: var(--space-4) var(--space-8);
}
.coverage-contact-actions {
  column-gap: var(--space-6);
}
.coverage-contact-copy h2 + p {
  margin-top: var(--space-3);
}

.journal-header {
  padding-block: var(--space-8);
}
.journal-feature-single {
  padding-bottom: var(--space-8);
}
.journal-feature-single .journal-story,
.filter-feature {
  gap: var(--column-space);
}
.journal-guides-heading {
  gap: var(--space-4) var(--space-6);
  margin-top: 0;
}
.journal-guides {
  gap: var(--space-8);
  padding-block: var(--space-6) var(--space-12);
}
.journal-guides .journal-story-copy {
  padding-top: var(--space-6);
}
.journal-guides.journal-guides-single {
  grid-template-columns: minmax(0, 1fr);
}
.journal-guides-single .journal-story-copy {
  padding-top: 0;
}
.journal-read {
  padding-top: 0;
  margin-top: var(--space-6);
}
.journal-guides .journal-read {
  margin-top: auto;
}

.notebook-article .article-header {
  padding-block: var(--space-12);
}
.notebook-article .article-byline {
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.notebook-article .article-reading {
  padding-block: var(--space-8) var(--section-space);
}
.notebook-article .article-grid {
  gap: var(--column-space);
}
.notebook-article .article-body > section + section {
  margin-top: var(--reading-section-space);
}
.notebook-article .article-body h2 {
  margin: 0 0 var(--space-4);
}
.notebook-article .article-body p + p,
.notebook-article .article-body :is(ul, ol) {
  margin-top: var(--space-4);
}
.notebook-article .article-body :is(ul, ol) {
  margin-block: var(--space-4);
}
.notebook-article .article-body .callout {
  margin-block: var(--space-6);
}
.notebook-article .article-body :is(ul, ol) + p {
  margin-top: var(--space-4);
}
.notebook-article .article-body li + li {
  margin-top: var(--space-2);
}
.notebook-article .article-table {
  margin-block: var(--space-6);
}
.notebook-article .article-table :is(th, td) {
  padding: var(--space-4);
}
.notebook-article .article-contact {
  margin-top: var(--reading-section-space);
}
.notebook-article .article-next {
  padding-block: 0 var(--section-space);
}
.notebook-article .article-next-heading {
  margin-bottom: var(--space-6);
}
.notebook-article .article-related-grid {
  gap: var(--space-8);
}
.notebook-article .article-related {
  gap: var(--space-4);
}
.notebook-article .article-cover-object img {
  padding: var(--space-6);
}
.footer-grid p {
  margin-top: var(--space-4);
}
.site-footer :is(h2, h3) {
  margin-bottom: var(--space-4);
}
.site-footer {
  padding-block: var(--space-12) var(--space-6);
}
.footer-grid {
  gap: var(--space-8);
}
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

@media (max-width: 899px) {
  .enquiry-section .section-heading {
    max-width: 650px;
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  :root {
    --section-space: var(--space-12);
    --column-space: var(--space-8);
    --reading-section-space: var(--space-8);
  }
    .coverage-hero,
  .notebook-article .article-header {
    padding-block: var(--space-8);
  }
  .notebook-article .article-reading {
    padding-top: 0;
  }
  .coverage-contact-actions {
    row-gap: var(--space-2);
  }
}

/* Give borough planning content the same breathing room above and below. */
.section.borough-practical {
  padding-bottom: 0;
}
.borough-planning-note {
  margin-top: var(--section-space);
}
.borough-local-planning {
  margin-top: 0;
  padding-block: var(--section-space);
}

.borough-local-planning .borough-planning-note {
  margin-top: 0;
}
.borough-access-advice {
  margin-top: var(--section-space);
}

.coverage-planning h2 { margin-bottom: var(--space-4); font-family: var(--heading-font); font-size: var(--type-editorial); font-style: italic; font-weight: 400; line-height: 1.25; }
.coverage-planning p + p { margin-top: var(--space-4); }

/* Article follow-up sections use the same columns as the reading body. */
.service-detail .article-heading .workbench-actions { justify-content: flex-start; margin-top: var(--space-6); }
.service-followup-grid, .reading-page #faqs .split-grid {
  display: grid;
  width: min(calc(100% - var(--gutter) * 2), 980px);
  grid-template-columns: 200px minmax(0, 660px);
  column-gap: var(--column-space);
  justify-content: center;
}
.service-followup-grid > *, .reading-page #faqs .split-grid > * { grid-column: 2; min-width: 0; }
.service-followup-grid .coverage-contact-layout { grid-template-columns: minmax(0, 1fr) 104px; }
.reading-page #faqs .section-heading, .reading-page #faqs .faq {
  width: 100%; max-width: none; margin-inline: 0; text-align: left;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .service-followup-grid, .reading-page #faqs .split-grid { grid-template-columns: 170px minmax(0, 660px); }
}
@media (max-width: 767.98px) {
  .service-followup-grid, .reading-page #faqs .split-grid { grid-template-columns: minmax(0, 1fr); }
  .service-followup-grid > *, .reading-page #faqs .split-grid > * { grid-column: 1; }
  .service-followup-grid .coverage-contact-layout { grid-template-columns: minmax(0, 1fr) 88px; }
}

/* Portrait tablets need the reading width more than a persistent contents rail. */
@media (min-width: 768px) and (max-width: 899.98px) {
  .notebook-article .article-grid,
  .service-followup-grid,
  .reading-page #faqs .split-grid {
    width: min(calc(100% - var(--gutter) * 2), 660px);
    grid-template-columns: minmax(0, 1fr);
  }
  .service-followup-grid > *,
  .reading-page #faqs .split-grid > * {
    grid-column: 1;
  }
  .notebook-article .article-aside {
    position: static;
  }
  .notebook-article .article-contents > summary {
    display: list-item;
    width: fit-content;
    min-height: 44px;
    padding-block: 10px;
    font-size: var(--type-ui);
    font-weight: 600;
    cursor: pointer;
  }
  .notebook-article .toc h2 {
    display: none;
  }
  .notebook-article .toc {
    padding-top: var(--space-2);
  }
}

/* Preserve usable card text width beside the timeline on narrow phones. */
@media (max-width: 479.98px) {
  .paper-steps > li {
    padding-left: 44px;
  }
  .paper-steps .step-paper {
    padding: var(--space-4);
  }
  .paper-steps .step-number {
    top: 16px;
    width: 36px;
    height: 36px;
  }
  .paper-steps > li:not(:last-child)::before {
    top: 34px;
    left: 17.5px;
  }
}

/* Keep the final menu action clear of the bottom edge on short screens. */
@media (max-width: 899px) and (max-height: 600px) {
  .menu-disclosure .mobile-nav {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  }
}