/* Text-flow refinements for the current prototypes. Long copy remains responsive. */

/* Use the available heading column instead of imposing an extra narrow measure. */
.hero__title,
.page-hero__title,
.about-hero__title,
.contact-hero__title,
.svc-hero__title,
.who__head .section-intro__title,
.quality__head .section-intro__title {
  max-width: 100%;
}

/* Short headings stay on one line when they fit; longer ones wrap naturally. */
h1, h2, h3,
.faq summary,
.field label {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

p, li, dd {
  text-wrap: pretty;
}

.btn,
.nav-toggle,
.brand__name,
.field label .opt,
a[href^="tel:"],
a[href^="https://wa.me/"],
.standard__code,
.dates time,
.soon {
  white-space: nowrap;
}

.btn { max-inline-size: 100%; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* A quiet legal note, followed by a distinct company-information row. */
.footer-bottom {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding-top: 24px;
}

.footer-legal {
  max-width: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-dark-muted);
}

.footer-legal strong {
  color: var(--on-dark);
  font-weight: 500;
}

.footer-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  grid-column: 1 / -1;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--on-dark-line);
  font-size: 13.5px;
  line-height: 1.65;
  text-align: left;
  text-wrap: wrap;
}

.footer-copy__copyright { color: var(--on-dark); font-weight: 500; }
.footer-copy__registration { margin-inline-start: auto; }
.footer-copy > span { min-inline-size: 0; white-space: normal; }
.footer-copy__registration { white-space: nowrap; }

@media (max-width: 759px) {
  .footer-copy { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-copy__registration { margin-inline-start: 0; }
  .footer-copy > span { white-space: normal; }
}

/* A long outstanding review note is one box rather than several inline fragments. */
.tbc {
  display: inline-block;
  max-inline-size: 100%;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Let grid and flex children use their column without forcing page overflow. */
.footer-col,
.brand__text,
.contact-dl dd,
.legal-contact dd,
.contact-list dd,
.details dd {
  min-inline-size: 0;
}

/* Give the contact block enough room for one complete telephone number. */
@media (max-width: 699px) {
  .footer-cols > .footer-col:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .footer-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(210px, 1.25fr);
  }
}

/* Keep the brand and menu readable together on the smallest supported phones. */
@media (max-width: 359px) {
  .site-header__inner { gap: 12px; }
  .brand { gap: 8px; }
  .nav-toggle { gap: 8px; padding-inline: 10px; }
}

/* =========================================================
   Shared type scale (19 Oct 2026, Decision Log #67)
   One scale for every page. Sizes grow smoothly from a 390px phone to a 1440px desktop.
   Body text (17px), navigation (15px) and buttons (16px) are unchanged.
   ========================================================= */

/* Homepage headline: 40px -> 64px */
.hero__title { font-size: clamp(2.5rem, 1.943rem + 2.286vw, 4rem); }

/* Page titles on every other page: 36px -> 52px */
.page-hero__title,
.svc-hero__title,
.about-hero__title,
.contact-hero__title,
.who-hero__title,
.legal-hero__title { font-size: clamp(2.25rem, 1.879rem + 1.524vw, 3.25rem); }

/* Section headings: 28px -> 40px */
.section-intro__title,
.why__title,
.enquiry__title,
.cta-band__title,
.intl .section-intro__title { font-size: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem); }

/* Headings inside long reading pages (legal pages): 24px -> 28px */
.legal__section h2 { font-size: clamp(1.5rem, 1.407rem + .381vw, 1.75rem); }

/* Card and panel titles: 20px -> 24px */
.svc__title,
.area__title,
.contact-side h2,
.contact-form-wrap h2 { font-size: clamp(1.25rem, 1.157rem + .381vw, 1.5rem); }

/* Item and sub-headings: 18px -> 20px */
.prose h3,
.legal__section h3,
.pathway__title,
.after__item h3,
.step__title,
.who__title,
.partners__title,
.article__title,
.audience__title,
.track__title,
.route__title,
.approach h3,
.commit h3,
.criteria h3,
.aside-note h3 { font-size: clamp(1.125rem, 1.079rem + .19vw, 1.25rem); }

/* Introductions under page titles: 18px -> 20px */
.hero__lead,
.page-hero__lead,
.svc-hero__lead,
.about-hero__lead,
.contact-hero__lead,
.who-hero__lead { font-size: clamp(1.125rem, 1.079rem + .19vw, 1.25rem); }

/* Small uppercase labels: 13px minimum for legibility */
.kicker,
.footer-col__title { font-size: 13px; }

/* Text links inside dark green sections: gold for readable contrast (19 Oct 2026). */
.section--dark p a:not(.btn),
.section--dark li a:not(.btn) { color: var(--gold-400); text-decoration-color: currentColor; }

/* UX F5 (21 Oct 2026): minimum text size 13 px for visitor-facing labels and captions.
   Review-only markers (.tbc, .soon, .review-bar) are excluded. Map panel and photo captions are raised in map-snapshot.css and photography.css, which load later. */
.svc__question-kicker, .photo-slot__label, .brand__tag,
.about-facts dt, .details dt, .route__no, .route__who, .track__label, .compare td::before,
.toc__label, .svc-jump__label, .hero__map-caption, .article__cat, .status { font-size: 13px; }

/* =====================================================================
   UI refinement layer (25 Oct 2026, Decision Log #119)
   One type scale for every page, readable line lengths, consistent
   accordions, tables and closing bands. Colours are the existing tokens.
   ===================================================================== */

/* 1. Type scale (desktop: page titles 44 to 48 px, sections 28 to 34 px, subsections 20 to 24 px) */
.hero__title { font-size: clamp(2.375rem, 1.55rem + 2.6vw, 3rem); line-height: 1.06; }
.page-hero__title, .svc-hero__title, .who-hero__title, .about-hero__title, .contact-hero__title { font-size: clamp(2.125rem, 1.55rem + 1.9vw, 2.875rem); line-height: 1.08; letter-spacing: -0.028em; }
.section-intro__title, .enquiry__title, .cta-band__title, .why__title, .intl .section-intro__title { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.125rem); line-height: 1.15; letter-spacing: -0.022em; }
.area__title, .svc__title { font-size: clamp(1.375rem, 1.25rem + 0.45vw, 1.5rem); line-height: 1.2; }
.pathway__title, .track__title, .route__title, .audience__title, .who__title, .step__title, .roles-terms__title, .subhead, .glance__title { font-size: clamp(1.25rem, 1.18rem + 0.25vw, 1.375rem); line-height: 1.3; }
.article__title { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); }
main h3 { letter-spacing: -0.012em; }

/* 2. Body text: 16 to 18 px, comfortable leading, no long text below 16 px */
main p, main li, main dd { line-height: 1.65; }
.step p, .route__step p, .track p, .pathway p, .roles-line li, .next-steps li, .confidential p,
.contact-panel__note, .contact-panel li, .aside-note, .nmra-flow__steps, .nmra-flow__steps li, .route__stages,
.who__item p, .standard__desc, .why__point dd, .aud__block .rule-list li, .expertise__row p, .commit p { font-size: 16.5px; }
.cta-band__note, .fineprint, .next-steps__note, .article-meta, .facts__note, .nmra-flow__note, .table-note { font-size: 15px; line-height: 1.6; }
.svc__desc { font-size: 16.5px; line-height: 1.65; }
.section-intro__text { font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); line-height: 1.65; }

/* 3. Line length: long paragraphs stop at a readable measure */
main p { max-width: 66ch; }
main .section-intro__text { max-width: 62ch; }
main li { max-width: 72ch; }

/* 4. Hierarchy: small labels stay small, but clearly labels */
.kicker { font-size: 13px; letter-spacing: 0.13em; }
.facts__title, .sources__title, .docgroup__title, .statement__title, .dates-band__title, .glance__label { font-size: 13px; letter-spacing: 0.12em; color: var(--ink-700); }

/* 5. Accordions: one consistent, clearly expandable pattern */
main details { border-bottom: 1px solid var(--line); }
main details > summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 18px 56px 18px 0; font-family: var(--font-head); font-size: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); font-weight: 600; line-height: 1.4; color: var(--ink-900); }
main details > summary::-webkit-details-marker { display: none; }
main details > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--green-700); border-radius: 50%; font-size: 20px; font-weight: 500; line-height: 1; color: var(--green-700); transition: background-color .15s ease, color .15s ease; }
main details[open] > summary::after { content: "−"; background: var(--green-700); color: #fff; }
main details > summary:hover { color: var(--green-700); }
main details > summary:hover::after { background: rgba(30, 103, 11, 0.08); }
main details[open] > summary:hover::after { background: var(--green-800); }
main details > summary:focus-visible { outline: 3px solid var(--green-700); outline-offset: 4px; border-radius: 2px; }
main details[open] > summary { color: var(--green-700); }
main details > :not(summary) { margin-right: 56px; }
main details > :last-child:not(summary) { margin-bottom: 24px; }
main details > p, main details li { font-size: 16.5px; }
main details > p + p { margin-top: 12px; }
main details ul, main details ol { margin: 8px 0 12px; }
.section--dark details > summary, .cta-band details > summary { color: #fff; }
@media (max-width: 699px) {
  main details > summary { padding-right: 48px; }
  main details > :not(summary) { margin-right: 0; }
}

/* 6. Tables: readable, with quiet rules; wide tables scroll inside their box on phones */
main table { border-collapse: collapse; }
main table th, main table td { padding: 14px 18px 14px 0; vertical-align: top; }
main table thead th { color: var(--green-700); font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--ink-900); }
main table tbody tr + tr th, main table tbody tr + tr td { border-top: 1px solid var(--line); }

/* 7. Closing call-to-action bands: one consistent pattern on every page */
.cta-band__inner { align-items: center; }
.cta-band__text { font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); line-height: 1.6; color: var(--on-dark); }
.cta-band__actions { gap: 12px; }

/* 8. Buttons and links: consistent height, visible focus, clear underlines */
.btn { min-height: 50px; padding: 13px 24px; font-size: 16px; }
.btn--sm { min-height: 44px; }
.btn--outline { border: 1.5px solid var(--green-700); color: var(--green-700); background: transparent; }
.btn--outline:hover { background: var(--green-700); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.hero .btn:focus-visible, .section--dark .btn:focus-visible, .cta-band .btn:focus-visible, .enquiry__panel .btn:focus-visible { outline-color: var(--gold-400); }
main .prose a, main p a:not(.btn):not(.arrow-link), main li a:not(.btn), main td a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.arrow-link:hover { text-decoration-color: currentColor; }

/* 9. Mobile: titles and spacing adapted, not just scaled */
@media (max-width: 599px) {
  .hero__title { font-size: 2.25rem; }
  .page-hero__title, .svc-hero__title, .who-hero__title, .about-hero__title, .contact-hero__title { font-size: 2rem; }
  .section-intro__title, .enquiry__title, .cta-band__title { font-size: 1.625rem; }
  .cta-band__actions .btn, .hero__actions .btn { width: 100%; }
}
/* Older, more specific rules that kept long text at 15 to 15.5 px */
main .contact-panel p, main .contact-panel li, main .aside-note, main .route__stages, main .route__stages li, main .route__step p, main .roles-line li, main .next-steps li { font-size: 16.5px; }
main .contact-panel__note { font-size: 15.5px; }

/* Final visual review (Decision Log #121) */
/* Homepage service cards: links line up along the bottom; a quiet photo response on hover */
.svc__body { display: flex; flex-direction: column; flex: 1; }
.svc__body .svc__link { margin-top: auto; padding-top: 16px; }
.svc__photo img { transition: transform .5s ease; }
.svc:hover .svc__photo img, .svc:focus-within .svc__photo img { transform: scale(1.035); }
.svc--borderline .svc__question { transition: background-color .3s ease; }
.svc--borderline:hover .svc__question { background: var(--green-800); }
/* Map panel values: one item per line */
.map-snapshot__value--system { line-height: 1.35; }
/* Contact actions: equal, full-width buttons on phones */
@media (max-width: 599px) {
  .contact-panel__actions { display: grid; gap: 10px; }
  .contact-panel__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .svc__photo img { transition: none; } .svc:hover .svc__photo img { transform: none; } }
/* Labels that introduce a group of panels need air above them */
.docgroup__title { margin-top: 40px; margin-bottom: 4px; }
.fineprint + .docgroup__title, .prose + .docgroup__title { margin-top: 44px; }
.track + .reg-callout, .track + .prose { margin-top: 28px; }
/* Plain lists inside running text keep their bullets */
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; margin: 10px 0 16px; }
.prose ul:not([class]) { list-style: disc; }
.prose ol:not([class]) { list-style: decimal; }
.prose ul:not([class]) li, .prose ol:not([class]) li { margin: 6px 0; padding-left: 4px; }
.prose ul:not([class]) li::marker { color: var(--green-700); }
/* A group of panels that follows other content gets a clear gap above it */
:is(figure, .routes, .route, .pathways, .prose, .track, p, ul, ol, table, .table-scroll, .nmra-flow, .reg-callout) + .faq { margin-top: 28px; }
/* About, areas of work: the link column fits its longest label instead of overlapping the description */
@media (min-width: 900px) { .expertise__row { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(max-content, 2.4fr); } }
.expertise__link { text-align: right; }
/* Homepage map panel on phones: give the facts more room, keep the map as a smaller companion */
@media (max-width: 599px) {
  .map-snapshot__stage { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) !important; gap: 8px !important; }
  .map-snapshot__value--system { font-size: 1.0625rem; }
}