/* Mobile first. Meaning never relies on colour alone. */

/* Palette from goveagle.com's brand tokens, used as-is. */
:root {
  --brand-teal: #028682;
  --brand-teal-dark: #027774;
  --brand-lime: #ceff72;
  --brand-navy: #192d38;
  --brand-cream: #eceae6;
  --brand-mint: #ebf7f5;
  --brand-light-blue: #bbdee6;
  --frame: #ececec;
  --hero-margin: 40px;
  --hero-bar-inset: 40px;

  --text: var(--brand-navy);
  --muted: #65767c;
  --background: #ffffff;
  --surface: var(--brand-cream);
  --border: #bbdee6;
  --link: var(--brand-teal);
  --link-visited: var(--brand-teal-dark);
  --focus: var(--brand-teal);
  --primary: var(--brand-teal);
  --primary-dark: var(--brand-navy);
  --error: #b3261e;

  --likely: var(--brand-teal);
  --likely-bg: var(--brand-mint);
  --unknown: #8a5a00;
  --unknown-bg: #fff4dc;
  --probably: #a4430a;
  --probably-bg: #fdebe0;
  --needs: #b3261e;
  --needs-bg: #fbe7e6;

  --radius: 6px;
  --space: 1rem;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--background);
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--space);
}

main {
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

h1,
h2 {
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  line-height: 1.1;
  margin: 0.5rem 0 1.25rem;
}

h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  margin: 2.5rem 0 0.85rem;
}

.small-heading {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

a {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:focus,
button:focus,
input:focus,
[tabindex]:focus {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--text);
}

.lead {
  font-size: 1.2rem;
}

.small {
  font-size: 0.9rem;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--focus);
  color: var(--text);
}

/* Header and footer */



.site-footer {
  padding: 1.5rem 0 2rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.attribution {
  padding-left: 1.1rem;
}

.attribution li {
  margin-bottom: 0.35rem;
}


/* Home */

.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.project-link {
  display: block;
  padding: 0.95rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text);
  background: var(--background);
}

.project-link:visited {
  color: var(--text);
}

.project-link:hover {
  border-color: var(--brand-teal);
}

.project-link::after {
  content: " \2192";
  color: var(--primary);
}

.steps li,
.next-steps li,
.checks li {
  margin-bottom: 0.5rem;
}

/* Forms */

.question {
  margin: 0 0 1.75rem;
}

.question.has-error {
  border-left: 4px solid var(--error);
  padding-left: 0.85rem;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.question-label {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
  padding: 0;
}

.hint,
.conditional-note {
  color: var(--muted);
  margin: 0 0 0.6rem;
}

.conditional-note {
  font-style: italic;
}

.js .conditional-note {
  display: none;
}

.field-error {
  color: var(--error);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

input[type="text"] {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 2px solid var(--text);
  border-radius: 0;
  background: var(--background);
  color: var(--text);
}

.input-postcode {
  width: 10ch;
  min-width: 9rem;
  text-transform: uppercase;
}

.input-short {
  width: 7rem;
}

.number-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unit {
  font-weight: 600;
}

.choices {
  display: grid;
  gap: 0.5rem;
}

.choices-inline {
  grid-template-columns: repeat(2, minmax(0, 8rem));
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--likely-bg);
}

.choice input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.button {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--primary-dark);
}

.button:hover {
  background: var(--primary-dark);
}

.button-secondary {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 3px 0 var(--border);
}

.button-secondary:hover {
  background: #dfdcd6;
}

.js-only {
  display: none;
}

.js .js-only:not([hidden]) {
  display: inline-block;
}

.error-summary {
  border: 4px solid var(--error);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.error-summary h2 {
  margin-top: 0;
}

.error-summary a {
  color: var(--error);
  font-weight: 700;
}

.notice {
  border-left: 6px solid var(--unknown);
  background: var(--unknown-bg);
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}

/* Map */

.map {
  height: 60vh;
  min-height: 300px;
  max-height: 520px;
  border: 2px solid var(--border);
  margin-bottom: 0.5rem;
}

.pin-status {
  font-weight: 600;
  margin: 0 0 0.6rem;
}

/* Result */

.outcome {
  padding: 1.25rem;
  border-radius: var(--radius);
  border-left: 8px solid;
  margin: 1rem 0 1.5rem;
}

.outcome-headline {
  font-size: 1.7rem;
  margin: 0 0 0.5rem;
}


.outcome-likely_pd {
  background: var(--likely-bg);
  border-color: var(--likely);
}
.outcome-cannot_confirm {
  background: var(--unknown-bg);
  border-color: var(--unknown);
}
.outcome-probably_needs {
  background: var(--probably-bg);
  border-color: var(--probably);
}
.outcome-needs {
  background: var(--needs-bg);
  border-color: var(--needs);
}

.reasons {
  list-style: none;
  padding: 0;
}

.reason {
  border-left: 4px solid var(--border);
  padding: 0.25rem 0 0.25rem 0.85rem;
  margin-bottom: 0.85rem;
}

.reason-likely_pd {
  border-color: var(--likely);
}
.reason-cannot_confirm {
  border-color: var(--unknown);
}
.reason-probably_needs {
  border-color: var(--probably);
}
.reason-needs {
  border-color: var(--needs);
}

.source {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* Constraints table: stacked on small screens */

.constraints {
  width: 100%;
  border-collapse: collapse;
}

.constraints thead {
  display: none;
}

.constraints tr {
  display: block;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0;
}

.constraints th,
.constraints td {
  display: block;
  text-align: left;
  padding: 0.1rem 0;
}

.constraints th {
  font-weight: 700;
}

.badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
}

.badge-found {
  color: var(--needs);
  background: var(--needs-bg);
}
.badge-near {
  color: var(--probably);
  background: var(--probably-bg);
}
.badge-clear {
  color: var(--likely);
  background: var(--likely-bg);
}
.badge-unknown {
  color: var(--unknown);
  background: var(--unknown-bg);
}

.change-answers {
  margin: 2rem 0;
}

.disclaimer {
  /* Same shape as the CTA block, but not its grey (reserved for CTAs). */
  background: var(--brand-mint);
  padding: var(--hero-bar-inset);
  border-radius: 40px;
  margin-top: 2.5rem;
}

.disclaimer p:last-child {
  margin-bottom: 0;
}

/* About page */

.table-scroll {
  overflow-x: auto;
}

.coverage {
  border-collapse: collapse;
  min-width: 36rem;
  font-size: 0.95rem;
}

.coverage th,
.coverage td {
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.6rem 0.45rem 0;
  text-align: left;
  vertical-align: top;
}

@media (min-width: 40rem) {

  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .constraints thead {
    display: table-header-group;
  }

  .constraints tr {
    display: table-row;
    padding: 0;
  }

  .constraints th,
  .constraints td {
    display: table-cell;
    padding: 0.6rem 0.75rem 0.6rem 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }

  .constraints thead th {
    border-bottom: 2px solid var(--text);
  }
}

.region {
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0;
}

.region summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
}

.region .table-scroll {
  margin-top: 0.75rem;
}

/* Guides and council pages */

.limits li {
  margin-bottom: 0.6rem;
}

/* In-page calls to action: the grey rounded block used for the hero. */
.cta {
  background: var(--frame);
  border-radius: 40px;
  padding: var(--hero-bar-inset);
  margin: 2.5rem 0;
}

.cta-text {
  margin-top: 0;
  font-size: 1.1rem;
}

.cta .button,
.cta .button:visited {
  border-radius: 999px;
  box-shadow: none;
  padding: 0.85rem 1.5rem;
}

.cta .button:hover {
  background: var(--brand-navy);
}

/* Links styled as buttons keep button colours, not link colours. */
a.button,
a.button:visited,
a.button:hover {
  color: #fff;
  text-decoration: none;
}

.guide-list > li {
  margin-bottom: 0.6rem;
}

.columns {
  columns: 2 12rem;
  column-gap: 2rem;
  padding-left: 1.1rem;
}

.columns li {
  break-inside: avoid;
  margin-bottom: 0.25rem;
}

.council-list {
  list-style: none;
  padding: 0;
  columns: 2 10rem;
  column-gap: 1.5rem;
}

.council-list li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}

/* Headings: Newsreader, a free alternative to Rhymes (SIL Open Font
   Licence, see assets/fonts/Newsreader-OFL.txt). Self-hosted so no
   third-party requests. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
}

h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 450;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}

/* Home page hero */

/* A light grey rounded block filling the full width of the window, with a
   40px margin all round (as on america.gov). The home page's content area
   drops its narrow column so the block can use the full width. */
main.wrap:has(> .hero) {
  max-width: none;
  /* Edge to edge on phones; 40px either side from tablet width up. */
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 40rem) {
  main.wrap:has(> .hero) {
    padding-left: var(--hero-margin);
    padding-right: var(--hero-margin);
  }
}

.hero {
  position: relative;
  margin-top: calc(var(--hero-margin) - 1.5rem);
  margin-bottom: calc(var(--hero-margin) - 3rem);
  padding: 8rem 1.25rem 3rem;
  background: var(--frame);
  border-radius: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 40rem) {
  .hero {
    min-height: calc(100svh - 2 * var(--hero-margin));
    padding: 8rem 2rem 4rem;
    border-radius: 48px;
  }
}

.hero-title {
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

.hero-lead {
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  color: var(--muted);
  max-width: 32rem;
  margin: 0 auto 2.25rem;
}

.hero-form {
  max-width: 40rem;
  margin: 0 auto;
}

.hero-projects {
  margin-bottom: 1.25rem;
}

.hero-legend {
  font-weight: 600;
  margin: 0 auto 0.75rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* Desktop: a forced break after the fourth chip gives two rows (4 + 3).
   The chips get more width than the search pill so the first row fits. */
.chips-break {
  display: none;
}

@media (min-width: 52rem) {
  .hero-projects {
    width: 48rem;
    max-width: calc(100vw - 8rem);
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .chips-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font-size: 0.98rem;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.chip:hover span {
  border-color: var(--brand-teal);
}

.chip input:checked + span {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #fff;
}

.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  box-shadow: 0 10px 30px rgba(25, 45, 56, 0.1);
  transition:
    box-shadow 0.3s,
    border-color 0.3s;
}

.search-pill:focus-within {
  border-color: var(--brand-teal);
  box-shadow: 0 10px 34px rgba(2, 134, 130, 0.22);
}

.search-pill input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.75rem 0;
  font-size: clamp(1.15rem, 4vw, 1.35rem);
  background: transparent;
  text-transform: uppercase;
}

.search-pill input[type="text"]::placeholder {
  text-transform: none;
  color: var(--muted);
}

.search-pill input[type="text"]:focus {
  outline: none;
  box-shadow: none;
}

.search-pill-button {
  flex-shrink: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand-teal);
  color: #fff;
  cursor: pointer;
}

.search-pill-button:hover {
  background: var(--brand-navy);
}

.hero-hint {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.9rem;
}

.hero-error {
  color: var(--error);
  font-weight: 700;
}

/* Home link and Menu button: top of the hero block on the home page,
   top of the page elsewhere. */

.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero .site-bar {
  position: absolute;
  top: var(--hero-bar-inset);
  left: var(--hero-bar-inset);
  right: var(--hero-bar-inset);
  margin: 0;
  /* No z-index: only the open menu sits above the blur overlay, so the
     Home link is blurred with the rest of the page. */
}

.site-bar-home,
.site-bar-home:visited,
.menu-button {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: var(--background);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(25, 45, 56, 0.08);
  border: 0;
}

/* No teal border on hover or after a click; keyboard focus still shows. */
.site-bar-home:focus:not(:focus-visible),
.menu-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 2px 10px rgba(25, 45, 56, 0.08);
}

/* Home is a plain text link, not a pill button. */
.site-bar-home,
.site-bar-home:visited {
  padding: 0.6rem 0;
  background: none;
  box-shadow: none;
}

.site-bar-home:hover {
  text-decoration: underline;
}

.site-bar-home:focus:not(:focus-visible) {
  box-shadow: none;
}

.menu {
  position: relative;
}

.menu-button {
  cursor: pointer;
  list-style: none;
}

.menu-button::-webkit-details-marker {
  display: none;
}


.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 16rem;
  background: var(--background);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(25, 45, 56, 0.16);
  padding: 0.5rem;
  text-align: left;
  z-index: 20;
}

.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-panel a,
.menu-panel a:visited {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.menu-panel a:hover {
  background: var(--frame);
}


/* Page load animations, timed like america.gov: the headline sharpens from
   a blur as it rises 8px; the rest fades in, staggered. Only for people who
   haven't asked their device to reduce motion. */

@keyframes enter-rise {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    filter: none;
    transform: translateY(0);
  }
}

@keyframes enter-fade {
  0% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-title,
  main > h1 {
    animation: enter-rise 0.9s 60ms backwards;
  }

  .hero-lead,
  .hero-projects,
  .search-pill,
  .hero-hint,
  .hero .site-bar,
  main > .lead {
    animation: enter-fade 0.85s 60ms backwards;
  }

  .hero-lead,
  main > .lead {
    animation-delay: 0.22s;
  }

  .hero-projects {
    animation-delay: 0.32s;
  }

  .search-pill,
  .hero .site-bar {
    animation-delay: 0.4s;
  }

  .hero-hint {
    animation-delay: 0.56s;
  }
}

/* Inner pages: full-width header image between the top nav and the title.
   Same radius and margins as the home hero block (edge to edge on phones,
   40px either side from tablet width up). */

.page-image {
  display: block;
  /* 20px either side on phones; 40px from tablet width up (below). */
  width: calc(100% - 40px);
  margin: 0 20px;
  height: clamp(180px, 30vw, 460px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: 40px;
  background: var(--frame);
}

@media (min-width: 40rem) {
  .page-image {
    width: calc(100% - 2 * var(--hero-margin));
    margin: 0 var(--hero-margin);
    border-radius: 48px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-image {
    animation: enter-fade 0.85s 60ms backwards;
  }
}

/* Inner pages: top nav sits 20px from the top; the Menu button is filled
   with the primary colour and has no shadow. */

body > .wrap > .site-bar {
  margin-top: 20px;
}

body > .wrap > .site-bar .menu-button,
body > .wrap > .site-bar .menu-button:focus:not(:focus-visible) {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

/* While the menu is open, blur everything behind it. Clicking the blurred
   area lands on <body>, so checker.js closes the menu and nothing behind
   it is triggered. */

body:has(.menu[open])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.menu[open] {
  z-index: 1000;
}

@media (prefers-reduced-motion: no-preference) {
  body:has(.menu[open])::after {
    animation: enter-fade 0.3s ease-out;
  }
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Checker pages (postcode, map and questions, result), restyled to match
   the rest of the site: pill buttons, rounded fields and blocks. */

.button,
a.button {
  border-radius: 999px;
  box-shadow: none;
  padding: 0.85rem 1.6rem;
  background: var(--primary);
}

.button:hover {
  background: var(--brand-navy);
}

.button-secondary,
a.button-secondary {
  background: var(--background);
  color: var(--text);
  border: 1px solid var(--border);
}

.button-secondary:hover {
  background: var(--frame);
}

input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
}

input[type="text"]:focus {
  border-color: var(--brand-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 134, 130, 0.2);
}

.search-pill input[type="text"],
.search-pill input[type="text"]:focus {
  border: 0;
  border-radius: 0;
  padding: 0.75rem 0;
  box-shadow: none;
}

.location-form {
  max-width: none;
  margin: 1.5rem 0 1rem;
}

.search-pill.has-error {
  border-color: var(--error);
}

.question {
  margin-bottom: 2rem;
}

.question.has-error {
  border-left: 0;
  padding-left: 0;
}

.choices {
  gap: 0.6rem;
}

.choice {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  background: var(--background);
  transition: border-color 0.15s, background 0.15s;
}

.choice:hover {
  border-color: var(--brand-teal);
}

.choice:has(input:checked) {
  border-color: var(--brand-teal);
  background: var(--brand-teal);
  color: #fff;
}

.choice:has(input:checked) input {
  accent-color: var(--brand-navy);
}

.map {
  border: 0;
  border-radius: 28px;
  overflow: hidden;
}

.error-summary {
  border: 0;
  border-radius: 28px;
  padding: 1.5rem 1.75rem;
  background: var(--needs-bg);
}

.notice {
  border-left: 0;
  border-radius: 28px;
  padding: 1.25rem 1.5rem;
}

.outcome {
  border-left: 0;
  border-radius: 40px;
  padding: var(--hero-bar-inset);
}

.outcome-headline {
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.1;
}

.badge {
  border: 0;
  padding: 0.2rem 0.65rem;
}

/* Inner pages: line Home and Menu up with the header image edges. */
body > .wrap:has(> .site-bar) {
  max-width: none;
  padding: 0 calc(20px + 1rem);
}

@media (min-width: 40rem) {
  body > .wrap:has(> .site-bar) {
    padding: 0 calc(var(--hero-margin) + 1.5rem);
  }
}

/* Error summary: no trailing space under the text. */
.error-summary h2 {
  margin-bottom: 0.15rem;
}

.error-summary a {
  font-weight: 400;
}

.error-summary p,
.error-summary ul {
  margin-top: 0;
  margin-bottom: 0;
}

.error-summary > :last-child {
  margin-bottom: 0;
}

/* Answer options: no focus ring after a click; keyboard focus still shows. */
.choice input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Custom radio: a plain circle outline when unselected; when selected, a
   white circle with a teal inner dot and no border ring. */
.choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.15rem 0 0;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  background: var(--background);
  flex-shrink: 0;
}

.choice input[type="radio"]:checked {
  border: 0;
  background: radial-gradient(circle, var(--brand-teal) 0 35%, #fff 38%);
}

.choice input[type="radio"]:focus-visible {
  outline: 3px solid var(--brand-navy);
  outline-offset: 2px;
}

/* Postcode page: space between the search pill and the privacy note. */
.location-form + .small {
  margin-top: 2rem;
}

/* Checker panel: the checker steps open in a full-screen sheet over the
   page, with the page blurred behind (as with the menu). */

html.flow-open {
  overflow: hidden;
}

.flow {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.flow[hidden] {
  display: none;
}

.flow-sheet {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--background);
  box-shadow: 0 20px 60px rgba(25, 45, 56, 0.18);
}

.flow-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  /* Close sits 40px from the top and right of the panel. */
  padding: 40px 40px 0;
  pointer-events: none;
}

.flow-close {
  /* Plain text, like the Home link. */
  pointer-events: auto;
  font: inherit;
  font-weight: 600;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.flow-close:hover {
  text-decoration: underline;
}

.flow-close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.flow-body {
  padding-top: 0.5rem;
  padding-bottom: 3rem;
}

.flow-loading {
  color: var(--muted);
  padding: 3rem 0;
  text-align: center;
}

@media (min-width: 40rem) {
  .flow {
    padding: var(--hero-margin);
  }

  .flow-sheet {
    border-radius: 48px;
  }

}

@keyframes flow-enter {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flow:not([hidden]) {
    animation: enter-fade 0.3s ease-out;
  }

  .flow:not([hidden]) .flow-sheet {
    animation: flow-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .flow-step {
    animation: enter-fade 0.35s ease-out;
  }
}

/* Headings that receive focus programmatically (so screen readers announce
   a new checker step) don't show a focus outline. */
[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

/* Main submit buttons (e.g. "Check my project"): larger and wider. */
.button-large {
  font-size: 1.15rem;
  padding: 1.05rem 2.75rem;
  min-width: 18rem;
}

@media (max-width: 39.99rem) {
  .button-large {
    width: 100%;
    min-width: 0;
  }
}

/* All form inputs share the buttons' pill radius. */
input[type="text"],
.choice {
  border-radius: 999px;
}

input[type="text"] {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

.choice {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Disclaimer heading: a normal page H2, without the space above it inside the box. */
.disclaimer h2 {
  margin-top: 0;
}

.outcome > p:last-child {
  margin-bottom: 0;
}

/* The result page's "Important" box: light red. */
.disclaimer[aria-labelledby="disclaimer-heading"] {
  background: var(--needs-bg);
}

/* Status pills stay on one line; the status column widens to fit. */
.badge {
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .constraints td:nth-child(2) {
    width: 8.5rem;
  }
}

.disclaimer p:first-of-type {
  margin-top: 0;
}

/* Guides page: bento grid of cards, a little wider than the text column. */

main.wrap:has(.bento) {
  max-width: 72rem;
}

.bento-heading {
  margin-bottom: 1rem;
}

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.bento-last {
  margin-top: 2.5rem;
}

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  padding: 32px;
  background: var(--frame);
  border-radius: 32px;
  transition: transform 0.2s ease-out, background 0.2s;
}

.bento-card:hover {
  filter: brightness(0.97);
}

@media (prefers-reduced-motion: no-preference) {
  .bento-card:hover {
    transform: translateY(-3px);
  }
}

.bento-title {
  font-family: var(--font-heading);
  font-weight: 450;
  font-size: clamp(1.5rem, 3.5vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
  padding-right: 2rem;
}

.bento-card-large .bento-title {
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
}

/* The title link covers the whole card. */
.bento-link,
.bento-link:visited {
  color: var(--text);
  text-decoration: none;
}

.bento-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.bento-link:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.bento-link:focus {
  outline: none;
  box-shadow: none;
}

.bento-text {
  color: var(--muted);
  margin: 0;
}

.bento-arrow {
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 1.4rem;
  color: var(--primary);
}

.bento-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 1.25rem 0 0;
}

/* Pills sit above the card-wide link so they can be clicked on their own. */
.bento-pills a,
.bento-pills a:visited {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--background);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}

.bento-pills a:hover {
  background: var(--primary);
  color: #fff;
}

@media (min-width: 40rem) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-card {
    grid-column: span 3;
  }

  .bento-card-large {
    grid-column: span 3;
    min-height: 16rem;
  }

  .bento-card-third {
    grid-column: span 2;
  }

  .bento-card-wide {
    grid-column: span 6;
    min-height: 0;
  }
}

@media (min-width: 64rem) {
  .bento-card {
    grid-column: span 2;
  }

  .bento-card-large {
    grid-column: span 3;
  }

  .bento-card-third {
    grid-column: span 2;
  }

  .bento-card-wide {
    grid-column: span 6;
  }
}

/* Balance the project rows: tablets 2 per row (an odd last card spans the
   row); desktop 2 large, then 3, then 2. */
@media (min-width: 40rem) {
  .bento > .bento-card:not(.bento-card-third):not(.bento-card-wide):nth-child(odd):last-child {
    grid-column: span 6;
  }
}

@media (min-width: 64rem) {
  .bento > .bento-card:not(.bento-card-third):not(.bento-card-wide):nth-child(odd):last-child {
    grid-column: span 3;
  }

  .bento > .bento-card:not(.bento-card-large):not(.bento-card-third):not(.bento-card-wide):nth-last-child(-n+2) {
    grid-column: span 3;
  }
}

/* Bento cards rotate grey, light teal, light blue and teal. */
.bento > .bento-card:nth-child(4n + 2) {
  background: var(--brand-mint);
}

.bento > .bento-card:nth-child(4n + 3) {
  background: var(--brand-light-blue);
}

.bento > .bento-card:nth-child(4n) {
  background: var(--brand-teal);
}

.bento > .bento-card:nth-child(4n) .bento-link,
.bento > .bento-card:nth-child(4n) .bento-link:visited,
.bento > .bento-card:nth-child(4n) .bento-arrow {
  color: #fff;
}

.bento > .bento-card:nth-child(4n) .bento-text {
  color: rgba(255, 255, 255, 0.85);
}

.bento > .bento-card:nth-child(4n) .bento-pills a:hover {
  background: var(--brand-navy);
}

/* Hover: a slight darkening of whichever colour the card is. */
.bento > .bento-card:hover {
  filter: brightness(0.97);
}

/* Header image wrapper. */
.page-image {
  position: relative;
  overflow: hidden;
}

.page-image img {
  /* Brand duotone, defined in templates/partials/page-image.php. */
  filter: url(#brand-duotone);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}


/* Photo credit on header images (required by the CC BY / BY-SA licences). */
.page-image-credit {
  position: absolute;
  right: 20px;
  bottom: 16px;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(25, 45, 56, 0.55);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.3;
  max-width: calc(100% - 40px);
}

.page-image-credit a,
.page-image-credit a:visited {
  color: #fff;
}

@media (min-width: 40rem) {
  .page-image-credit {
    right: 32px;
    bottom: 20px;
  }
}

/* Quieter photo credit: smaller, fainter, no pill. */
.page-image-credit {
  padding: 0;
  background: none;
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(25, 45, 56, 0.5);
}

.page-image-credit a,
.page-image-credit a:visited {
  color: inherit;
  text-decoration: none;
}

.page-image-credit a:hover {
  text-decoration: underline;
}

/* Paid report offer on the result page. */
.report-offer h2 {
  margin-top: 0;
}

.report-offer-list {
  margin: 0 0 1.5rem;
}

.report-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  cursor: pointer;
}

.report-consent input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.report-offer form + form {
  margin-top: 1rem;
}

.report-offer .small:last-child {
  margin-bottom: 0;
}

/* Result page: summary of the answers given. */
.answers {
  margin: 0;
}

.answers > div {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.answers dt {
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.answers dd {
  margin: 0;
  font-weight: 600;
}

@media (min-width: 40rem) {
  .answers > div {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
  }

  .answers dt {
    margin-bottom: 0;
  }
}

/* ---------- Result page ---------- */

/* Summary pills under the outcome. */
.result-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: -0.5rem 0 1.5rem;
}

.summary-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.summary-pills li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--frame);
  font-size: 0.9rem;
}

.summary-edit {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

/* Reasons with an icon per type, instead of a coloured edge only. */
.reason {
  position: relative;
  border-left: 0;
  padding: 0.1rem 0 0 2.25rem;
  margin-bottom: 1rem;
}

.reason::before {
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
}

.reason-likely_pd::before { content: "\2713"; background: var(--likely); }
.reason-cannot_confirm::before { content: "!"; background: var(--unknown); }
.reason-probably_needs::before { content: "!"; background: var(--probably); }
.reason-needs::before { content: "\2715"; background: var(--needs); }

/* What would make it permitted? */
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: grid;
  gap: 12px;
}

.suggestion {
  background: var(--brand-mint);
  border-radius: 28px;
  padding: 1.25rem 1.5rem;
}

.suggestion > :last-child {
  margin-bottom: 0;
}

.suggestion-intro {
  font-weight: 600;
  margin-top: 0;
}

.suggestion-change {
  margin: 0 0 0.6rem;
}

.suggestion-question {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
}

.suggestion-values s {
  color: var(--muted);
}

.suggestion-values strong {
  font-size: 1.15rem;
}

/* Location: map, legend and cards. */
.result-map {
  height: 320px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--frame);
  margin-bottom: 0.75rem;
}

.map-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.map-legend li::before {
  content: "";
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  vertical-align: -0.1rem;
}

.legend-pin::before { background: #2a81cb; border-radius: 50% !important; }
.legend-conservation-area::before { background: rgba(2, 134, 130, 0.35); border: 2px solid #028682; }
.legend-article-4-direction-area::before { background: rgba(227, 167, 47, 0.35); border: 2px solid #8a5a00; }
.legend-listed-building-outline::before,
.legend-listed-building::before { background: rgba(179, 38, 30, 0.35); border: 2px solid #b3261e; }
.legend-tree-preservation-zone::before,
.legend-tree::before { background: rgba(47, 125, 50, 0.35); border: 2px solid #2f7d32; }

.location-cards {
  display: grid;
  gap: 12px;
  margin-bottom: 1rem;
}

.location-card {
  border-radius: 24px;
  padding: 1rem 1.25rem;
  background: var(--frame);
}

.location-card.state-found { background: var(--needs-bg); }
.location-card.state-near { background: var(--probably-bg); }
.location-card.state-unknown { background: var(--unknown-bg); }

.location-card p {
  margin: 0;
}

.location-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem !important;
}

.location-card-label {
  font-weight: 700;
}

.location-card .badge {
  background: rgba(255, 255, 255, 0.7);
}

.also-checked {
  color: var(--muted);
}

/* Next steps as action cards. */
.step-cards {
  display: grid;
  gap: 12px;
}

.step-card {
  display: flex;
  flex-direction: column;
  background: var(--frame);
  border-radius: 28px;
  padding: 1.5rem;
}

.step-card-title {
  font-family: var(--font-heading);
  font-weight: 450;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.step-card p {
  color: var(--muted);
  margin: 0 0 1rem;
}

.step-card-link {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
}

.step-card-link:hover {
  text-decoration: underline;
}

/* Reference sections folded away. */
.folds {
  margin: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--border);
}

.fold {
  border-bottom: 1px solid var(--border);
}

.fold summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.3rem;
}

.fold summary::-webkit-details-marker {
  display: none;
}

.fold summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  color: var(--primary);
}

.fold[open] summary::after {
  content: "\2212";
}

.fold > :last-child {
  margin-bottom: 1.25rem;
}

@media (min-width: 40rem) {
  .result-map {
    height: 380px;
  }

  .location-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones: 10px more space either side of the page content. */
@media (max-width: 39.99rem) {
  .wrap {
    padding-left: calc(var(--space) + 10px);
    padding-right: calc(var(--space) + 10px);
  }

  /* Keep the home hero block edge to edge, as before. */
  main.wrap:has(> .hero) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Buttons with an icon before the label. */
.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.button-icon svg {
  flex-shrink: 0;
}

/* ---------- Locked result (payments switched on) ---------- */

/* The offer card sits on top of the blurred placeholder. Both share one
   grid cell, so the section is as tall as whichever is taller. */
.locked {
  display: grid;
  margin: 2rem 0 3rem;
}

.locked-content,
.locked-offer {
  grid-area: 1 / 1;
}

/* Generic stand-in content, blurred and fading out. Never real details. */
.locked-content {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  padding-top: 7rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.locked-title {
  font-family: var(--font-heading);
  font-weight: 450;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.2;
  margin: 2rem 0 0.85rem;
}

.locked-title:first-child {
  margin-top: 0;
}

.locked-map {
  height: 260px;
  border-radius: 28px;
  margin-bottom: 1rem;
  background:
    linear-gradient(115deg, transparent 46%, #fff 46%, #fff 49%, transparent 49%),
    linear-gradient(25deg, transparent 58%, #fff 58%, #fff 61%, transparent 61%),
    radial-gradient(circle at 55% 45%, rgba(2, 134, 130, 0.35) 0 22%, transparent 23%),
    #e4e6e1;
}

.locked-offer {
  align-self: start;
  position: relative;
  z-index: 1;
}

.report-offer-featured {
  margin: 0;
  background: var(--background);
  box-shadow: 0 20px 50px rgba(25, 45, 56, 0.16);
}

.report-offer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--brand-mint);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.locked + .change-answers {
  margin-top: 1rem;
}

/* Let a little of the blurred "Why" show above the offer card. The blurred
   area extends past the column on each side so the blur fades out softly
   instead of being clipped at the edges (the fade mask clips to its box). */
.locked-content {
  padding: 0 20px;
  margin: 0 -20px;
}

.locked-offer {
  margin-top: 4.5rem;
}

@media (min-width: 40rem) {
  /* Tablets: the column's side padding is 16px, so stay within it. */
  .locked-content {
    padding: 0 16px;
    margin: 0 -16px;
  }

  .locked-offer {
    margin-top: 5.5rem;
  }
}

@media (min-width: 52rem) {
  /* Wide screens have room either side of the column. */
  .locked-content {
    padding: 0 40px;
    margin: 0 -40px;
  }
}

/* Soften the top of the blur too: extra room above, faded in, so the blur
   isn't clipped by the top of the mask. Content stays where it was. */
.locked-content {
  padding-top: 28px;
  margin-top: -28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 45%, transparent 100%);
}

/* Inset the offer card so the blur shows down both sides of it. */
.locked-offer {
  margin-left: 16px;
  margin-right: 16px;
}

@media (min-width: 40rem) {
  .locked-offer {
    margin-left: 40px;
    margin-right: 40px;
  }
}

/* Paid buyer's full result: thank-you panel at the top. */
.purchase-banner {
  background: var(--brand-mint);
  border-radius: 40px;
  padding: var(--hero-bar-inset);
  margin: 0 0 1.5rem;
}

.purchase-banner h2 {
  margin-top: 0;
}

.purchase-banner > .small:last-child {
  margin-bottom: 0;
}

/* Cookie consent banner (analytics only loads after Accept). */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1500;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border-radius: 28px;
  background: var(--background);
  box-shadow: 0 16px 50px rgba(25, 45, 56, 0.22);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.cookie-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-banner .button {
  padding: 0.65rem 1.4rem;
}