/* Area pages (Corsham, Chippenham, Melksham): additions on top of inner.css */
.ap-figure { margin: var(--sp-4) 0 0; }
.ap-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); border: 1px solid var(--bd-dark); }
@media (max-width: 949px) { .ap-figure { max-width: 34rem; } }
@media (min-width: 950px) { .tests--inline .tests__head { position: sticky; top: calc(var(--header-h) - 1rem); align-self: start; } }

/* Question entries: the h3 is a full question, so keep it in the body face-weight display font but allow long lines */
.tests--inline .test h3 { max-width: 30ch; }
.test .rw-why__list { margin: var(--sp-3) 0; }
.test .rw-why__list li:nth-child(even) { margin-top: 0; }
.test > p:last-child { margin-bottom: 0; }

/* No FAQ panel above the quote section on these pages, so it does not overlap */
.tests + .quote, .dd-section + .quote { margin-top: 0; padding-top: var(--sp-section); }

/* Light variant of the Q&A section (white page background instead of the dark surface) */
.tests--light { background: var(--paper); color: var(--ink); }
.tests--light h2, .tests--light h3 { color: var(--ink); }
.tests--light .tests__head > p, .tests--light .test p { color: var(--ink); }
.tests--light .tests--inline .test + .test, .tests--light.tests--inline .test + .test { border-top-color: var(--line); }
.tests--light .ap-figure img { border-color: var(--line); }
.tests--light .rw-why__list li { background: #fff; color: var(--ink); border-color: var(--line); border-top-color: var(--blue); }
.tests--light .rw-why__list strong { color: var(--ink); }

/* Dark two-column closing block (heading left, copy right) used before the quote section */
.ap-block { padding-block: var(--sp-6); }
.ap-block h2 { color: #fff; }
.ap-block__layout { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 950px) {
  .ap-block__layout { grid-template-columns: 5fr 6fr; gap: var(--sp-6); }
  .ap-block__head { position: sticky; top: calc(var(--header-h) - 1rem); }
}
.ap-block__copy { border-top: 1px solid var(--bd-dark); padding-top: var(--sp-4); }
.ap-block__copy p { max-width: 62ch; color: var(--on-dark); }
.ap-block__copy p:last-child { margin-bottom: 0; }
.ap-block + .quote { margin-top: 0; padding-top: var(--sp-section); }

/* Dos and don'ts: full-width section, each service a Do's panel (blue) beside a Don'ts panel (red) */
.dd-section { padding-block: var(--sp-6); }
.dd-section h2 { color: #fff; }
.dd-head { display: grid; gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-5); }
@media (min-width: 760px) { .dd-head { grid-template-columns: 1fr auto; gap: var(--sp-5); } }
.dd-rows { display: grid; gap: var(--sp-5); }
.dd-row { display: grid; gap: var(--sp-3); }
@media (min-width: 860px) { .dd-row { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
.dd-panel { padding: var(--sp-4); background: var(--ink-900); color: var(--on-dark); border: 1px solid var(--bd-dark); border-top: 4px solid var(--blue); border-radius: var(--r-m); }
.dd-panel--dont { border-top-color: var(--red); }
.dd-panel__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.dd-panel__head h3 { flex: 1; min-width: 0; color: #fff; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); }
.dd-panel--do .dd-panel__head h3::after { background: var(--blue); }
.dd-panel__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--blue-deep); color: #fff; }
.dd-panel--dont .dd-panel__icon { background: var(--red); }
.dd-panel__icon svg { width: 1.15rem; height: 1.15rem; }
.dd-panel__list { margin: 0; padding: 0; list-style: none; }
.dd-panel__list li { padding: var(--sp-3) 0; border-top: 1px solid var(--bd-dark); }
.dd-panel__list li:first-child { border-top: 0; padding-top: 0; }
.dd-panel__list li:last-child { padding-bottom: 0; }
.dd-panel__list strong { display: block; margin-bottom: .35rem; font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: .02em; line-height: 1.1; color: #fff; }
.ap-figure--light img { border-color: var(--line); }
.rw-what__copy .ap-figure { margin-top: var(--sp-4); max-width: 34rem; }
.ap-cta { margin-top: var(--sp-3); }