@font-face{font-family:"DM Sans";font-weight:500;font-style:normal;src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;src:url(fonts/dm-sans-latin-700-normal.woff2) format("woff2");}
@font-face{font-family:"Noto Sans";font-weight:400;font-style:normal;src:url(fonts/noto-sans-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Noto Sans";font-weight:600;font-style:normal;src:url(fonts/noto-sans-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Noto Sans";font-weight:700;font-style:normal;src:url(fonts/noto-sans-latin-700-normal.woff2) format("woff2");}
.hwl-logo{background:url(img/hwl-logo.png) center/contain no-repeat;}
/* Shared page geometry for every print design. The designs restyle colours and type,
   but keep the heights marked FIXED: scripts/build-print.mjs relies on them to work out
   index page numbers (29 rows on a first index page, 36 on the rest, rows 6.4mm). */
@page { size: A4; margin: 0; }
:root {
  --teal: #0b6b6b; --dark: #0b5c5c; --text: #17303a; --grey: #4f5f5e; --light: #e4f3f1;
  --border: #e0d5bf; --cream: #f9f0e1; --mint: #f4faf9; --accent: #3db0ae; --slate: #5a6e8c;
  --warn-bg: #fff4d6; --warn: #7a5900;
  --hf: "DM Sans", "Segoe UI", Arial, sans-serif; --bf: "Noto Sans", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--bf); color: var(--text); font-size: 10.5pt; line-height: 1.42; background: #8a9594; }
h1, h2, h3, h4, .kicker, .badge { font-family: var(--hf); }

.page {
  width: 210mm; height: 297mm; position: relative; overflow: hidden; background: #fff;
  padding: 30mm 15mm 20mm; display: flex; flex-direction: column;
  break-after: page; page-break-after: always; margin: 0 auto;
}
@media screen { .page { margin: 8mm auto; box-shadow: 0 2px 12px rgba(0,0,0,.25); } }
.page:last-child { break-after: auto; page-break-after: auto; }

/* FIXED: brand bar is 22mm, out of the flow */
.brandbar { position: absolute; top: 0; left: 0; right: 0; height: 22mm; padding: 0 15mm; display: flex; align-items: center; gap: 4mm; }
.brandbar .hwl-logo { height: 13mm; width: 16.7mm; display: block; flex: none; }
.bb-text { font-family: var(--hf); font-weight: 700; font-size: 12pt; }
.bb-cov { margin-left: auto; font-family: var(--hf); font-weight: 700; font-size: 9pt; }
.tab { display: none; }

.pfoot { position: absolute; left: 15mm; right: 15mm; bottom: 8mm; display: flex; justify-content: space-between; align-items: baseline; font-size: 8.5pt; color: var(--grey); }
.pf-num { font-family: var(--hf); font-weight: 700; font-size: 11pt; color: var(--text); }

/* ---------- index pages ---------- */
.ix-head { height: 16mm; overflow: hidden; margin: 0; }          /* FIXED */
.ix-head.first { height: 44mm; }                                  /* FIXED */
.ix-head .kicker { margin: 0 0 1mm; font-size: 9.5pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ix-head h1 { margin: 0 0 3mm; font-size: 24pt; line-height: 1.1; }
.ix-head h1.cont { font-size: 15pt; }
.ix-head h1.cont span { font-weight: 500; font-size: 11pt; }
.ix-intro { font-size: 9.6pt; line-height: 1.4; }
.ix-intro p { margin: 0 0 1.8mm; }
.legend .hwl, .hwl { color: var(--accent); }
.ix { list-style: none; margin: 0; padding: 0; }
.ix li { height: 6.4mm; display: flex; align-items: center; gap: 3mm; white-space: nowrap; overflow: hidden; } /* FIXED */
.ix li.grp { height: 12.8mm; align-items: flex-end; padding-bottom: 1.4mm; font-family: var(--hf); font-weight: 700; font-size: 12pt; }
.ix li.grp .cnt { margin-left: auto; font-size: 8.5pt; font-weight: 500; }
.ix .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 9.6pt; }
.ix .nm .hwl { margin-right: 1.2mm; }
.ix .og { font-weight: 400; color: var(--grey); }
.ix .ar { flex: none; width: 27mm; text-align: center; font-family: var(--hf); font-size: 7.6pt; font-weight: 700; padding: .3mm 0; border-radius: 1.2mm; }
.ix .dots { display: none; }
.ix .pg { flex: none; width: 9mm; text-align: right; font-family: var(--hf); font-weight: 700; font-size: 10pt; }

/* ---------- service pages ---------- */
.svc-head { display: flex; gap: 5mm; align-items: center; margin: 0 0 5mm; flex: none; }
.thumb { flex: none; width: 32mm; height: 23mm; border-radius: 2.5mm; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb.logo { background: #fff; border: .3mm solid var(--border); padding: 2mm; }
.thumb.logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.thumb span { font-family: var(--hf); font-weight: 700; font-size: 26pt; color: rgba(255,255,255,.9); }
.thumb-0 { background: linear-gradient(135deg, #b9aee0 0%, #d9c8f0 40%, #8fa6c8 75%, #4d6a8c 100%); }
.thumb-1 { background: linear-gradient(135deg, #b7c9d6 0%, #e7b9a0 55%, #f2c7a8 100%); }
.thumb-2 { background: linear-gradient(135deg, #c5d2b8 0%, #a9bd9c 60%, #92a887 100%); }
.thumb-3 { background: linear-gradient(135deg, #f1d3a8 0%, #e9b7b0 55%, #c9a6c8 100%); }
.thumb-4 { background: linear-gradient(135deg, #a9d6d4 0%, #8dbcc9 50%, #7a9fc2 100%); }
.ttl { flex: 1; min-width: 0; }
.ttl h2 { margin: 0 0 .6mm; font-size: 21pt; line-height: 1.12; }
.ttl .org { margin: 0 0 2.5mm; font-size: 11pt; }
.badges { display: flex; flex-wrap: wrap; gap: 1.5mm; }
.badge { font-size: 8.4pt; font-weight: 700; padding: .5mm 2mm; border-radius: 1.5mm; border: .3mm solid var(--border); background: #f4f1ea; color: var(--text); }
.badge.live { background: #d9efe2; border-color: #b6dcc6; color: #00562a; }
.badge.notopen { background: var(--warn-bg); border-color: #ecd49a; color: var(--warn); }
.badge.self { background: #dff0ef; border-color: #bfe0dd; color: var(--dark); }
.badge.hwlb { background: var(--dark); border-color: var(--dark); color: #fff; }

.fit { flex: 1; min-height: 0; overflow: hidden; }
.svc-body { display: grid; grid-template-columns: 1fr 64mm; gap: 6mm; align-items: start; }
.svc-body h3 { margin: 4mm 0 1.2mm; font-size: 11.5pt; }
.svc-body .main > :first-child, .svc-body .side > :first-child { margin-top: 0; }
.svc-body ul { margin: 0; padding-left: 4.5mm; }
.svc-body li { margin: 0 0 1mm; overflow-wrap: anywhere; }
.svc-body p { margin: 0 0 1.5mm; overflow-wrap: anywhere; }
.whofor { font-size: 1.12em; line-height: 1.4; font-weight: 600; }
.dur { color: var(--grey); }
.areas span { font-weight: 700; }
.contact { margin: 0; }
.contact .ct { margin: 0 0 1.6mm; }
.contact dt { font-family: var(--hf); font-weight: 700; font-size: 8.4pt; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.contact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.selfnote { font-style: italic; color: var(--grey); }
.qr { display: flex; align-items: center; gap: 3mm; margin-top: 4mm; }
.qr svg { width: 20mm; height: 20mm; flex: none; }
.qr span { font-size: 8.4pt; color: var(--grey); }
.checked { flex: none; margin-top: 3mm; font-size: 8.6pt; color: var(--grey); }
.checked strong { color: var(--warn); }

/* ---------- cover ---------- */
.cover { padding: 20mm 18mm 22mm; }
.cover-logo { width: 62mm; height: auto; display: block; }
.cover-main { flex: 1; }
.cover .kicker { margin: 12mm 0 2mm; font-size: 10pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cover h1 { margin: 0; font-size: 46pt; line-height: 1.02; }
.cover .lede { margin: 4mm 0 9mm; font-size: 15pt; line-height: 1.3; max-width: 150mm; }
.contents { list-style: none; margin: 0 0 9mm; padding: 0; }
.contents li { display: flex; align-items: baseline; gap: 2mm; padding: 2.2mm 0; font-size: 11pt; font-weight: 600; }
.contents li .dots { flex: 1; border-bottom: .35mm dotted currentColor; opacity: .45; transform: translateY(-1mm); }
.contents li span:last-child { font-family: var(--hf); font-weight: 700; }
.howto h2 { margin: 0 0 2mm; font-size: 13pt; }
.howto ul { margin: 0; padding-left: 5mm; }
.howto li { margin: 0 0 1.4mm; }
.cover-online { display: flex; align-items: center; gap: 5mm; position: relative; z-index: 1; }
.cover-online svg { width: 24mm; height: 24mm; }
.cover-online strong { display: block; font-family: var(--hf); font-size: 12pt; }
.cover-online span { font-size: 9.5pt; }
.cover-band { display: none; }


/* long entries (set by the fitting script) */
.compact .svc-head { margin-bottom: 3mm; }
.compact .svc-body { grid-template-columns: 1fr 56mm !important; gap: 5mm; line-height: 1.32; }
.compact .svc-body h3 { margin-top: 2.6mm; }
.compact .svc-body li { margin-bottom: .5mm; }
.compact .side { padding: 3mm 3.5mm !important; }
.compact .qr svg { width: 16mm; height: 16mm; }
.compact .whofor { font-size: 1.05em; }

/* links: index entries go to the service's page, contents rows to the index or
   section, and "Support Finder" in the brand bar back to the contents on the cover */
a { color: inherit; text-decoration: none; }
.ix li.row > a { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 3mm; }
.contents li > a { flex: 1; display: flex; align-items: baseline; gap: 2mm; }

/* "Print this page" button on each service page: on screen only */
.print-one { margin-left: 4mm; font-family: var(--hf); font-weight: 700; font-size: 9pt; padding: 1.4mm 3.5mm; border-radius: 1.5mm; border: .4mm solid var(--teal); background: var(--teal); color: #fff; cursor: pointer; }
.print-one:hover { background: var(--dark); }
.print-one:focus-visible { outline: .8mm solid #ffeb3b; outline-offset: .5mm; }
@media print {
  .print-one { display: none; }
  body.printing-one .page:not(.print-target) { display: none; }
  body.printing-one .page.print-target { margin: 0; box-shadow: none; break-after: auto; page-break-after: auto; }
}

/* ---------- on screen only: the bar at the top, and fitting the pages to the window ---------- */
.screen-bar { display: none; }
@media screen {
  body { padding-top: 1px; }
  .screen-bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 2mm 5mm; padding: 2.5mm 4mm; background: var(--dark); color: #fff; font-family: var(--hf); font-size: 11pt; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
  .screen-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
  .sb-title { flex: 1; min-width: 50mm; opacity: .9; }
  .sb-print { font: inherit; font-weight: 700; padding: 1.6mm 4mm; border-radius: 1.5mm; border: .4mm solid #fff; background: #fff; color: var(--dark); cursor: pointer; }
  .sb-print:hover { background: var(--light); }
  .screen-bar a:focus-visible, .sb-print:focus-visible { outline: .8mm solid #ffeb3b; outline-offset: .5mm; }
  .page { zoom: var(--screen-scale, 1); }
  /* jumping to a page from an index leaves it clear of the bar (set on the root, so zoom doesn't shrink it) */
  html { scroll-padding-top: 5.5rem; }
}
@media screen and (max-width: 640px) {
  .screen-bar { gap: 2mm 3mm; padding: 2mm 3mm; font-size: 10.5pt; }
  .sb-title { display: none; }
  .sb-print { margin-left: auto; padding: 1.2mm 3mm; }
}
@media print { .screen-bar { display: none !important; } }

/* ---------- logo link and search (search is on screen only) ---------- */
.bb-logo { display: block; flex: none; border-radius: 1mm; }
.bb-logo:focus-visible { outline: .8mm solid #ffeb3b; outline-offset: .5mm; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media screen {
  .sb-search { position: relative; flex: 0 1 95mm; min-width: 60mm; }
  .sb-search input { width: 100%; font: inherit; font-family: var(--bf); font-size: 11pt; padding: 1.6mm 3mm; border-radius: 1.5mm; border: .4mm solid #fff; background: #fff; color: var(--text); }
  .sb-search input:focus-visible { outline: .8mm solid #ffeb3b; outline-offset: .5mm; }
  .sb-results { position: absolute; top: calc(100% + 1.5mm); left: 0; right: 0; min-width: 90mm; max-height: min(70vh, 140mm); overflow-y: auto; margin: 0; padding: 1mm 0; list-style: none; background: #fff; color: var(--text); border-radius: 2mm; box-shadow: 0 4px 18px rgba(0,0,0,.3); z-index: 20; }
  .sb-results li a { display: grid; grid-template-columns: 1fr auto; gap: .3mm 3mm; padding: 2mm 3.5mm; color: var(--text); text-decoration: none; font-weight: 400; }
  .sb-results li + li a { border-top: .25mm solid var(--light); }
  .sb-results li a:hover, .sb-results li a:focus { background: var(--light); outline: none; }
  .sb-results .r-name { font-family: var(--hf); font-weight: 700; color: var(--dark); }
  .sb-results .r-meta { grid-column: 1; font-size: 9.5pt; color: var(--grey); }
  .sb-results .r-page { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--hf); font-weight: 700; color: var(--dark); white-space: nowrap; }
  .sb-results .sb-none { padding: 2mm 3.5mm; font-size: 10pt; color: var(--grey); }
}
@media screen and (max-width: 640px) {
  .sb-search { order: 3; flex: 1 1 100%; min-width: 0; }
  html { scroll-padding-top: 8.5rem; } /* the bar takes two rows here */
  .sb-results { min-width: 0; }
}

/* Clear print: white paper, bigger text, black type with teal rules only and outlined
   badges. Uses the least ink and reads well on a black and white printer or photocopier. */
.design-c body, body.design-c { font-size: 11.4pt; line-height: 1.45; }
.design-c .page { color: #111; }
.design-c .brandbar { border-bottom: .6mm solid var(--teal); margin: 0 15mm; padding: 0; }
.design-c .bb-text { color: var(--teal); font-weight: 500; }
.design-c .bb-cov { color: #111; font-size: 10pt; text-transform: uppercase; letter-spacing: .05em; }
.design-c .pfoot { color: #333; border-top: .25mm solid #bbb; padding-top: 2mm; }
.design-c .pf-num { color: #111; font-size: 13pt; }

.design-c .svc-head { padding-bottom: 4mm; border-bottom: .3mm solid #bbb; }
.design-c .thumb { width: 28mm; height: 20mm; }
.design-c .thumb:not(.logo) { background: #fff !important; border: .5mm solid var(--teal); }
.design-c .thumb:not(.logo) span { color: var(--teal); }
.design-c .thumb.logo { border-color: #ccc; }
.design-c .ttl h2 { color: #111; font-size: 24pt; }
.design-c .ttl .org { color: #333; font-size: 12pt; }
.design-c .badge, .design-c .badge.live, .design-c .badge.self, .design-c .badge.notopen, .design-c .badge.hwlb { background: #fff; border: .35mm solid #555; color: #111; font-size: 9pt; }
.design-c .badge.live::before, .design-c .badge.self::before { content: "\2713\00a0"; color: var(--teal); }
.design-c .badge.notopen { border-style: dashed; }
.design-c .badge.hwlb { border-color: var(--teal); border-width: .6mm; color: var(--dark); }
.design-c .svc-body { grid-template-columns: 1fr 66mm; gap: 7mm; }
.design-c .svc-body h3 { color: #111; font-size: 12.5pt; padding-left: 3mm; border-left: 1.4mm solid var(--teal); line-height: 1.15; margin-top: 5mm; }
.design-c .whofor { font-size: 1.1em; }
.design-c .side { border: .4mm solid #999; border-radius: 2mm; padding: 4mm; }
.design-c .contact dt { color: #333; }
.design-c .contact dd { font-size: 1.05em; }
.design-c .selfnote, .design-c .dur, .design-c .qr span, .design-c .checked { color: #333; }
.design-c .checked strong { color: #111; }

/* index */
.design-c .ix-head .kicker { color: var(--teal); }
.design-c .ix-head h1 { color: #111; }
.design-c .ix li.row { border-bottom: .25mm dotted #999; }
.design-c .ix .nm { font-size: 10pt; }
.design-c .ix .og { color: #444; }
.design-c .ix li.grp { color: #111; border-bottom: .6mm solid var(--teal); font-size: 13pt; }
.design-c .ar { border: .3mm solid #777; color: #111; font-weight: 500; }
.design-c .ar-north, .design-c .ar-south, .design-c .ar-both { font-weight: 700; border-width: .5mm; border-color: var(--teal); }
.design-c .hwl { color: var(--teal); }

/* cover */
.design-c .cover-logo { width: 54mm; }
.design-c .cover .kicker { color: var(--teal); }
.design-c .cover h1 { color: #111; font-size: 50pt; border-bottom: 1.6mm solid var(--teal); padding-bottom: 4mm; display: inline-block; }
.design-c .cover .contents li { border-bottom: .3mm solid #bbb; font-size: 12pt; }
.design-c .cover .howto { border: .4mm solid #999; border-radius: 2mm; padding: 4mm 5mm; }
.design-c .cover .howto li { font-size: 11pt; }

/* cover contents in two lists, and space kept for the web address and QR code */
.design-c .contents-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 9mm; margin: 0 0 8mm; }
.design-c .contents-wrap .contents { margin: 0; }
.design-c .cover .contents li { font-size: 10.5pt; }
.design-c .cover .contents li.ch { display: block; font-family: var(--hf); font-weight: 700; font-size: 9.5pt; color: var(--teal); text-transform: uppercase; letter-spacing: .05em; border-bottom: .6mm solid var(--teal); padding-bottom: 1.2mm; }
.design-c .cover-online { min-height: 24mm; }

/* section divider pages */
.design-c .divider { justify-content: center; }
.design-c .dv-main { border-left: 3mm solid var(--teal); padding: 6mm 0 6mm 9mm; margin-bottom: 30mm; }
.design-c .dv-main .kicker { margin: 0 0 3mm; color: var(--teal); font-size: 10pt; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.design-c .dv-main h1 { margin: 0 0 6mm; font-size: 40pt; line-height: 1.05; color: #111; }
.design-c .dv-intro { margin: 0 0 4mm; font-size: 13pt; max-width: 140mm; }
.design-c .dv-count { margin: 0; font-family: var(--hf); font-weight: 700; font-size: 12pt; }
.design-c .ar-national { font-weight: 500; }