/* The public website's look. Colours, fonts and corners come from the design settings,
   which are passed in as the variables at the top. Layout responds to the width of the
   page itself (container queries), so the editor's phone preview behaves like a real phone. */

.site {
  --c-main: #12355b;
  --c-on-main: #fff;
  --c-accent: #f2b705;
  --c-on-accent: #111821;
  --c-ink: #17202b;
  --c-muted: #566273;
  --c-line: #e2e7ed;
  --c-tint: color-mix(in srgb, var(--c-main) 7%, #fff);
  --c-tint-2: color-mix(in srgb, var(--c-main) 14%, #fff);
  --f-head: 'Archivo', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --radius: 10px;
  container: site / inline-size;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
:where(.site) img { max-width: 100%; display: block; }

/* ---------- Right-to-left languages, such as Urdu ----------
   A page in one has dir="rtl" on <html>. Most of every design mirrors by itself, because it is set
   out in start and end rather than left and right. What turns, slides, fades or is cut into a shape
   is mirrored by hand in each stylesheet's own right-to-left section; a fade's angle is multiplied
   by --mirror, which is -1 here. Arabic letters, as in Urdu, are taller and join up: lines need more
   room, and letters spaced apart would break the joins. */
html[dir="rtl"] { --mirror: -1; }
html[dir="rtl"] :is(.site, .sw-extras) * { letter-spacing: normal !important; }
html[dir="rtl"] :is(.site, .sw-extras) :is(h1, h2, h3, h4, .btn, button, [class*="-h1"], [class*="-h2"], [class*="-kicker"], [class*="-label"]) { line-height: 1.5 !important; }
html[dir="rtl"] :is(.site, .sw-extras) :is(p, li, dd, label, small) { line-height: 1.9; }
:where(.site) a { color: inherit; }
:where(.site) :is(h1, h2, h3) { font-family: var(--f-head); line-height: 1.15; margin: 0 0 .45em; letter-spacing: -.015em; font-weight: 800; }
:where(.site) h1 { font-size: clamp(2.1rem, 4.2cqi, 3.4rem); }
:where(.site) h2 { font-size: clamp(1.6rem, 2.8cqi, 2.25rem); }
:where(.site) h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.005em; }
:where(.site) p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--c-muted); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.wrap--narrow { max-width: 800px; }
.wrap--mid { max-width: 1000px; }
.s-main > section, .ed-block > section { padding: 72px 0; }
.sec-h { margin-bottom: .6em; }
.sec-intro { color: var(--c-muted); font-size: 1.08rem; max-width: 62ch; margin-top: -.3em; margin-bottom: 1.6em; }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Buttons and links */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btns:empty { display: none; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2;
  font-family: var(--f-body); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 20, 35, .14); }
.btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn-dark { background: var(--c-ink); color: #fff; }
.btn-secondary { background: #fff; color: var(--c-main); border-color: var(--c-main); }
.btn-ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn-sm { padding: 9px 16px; font-size: .92rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--c-main); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.site :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Header and menu */
.s-header { background: #fff; border-bottom: 1px solid var(--c-line); position: relative; z-index: 20; }
.s-header-in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.s-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.s-logo-mark {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: calc(var(--radius) * .8);
  background: var(--c-main); color: var(--c-accent); font-family: var(--f-head); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em;
  box-shadow: inset 0 -5px 0 var(--c-accent);
}
.s-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.s-logo-text strong { font-family: var(--f-head); font-size: 1.15rem; font-weight: 800; color: var(--c-main); }
.s-logo-text small { font-size: .78rem; color: var(--c-muted); }
.s-logo-img { max-height: 56px; width: auto; }
.s-nav ul { list-style: none; margin: 0; padding: 0; }
.s-nav > ul { display: flex; gap: 4px; }
.s-nav-item { position: relative; display: flex; align-items: center; }
.s-nav-item > a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: .98rem; border-radius: 8px; }
.s-nav-item > a:hover, .s-nav-item.is-active > a { color: var(--c-main); background: var(--c-tint); }
.s-nav-item.is-active > a { box-shadow: inset 0 -3px 0 var(--c-accent); border-radius: 8px 8px 0 0; }
.s-sub-toggle { display: none; }
.s-sub {
  display: none; position: absolute; top: 100%; inset-inline-start: 0; min-width: 260px; background: #fff; border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-accent); border-radius: 0 0 var(--radius) var(--radius); padding: 8px !important; box-shadow: 0 16px 36px rgba(10, 20, 35, .14);
}
.s-nav-item.has-sub:hover > .s-sub, .s-nav-item.has-sub:focus-within > .s-sub { display: block; }
.s-sub a { display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; font-size: .95rem; }
.s-sub a:hover { background: var(--c-tint); color: var(--c-main); }
.s-burger { display: none; align-items: center; gap: 8px; border: 2px solid var(--c-main); background: #fff; color: var(--c-main); border-radius: var(--radius); padding: 8px 14px; font: 700 .95rem var(--f-body); cursor: pointer; }

.s-crumbs { background: var(--c-tint); font-size: .88rem; color: var(--c-muted); }
.s-crumbs .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.s-crumbs a { color: var(--c-main); }
.s-crumbs [aria-current] { color: var(--c-ink); font-weight: 600; }

/* Footer */
.s-footer { background: color-mix(in srgb, var(--c-main) 88%, #000); color: #e8edf3; padding: 56px 0 28px; margin-top: 0; }
.s-footer a { color: #fff; }
.s-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.s-footer-name { font-family: var(--f-head); font-weight: 800; font-size: 1.15rem; color: #fff; }
.s-footer p { display: flex; align-items: center; gap: 8px; margin: 0 0 .6em; }
.s-footer-grid > div:first-child p { display: block; }
.s-footer-links { list-style: none; margin: 0; padding: 0; columns: 2; }
.s-footer-links li { margin-bottom: .5em; }
.s-footer-links a { text-decoration: none; }
.s-footer-links a:hover { text-decoration: underline; }
.s-footer-small { margin-top: 36px !important; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; opacity: .8; }

/* Large banner */
.s-main > .b-banner, .ed-block > .b-banner { padding: 0; }
.b-banner { position: relative; overflow: hidden; }
.b-banner--behind, .b-banner--plain { color: #fff; min-height: 520px; display: flex; align-items: center; }
.b-banner--plain { background: var(--c-main); color: var(--c-on-main); min-height: 420px; }
.b-banner--plain::after { content: ''; position: absolute; inset-inline-end: -110px; top: -130px; width: 420px; height: 420px; border-radius: 50%; border: 56px solid var(--c-accent); opacity: .2; }
.b-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-banner--behind::before { content: ''; position: absolute; inset: 0; background: linear-gradient(calc(90deg * var(--mirror, 1)), rgba(8, 18, 32, .86) 0%, rgba(8, 18, 32, .6) 45%, rgba(8, 18, 32, .08) 100%); z-index: 1; }
.b-banner .wrap { position: relative; z-index: 2; width: 100%; padding-top: 72px; padding-bottom: 72px; }
.b-banner-copy { max-width: 640px; }
.b-banner-h { margin-bottom: .35em; }
.b-banner-p { font-size: 1.2rem; opacity: .95; }
.b-banner--behind .b-banner-copy { border-inline-start: 6px solid var(--c-accent); padding-inline-start: 28px; }
.b-banner--beside { background: var(--c-tint); }
.b-banner-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.b-banner-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) * 1.6); }
.b-banner--beside .b-banner-h { color: var(--c-main); }

/* Title banner */
.s-main > .b-title, .ed-block > .b-title { padding: 56px 0 48px; }
.b-title.tone-main { background: var(--c-main); color: var(--c-on-main); }
.b-title.tone-tint { background: var(--c-tint); }
.b-title.tone-tint h1 { color: var(--c-main); }
.b-title h1 { position: relative; padding-bottom: .35em; margin-bottom: .45em; }
.b-title h1::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 72px; height: 6px; border-radius: 3px; background: var(--c-accent); }
.b-title-intro { font-size: 1.18rem; max-width: 60ch; opacity: .92; margin: 0; }

/* Plain text */
.b-text h2 { color: var(--c-main); }
.b-text + .b-text, .ed-block:has(> .b-text) + .ed-block > .b-text { padding-top: 0; }
.prose { font-size: 1.06rem; }

/* Picture with text */
.b-pictext.bg-tint { background: var(--c-tint); }
.b-pictext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.b-pictext-grid:has(.b-pictext-media:empty) { grid-template-columns: 1fr; }
.b-pictext.is-right .b-pictext-media { order: 2; }
.b-pictext-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--radius) * 1.6); }
.b-pictext-copy h2 { color: var(--c-main); }

/* Two pictures with text */
.b-two-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.b-two-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); margin-bottom: 20px; }
.b-two-item h3 { font-size: 1.4rem; color: var(--c-main); }
.b-two-item .link-arrow { margin-top: 12px; }

/* Cards (inspired by Equity's cards with a coloured top edge) */
.b-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.b-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-top: 5px solid var(--c-accent);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
a.b-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 20, 35, .12); }
.b-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.b-card-body { padding: 24px 24px 56px; position: relative; flex: 1; }
.b-card-body h3 { color: var(--c-main); }
.b-card-body p { color: var(--c-muted); margin: 0; }
.b-card-arrow { position: absolute; inset-inline-start: 24px; bottom: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-main); color: #fff; }
.b-title + .b-cards, .ed-block:has(> .b-title) + .ed-block > .b-cards { padding-top: 56px; }

/* Latest news */
.b-news { background: var(--c-tint); }
.b-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 8px; }
.b-news-card { background: #fff; border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; border: 1px solid var(--c-line); transition: transform .15s ease, box-shadow .15s ease; }
a.b-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 20, 35, .12); }
.b-news-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.b-news-img--none { background: linear-gradient(135deg, var(--c-main), color-mix(in srgb, var(--c-main) 60%, var(--c-accent))); }
.b-news-body { padding: 20px 22px 24px; }
.b-news-body h3 { font-size: 1.12rem; }
.b-news-body p { color: var(--c-muted); font-size: .96rem; margin: 0; }
.b-news-date { font-size: .82rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-main) !important; margin-bottom: .5em !important; }
.b-title + .b-news, .ed-block:has(> .b-title) + .ed-block > .b-news { background: #fff; }
.b-news--more { border-top: 1px solid var(--c-line); }

/* Upcoming events (date tiles inspired by Usdaw's news and events list) */
.b-events-list { display: grid; gap: 14px; }
.b-event { display: grid; grid-template-columns: 84px 1fr auto; gap: 22px; align-items: center; padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.b-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 84px; border-radius: calc(var(--radius) * .8); background: var(--c-main); color: #fff; line-height: 1; }
.b-event-date .d { font-family: var(--f-head); font-size: 2rem; font-weight: 800; }
.b-event-date .m { text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; margin-top: 6px; color: var(--c-accent); font-weight: 700; }
.b-event-body h3 { margin-bottom: .25em; }
.b-event-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--c-muted); font-size: .94rem; margin: 0 !important; }
.b-event-meta > span { display: inline-flex; align-items: center; gap: 6px; }

/* Downloads (inspired by Usdaw's resources list) */
.b-downloads { background: #fff; }
.b-docs { display: grid; gap: 12px; }
.b-doc { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--c-line); border-inline-start: 5px solid var(--c-main); border-radius: var(--radius); background: #fff; }
.b-doc-icon { width: 56px; height: 64px; border-radius: 6px; display: grid; place-items: center; font: 800 .8rem var(--f-body); letter-spacing: .06em; color: #fff; background: #c2412d; position: relative; }
.b-doc-icon.type-doc, .b-doc-icon.type-docx { background: #2b5ea8; }
.b-doc-body h3 { font-size: 1.08rem; margin-bottom: .2em; }
.b-doc-meta { color: var(--c-muted); font-size: .9rem; margin: 0 !important; }

/* Get involved box */
.b-involve-box { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 52px; border-radius: calc(var(--radius) * 1.6); position: relative; overflow: hidden; }
.b-involve-box.tone-main { background: var(--c-main); color: var(--c-on-main); }
.b-involve-box.tone-accent { background: var(--c-accent); color: var(--c-on-accent); }
.b-involve-box.tone-light { background: var(--c-tint); border: 2px solid var(--c-tint-2); }
.b-involve-box.tone-light h2 { color: var(--c-main); }
.b-involve-box.tone-main::after { content: ''; position: absolute; inset-inline-end: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid var(--c-accent); opacity: .22; }
.b-involve-copy { max-width: 620px; position: relative; z-index: 1; }
.b-involve-copy p { margin: 0; font-size: 1.08rem; }
.b-involve .btns { margin-top: 0; flex-shrink: 0; position: relative; z-index: 1; }
.b-involve-box.tone-light .btn-ghost { color: var(--c-main); }

/* Contact */
.b-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.b-contact-info h2 { color: var(--c-main); }
.b-contact-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 18px; }
.b-contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.b-contact-list .ic { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--c-tint); color: var(--c-main); }
.b-contact-list div { padding-top: 7px; }
.b-contact-form { background: var(--c-tint); padding: 32px; border-radius: calc(var(--radius) * 1.4); display: grid; gap: 16px; }
.b-contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.b-contact-form input, .b-contact-form textarea { font: inherit; padding: 12px 14px; border: 1.5px solid #c6d0da; border-radius: calc(var(--radius) * .7); background: #fff; width: 100%; }
.b-contact-form button { justify-self: start; }
.b-contact-thanks { display: flex; align-items: center; gap: 8px; color: #1d6b3a; font-weight: 700; margin: 0 !important; }
.b-contact-thanks[hidden] { display: none; }

/* Questions and answers */
.b-faq-list { display: grid; gap: 10px; }
.b-faq-item { border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.b-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 1.05rem; }
.b-faq-item summary::-webkit-details-marker { display: none; }
.b-faq-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-tint); color: var(--c-main); transition: transform .2s ease; }
.b-faq-item[open] .b-faq-icon { transform: rotate(45deg); }
.b-faq-item .prose { padding: 0 20px 20px; color: var(--c-muted); }
.b-faq h2 { color: var(--c-main); }

/* Big numbers */
.b-numbers { background: var(--c-main); color: var(--c-on-main); }
.b-num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.b-num-grid.n-2 { grid-template-columns: repeat(2, 1fr); }
.b-num-grid.n-4 { grid-template-columns: repeat(4, 1fr); }
.b-num { display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--c-accent); padding-top: 18px; }
.b-num-v { font-family: var(--f-head); font-size: clamp(2.2rem, 4cqi, 3.2rem); font-weight: 900; line-height: 1; color: var(--c-accent); }
.b-num-l { font-size: 1.02rem; opacity: .95; }

/* Quote */
.b-quote figure { margin: 0; padding: 44px 48px; border-radius: calc(var(--radius) * 1.6); background: var(--c-tint); position: relative; }
.b-quote-mark { color: var(--c-accent); display: block; margin-bottom: 8px; }
.b-quote blockquote { margin: 0; }
.b-quote blockquote p { font-family: var(--f-head); font-size: 1.5rem; line-height: 1.35; font-weight: 600; color: var(--c-main); }
.b-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.b-quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.b-quote figcaption span { display: flex; flex-direction: column; }
.b-quote figcaption span span { color: var(--c-muted); font-size: .95rem; }

/* Useful links (inspired by NASUWT's footer links) */
.b-links { background: #f1f3f6; }
.b-links-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; align-items: start; }
.b-links-grid:has(> h2:empty), .b-links-grid:not(:has(> h2)) { grid-template-columns: 1fr; }
.b-links h2 { font-size: 1.6rem; color: var(--c-main); }
.b-links-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.b-links-cols.n-1 { grid-template-columns: 1fr; }
.b-links-cols.n-2 { grid-template-columns: repeat(2, 1fr); }
.b-links-cols.n-3 { grid-template-columns: repeat(3, 1fr); }
.b-links-col h3 { font-size: 1.02rem; margin-bottom: .9em; }
.b-links-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-links-col li { font-size: .97rem; line-height: 1.35; color: var(--c-muted); }
.b-links-col a { text-decoration: none; color: var(--c-muted); }
.b-links-col a:hover { color: var(--c-main); text-decoration: underline; text-underline-offset: 3px; }

/* Video */
.b-video-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) * 1.4); overflow: hidden; background: #0d1520; }
.b-video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.b-video-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.b-video-empty { display: grid; place-items: center; align-content: center; gap: 12px; color: #9fb0c3; }
.b-video-cap { text-align: center; color: var(--c-muted); margin-top: 14px !important; }

/* "Ask us": Veaivo's assistant inside a page. The box holds the assistant's question bar, which opens
   upwards over the words above it when a visitor asks something. */
.b-ask { text-align: center; }
.b-ask h2 { margin-bottom: 8px; }
.b-ask-intro { color: var(--c-muted); margin: 0 auto 22px !important; max-width: 36em; }
.b-ask-box { position: relative; max-width: 680px; margin: 0 auto; text-align: left; }
.b-ask-mock { display: flex; align-items: center; gap: 10px; max-width: 680px; margin: 0 auto; padding: 16px 18px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px; background: #fff; color: #777; text-align: left; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.b-ask-mock.is-off { opacity: .55; }
.b-ask .ed-note { justify-content: center; margin-top: 12px; }

/* News post page */
.s-post { padding: 56px 0 72px; }
.s-post h1 { color: var(--c-main); }
.s-post-date { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--c-main); }
.s-post-lead { font-size: 1.25rem; color: var(--c-muted); }
.s-post-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: calc(var(--radius) * 1.6); margin: 24px 0 36px; }

/* ---------- Narrower screens ---------- */
@container site (max-width: 900px) {
  .s-nav { display: none; }
  .s-burger { display: inline-flex; }
  .site.menu-open .s-nav {
    display: block; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--c-line);
    box-shadow: 0 18px 30px rgba(10, 20, 35, .12); padding: 8px 20px 20px;
  }
  .site.menu-open .s-nav > ul { flex-direction: column; gap: 0; }
  .site.menu-open .s-nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
  .site.menu-open .s-nav-item > a { flex: 1; padding: 14px 4px; font-size: 1.05rem; box-shadow: none; background: none; }
  .site.menu-open .s-sub-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--c-tint); border-radius: 8px; color: var(--c-main); cursor: pointer; }
  .site.menu-open .s-nav-item.open .s-sub-toggle .ic { transform: rotate(180deg); }
  .site.menu-open .s-sub { position: static; box-shadow: none; border: 0; padding-block: 0 10px !important; padding-inline: 12px 0 !important; min-width: 0; width: 100%; display: none; }
  .site.menu-open .s-nav-item.open > .s-sub { display: block; }
  .site.menu-open .s-nav-item.has-sub:hover > .s-sub { display: none; }
  .site.menu-open .s-nav-item.has-sub.open:hover > .s-sub { display: block; }
}

@container site (max-width: 760px) {
  .s-header, .s-main, .s-footer { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .s-main > section, .ed-block > section { padding: 48px 0; }
  .s-header-in { min-height: 70px; gap: 12px; }
  .s-logo-mark { width: 42px; height: 42px; font-size: .95rem; }
  .s-logo-text small { display: none; }
  .b-banner--behind, .b-banner--plain { min-height: 460px; }
  .b-banner .wrap { padding-top: 48px; padding-bottom: 48px; }
  .b-banner--behind::before { background: linear-gradient(180deg, rgba(8, 18, 32, .55) 0%, rgba(8, 18, 32, .85) 100%); }
  .b-banner--behind .b-banner-copy { padding-inline-start: 18px; border-inline-start-width: 5px; }
  .b-banner-p { font-size: 1.05rem; }
  .b-banner-grid, .b-pictext-grid, .b-two-grid, .b-contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .b-pictext.is-right .b-pictext-media { order: 0; }
  .b-num-grid, .b-num-grid.n-2, .b-num-grid.n-4 { grid-template-columns: 1fr; gap: 22px; }
  .b-links-grid { grid-template-columns: 1fr; gap: 20px; }
  .b-links-cols, .b-links-cols.n-3, .b-links-cols.n-4 { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .b-involve-box { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
  .b-event { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px; }
  .b-event-date { height: 64px; }
  .b-event-date .d { font-size: 1.5rem; }
  .b-event-link { grid-column: 2; }
  .b-event-link:empty { display: none; }
  .b-doc { grid-template-columns: 44px 1fr; gap: 14px; }
  .b-doc-icon { width: 44px; height: 52px; font-size: .7rem; }
  .b-doc .btn { grid-column: 1 / -1; justify-content: center; }
  .b-quote figure { padding: 30px 24px; }
  .b-quote blockquote p { font-size: 1.22rem; }
  .b-contact-form { padding: 22px; }
  .s-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .btn { width: auto; }
}

/* The "Skip to content" link, shown only to keyboard users when they reach it. */
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 2000; background: #fff; color: #111821; padding: 10px 14px; border-radius: 8px; font: 600 15px/1.2 system-ui, sans-serif; }
.skip-link:focus { top: 12px; }