/* Narratology: solid colour fields, complete artwork, direct problem navigation. */
:root {
  --navy: #1b2d3e;
  --teal: #70ccc5;
  --coral: #ff806e;
  --ink: #0b1620;
  --surface: #fff;
  --selected: #e7efed;
  --muted: #455667;
  --line: #ccd6d3;
  --control-line: #829195;
  --hover: #294859;
  --focus: #a6342b;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --ease-out: cubic-bezier(.16,1,.3,1);
  font-family: 'Work Sans', Arial, sans-serif;
  color: var(--navy);
  background: var(--surface);
  font-synthesis: none;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; background: var(--surface); }
body { margin: 0; background: var(--surface); font-size: 1rem; line-height: 1.6; }
::selection { color: var(--navy); background: var(--selected); }
button, input, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
p, ul { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0 0 var(--space-2); color: inherit; text-wrap: balance; }
h1 { font: 700 2.25rem/1.12 'Crimson Pro', Georgia, serif; letter-spacing: -.015em; }
h2 { font: 600 1.75rem/1.25 'Work Sans', Arial, sans-serif; }
h3 { font: 600 1.125rem/1.4 'Work Sans', Arial, sans-serif; }
strong, label, dt { font-weight: 600; }
p, li, a, button, h1, h2, h3 { overflow-wrap: break-word; }
.wrap { width: min(76rem, calc(100% - 2.5rem)); margin-inline: auto; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-3); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark img { display: block; width: 11.25rem; max-width: 100%; height: auto; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.header-actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.private-label { font-size: 1rem; color: var(--muted); }
.print-contact { display: none; }
.explore-stage { display: grid; grid-template-columns: minmax(0,1fr); }
.intro { display: grid; grid-template-columns: minmax(0,1fr) 5rem; gap: var(--space-3); align-items: center; padding: var(--space-4) 1.25rem; background: var(--navy); color: var(--surface); }
.intro-copy { display: contents; }
.intro-copy h1 { grid-column: 1/-1; margin: 0; }
.intro-copy p { grid-column: 1; max-width: 44ch; }
.intro-copy p, .approach-summary p, .commission p { font-weight: 500; line-height: 1.65; letter-spacing: .005em; }
.intro-art { grid-column: 2; width: 5rem; aspect-ratio: 1; }
.intro-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; animation: pattern-settle 700ms var(--ease-out) both; }
@keyframes pattern-settle { from { transform: rotate(-12deg) scale(.9); } to { transform: rotate(0deg) scale(1); } }
.intro :focus-visible { outline-color: var(--surface); }
.explorer { min-width: 0; padding: var(--space-4) 1.25rem; background: var(--teal); color: var(--navy); }
.explorer :focus-visible { outline-color: var(--navy); }
#wizard { scroll-margin-top: var(--space-3); }
#stage-title { scroll-margin-top: var(--space-4); }
.problem-picker h2 { max-width: 25ch; margin-bottom: var(--space-3); }
.problem-list { list-style: none; padding: 0; margin: 0; }
.problem-list li { margin: 0; padding: 0; border-top: 1px solid var(--navy); }
.problem-list li:last-child { border-bottom: 1px solid var(--navy); }
.problem-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 76px; padding: 1rem .75rem; color: var(--navy); text-decoration: none; }
.problem-list a>span { font-size: 1.125rem; font-weight: 600; }
.problem-list svg { flex: 0 0 24px; transition: transform 180ms var(--ease-out); }
.problem-list a:hover, .problem-list a:focus-visible, .problem-list a:active { color: var(--surface); background: var(--navy); }
.problem-list a:hover svg, .problem-list a:focus-visible svg { transform: translateX(4px); }
.problem-list a:hover>span, .problem-list a:focus-visible>span { text-decoration: underline; text-underline-offset: .25em; }
.alternative-contact { margin-top: var(--space-3); }
.alternative-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.is-selected { display: block; }
.is-selected .intro { display: block; padding: var(--space-3) 1.25rem; }
.is-selected .intro-copy { display: block; }
.is-selected .intro h1 { font-family: 'Work Sans', Arial, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: normal; max-width: none; }
.is-selected .intro p, .is-selected .intro-art { display: none; }
.is-selected .explorer { background: var(--surface); padding-block: var(--space-4) var(--space-5); }
.is-selected .explorer :focus-visible { outline-color: var(--focus); }
.is-selected .problem-heading :focus-visible { outline-color: var(--navy); }
.problem-view { max-width: 68rem; margin-inline: auto; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: var(--space-3); font-weight: 500; }
.back-link svg { flex: 0 0 24px; transform: rotate(180deg); }
.service-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.service-nav .back-link { margin-bottom: 0; }
.questions-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.problem-heading { padding: var(--space-3); margin-bottom: var(--space-3); background: var(--teal); }
.problem-heading h2 { max-width: 38ch; margin: 0; }
.approach-summary { padding: var(--space-3); background: var(--navy); color: var(--surface); margin-bottom: var(--space-4); }
.approach-summary h3 { max-width: 45ch; }
.approach-summary p { max-width: 70ch; }
.service-options { margin-bottom: var(--space-3); }
.matching-services { margin: var(--space-3) 0 0; padding: 0; }
.matching-services>div { padding-block: var(--space-3); border-top: 1px solid var(--line); }
.matching-services dt { margin-bottom: .5rem; }
.matching-services dd { margin: 0; max-width: 70ch; }
ul { padding-left: 1.3rem; }
li { padding-left: .125rem; margin-bottom: var(--space-1); }
li:last-child { margin-bottom: 0; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; margin-top: var(--space-2); }
.action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .875rem 1.5rem; border: 1px solid var(--navy); border-radius: 2px; background: transparent; color: var(--navy); font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none; text-align: center; transition: background-color 140ms ease-out; }
.action-button.primary { background: var(--navy); color: var(--surface); }
.action-button.primary:hover, .action-button.primary:active { background: var(--hover); }
.text-button { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; border: 0; background: none; color: var(--navy); font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: left; text-decoration: underline; text-underline-offset: .25em; }
.text-button:hover { text-decoration-thickness: 2px; }
.copy-status { margin-top: var(--space-2); font-size: 1rem; color: var(--muted); }
.copy-status:empty { display: none; }
.commission-section { padding-block: var(--space-5); background: var(--coral); color: var(--ink); }
.commission { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3); align-items: center; }
.commission h2 { font-size: 2rem; }
.commission p { max-width: 55ch; }
.commission-section :focus-visible { outline-color: var(--ink); }
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.contact-actions>a:not(.action-button) { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; font-weight: 600; }
.manual-copy { margin-top: var(--space-2); }
.manual-copy label { display: block; margin-bottom: var(--space-1); }
textarea { display: block; width: 100%; min-height: 14rem; padding: .75rem; resize: vertical; border: 1px solid var(--control-line); border-radius: 2px; color: var(--navy); background: var(--surface); line-height: 1.5; caret-color: var(--navy); }
.expertise { padding-block: var(--space-5); }
.expertise h2 { max-width: 20ch; }
.expertise p { max-width: 65ch; }
.expertise a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.white-paper { padding-block: var(--space-5); border-top: 1px solid var(--line); }
.white-paper p { max-width: 65ch; }
.white-paper-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-questions { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); max-width: 75ch; }
.service-questions h2 { max-width: 30ch; margin-bottom: var(--space-4); }
.service-question { margin-top: var(--space-4); scroll-margin-top: var(--space-4); }
.service-question h3 { margin-bottom: var(--space-2); }
.service-question p { margin-bottom: var(--space-2); }
.question-source { font-size: 1rem; color: var(--muted); overflow-wrap: anywhere; }
.article-shell { width: min(75ch, calc(100% - 2.5rem)); margin-inline: auto; padding-bottom: var(--space-5); }
.article-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2) var(--space-4); }
.article-tools a, .article-services a { display: inline-flex; align-items: center; min-height: 44px; }
.article-header { padding-bottom: var(--space-4); }
.article-header h1 { font-size: clamp(2.25rem, 4vw, 3rem); max-width: 25ch; margin-bottom: var(--space-3); }
.article-standfirst { font-size: 1.25rem; line-height: 1.6; }
.article-byline { margin-top: var(--space-3); }
.article-contents { padding-block: var(--space-3); border-block: 1px solid var(--line); }
.article-contents h2 { font-size: 1.125rem; }
.article-contents ul { margin: 0; }
.article-contents a { display: inline-block; padding-block: .25rem; }
.article-body { padding-top: var(--space-4); font-size: 1.0625rem; line-height: 1.75; }
.article-body>section { margin-top: var(--space-5); scroll-margin-top: var(--space-4); }
.article-body h3 { margin-top: var(--space-4); }
.article-body p, .article-body ul { margin-bottom: var(--space-3); }
.article-body li { margin-bottom: var(--space-2); }
.article-body sup { line-height: 0; }
.article-body sup a { padding: .15rem; }
.wellbeing-model { margin: var(--space-4) 0; }
.wellbeing-model img { display: block; width: 100%; height: auto; }
.wellbeing-model figcaption { margin-top: var(--space-2); font-size: 1rem; font-weight: 600; }
.model-text { margin-top: var(--space-2); font-size: 1rem; }
.model-text summary { cursor: pointer; min-height: 44px; padding-block: var(--space-1); text-decoration: underline; text-underline-offset: .25em; }
.model-text dd { margin: 0 0 var(--space-2); }
.article-notes { font-size: 1rem; }
.article-notes li { overflow-wrap: anywhere; scroll-margin-top: var(--space-4); }
.article-support dd { margin: 0 0 var(--space-3); }
.article-services { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-5); }
.article-services h2 { font-size: 1.5rem; }
footer { padding-block: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: 1rem; }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .footer-brand { display: flex; align-items: center; min-height: 44px; }
.legal-body { padding-top: 0; }
.legal-body h2 { margin-top: var(--space-5); }
.legal-body h2:first-child { margin-top: 0; }
.footer-brand { font-weight: 600; color: var(--navy); }
.noscript { padding-block: var(--space-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -100px; color: var(--navy); background: var(--surface); padding: .75rem; z-index: 10; }
.skip-link:focus { top: .75rem; }
@media (max-width: 29rem) {
  .site-header { display: block; padding-block: var(--space-2); }
  .header-actions { justify-content: space-between; margin-top: var(--space-1); gap: var(--space-2); }
}
@media (min-width: 48rem) {
  .wrap { width: min(76rem, calc(100% - 4rem)); }
  .explore-stage { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .intro { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) clamp(2rem,4vw,4rem); }
  .intro-copy { display: block; }
  .intro-copy h1 { font-size: 3rem; max-width: 17ch; margin-bottom: var(--space-3); }
  .intro-art { width: min(15rem,75%); align-self: flex-end; margin-right: var(--space-2); }
  .explorer { padding: var(--space-5) clamp(2rem,4vw,4rem); }
  .is-selected .intro { padding: var(--space-3) max(2rem, calc((100% - 68rem)/2)); }
  .is-selected .explorer { padding-inline: 2rem; }
  .problem-heading { padding: var(--space-4); }
  .problem-heading h2 { font-size: 2rem; }
  .approach-summary { padding: var(--space-4); }
  .matching-services>div { display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); gap: var(--space-4); }
  .matching-services dt { margin: 0; }
  .commission { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-5); }
  .expertise { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: var(--space-5); }
  .white-paper { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-art img { animation: none; }
  .problem-list svg { transition: none; }
  .problem-list a:hover svg, .problem-list a:focus-visible svg { transform: none; }
}
@media (forced-colors: active) {
  .action-button.primary { border-color: ButtonText; }
  .problem-list li, .problem-heading { border: 1px solid CanvasText; }
}
@media print {
  @page { size: A4; margin: 18mm; }
  body { background: var(--surface); color: var(--navy); font-size: 11pt; }
  .wrap { width: 100%; }
  .header-actions, .intro, .service-nav, .back-link, .commission-section, .expertise, .white-paper, .result-actions, .copy-status, .manual-copy, footer { display: none !important; }
  .print-contact { display: block; margin: 0; }
  .explore-stage { display: block; }
  .site-header { padding-block: 0 1rem; }
  .explorer, .is-selected .explorer { background: var(--surface); padding: 1rem 0; }
  .problem-heading { padding: 0; background: var(--surface); }
  .approach-summary { background: var(--surface); color: var(--navy); padding: 1rem 0 0; }
  .matching-services>div { display: block; break-inside: avoid; padding: 1rem 0; }
  .article-tools, .article-contents, .article-services, .model-text { display: none !important; }
  .article-shell { width: 100%; max-width: none; }
  .article-body { font-size: 11pt; }
  .article-header h1 { font-size: 22pt; max-width: none; }
  .article-body h2, .article-body h3 { break-after: avoid; }
  .wellbeing-model { break-inside: avoid; }
}