/* Shared readable type scale. Keep this after the page-specific styles. */
:root {
  --text-body: 18px;
  --text-detail: 16px;
  --text-label: 13px;
  --text-caption: 12px;
  --muted: #53635a;
}

body { font-size: var(--text-body); line-height: 1.75; }
h1, h2, h3 { text-wrap: balance; }
.hero h1, .project-hero h1 { font-weight: 700; line-height: 1.1; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(48px, 5.3vw, 76px); }
.project-hero h1 { font-size: clamp(46px, 4.5vw, 66px); }
h2, .section-heading h2, .center-heading h2, .neighbourhood-copy h2,
.response-heading h2, .citizen-intro h2, .faq-layout h2,
.cta-section h2, .project-section h2, .dialog-content h2 {
  font-size: clamp(40px, 3.7vw, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.purpose-items h3, .municipal-grid .benefit-copy h3, .shared-roles h3,
.response-steps h3, .challenge-list h3, .context-note h3,
.foundation-grid h3, .identity-explainer h3, .operation-grid h3,
.civic-flow h3, .rwa-panel h3, .deployment-timeline h3,
.project-next h3, .roadmap h3, .subsection-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.photo-story h3, .city-banner-copy h3, .investment-panel h3 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
}

/* Navigation, buttons and the homepage. */
.header #navigation { gap: 24px; }
.header #navigation > a { font-size: 17px; font-weight: 650; }
.button, .button-small, .text-link, .hero-buttons .text-link,
.neighbourhood-copy .text-link, .photo-story .text-link,
.city-banner-copy .text-link, .municipal-bottom .text-link,
.checklist-footer .text-link, .faqs details .text-link,
.cta-buttons .text-link, .dialog-content .button,
.journey-preview-footer .button, .project-hero-actions .button,
.project-hero-actions .text-link, .presentation-actions .button,
.presentation-actions .text-link, .project-next .text-link {
  font-size: var(--text-detail);
  font-weight: 700;
  line-height: 1.5;
}
.button { min-height: 56px; padding: 15px 22px; }
.button-small { min-height: 48px; padding: 11px 17px; }
.hero-buttons, .project-hero-actions { flex-wrap: wrap; }
.hero-buttons .text-link, .cta-buttons .text-link,
.project-hero-actions .text-link { max-width: none; }
.eyebrow, .project-hero .eyebrow, .project-section-heading .eyebrow,
.rwa-panel .eyebrow, .investment-panel .eyebrow,
.operation-grid .eyebrow, .city-banner-copy .eyebrow,
.benefit-copy .feature-caption, .story-kicker {
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .09em;
}
.hero-description, .section-heading > div > p, .purpose-items p,
.photo-story p, .center-heading p:last-child,
.neighbourhood-copy > p:not(.eyebrow), .shared-roles p,
.municipal-grid .benefit-copy p, .city-banner-copy p,
.citizen-intro > p:not(.eyebrow), .citizen-actions .action small,
.response-heading > p:last-child, .response-steps p,
.faqs details > p, .cta-section > p:not(.eyebrow),
.journey-preview-footer p, .dialog-intro, .roadmap p {
  font-size: var(--text-body);
  line-height: 1.8;
}
.section-heading > div { display: block; }
.section-heading > div > p { max-width: 650px; margin-top: 22px; }
.principles { gap: 24px; }
.principles p, .principles > span { font-size: var(--text-detail); white-space: normal; }
.principles strong { font-weight: 700; }
.hero-note, .local-context, .benefit-outcome, .municipal-bottom p,
.municipal-bottom p span, .citizen-callout p, .checklist-label,
.checklist-footer > span, .save-feedback, .response-steps .reporting-note,
.footer-main p, .footer-main .text-link { font-size: var(--text-detail); }
.municipal-bottom strong { font-weight: 700; }
.footer-bottom { font-size: 14px; }
.shared-roles article > span, .purpose-items article > span,
.response-steps article > span { font-size: 14px; font-weight: 650; }
.identity-badge strong { font-size: 16px; font-weight: 700; }
.identity-badge div > span { font-size: 14px; }
.visual-label, .hero-visual .visual-label { font-size: 12px; }
.hero-visual .photo-caption, .city-image figcaption,
.citizen-photo figcaption, .neighbourhood-photo figcaption,
.response-photo figcaption { font-size: 15px; line-height: 1.6; }
.hero-visual .photo-caption { max-width: 250px; bottom: 35px; }
.hero-companion figcaption { font-size: 13px; line-height: 1.5; }
.hero-companion figcaption > span, .image-credit,
.concept-label, .citizen-photo .concept-label,
.response-photo .concept-label, .benefit-photo figcaption,
.small-concept { font-size: var(--text-caption); letter-spacing: .04em; white-space: normal; }
.neighbourhood-photo figcaption, .response-photo figcaption,
.citizen-photo figcaption { flex-wrap: wrap; }
.photo-story .story-copy { left: 28px; right: 28px; }
.purpose-statement.photo-story { min-height: 560px; }
.journey-preview-step > span { font-size: 18px; font-weight: 700; min-height: 112px; }
.journey-preview-step small { font-size: 14px; font-weight: 650; }
.citizen-actions .action strong { font-size: 21px; font-weight: 700; line-height: 1.4; }
.citizen-actions .action { align-items: start; }
.citizen-actions .custom-check { margin-top: 4px; }
.faqs summary { font-size: 20px; font-weight: 700; line-height: 1.5; }
.checklist-label { flex-wrap: wrap; }
.footer-main, .footer-bottom { flex-wrap: wrap; }
.roadmap li > span { font-size: var(--text-label); }

/* The complete project page and its care journey. */
.breadcrumb, .project-source, .project-source > span:last-child,
.source-link, .contents-download, .project-contents .contents-note,
.workflow-scope, .scope-note { font-size: var(--text-detail); }
.project-hero-copy > p:not(.eyebrow),
.project-section-heading > p:not(.eyebrow), .challenge-list p,
.context-note p, .foundation-grid p, .identity-explainer p,
.identity-summary p, .spec-list, .diagram-content > p,
.diagram-notes p, .civic-flow p, .rwa-panel p:not(.eyebrow),
.deployment-timeline p, .investment-panel > p:not(.eyebrow),
.presentation-section > p:not(.eyebrow), .project-next p {
  font-size: var(--text-body);
  line-height: 1.8;
}
.project-hero-photo figcaption { font-size: var(--text-detail); flex-wrap: wrap; }
.project-hero-photo figcaption > span:last-child { font-size: var(--text-caption); white-space: normal; }
.hero-project-tag { font-size: var(--text-label); font-weight: 650; }
.project-glance > div > span, .project-contents > p:first-child,
.challenge-list article > span, .civic-flow li > span,
.deployment-timeline li > span { font-size: var(--text-label); }
.project-glance strong { font-size: 30px; font-weight: 700; }
.project-glance p { font-size: var(--text-detail); line-height: 1.75; }
.project-body { grid-template-columns: 220px minmax(0, 1fr); gap: 42px; }
.project-contents nav a { font-size: 13px; align-items: baseline; font-weight: 650; }
.project-contents nav a span { font-size: 16px; }
.project-contents .contents-note { font-size: 14px; max-width: none; }
.identity-summary strong { font-size: 25px; font-weight: 700; line-height: 1.4; }
.diagram-disclosure summary, .mapping-disclosure summary,
.specification-table caption { font-size: 22px; font-weight: 700; line-height: 1.5; }
.diagram-disclosure summary small { font-size: var(--text-label); }
.source-diagram figcaption { font-size: 14px; }
.recognition-features span, .investment-parts span { font-size: var(--text-detail); }
.care-spec-section .record-top { font-size: 16px; flex-wrap: wrap; }
.care-spec-section .demo-label { font-size: 12px; }
.care-spec-section .stage-display h3 { font-size: 30px; font-weight: 700; }
.care-spec-section .stage-display > p:not(.eyebrow), .stage-checks { font-size: var(--text-body); line-height: 1.8; }
.care-spec-section .stage-display .eyebrow, .checks-title { font-size: var(--text-label); font-weight: 700; }
.care-spec-section #stage-tags { flex-wrap: wrap; }
.care-spec-section #stage-tags span, .care-spec-section .stage-source,
.care-spec-section .record-bottom { font-size: 14px; line-height: 1.7; }
.care-spec-section .care-record-line .record-id { font-size: 12px; line-height: 1.7; }
.care-spec-section .workflow-steps .step { padding: 20px 10px; gap: 12px; min-height: 142px; }
.care-spec-section .step-photo { width: 76px; height: 84px; }
.care-spec-section .step strong { font-size: 20px; font-weight: 700; line-height: 1.4; }
.care-spec-section .step small { font-size: var(--text-detail); line-height: 1.7; }
.care-spec-section .step-number { width: 32px; height: 32px; font-size: 13px; }
.care-spec-section .care-scene figcaption { flex-wrap: wrap; }
.care-spec-section #stage-image-caption { font-size: 14px; max-width: none; }
.care-spec-section .concept-label { font-size: var(--text-caption); }
.operations-photo figcaption { font-size: 15px; }
.projection-note strong { font-size: 38px; font-weight: 700; }
.projection-note strong span { font-size: 14px; }
.projection-note p, .mapping-disclosure p,
.mapping-disclosure dd { font-size: var(--text-detail); line-height: 1.8; }
.mapping-disclosure dt { font-size: 18px; font-weight: 700; }
.specification-table { font-size: 17px; }
.specification-table thead th { font-size: 14px; font-weight: 700; }
.specification-table tbody th { font-weight: 700; }
.specification-table td > a { font-size: 14px; }
.specification-table th:first-child { width: 27%; }
.specification-table th:last-child { width: 13%; }
.slide-index a { font-size: 17px; }
.slide-index a > span { font-size: 14px; }

@media (max-width: 1100px) {
  .header { height: 82px; }
  .header .menu-toggle { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: white; }
  .header .menu-toggle span { height: 1.5px; width: 21px; background: var(--green); }
  .header #navigation { display: none; position: absolute; top: 81px; left: 0; right: 0; background: white; box-shadow: 0 15px 20px #183f2910; padding: 20px 32px; flex-direction: column; align-items: stretch; gap: 0; }
  .header #navigation.open { display: flex; }
  .header #navigation > a { padding: 14px 0; font-size: 18px; }
  .header #navigation .button { align-self: start; padding: 14px 20px; margin-top: 12px; }
  .hero { gap: 36px; }
  .hero-buttons { align-items: start; flex-direction: column; gap: 18px; }
  .journey-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-body { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
  .project-hero { gap: 35px; }
  .project-hero h1 { font-size: 48px; }
  .project-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .project-glance > div:nth-child(3) { padding-left: 0; border: 0; }
  .care-spec-section .workflow-steps .step { gap: 18px; padding: 20px 16px; }
  .care-spec-section .step-photo { width: 95px; height: 84px; }
  .challenge-list { grid-template-columns: 1fr; }
  .identity-explainer, .operation-grid { grid-template-columns: 1fr; }
  .shared-roles h3 { font-size: 21px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 50px; }
  .hero-copy { max-width: 680px; }
  .hero h1 { font-size: 64px; }
  .hero-description { max-width: 630px; }
  .hero-buttons { flex-direction: row; align-items: center; }
  .hero-visual { width: min(100%, 540px); margin-inline: auto; }
  .purpose-grid { grid-template-columns: 1fr; gap: 35px; }
  .purpose-statement.photo-story { min-height: 510px; }
  .photo-story p { max-width: 470px; }
  .journey-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-preview-step > span { flex-direction: row; font-size: 18px; min-height: 92px; }
  .journey-preview-step img { height: 180px; }
  .project-hero { grid-template-columns: 1fr; }
  .project-hero-copy > p:not(.eyebrow) { max-width: 680px; }
  .project-hero h1 { max-width: 650px; font-size: 56px; }
  .project-hero-photo > img { height: auto; aspect-ratio: 3 / 2; }
  .project-body { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .project-contents nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .challenge-list { grid-template-columns: 1fr; }
  .challenge-list article { display: flex; gap: 18px; }
  .challenge-list article > span { margin-top: 4px; }
  .rwa-panel { grid-template-columns: 1fr; }
  .rwa-panel img { height: 330px; min-height: 0; }
  .specification-table th, .specification-table td { padding: 18px 14px; }
}

@media (max-width: 620px) {
  :root { --text-body: 17px; --text-detail: 16px; --text-label: 12px; --text-caption: 11px; }
  .header { height: 74px; }
  .header #navigation { top: 73px; padding-inline: 20px; }
  .hero h1 { font-size: clamp(43px, 12vw, 58px); }
  .project-hero h1 { font-size: clamp(40px, 11vw, 50px); }
  h2, .section-heading h2, .center-heading h2, .neighbourhood-copy h2,
  .response-heading h2, .citizen-intro h2, .faq-layout h2,
  .cta-section h2, .project-section h2, .dialog-content h2 { font-size: 36px; line-height: 1.2; }
  .purpose-items h3, .municipal-grid .benefit-copy h3, .shared-roles h3,
  .response-steps h3, .challenge-list h3, .context-note h3,
  .foundation-grid h3, .identity-explainer h3, .operation-grid h3,
  .civic-flow h3, .rwa-panel h3, .deployment-timeline h3,
  .project-next h3, .roadmap h3, .subsection-title { font-size: 22px; }
  .photo-story h3, .city-banner-copy h3, .investment-panel h3 { font-size: 30px; }
  .hero-buttons { flex-direction: column; align-items: start; gap: 20px; }
  .hero-buttons .button, .cta-buttons .button { font-size: 16px; min-height: 54px; }
  .hero-note { align-items: start; }
  .hero-note svg { margin-top: 5px; }
  .hero-visual .identity-badge { padding: 12px; gap: 9px; }
  .identity-badge strong { font-size: 14px; }
  .identity-badge div > span { font-size: 12px; }
  .hero-visual .visual-label { font-size: 11px; }
  .hero-visual .photo-caption { max-width: 165px; font-size: 13px; bottom: 35px; }
  .hero-companion figcaption { font-size: 12px; }
  .image-credit { left: 15px; }
  .principles p, .principles > span { font-size: 17px; }
  .photo-story .story-copy { left: 24px; right: 24px; }
  .purpose-statement.photo-story { min-height: 535px; }
  .journey-preview { grid-template-columns: 1fr; }
  .journey-preview-step img { width: 90px; height: 115px; }
  .journey-preview-step > span { padding: 15px 16px; gap: 10px; min-height: 115px; }
  .citizen-actions .action { grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
  .citizen-actions .action-photo { grid-column: 2; width: 100%; height: 160px; }
  .citizen-actions .action-copy { grid-column: 2; }
  .citizen-actions .custom-check { grid-column: 1; grid-row: 1; width: 24px; height: 24px; }
  .citizen-actions .action strong { font-size: 21px; }
  .faqs summary { font-size: 19px; }
  .footer-main .text-link { font-size: 14px; }
  .footer-bottom { font-size: 13px; }
  .project-hero-photo figcaption { align-items: start; flex-direction: column; gap: 6px; }
  .project-hero-photo figcaption > span:first-child { max-width: none; }
  .hero-project-tag { font-size: 12px; right: 13px; }
  .project-contents nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-contents nav a { gap: 7px; padding: 10px 5px; }
  .project-contents nav a span { font-size: 15px; }
  .project-glance strong { font-size: 27px; }
  .project-glance p { font-size: 16px; }
  .diagram-disclosure summary, .mapping-disclosure summary { font-size: 20px; }
  .diagram-disclosure summary small { font-size: 12px; }
  .care-spec-section .workflow-steps .step { display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; padding: 18px 12px; gap: 12px; }
  .care-spec-section .step-photo { width: 82px; height: 74px; }
  .care-spec-section .step-number { grid-column: 1; grid-row: 1; }
  .care-spec-section .step-photo { grid-column: 2; grid-row: 1; }
  .care-spec-section .step-copy { grid-column: 2 / -1; grid-row: 2; }
  .care-spec-section .step > svg { grid-column: 3; grid-row: 1; margin-left: 0; }
  .care-spec-section .record-top { font-size: 15px; }
  .care-spec-section .stage-display h3 { font-size: 28px; }
  .care-spec-section #stage-image-caption { font-size: 14px; }
  .slide-index { grid-template-columns: 1fr; }
  /* Stack each specification while retaining the table's semantic markup. */
  .specification-table, .specification-table tbody, .specification-table caption { display: block; width: 100%; }
  .specification-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .specification-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); padding: 20px 18px; gap: 10px 14px; }
  .specification-table tbody th, .specification-table tbody td { border: 0; padding: 0; width: auto; font-size: 17px; line-height: 1.8; }
  .specification-table tbody th { grid-column: 1; grid-row: 1; font-size: 18px; }
  .specification-table tbody th:first-child { width: auto; overflow-wrap: normal; }
  .specification-table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .specification-table tbody td:last-child { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .specification-table caption { padding: 20px 18px; font-size: 22px; }
  .specification-table td > a { font-size: 14px; }
}