/*
 * The speeki.com look, ported from the live Squarespace site (colours, type
 * sizes and spacing read from the rendered pages). No script: the mobile menu
 * is a checkbox, the dropdowns open on hover and keyboard focus.
 * Body font: DM Sans (SIL Open Font License, served from /assets/fonts/), the
 * live site's own fallback, then the system font. IBM Plex Sans (same licence) is
 * declared too, so it can be chosen from the approved font list on Site design.
 * The colours, the font and the spacing and radius values in :root are the
 * values a person may change from approved lists (lib/design/safe.ts); the
 * values here are the defaults a site with no saved design uses.
 */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
}

:root {
  --black: #000;
  --white: #fff;
  --accent: #00ec7d;
  --dark-accent: #00104a;
  --light-accent: #eaeaef;
  --font: "DM Sans", system-ui, sans-serif;
  --gutter: 4vw;
  --section-pad: 4.5rem;
  --block-gap: 1.25rem;
  --col-gap: 3rem;
  --card-pad: 1.75rem;
  --card-radius: 12px;
  --button-radius: 6.8px;
  --header-h: 110px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--black); background: var(--white); }
img, iframe { max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* Header ---------------------------------------------------------------- */
.site-header { position: relative; z-index: 15; background: rgb(0 0 0 / 0.5); color: var(--white); min-height: var(--header-h); }
/* Over a hero, or a first section that is a tall picture (the imported home page), the picture runs underneath the bar. */
.has-hero .site-header, body:has(.site-main > article > .section.has-image:is(.h-large, .h-full):first-child) .site-header { position: absolute; inset: 0 0 auto; }
/* With the script (public/assets/header.js) the bar stays on screen, slides away while scrolling down and returns on scrolling back up, as live's does. */
.hdr-fixed .site-header { position: sticky; top: 0; transition: transform 0.14s ease-in-out; }
.hdr-fixed .has-hero .site-header, .hdr-fixed:has(.site-main > article > .section.has-image:is(.h-large, .h-full):first-child) .site-header { position: fixed; inset: 0 0 auto; }
.hdr-fixed .site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .hdr-fixed .site-header { transition: none; } }
.header-skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--black); padding: 0.5rem 1rem; z-index: 20; }
.header-skip-link:focus { left: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: var(--header-h); padding: 0 var(--gutter); }
.header-title-logo { flex: none; display: block; }
.header-title-logo img { display: block; width: 130px; height: auto; }
.header-title-logo .logo-colour { display: none; }
.header-nav { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 2rem; }
.header-nav-list { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; max-width: 440px; margin: 0 auto; gap: 0.1rem 1.4rem; }
.header-nav-item { position: static; }
.header-nav-item > a, .header-nav-folder-title { display: inline-block; padding: 0.1rem 0; color: var(--white); text-decoration: none; font-size: 17px; line-height: 1.6; }
.header-nav-folder-title::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin: 0 0 0.2em 15px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.header-nav-item:hover > a, .header-nav-item:focus-within > a { color: var(--accent); }
.header-nav-item:hover > .header-nav-folder-title::after, .header-nav-item:focus-within > .header-nav-folder-title::after { transform: rotate(-135deg); margin-bottom: -0.1em; }
.header-actions { display: flex; flex: none; align-items: center; gap: 1.5rem; }
.language-picker { position: relative; font-size: 17px; }
.flag { display: inline-block; width: 24px; height: 16px; margin-right: 0.6rem; vertical-align: -2px; border-radius: 2px; }
.language-picker .current-language { display: inline-block; padding: 0.3rem 0; cursor: default; }
.language-picker .current-language::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin: 0 0 0.2em 0.6em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.language-picker-content { display: none; position: absolute; right: 0; top: 100%; z-index: 10; min-width: 10rem; padding: 0.5rem 0; background: var(--white); border-radius: 6px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.18); }
.language-picker:hover .language-picker-content, .language-picker:focus-within .language-picker-content { display: block; }
.language-picker-content a { display: flex; align-items: center; padding: 0.4rem 1.25rem; color: var(--dark-accent); text-decoration: none; font-size: 15px; }
.language-picker-content a:hover, .language-picker-content a[aria-current] { background: var(--light-accent); }
.btn, .button { display: inline-block; padding: 1.25rem 2.1rem; border-radius: var(--button-radius); background: var(--accent); color: var(--black); font-size: 15.3px; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; text-decoration: none; }
.btn:hover, .button:hover { filter: brightness(0.92); }
/* The button block, as the live site draws its buttons: not capitalised, a little smaller, three fills. */
.button-row { margin: 1.25rem 0; }
.button-row .button { display: inline-flex; align-items: center; min-height: 68px; padding: 0 2.338em; border-radius: var(--button-radius); font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-transform: none; }
.button-row .button-primary { background: var(--black); color: var(--white); }
.button-row .button-secondary { background: var(--accent); color: var(--black); font-size: 18.7px; font-weight: 500; }
.button-row .button-tertiary { background: #00135d; color: var(--white); font-size: 15.3px; font-weight: 500; }
/* .theme-light is the class of a DARK band (light text). On a dark band the live site draws its main button in the accent green with a black label (a white label on the green is hard to read);
   these selectors outrank the band's own link colour. */
.theme-light .button-row .button-primary, .theme-light .button-row .button-secondary { background: var(--accent); color: var(--black); }
.theme-light .button-row .button-tertiary { background: #00135d; color: var(--white); }
.theme-light .button-row .button:hover { color: var(--black); }
.theme-light .button-row .button-tertiary:hover { color: var(--white); }
/* A button as wide as the cell it had on the live page; the row itself keeps its margins. */
.button-row.cell-w .button { display: flex; justify-content: center; width: 100%; box-sizing: border-box; text-align: center; }
/* On a phone the live buttons are smaller and may wrap onto two lines. */
@media (max-width: 767px) {
  .button-row .button { min-height: 59px; padding: 1em 2.338em; font-size: 16px; }
  .button-row .button-secondary { font-size: 17.08px; }
  .button-row .button-tertiary { font-size: 14.4px; }
}
.menu-toggle, .header-burger { display: none; }

@media (max-width: 767px) {
  :root { --header-h: 84px; --gutter: 6vw; --section-pad: 3rem; }
  .header-title-logo img { width: 99px; }
  .header-burger { display: block; position: relative; z-index: 31; width: 34px; height: 34px; cursor: pointer; }
  .menu-toggle { display: block; position: absolute; z-index: 32; top: calc((var(--header-h) - 34px) / 2); right: var(--gutter); width: 34px; height: 34px; margin: 0; opacity: 0; cursor: pointer; }
  .burger-inner { position: absolute; inset: 0; }
  .burger-inner span { position: absolute; left: 3px; right: 3px; height: 2px; background: currentColor; transition: transform 0.2s; }
  .top-bun { top: 11px; } .patty { display: none; } .bottom-bun { top: 21px; }
  .menu-toggle:checked ~ .header-inner .top-bun { top: 16px; transform: rotate(45deg); }
  .menu-toggle:checked ~ .header-inner .bottom-bun { top: 16px; transform: rotate(-45deg); }
  .menu-toggle:focus-visible ~ .header-inner .header-burger { outline: 2px solid var(--accent); }
  .header-nav { display: none; position: fixed; inset: var(--header-h) 0 0; z-index: 30; flex-direction: column; justify-content: flex-start; gap: 1.5rem; overflow-y: auto; padding: 2rem var(--gutter); background: var(--white); color: var(--black); }
  .menu-toggle:checked ~ .header-inner .header-nav { display: flex; }
  .menu-toggle:checked ~ .header-inner .header-title-logo .logo-colour { display: block; }
  .menu-toggle:checked ~ .header-inner .header-title-logo img:first-child { display: none; }
  .menu-toggle:checked ~ .header-inner { position: fixed; inset: 0 0 auto; z-index: 31; background: var(--white); color: var(--black); }
  .header-nav-list { flex: none; flex-direction: column; align-items: center; max-width: none; gap: 0.6rem; margin: 0; text-align: center; }
  .header-nav-item > a, .header-nav-folder-title { color: var(--black); font-size: 32px; line-height: 1.5; }
  .header-nav-item:hover > a, .header-nav-item:focus-within > a { color: var(--black); }
      .header-actions { flex-direction: column; gap: 1.25rem; }
  .language-picker { font-size: 32px; }
  .language-picker-content { position: static; box-shadow: none; }
  .header-actions .btn { padding: 1.4rem 3rem; background: var(--black); color: var(--white); }
}

/* Page frame ------------------------------------------------------------- */
.site-main { max-width: 1500px; margin: 0 auto; padding: 4rem var(--gutter) 6rem; }
.site-main > article { max-width: 44rem; margin: 0 auto; }
.page-home .site-main > article, .page-standard .site-main > article, .page-contact .site-main > article { max-width: 64rem; }
.page-blog .site-main > article { max-width: 64rem; }

/* Type: headings are bold, body 17px / 1.6, as on the live pages ---------- */
main h1, main h2, main h3, main h4 { font-weight: 700; line-height: 1.2; letter-spacing: 0; }
main h1 { font-size: clamp(2rem, 4.5vw, 42.5px); line-height: 1.2; margin: 0 0 1.5rem; }
main h2 { font-size: clamp(1.75rem, 4vw, 42.5px); margin: 2.5rem 0 1rem; }
main h3 { font-size: clamp(1.4rem, 3vw, 28px); margin: 2rem 0 0.75rem; }
main h4 { font-size: 20px; margin: 1.5rem 0 0.5rem; }
main p, main ul, main ol, main figure, main blockquote { margin: 0 0 var(--block-gap); }
main p.small { font-size: 0.873em; }
main ul { list-style: disc; padding-left: 1.5rem; } main ol { padding-left: 1.5rem; }
main a { text-decoration: underline; text-underline-offset: 0.15em; }
main a:hover { color: var(--dark-accent); }
main a[href*="maps.google.com"] { display: inline-block; padding: 0.6rem 1.2rem; border: 1px solid var(--black); border-radius: 4px; text-decoration: none; font-size: 15px; }
main a[href*="maps.google.com"]:hover { background: var(--black); color: var(--white); }
.page-article main h1 { font-size: clamp(2rem, 4.5vw, 42.5px); }

/* A post: the title and byline above the body, Previous / Next below it, as on the live post pages ------ */
.post-header { margin: 0 0 2rem; }
/* The live post page does not show the date, author or category under the title (they stay in the page, hidden); the category and tags come after the text. */
.post-byline { display: none; }
.page-article .site-main > article { max-width: 662px; }
.page-press.has-sections .site-main > article > .post-header:not(.sr-only) { max-width: calc(662px + 2 * var(--gutter)); padding-top: 4rem; }
.page-press .section-inner { max-width: 662px; }
:is(.page-article, .page-press) .prose-block p:has(> a[href*="/tag/"]) { margin: 30px 0; }
:is(.page-article, .page-press) .prose-block p > a[href*="/tag/"] { text-decoration: none; }
:is(.page-article, .page-press) .prose-block p > a[href*="/tag/"] + a[href*="/tag/"]::before { content: "\2022"; display: inline-block; padding: 0 8.5px; text-decoration: none; }
.post-header h1 { margin-bottom: 0.75rem; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 2rem 0 0; }
.post-tags a { text-decoration: underline; text-underline-offset: 0.15em; }
.post-author-profile { margin: 2rem 0 0; font-weight: 700; }
/* Previous / Next: the full width under the article, only the caret at each edge as on the live page; the label and the title stay for screen readers. */
.item-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin: 0; padding: 43.2px 0; }
.page-article .site-main:has(> .item-pagination) { padding-bottom: 0; }
.has-sections .site-main > .item-pagination { padding: 43.2px var(--gutter); }
.item-pagination-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.item-pagination-link--next { margin-left: auto; text-align: right; }
.item-pagination-text { display: block; }
.item-pagination-prev-next, .item-pagination-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.item-pagination-link svg { flex: none; }

/* A list of posts (the first page of the blog and press-release indexes, and their filtered or paged versions): a grid of cards as on the live site, three across with 100px
 * between them and 50px between rows, the picture 3:2, the category line (author and date are not shown), the title, and Read More. One column on a phone. --- */
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 100px; width: 100%; max-width: calc(1400px - 8vw); margin: 0 auto; }
.post-card { display: flex; flex-direction: column; min-width: 0; }
.post-card-image { display: block; aspect-ratio: 3 / 2; margin: 0 0 10px; overflow: hidden; }
.post-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card-meta { margin: 0 0 30px; font-size: 17px; }
.post-card-meta a, .post-card-title a { text-decoration: none; }
.post-card-author, .post-card-date { display: none; }
.post-card-title { margin: 0 0 10px; font-size: clamp(23.4px, calc(14.5px + 1.156vw), 30.6px); line-height: 1.2; }
.post-card-title a:hover { text-decoration: underline; }
.post-card-excerpt { margin: 0; font-size: 14.84px; }
.post-card-more { margin: 0; padding-top: 10px; font-size: 14.84px; }
.post-list-empty { grid-column: 1 / -1; text-align: center; opacity: 0.8; }
.post-list-pagination { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; }
.post-list-older { margin-left: auto; }
.post-list-newer, .post-list-older { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 700; }
@media (max-width: 767px) {
  .post-list { display: block; max-width: none; }
  .post-card { margin: 0 0 15px; }
  .post-card-image { margin-bottom: 20px; }
  .post-card-meta { margin-bottom: 8px; font-size: 16px; }
  .post-card-title { font-size: 24.64px; }
  .post-card-excerpt, .post-card-more { font-size: 14.65px; }
  .post-card-more { padding-top: 8px; }
}

/* Blocks ----------------------------------------------------------------- */
figure img { display: block; width: 100%; height: auto; }
/* A picture's look from the page it came from: corners, the box it fills (--ratio is width over height) and how wide that box is (--span-w, from 768px up). */
/* They reach the picture on the page only: its link and its enlarge button are in between, the enlarged copy in the popover is not. */
.fig-ratio > img, .fig-ratio > a > img, .fig-ratio > .lightbox-trigger > img { aspect-ratio: var(--ratio); }
.fig-cover > img, .fig-cover > a > img, .fig-cover > .lightbox-trigger > img { object-fit: cover; }
.fig-contain > img, .fig-contain > a > img, .fig-contain > .lightbox-trigger > img { object-fit: contain; }
.fig-r10 > img, .fig-r10 > a > img, .fig-r10 > .lightbox-trigger > img { border-radius: 10px; }
.fig-r20 > img, .fig-r20 > a > img, .fig-r20 > .lightbox-trigger > img { border-radius: 20px; }
.fig-r50 > img, .fig-r50 > a > img, .fig-r50 > .lightbox-trigger > img { border-radius: 50px; }
.fig-r100 > img, .fig-r100 > a > img, .fig-r100 > .lightbox-trigger > img { border-radius: 100px; }
.fig-circle > img, .fig-circle > a > img, .fig-circle > .lightbox-trigger > img { border-radius: 50%; }
.fig-panel { position: relative; isolation: isolate; }
@media (min-width: 768px) { main figure.fig-panel { margin-left: 56px; } }
@media (min-width: 768px) { .fig-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translate(-56px, -40px); background: var(--light-accent); } }
@media (min-width: 768px) { .fig-span { max-width: min(100%, var(--span-w)); } video.fig-span, iframe.fig-span { margin-left: auto; margin-right: auto; } }
.lightbox-trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lightbox-trigger:focus-visible, .lightbox-close:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lightbox { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 2rem; border: 0; background: rgba(0, 0, 0, 0.9); overflow: auto; box-sizing: border-box; }
.lightbox:not(:popover-open) { display: none; }
.lightbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: #fff; color: #000; font-size: 1.75rem; line-height: 1; cursor: pointer; }
figcaption { margin-top: 0.5rem; font-size: 14px; opacity: 0.7; }
.gallery { display: grid; gap: 1rem; margin: 0 0 var(--block-gap); }
.gallery figure { margin: 0; }
.columns { display: grid; gap: 2rem; margin: 0 0 var(--block-gap); }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .columns { grid-template-columns: repeat(2, 1fr); } .columns:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); } .columns:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }
.video { display: block; aspect-ratio: 16 / 9; width: 100%; border: 0; margin: 0 0 var(--block-gap); }
.video-file { background: #000; }
.video-still { display: none; }
.spacer-sm { height: 1rem; } .spacer-md { height: 2.5rem; } .spacer-lg { height: 5rem; }
/* A divider line: one pixel, black on a light band and the accent on a dark one, as wide as the cell it had (--span-w desktop, --span-m of 8 phone columns). */
.spacer-rule { display: flex; align-items: center; }
.spacer-rule hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--black); }
.theme-light .spacer-rule hr { background: var(--accent); }
.cell-w { --w: calc(var(--span-m) * (100% - 77px) / 8 + (var(--span-m) - 1) * 11px); width: var(--w, 100%); max-width: 100%; }
@media (min-width: 768px) { .cell-w { --w: min(100%, var(--span-w)); } }
.quote { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 4px solid var(--accent); font-size: 1.35rem; line-height: 1.4; }
.quote p { margin: 0 0 0.5rem; }
.quote footer { font-size: 15px; opacity: 0.7; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--block-gap); }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
.table-wrap th, .table-wrap td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--light-accent); }
.table-wrap th { background: var(--light-accent); font-weight: 700; }
.faq { margin: 0 0 var(--block-gap); border-top: 1px solid var(--black); }
.faq details { border-bottom: 1px solid var(--black); }
.faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 700; font-size: 20px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.75rem; font-size: 1.5rem; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq .prose-block { padding-bottom: 0.5rem; }
.cta { margin: 2.5rem 0; padding: 3rem 2rem; text-align: center; background: var(--dark-accent); color: var(--white); border-radius: 4px; }
.cta h2 { margin-top: 0; }
.cta p { max-width: 36rem; margin-left: auto; margin-right: auto; }
.cta .button { background: var(--accent); color: var(--black); }
[data-slot], [data-form] { margin: 0 0 var(--block-gap); }
/* The contact page's Nicole card (the form slot), as on the live page. */
.nicole-opener { display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; padding: 24px 22px; border-radius: 20px; background: linear-gradient(135deg, #00135d 0%, #0a2a9e 100%); color: var(--white); text-decoration: none; box-shadow: 0 16px 40px -20px rgba(0, 19, 93, 0.55); transition: transform 0.22s, box-shadow 0.22s; }
.nicole-opener:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -18px rgba(0, 19, 93, 0.65); }
.nicole-opener:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.nicole-opener::after { content: ""; position: absolute; right: -50px; bottom: -60px; width: 180px; height: 180px; background: var(--accent); opacity: 0.12; border-radius: 46% 54% 60% 40% / 48% 42% 58% 52%; pointer-events: none; }
.nicole-opener > * { position: relative; z-index: 1; }
.nicole-opener-mark { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e6fdf3; color: #00135d; font-size: 28px; font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.nicole-opener-text { flex: 1; display: block; }
.nicole-opener-tag { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 100px; background: var(--accent); color: #00135d; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nicole-opener-title { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.nicole-opener-desc { display: block; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.nicole-opener-arrow { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #00135d; transition: transform 0.2s; }
.nicole-opener:hover .nicole-opener-arrow { transform: translateX(3px); }
@media (max-width: 600px) { .nicole-opener { padding: 18px 16px; gap: 14px; } .nicole-opener-mark { flex-basis: 56px; width: 56px; height: 56px; } .nicole-opener-title { font-size: 15px; } .nicole-opener-desc { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .nicole-opener, .nicole-opener-arrow { transition: none; } .nicole-opener:hover { transform: none; } .nicole-opener:hover .nicole-opener-arrow { transform: none; } }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--light-accent); color: var(--black); padding: 3rem var(--gutter) 3.5rem; }
.footer-inner { max-width: 1500px; margin: 0 auto; }
.footer-columns { display: grid; gap: 2.5rem 0; grid-template-columns: 1fr; }
/* Live's four columns, in the proportions of its 24-column grid; the pricing guidance is stacked under the fourth. */
@media (min-width: 768px) { .footer-columns { grid-template-columns: 222fr 334fr 446fr 322fr; } }
.footer-column { padding-right: 2rem; }
@media (min-width: 768px) { .footer-column:nth-child(2), .footer-column:nth-child(3) { padding-right: 4rem; } .footer-column:last-child { padding-right: 0; } }
.footer-column h4 { margin: 0 0 2.2rem; font-size: 17px; font-weight: 700; line-height: 1.2; }
.footer-column ul + h4 { margin: 3.6rem 0 1.2rem; }
.footer-column li { margin: 0 0 17px; }
.footer-column a, .footer-links a { text-decoration: underline; text-underline-offset: 0.15em; }
.footer-logo { display: inline-block; margin-bottom: 11px; }
.footer-logo img { display: block; width: 69px; height: 69px; }
.footer-legal { margin: 37px 0 0; font-size: 14.84px; line-height: 1.6; }
.site-footer .social-icons { justify-content: flex-end; gap: 8px; margin: 15px 0 0; }
.site-footer .social-icons a { width: 30px; height: 30px; border: 0; background: var(--black); color: var(--light-accent); }
.site-footer .social-icons svg { width: 18px; height: 18px; }
.site-footer .social-icons svg.icon-solid { width: 30px; height: 30px; }
/* The bottom links are one line, each separated from the next by a bar, as live writes them. */
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin: 10px 0 0; padding: 0; list-style: none; }
.footer-links li + li::before { content: "|"; padding: 0 5px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mega panels (Solutions, Software, Training, Resources, About) ------------ */
.mega { visibility: hidden; transition: visibility 0s linear 0.2s; position: absolute; top: 100%; left: 0; right: 0; z-index: 14; padding: 1.75rem 0 1.75rem 6rem; background: var(--white); color: var(--dark-accent); box-shadow: 0 24px 52px rgb(0 19 93 / 0.14); font-size: 15px; }
.header-nav-item:hover > .mega, .header-nav-item:focus-within > .mega { visibility: visible; transition-delay: 0s; }
/* The dropdown hangs from the bottom of the header, so the pointer crosses empty header space on the way down from
   an item. While a folder is hovered, an invisible strip under its title (wider than the title, so a diagonal path
   to a far link stays inside) fills that space. Every link, button and the language picker is raised above the
   strip, so it only ever catches the pointer where nothing else is; crossing a link on the way down is forgiven by
   the 0.2s close delay above. The panel being hovered sits above one that is still closing, and any other folder's
   panel closes at once, so only one is ever shown (if the keyboard focus is in the panel that closes, it is dropped:
   the pointer wins). Sideways at the title's own height is not bridged.
   Stacking: the raised links form their own stacking contexts (z-index 2) in the header's, and the strip is z-index -1
   inside its title's, so it sits behind that title's text and, among the raised items, behind any that come later in
   the markup; items that come earlier are covered by it only where nothing of theirs is drawn. The logo is raised too,
   so a strip reaching left over it cannot catch its clicks. */
.header-nav-folder-title { position: relative; }
.header-nav-item:hover > .header-nav-folder-title::before { content: ""; position: absolute; top: 100%; left: -8rem; right: -8rem; height: var(--header-h); z-index: -1; }
@media (min-width: 768px) {
  .header-nav-item > a, .header-nav-folder-title, .header-cta, .language-picker, .header-title-logo { position: relative; z-index: 2; }
  /* Live's bar at desktop width: the menu is a 448px block centred on the page, wrapping to three items and two; the language picker and Contact button sit at the right edge. */
  .header-inner { display: grid; grid-template-columns: 1fr 448px 1fr; gap: 0; }
  .header-nav { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; gap: 0; }
  .header-nav-list { flex: none; width: 448px; max-width: none; margin: 0; gap: 0; }
  .header-nav-item { margin: 0 12.96px; }
  .header-actions { justify-self: end; gap: 43px; }
  .header-actions .header-cta { padding: calc(1.25rem + 1px) calc(2.1rem + 1px); }
  .language-picker .current-language { padding: 0.1rem 0; }
}
.header-nav-item:hover > .mega, .header-nav-item:focus-within > .mega { z-index: 15; }
.header-nav-list:has(.header-nav-item--folder:hover) .header-nav-item:not(:hover) > .mega { display: none; }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }
.mega-inner { display: grid; gap: 42px; align-items: start; max-width: 1180px; margin: 0 auto; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.mega-cols-1 { --cols: 1; } .mega-cols-2 { --cols: 2; } .mega-cols-3 { --cols: 3; }
.mega-inner.has-side { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)) 340px; }
.mega-col { padding-right: 36px; border-right: 1px solid #eaecf0; min-width: 0; }
.mega-col:last-child { padding-right: 0; border-right: 0; }
.mega-label { margin-bottom: 1rem; line-height: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(0 19 93 / 0.42); }
.mega-item { display: flex; gap: 0.8rem; margin: 0 -0.75rem 2px; padding: 9px 0.75rem; border-radius: 12px; text-decoration: none; color: inherit; }
.mega-item:hover, .mega-item:focus-visible { background: #f7fbff; }
.mega-icon { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; }
.mega-icon svg { width: 20px; height: 20px; }
.tone-green { background: #e6fdf3; color: var(--accent); } .tone-green-dark { background: #e6fdf3; color: #00995a; }
.tone-blue { background: #e8f0fe; color: #2177ff; } .tone-teal { background: #e0f8f7; color: #0fbab4; }
.tone-coral { background: #fdeee9; color: #ef7157; } .tone-purple { background: #efecfb; color: #6452b5; }
.tone-navy { background: #e8eaf6; color: #00135d; } .tone-amber { background: #fef3e2; color: #b45309; }
.mega-title { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; line-height: 1.3; color: #00135d; }
.mega-product { display: block; margin-top: 1px; line-height: normal; font-size: 11px; font-weight: 600; color: #2177ff; }
.mega-desc { display: block; font-size: 12.5px; line-height: 1.5; color: #6b7280; }
.mega-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: #00135d; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.mega-alink a { display: block; padding: 0.3rem 0; font-size: 13px; color: #00135d; text-decoration: none; }
.mega-alink a:hover { text-decoration: underline; }
.mega-featured { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 18px; background: #00135d; color: var(--white); box-shadow: 0 12px 32px rgb(0 19 93 / 0.18); }
.mega-featured::before { content: ""; position: absolute; right: -34px; bottom: -42px; width: 140px; height: 140px; border-radius: 34px; background: rgb(0 236 125 / 0.1); transform: rotate(18deg); }
.mega-featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 40%, rgb(255 255 255 / 0.05) 100%); pointer-events: none; }
.mega-featured-tag, .mega-featured-cta { position: relative; z-index: 2; }
.mega-featured-tag { display: inline-block; margin-bottom: 14px; line-height: normal; padding: 5px 11px; border-radius: 99px; background: rgb(0 236 125 / 0.16); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mega-featured-title { margin-bottom: 0.5rem; font-size: 20px; font-weight: 700; line-height: 1.15; }
.mega-featured-desc { margin-bottom: 18px; font-size: 14px; line-height: 1.6; color: rgb(255 255 255 / 0.68); }
.mega-featured-cta { display: inline-block; line-height: normal; padding: 9px 16px; border-radius: 8px; background: var(--accent); color: #00135d; font-size: 13px; font-weight: 600; text-decoration: none; }
.mega-ai { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; padding: 0.9rem; border: 1.5px solid #e8eaf6; border-radius: 14px; text-decoration: none; color: inherit; background: var(--white); }
.mega-ai-dot { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--accent) url(/assets/img/nicole.webp) center 18% / 185% auto no-repeat; border: 2px solid rgb(0 236 125 / 0.18); box-shadow: 0 4px 12px rgb(0 19 93 / 0.14); }
.mega-ai-title { display: block; font-size: 13px; font-weight: 600; color: #00135d; }
.mega-ai-sub { display: block; margin-top: 2px; font-size: 11.5px; color: #9ca3af; }
.mega-cols-0.has-side { --cols: 0; grid-template-columns: 340px; justify-content: end; }
/* A menu that lists its categories on the left: each category's panel opens beside the list on hover or focus, the first one until another is chosen. */
.mega-inner.mega-has-cats { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: repeat(var(--cats, 3), auto) 1fr; gap: 0; }
.mega-inner.mega-has-cats.has-side { grid-template-columns: 300px minmax(0, 1fr) 362px; }
.mega-has-cats .mega-col--featured { grid-column: 3; grid-row: 1 / -1; padding: 0 0 0 2.6rem; border-left: 1px solid #eaecf0; }
.mega-group { display: contents; }
.mega-cat { position: relative; grid-column: 1; display: flex; align-items: center; gap: 11px; margin: 0 11px 4px -14px; padding: 13px 14px; border: 0; border-left: 3px solid transparent; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* Covers the gap to the panel so the pointer never leaves the category on its way there. */
.mega-cat::after { content: ""; position: absolute; top: 0; right: -11px; bottom: -4px; width: 11px; }
.mega-cat .mega-icon { flex-basis: 36px; width: 36px; height: 36px; }
.mega-cat:hover { background: #eef3fb; }
.mega-cat:focus-visible { outline: 2px solid #2177ff; outline-offset: 2px; }
.mega-cat-body { flex: 1 1 0%; }
.mega-cat .mega-desc { font-size: 11.5px; }
.mega-cat-chev { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; color: #b7c0cf; font-size: 24px; line-height: 1; transition: transform 0.2s, color 0.15s; }
.mega-panel { display: none; grid-column: 2; grid-row: 1 / -1; min-width: 0; padding: 0 2.6rem; border-left: 1px solid #eaecf0; }
.mega-group:first-child .mega-panel { display: block; }
.mega-inner:has(.mega-group:is(:hover, :focus-within)) .mega-group:first-child:not(:is(:hover, :focus-within)) .mega-panel { display: none; }
.mega-group:is(:hover, :focus-within) .mega-panel { display: block; }
.mega-group:first-child .mega-cat, .mega-group:is(:hover, :focus-within) .mega-cat { border-left-color: var(--accent); background: #e8effa; }
.mega-group:first-child .mega-cat-chev, .mega-group:is(:hover, :focus-within) .mega-cat-chev { color: #00c46a; transform: rotate(90deg); }
.mega-inner:has(.mega-group:is(:hover, :focus-within)) .mega-group:first-child:not(:is(:hover, :focus-within)) .mega-cat { border-left-color: transparent; background: none; }
.mega-inner:has(.mega-group:is(:hover, :focus-within)) .mega-group:first-child:not(:is(:hover, :focus-within)) .mega-cat-chev { color: #b7c0cf; transform: none; }
/* With the script (public/assets/header.js) the chosen category, by hover, focus or click, is the one marked is-active. */
.mega-inner[data-tabs] .mega-group .mega-panel { display: none; }
.mega-inner[data-tabs] .mega-group.is-active .mega-panel { display: block; }
.mega-inner[data-tabs] .mega-group:not(.is-active) .mega-cat { border-left-color: transparent; background: none; }
.mega-inner[data-tabs] .mega-group:not(.is-active) .mega-cat-chev { color: #b7c0cf; transform: none; }
.mega-inner[data-tabs] .mega-group.is-active .mega-cat { border-left-color: var(--accent); background: #e8effa; }
.mega-inner[data-tabs] .mega-group.is-active .mega-cat-chev { color: #00c46a; transform: rotate(90deg); }
.mega-subcols { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.mega-subcols .mega-subhead:first-child { margin-top: 0; }
.mega-subcols .mega-item { align-items: center; gap: 10px; margin: 0 -8px 2px; padding: 8px; border-radius: 9px; }
.mega-subcols .mega-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
.mega-subcols .mega-icon svg { width: 18px; height: 18px; }
.mega-subcols .mega-title { margin-bottom: 0; }
.mega-subhead { margin: 14px 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2177ff; }
.mega-subhead:first-child { margin-top: 0; }
.mega-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.mega-pill { padding: 3px 9px; border-radius: 99px; background: #e8f0fe; color: #2177ff; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.mega-quick .mega-item { align-items: center; gap: 11px; margin: 0 -10px 2px; padding: 9px 10px; border-radius: 10px; }
.mega-quick .mega-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
.mega-quick .mega-icon svg { width: 16px; height: 16px; }
.mega-quick .mega-title { margin-bottom: 0; }
.mega-quick-label { margin-top: 1.1rem; margin-bottom: 18px; }
.header-nav-item.is-dismissed > .mega, .header-nav-item.is-dismissed:hover > .mega, .header-nav-item.is-dismissed:focus-within > .mega { visibility: hidden; transition: none; }
@media (max-width: 767px) { .mega { display: none !important; } .header-nav-folder-title::after, .header-nav-folder-title::before { display: none !important; } }

/* Sections ---------------------------------------------------------------- */
.has-sections .site-main { max-width: none; padding: 0; }
.has-sections .site-main > article { max-width: none; }
.has-sections .site-main > article > :not(.section):not(.sr-only) { max-width: 44rem; margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
/* A legal page: the title and the text share one narrow centred column (662px), as on the live site. */
.page-legal .site-main > article > :not(.section):not(.sr-only) { max-width: calc(662px + 2 * var(--gutter)); }
.page-legal .section-inner { max-width: 662px; }
.page-legal .site-main > article > :not(.section):not(.sr-only) { margin-inline: auto; }
.page-legal .post-header { margin-bottom: 0; }
.page-legal .post-header h1 { margin-bottom: 15px; }
.page-legal .section { padding-top: 0; }
.page-legal .spacer-md { height: 5.1rem; }
@media (max-width: 767px) { .page-legal .post-header h1 { margin-bottom: 32px; } .page-legal .spacer-md { height: 0.7rem; } }
.section { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--section-pad) var(--gutter); }
/* The font the live checklists load from Google (DM Sans v17, weights 400 to 800), served from our own files under a family name only the widgets use (the importer points them at it), so the site's own DM Sans is untouched. */
@font-face {
  font-family: "DM Sans Embed";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-v17-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans Embed";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-v17-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* A widget kept as embedded code brings its own class names (the live checklists call each step a .section): the site's section band must not reach inside. */
.embed-code .section { position: static; display: block; align-items: normal; justify-content: normal; overflow: visible; padding: 0; }
.section-inner { position: relative; z-index: 1; width: 100%; max-width: 1500px; margin: 0 auto; }
.section-bg, .section-bg img, .overlay { position: absolute; inset: 0; }
.section-bg img, .section-bg-video { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.section-bg-video { position: absolute; inset: 0; }
/* People who ask their device for less motion get the poster only; a still copy of an inline video takes the place of the playing one. */
@media (prefers-reduced-motion: reduce) { .section-bg-video, .video-motion { display: none; } .video-still { display: block; } }
.overlay { background: #000; }
/* The live site dims a picture with its band's own colour (navy, near-white, white, green), not always black. */
.bg-white .overlay { background: var(--white); } .bg-light .overlay { background: var(--light-accent); } .bg-dark .overlay { background: var(--dark-accent); } .bg-accent .overlay { background: var(--accent); }
.overlay-10 { opacity: 0.1; } .overlay-20 { opacity: 0.2; } .overlay-30 { opacity: 0.3; } .overlay-40 { opacity: 0.4; } .overlay-50 { opacity: 0.5; }
.overlay-60 { opacity: 0.6; } .overlay-70 { opacity: 0.7; } .overlay-80 { opacity: 0.8; } .overlay-90 { opacity: 0.9; }
.bg-white { background: var(--white); } .bg-light { background: var(--light-accent); } .bg-dark { background: var(--dark-accent); }
.bg-black { background: var(--black); } .bg-accent { background: var(--accent); }
.theme-light { color: var(--white); } .theme-light a { color: inherit; } .theme-light a:hover { color: var(--accent); }
.theme-light .section-col :is(h1, h2, h3, h4) { color: inherit; }
.bg-accent.theme-dark, .bg-light.theme-dark, .bg-white.theme-dark { color: var(--black); }
.h-small { min-height: 18rem; } .h-medium { min-height: 28rem; } .h-large { min-height: 40rem; } .h-full { min-height: 100vh; }
/* A band the importer sized by the live layout grid (it carries its rows) takes the live site's own heights: a share of the window, and
   padding that grows with the window (vmax). Bands without rows keep the heights above. */
.has-rows.h-small { --band-pad: 3.3vmax; --band-min: 33vh; padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
.has-rows.h-medium { --band-pad: 6.6vmax; --band-min: 66vh; padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
.has-rows.h-large { --band-pad: 10vmax; --band-min: 100vh; padding-top: var(--band-pad); padding-bottom: var(--band-pad); }
/* A top banner the live site sized by its layout grid: rows of 2.15% of the content width with an 11px gap, as tall as the setting above or
   taller. (A hero also reaches up under the header.) The row classes are the numbers 1 to 60. */
:root { --heading-navy: #00135d; --row-h: calc(min(1500px, 100vw - 8vw) * 0.0215); }
.has-rows { min-height: max(var(--band-min, 0px), calc(var(--rows) * var(--row-h) + (var(--rows) - 1) * 11px + 2 * var(--band-pad, 0px))); }
.section-hero.has-rows, .has-hero .section-top.has-rows { min-height: max(var(--band-min, 0px), calc(var(--rows) * var(--row-h) + (var(--rows) - 1) * 11px + 2 * var(--band-pad, 0px) + var(--header-h))); }
@media (max-width: 767px) { .has-rows, .section-hero.has-rows, .has-hero .section-top.has-rows { min-height: var(--band-min, 0px); } }
.rows-1{--rows:1} .rows-2{--rows:2} .rows-3{--rows:3} .rows-4{--rows:4} .rows-5{--rows:5} .rows-6{--rows:6} .rows-7{--rows:7} .rows-8{--rows:8} .rows-9{--rows:9} .rows-10{--rows:10} .rows-11{--rows:11} .rows-12{--rows:12} .rows-13{--rows:13} .rows-14{--rows:14} .rows-15{--rows:15} .rows-16{--rows:16} .rows-17{--rows:17} .rows-18{--rows:18} .rows-19{--rows:19} .rows-20{--rows:20} .rows-21{--rows:21} .rows-22{--rows:22} .rows-23{--rows:23} .rows-24{--rows:24} .rows-25{--rows:25} .rows-26{--rows:26} .rows-27{--rows:27} .rows-28{--rows:28} .rows-29{--rows:29} .rows-30{--rows:30} .rows-31{--rows:31} .rows-32{--rows:32} .rows-33{--rows:33} .rows-34{--rows:34} .rows-35{--rows:35} .rows-36{--rows:36} .rows-37{--rows:37} .rows-38{--rows:38} .rows-39{--rows:39} .rows-40{--rows:40} .rows-41{--rows:41} .rows-42{--rows:42} .rows-43{--rows:43} .rows-44{--rows:44} .rows-45{--rows:45} .rows-46{--rows:46} .rows-47{--rows:47} .rows-48{--rows:48} .rows-49{--rows:49} .rows-50{--rows:50} .rows-51{--rows:51} .rows-52{--rows:52} .rows-53{--rows:53} .rows-54{--rows:54} .rows-55{--rows:55} .rows-56{--rows:56} .rows-57{--rows:57} .rows-58{--rows:58} .rows-59{--rows:59} .rows-60{--rows:60}
/* Where in that grid the words start: this many rows down (the live page places the heading block by its grid row). */
@media (min-width: 768px) {
  .has-rows.has-trow .section-inner { min-height: calc(var(--rows) * var(--row-h) + (var(--rows) - 1) * 11px); }
  .has-trow .section-inner { padding-top: calc((var(--trow) - 1) * (var(--row-h) + 11px)); }
}
.trow-2{--trow:2} .trow-3{--trow:3} .trow-4{--trow:4} .trow-5{--trow:5} .trow-6{--trow:6} .trow-7{--trow:7} .trow-8{--trow:8} .trow-9{--trow:9} .trow-10{--trow:10} .trow-11{--trow:11} .trow-12{--trow:12} .trow-13{--trow:13} .trow-14{--trow:14} .trow-15{--trow:15} .trow-16{--trow:16} .trow-17{--trow:17} .trow-18{--trow:18} .trow-19{--trow:19} .trow-20{--trow:20} .trow-21{--trow:21} .trow-22{--trow:22} .trow-23{--trow:23} .trow-24{--trow:24} .trow-25{--trow:25} .trow-26{--trow:26} .trow-27{--trow:27} .trow-28{--trow:28} .trow-29{--trow:29} .trow-30{--trow:30} .trow-31{--trow:31} .trow-32{--trow:32} .trow-33{--trow:33} .trow-34{--trow:34} .trow-35{--trow:35} .trow-36{--trow:36} .trow-37{--trow:37} .trow-38{--trow:38} .trow-39{--trow:39} .trow-40{--trow:40} .trow-41{--trow:41} .trow-42{--trow:42} .trow-43{--trow:43} .trow-44{--trow:44} .trow-45{--trow:45} .trow-46{--trow:46} .trow-47{--trow:47} .trow-48{--trow:48} .trow-49{--trow:49} .trow-50{--trow:50} .trow-51{--trow:51} .trow-52{--trow:52} .trow-53{--trow:53} .trow-54{--trow:54} .trow-55{--trow:55} .trow-56{--trow:56} .trow-57{--trow:57} .trow-58{--trow:58} .trow-59{--trow:59} .trow-60{--trow:60}
/* The same on a phone: the live phone grid has its own rows, each at least 24px with an 11px gap. */
@media (max-width: 767px) { .has-trowp .section-inner { padding-top: calc((var(--trowp) - 1) * 35px); } }
.trowp-2{--trowp:2} .trowp-3{--trowp:3} .trowp-4{--trowp:4} .trowp-5{--trowp:5} .trowp-6{--trowp:6} .trowp-7{--trowp:7} .trowp-8{--trowp:8} .trowp-9{--trowp:9} .trowp-10{--trowp:10} .trowp-11{--trowp:11} .trowp-12{--trowp:12} .trowp-13{--trowp:13} .trowp-14{--trowp:14} .trowp-15{--trowp:15} .trowp-16{--trowp:16} .trowp-17{--trowp:17} .trowp-18{--trowp:18} .trowp-19{--trowp:19} .trowp-20{--trowp:20} .trowp-21{--trowp:21} .trowp-22{--trowp:22} .trowp-23{--trowp:23} .trowp-24{--trowp:24} .trowp-25{--trowp:25} .trowp-26{--trowp:26} .trowp-27{--trowp:27} .trowp-28{--trowp:28} .trowp-29{--trowp:29} .trowp-30{--trowp:30} .trowp-31{--trowp:31} .trowp-32{--trowp:32} .trowp-33{--trowp:33} .trowp-34{--trowp:34} .trowp-35{--trowp:35} .trowp-36{--trowp:36} .trowp-37{--trowp:37} .trowp-38{--trowp:38} .trowp-39{--trowp:39} .trowp-40{--trowp:40} .trowp-41{--trowp:41} .trowp-42{--trowp:42} .trowp-43{--trowp:43} .trowp-44{--trowp:44} .trowp-45{--trowp:45} .trowp-46{--trowp:46} .trowp-47{--trowp:47} .trowp-48{--trowp:48} .trowp-49{--trowp:49} .trowp-50{--trowp:50} .trowp-51{--trowp:51} .trowp-52{--trowp:52} .trowp-53{--trowp:53} .trowp-54{--trowp:54} .trowp-55{--trowp:55} .trowp-56{--trowp:56} .trowp-57{--trowp:57} .trowp-58{--trowp:58} .trowp-59{--trowp:59} .trowp-60{--trowp:60}
/* Where the words start across: this many columns in (column 2 is the page edge; a column is about 45px and an 11px gap at 1440 wide). */
@media (min-width: 768px) { .has-tcol.section-top .section-inner, .has-tcol.section-hero .section-inner { padding-left: calc((var(--tcol) - 2) * (var(--col-w) + 11px)); } }
.tcol-3{--tcol:3} .tcol-4{--tcol:4} .tcol-5{--tcol:5} .tcol-6{--tcol:6} .tcol-7{--tcol:7} .tcol-8{--tcol:8} .tcol-9{--tcol:9} .tcol-10{--tcol:10} .tcol-11{--tcol:11} .tcol-12{--tcol:12} .tcol-13{--tcol:13} .tcol-14{--tcol:14} .tcol-15{--tcol:15} .tcol-16{--tcol:16} .tcol-17{--tcol:17} .tcol-18{--tcol:18} .tcol-19{--tcol:19} .tcol-20{--tcol:20} .tcol-21{--tcol:21} .tcol-22{--tcol:22} .tcol-23{--tcol:23} .tcol-24{--tcol:24}
/* The words of a top banner as wide as the live page's heading column: columns of its 24-column grid (about 45px at 1440 wide, 11px apart). */
:root { --col-w: calc((min(1500px, 100vw - 8vw) - 253px) / 24); }
@media (min-width: 768px) {
  .has-cols .hero-heading, .has-cols .hero-subtitle, .has-cols.section-top .section-heading, .has-cols.section-top.layout-one .section-columns { max-width: calc(var(--cols) * var(--col-w) + (var(--cols) - 1) * 11px); }
}
.cols-1{--cols:1} .cols-2{--cols:2} .cols-3{--cols:3} .cols-4{--cols:4} .cols-5{--cols:5} .cols-6{--cols:6} .cols-7{--cols:7} .cols-8{--cols:8} .cols-9{--cols:9} .cols-10{--cols:10} .cols-11{--cols:11} .cols-12{--cols:12} .cols-13{--cols:13} .cols-14{--cols:14} .cols-15{--cols:15} .cols-16{--cols:16} .cols-17{--cols:17} .cols-18{--cols:18} .cols-19{--cols:19} .cols-20{--cols:20} .cols-21{--cols:21} .cols-22{--cols:22} .cols-23{--cols:23} .cols-24{--cols:24}
.section-columns { display: grid; gap: 2rem var(--col-gap); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 768px) {
  .layout-two > .section-inner > .section-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-three > .section-inner > .section-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-four > .section-inner > .section-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layout-split > .section-inner > .section-columns { grid-template-columns: 5fr 7fr; }
  .layout-splitReverse > .section-inner > .section-columns { grid-template-columns: 7fr 5fr; }
}
/* A free-layout section places each column on the grid the live page used: 8 columns on a phone, 24 from 768px, rows as tall as their content needs and at least the live row height. */
.section-free > .section-inner > .section-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows-m), minmax(24px, auto)); gap: 11px; align-items: stretch; }
.section-free > .section-inner > .section-columns > .section-col { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; grid-column: var(--m1) / var(--m2); grid-row: var(--mr1) / var(--mr2); z-index: var(--z, 0); }
.section-free > .section-inner > .section-columns > .va-center { justify-content: center; }
.section-free > .section-inner > .section-columns > .va-end { justify-content: flex-end; }
@media (min-width: 768px) {
  .section-free > .section-inner > .section-columns { grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(calc(min(1500px, 100vw - 8vw) * 0.0215), auto)); }
  .section-free > .section-inner > .section-columns > .section-col { grid-column: var(--c1) / var(--c2); grid-row: var(--r1) / var(--r2); }
}
.section-col > :last-child { margin-bottom: 0; }
.section-col figure { margin: 0 0 1rem; }
.section .section-col h1, .section .section-col h2, .section .section-col h3 { margin-top: 0; }
.cards .section-col { padding: var(--card-pad); border-radius: var(--card-radius); background: var(--white); color: var(--black); box-shadow: 0 2px 14px rgb(0 0 0 / 0.08); align-self: stretch; }
.cards .section-col a:hover { color: var(--dark-accent); }
/* The top banner (a hero section, or the section that holds the page's h1 over a picture) is set as on the live site: the words sit in the
   middle of the band, in a column about half the page wide, so a long heading wraps over a few lines. */
/* A hero sits under the translucent header, so its words start below it. */
.section-hero, .has-hero .section-top.has-rows { padding-top: calc(var(--header-h) + var(--band-pad, 3rem)); padding-bottom: var(--band-pad, 5rem); }
.section-hero:not(.has-rows) { min-height: 46rem; }
@media (max-width: 767px) { .section-hero:not(.has-rows) { min-height: 30rem; } }
.section-hero .section-inner { max-width: 1500px; }
.section-heading { margin: 0 0 1.5rem; font-weight: 700; }
.hero-heading { max-width: 16em; margin: 0 0 1rem; font-weight: 700; }
.hero-subtitle { max-width: 36rem; margin: 0 0 1.5rem; font-size: clamp(19.35px, calc(0.372vw + 17px), 22.3px); line-height: 1.6; }

/* Type scale, as the live site sets it (its size steps follow the window width): 59.5px, 42.5px, 30.6px at 1440 wide, and the large
   paragraph 22.3px; on a phone 43px, 32.2px, 24.64px and 19.35px. The live site's own typeface is licensed and not held here, so DM Sans
   is set at the same sizes and line heights. */
.section h1, .hero-heading { font-weight: 700; font-size: clamp(43px, calc(3vw + 17px), 59.5px); line-height: 1.08; }
.section h2 { font-weight: 700; font-size: clamp(32.2px, calc(1.8vw + 17px), 42.5px); line-height: 1.127; }
.section h3 { font-weight: 700; font-size: clamp(24.64px, calc(0.96vw + 17px), 30.6px); line-height: 1.16; }
.section h4 { font-weight: 700; font-size: 17px; line-height: 1.2; }
.prose-block p.lead { font-size: clamp(19.35px, calc(0.372vw + 17px), 22.3px); line-height: 1.6; }

/* The live site's highlight: a curved underline drawn behind the words, as wide as they are, in black (accent green on a dark band). */
main mark { background: none; color: inherit; background-image: url("/assets/underline-black.svg"); background-repeat: no-repeat; background-position: 0 50%; background-size: 100% 1.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* On a dark band the live underline is the accent green: the same curve, cut out of an accent-coloured layer so a changed accent still applies. */
.theme-light mark { background-image: none; position: relative; }
.theme-light mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.16em; transform: translateY(-50%); background: var(--accent); -webkit-mask: url("/assets/underline-black.svg") 0 0 / 100% 100% no-repeat; mask: url("/assets/underline-black.svg") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.has-cols .hero-heading, .has-cols.section-top .section-heading { margin-bottom: 34px; }
/* A hero that was not sized from the live grid keeps the live headline measure. */
.section-hero .section-columns { align-items: flex-start; }

/* Headings (or all the text) in the accent colour, as the live "bold" and "bright inverse" themes set them. */
.emph-headings.theme-light :is(h1, h2, h3, h4) { color: var(--accent); }
.emph-headings.theme-dark :is(h1, h2, h3, h4) { color: var(--heading-navy); }
.emph-all, .emph-all :is(h1, h2, h3, h4, p, li, a, summary) { color: var(--accent); }
.emph-headings.theme-light :is(h1, h2, h3, h4):has(.accent-words) { color: var(--white); }
.accent-words { color: var(--accent); }
.cards.emph-headings .section-col :is(h1, h2, h3, h4), .cards.emph-all .section-col, .cards.emph-all .section-col :is(h1, h2, h3, h4, p, li, a, summary) { color: var(--black); }

/* Footer badges, map ------------------------------------------------------ */
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 4.5rem 0 0; padding: 0; list-style: none; }
.footer-badges img { display: block; height: 147px; width: auto; }
/* On a wide screen each badge is centred in its own part of live's grid: the SGS and UKAS mark in the first five columns, Cyber Essentials in the next four. */
@media (min-width: 768px) { .footer-badges { display: grid; grid-template-columns: 21% 16.8%; gap: 0; } .footer-badges li { display: flex; justify-content: center; } }
.map { margin: 0 0 var(--block-gap); }
.map img, .map-placeholder { display: block; width: 100%; min-height: 12rem; background: var(--light-accent); border-radius: 6px; }
.map-consent { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: 0.75rem; }
.map-show { padding: 0.8rem 1.6rem; border: 0; border-radius: 6px; background: var(--black); color: var(--white); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.map-show:hover { opacity: 0.85; }
.map-note { margin: 0; font-size: 14px; }
.issuu-embed { position: relative; width: 100%; }
.issuu-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.issuu-frame { display: block; width: 100%; aspect-ratio: 5 / 3; min-height: 326px; border: 0; }
.map-frame { display: block; width: 100%; height: 22rem; border: 0; border-radius: 6px; }
.map-link { display: inline-block; margin-top: 0.5rem; padding: 0.6rem 1.2rem; border: 1px solid currentColor; border-radius: 4px; text-decoration: none; font-size: 15px; }

/* Search box on the blog and press-release indexes, and its results page ---- */
.site-search { position: relative; max-width: 880px; margin: 0 auto; }
.site-search-input { box-sizing: border-box; width: 100%; height: 45px; margin: 0; padding: 0 1rem 0 3.25rem; border: 1px solid #ccc; border-radius: 0; background: var(--white); color: var(--black); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; }
.site-search-input::placeholder { color: #6b6b6b; opacity: 1; }
.site-search-input:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.site-search-go { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 3.25rem; height: 100%; padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; }
.site-search-go svg { width: 1.15rem; height: 1.15rem; }
.site-search-go:focus-visible { outline: 2px solid var(--black); outline-offset: -4px; }
.page-search .site-search { max-width: none; }
.page-search .site-search-input { height: 5rem; padding-left: 5rem; font-size: 28px; }
.page-search .site-search-go { width: 5rem; }
.page-search .site-search-go svg { width: 1.9rem; height: 1.9rem; }
.search-results { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.search-result { display: flow-root; padding: 1.6rem 0; border-top: 1px solid #e5e5e5; }
.search-result-image { float: left; margin: 0 1.6rem 0.5rem 0; }
.search-result-image img { display: block; width: 245px; height: 245px; object-fit: cover; }
.search-result h2 { margin: 0 0 1rem; font-weight: 400; font-size: clamp(1.4rem, 3vw, 28px); }
.search-result h2 a { text-decoration: none; }
.search-result p { margin: 0; }
.search-result em { font-style: italic; }
.search-empty { margin: 2rem 0 0; font-size: 14px; }
@media (max-width: 640px) {
  .page-search .site-search-input { height: 4.5rem; padding-left: 4rem; font-size: 22px; }
  .page-search .site-search-go { width: 4rem; }
  .search-result-image { margin-right: 1rem; }
  .search-result-image img { width: 44px; height: 44px; }
}

/* Video library ------------------------------------------------------------
 * No script: the chips are radio buttons and Show more is a checkbox, read through :has(). A card carries data-c (its
 * category's number), data-x (past the first page of All videos) and data-y (past the first page of its own category).
 * Filter 0 is All videos, 1 to 12 the categories (the block allows 12, MAX_CATEGORIES in lib/videoLibrary.ts).
 * A browser without :has() shows every video
 * and no chip bar (it is shown only under @supports selector(:has(*))), which is a complete page. */
.vlib { margin: 0 0 var(--block-gap); color: var(--black); }
.vlib input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vlib-bar { display: none; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 24px; }
.vlib-filter { margin-right: 2px; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #5a6482; white-space: nowrap; }
.vlib-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid #dde0ef; border-radius: 100px; background: var(--white); color: #3d4466; font-size: 12px; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.vlib-chip:hover { border-color: var(--dark-accent); color: var(--dark-accent); }
.vlib-chip:has(input:checked) { border-color: var(--dark-accent); background: var(--dark-accent); color: var(--white); }
.vlib-chip:has(input:focus-visible), .vlib-more:has(input:focus-visible) { outline: 2px solid var(--dark-accent); outline-offset: 2px; }
.vlib-n { min-width: 18px; padding: 1px 6px; border-radius: 100px; background: rgb(0 0 0 / 0.08); font-size: 10px; font-weight: 400; text-align: center; }
.vlib-chip:has(input:checked) .vlib-n { background: rgb(255 255 255 / 0.18); }
.vlib-sub { display: none; align-items: baseline; justify-content: space-between; margin: 56px 0 20px; padding-bottom: 14px; border-bottom: 2px solid #e6e8f5; }
.vlib-bar + .vlib-sub, .vlib-f + .vlib-sub { margin-top: 0; }
.vlib-sub-title { margin: 0; color: var(--dark-accent); font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; }
.vlib-sub-title::before { content: ""; display: inline-block; width: 3px; height: 18px; margin-right: 10px; border-radius: 2px; background: var(--accent); vertical-align: middle; }
.vlib-count { color: #5a6482; font-size: 12px; white-space: nowrap; }
.vlib-less + .vlib-all { display: none; }
.vlib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.vlib-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dde0ef; border-radius: 16px; background: var(--white); cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.vlib-card:hover { transform: translateY(-3px); border-color: #cdd4e8; box-shadow: 0 12px 28px rgb(0 19 93 / 0.12); }
.vlib-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #00135d 0%, #0a2a8a 100%); }
.vlib-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.vlib-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vlib-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vlib-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; color: rgb(255 255 255 / 0.9); font-size: 14px; font-weight: 700; text-align: center; }
.vlib-play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgb(255 255 255 / 0.94); color: #00135d; box-shadow: 0 6px 18px rgb(0 0 0 / 0.28); transition: transform 0.16s ease; }
.vlib-play svg { width: 22px; height: 22px; margin-left: 3px; }
.vlib-card:hover .vlib-play { transform: scale(1.08); }
.vlib-dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgb(0 19 93 / 0.86); color: var(--white); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.vlib-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.vlib-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 18px 20px; }
.vlib-pill { align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, var(--white)); color: var(--dark-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.vlib-title { margin: 0; color: var(--dark-accent); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.vlib-meta { margin: auto 0 0; color: #5a6482; font-size: 12.5px; }
.vlib-foot { margin-top: 36px; text-align: center; }
.vlib-more { position: relative; display: none; padding: 11px 28px; border: 1.5px solid var(--dark-accent); border-radius: 99px; background: var(--white); color: var(--dark-accent); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.vlib-more:hover { background: var(--dark-accent); color: var(--white); }
.vlib-fewer { display: none; }
.vlib-more:has(.vlib-m:checked) .vlib-show { display: none; }
.vlib-more:has(.vlib-m:checked) .vlib-fewer { display: inline; }
.vlib-note { margin: 28px 0 0; color: #5a6482; font-size: 13px; text-align: center; }
@supports selector(:has(*)) { .vlib-bar { display: flex; } }
@media (max-width: 900px) { .vlib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 640px) {
  .vlib-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vlib-bar { flex-wrap: nowrap; margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px 0; overflow-x: auto; scrollbar-width: none; }
  .vlib-bar::-webkit-scrollbar { display: none; }
  .vlib-filter { display: none; }
  .vlib-chip { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vlib-chip, .vlib-card, .vlib-play, .vlib-more { transition: none; }
  .vlib-card:hover { transform: none; }
  .vlib-card:hover .vlib-play { transform: none; }
}

/* One set per filter: its heading and count, its Show more, and the cards it hides. The twelve sets are mechanical: the same
 * eight lines with the number changed (a test holds them to MAX_CATEGORIES), so change the pattern in all of them or in none. */
.vlib:has(.vlib-f[value="0"]:checked) .vlib-sub[data-f="0"] { display: flex; }
.vlib:has(.vlib-f[value="0"]:checked) .vlib-more[data-f="0"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="0"]:checked) .vlib-sub[data-f="0"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="0"]:checked) .vlib-sub[data-f="0"] .vlib-all { display: inline; }
.vlib:not(.vlib-sections):has(.vlib-f[value="0"]:checked):not(:has(.vlib-m[data-f="0"]:checked)) .vlib-card[data-x] { display: none; }
.vlib:has(.vlib-f[value="1"]:checked) .vlib-sub[data-f="1"] { display: flex; }
.vlib:has(.vlib-f[value="1"]:checked) .vlib-more[data-f="1"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="1"]:checked) .vlib-sub[data-f="1"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="1"]:checked) .vlib-sub[data-f="1"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="1"]:checked) .vlib-card:not([data-c="1"]) { display: none; }
.vlib:has(.vlib-f[value="1"]:checked):not(:has(.vlib-m[data-f="1"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="2"]:checked) .vlib-sub[data-f="2"] { display: flex; }
.vlib:has(.vlib-f[value="2"]:checked) .vlib-more[data-f="2"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="2"]:checked) .vlib-sub[data-f="2"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="2"]:checked) .vlib-sub[data-f="2"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="2"]:checked) .vlib-card:not([data-c="2"]) { display: none; }
.vlib:has(.vlib-f[value="2"]:checked):not(:has(.vlib-m[data-f="2"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="3"]:checked) .vlib-sub[data-f="3"] { display: flex; }
.vlib:has(.vlib-f[value="3"]:checked) .vlib-more[data-f="3"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="3"]:checked) .vlib-sub[data-f="3"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="3"]:checked) .vlib-sub[data-f="3"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="3"]:checked) .vlib-card:not([data-c="3"]) { display: none; }
.vlib:has(.vlib-f[value="3"]:checked):not(:has(.vlib-m[data-f="3"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="4"]:checked) .vlib-sub[data-f="4"] { display: flex; }
.vlib:has(.vlib-f[value="4"]:checked) .vlib-more[data-f="4"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="4"]:checked) .vlib-sub[data-f="4"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="4"]:checked) .vlib-sub[data-f="4"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="4"]:checked) .vlib-card:not([data-c="4"]) { display: none; }
.vlib:has(.vlib-f[value="4"]:checked):not(:has(.vlib-m[data-f="4"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="5"]:checked) .vlib-sub[data-f="5"] { display: flex; }
.vlib:has(.vlib-f[value="5"]:checked) .vlib-more[data-f="5"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="5"]:checked) .vlib-sub[data-f="5"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="5"]:checked) .vlib-sub[data-f="5"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="5"]:checked) .vlib-card:not([data-c="5"]) { display: none; }
.vlib:has(.vlib-f[value="5"]:checked):not(:has(.vlib-m[data-f="5"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="6"]:checked) .vlib-sub[data-f="6"] { display: flex; }
.vlib:has(.vlib-f[value="6"]:checked) .vlib-more[data-f="6"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="6"]:checked) .vlib-sub[data-f="6"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="6"]:checked) .vlib-sub[data-f="6"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="6"]:checked) .vlib-card:not([data-c="6"]) { display: none; }
.vlib:has(.vlib-f[value="6"]:checked):not(:has(.vlib-m[data-f="6"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="7"]:checked) .vlib-sub[data-f="7"] { display: flex; }
.vlib:has(.vlib-f[value="7"]:checked) .vlib-more[data-f="7"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="7"]:checked) .vlib-sub[data-f="7"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="7"]:checked) .vlib-sub[data-f="7"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="7"]:checked) .vlib-card:not([data-c="7"]) { display: none; }
.vlib:has(.vlib-f[value="7"]:checked):not(:has(.vlib-m[data-f="7"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="8"]:checked) .vlib-sub[data-f="8"] { display: flex; }
.vlib:has(.vlib-f[value="8"]:checked) .vlib-more[data-f="8"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="8"]:checked) .vlib-sub[data-f="8"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="8"]:checked) .vlib-sub[data-f="8"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="8"]:checked) .vlib-card:not([data-c="8"]) { display: none; }
.vlib:has(.vlib-f[value="8"]:checked):not(:has(.vlib-m[data-f="8"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="9"]:checked) .vlib-sub[data-f="9"] { display: flex; }
.vlib:has(.vlib-f[value="9"]:checked) .vlib-more[data-f="9"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="9"]:checked) .vlib-sub[data-f="9"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="9"]:checked) .vlib-sub[data-f="9"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="9"]:checked) .vlib-card:not([data-c="9"]) { display: none; }
.vlib:has(.vlib-f[value="9"]:checked):not(:has(.vlib-m[data-f="9"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="10"]:checked) .vlib-sub[data-f="10"] { display: flex; }
.vlib:has(.vlib-f[value="10"]:checked) .vlib-more[data-f="10"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="10"]:checked) .vlib-sub[data-f="10"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="10"]:checked) .vlib-sub[data-f="10"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="10"]:checked) .vlib-card:not([data-c="10"]) { display: none; }
.vlib:has(.vlib-f[value="10"]:checked):not(:has(.vlib-m[data-f="10"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="11"]:checked) .vlib-sub[data-f="11"] { display: flex; }
.vlib:has(.vlib-f[value="11"]:checked) .vlib-more[data-f="11"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="11"]:checked) .vlib-sub[data-f="11"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="11"]:checked) .vlib-sub[data-f="11"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="11"]:checked) .vlib-card:not([data-c="11"]) { display: none; }
.vlib:has(.vlib-f[value="11"]:checked):not(:has(.vlib-m[data-f="11"]:checked)) .vlib-card[data-y] { display: none; }
.vlib:has(.vlib-f[value="12"]:checked) .vlib-sub[data-f="12"] { display: flex; }
.vlib:has(.vlib-f[value="12"]:checked) .vlib-more[data-f="12"] { display: inline-block; }
.vlib:has(.vlib-m[data-f="12"]:checked) .vlib-sub[data-f="12"] .vlib-less { display: none; }
.vlib:has(.vlib-m[data-f="12"]:checked) .vlib-sub[data-f="12"] .vlib-all { display: inline; }
.vlib:has(.vlib-f[value="12"]:checked) .vlib-card:not([data-c="12"]) { display: none; }
.vlib:has(.vlib-f[value="12"]:checked):not(:has(.vlib-m[data-f="12"]:checked)) .vlib-card[data-y] { display: none; }

/* Card list (blog posts, press releases, coverage, downloads, webinars): the video library's component with a text card. Grid mode
 * uses the rules above unchanged. Sections mode (.vlib-sections) has one section per category: the chosen chip hides the other
 * sections, and each section folds its own cards past the first page (data-x) until its Show more is checked. The first chip's
 * data-x rule above is held off sections mode (:not(.vlib-sections)) because it counts one Show more for the whole list. The twelve
 * sets below are mechanical, like the video library's: the same two lines with the number changed, held to the block by a test. */
.vlib-sections .vlib-sub { display: flex; }
.vlib-sections .vlib-more { display: inline-block; }
.vlib-sec { margin-top: 56px; }
.vlib-bar + .vlib-sec, .vlib-bar + .vlib-featured + .vlib-sec, .vlib-f + .vlib-sec { margin-top: 0; }
.vlib-sec .vlib-sub { margin-top: 0; }
.vlib-sec:not(:has(.vlib-m:checked)) .vlib-card[data-x] { display: none; }
.vlib-sec:has(.vlib-m:checked) .vlib-less { display: none; }
.vlib-sec:has(.vlib-m:checked) .vlib-all { display: inline; }
.vlib-card:has(.vlib-title a):hover .vlib-title a { text-decoration: underline; }
.vlib-card .vlib-media { display: block; }
.vlib-card .vlib-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vlib-card a { color: inherit; text-decoration: none; }
.vlib-card a:focus-visible { outline: 2px solid var(--dark-accent); outline-offset: 2px; border-radius: 4px; }
.vlib-text { margin: 0; color: #3d4466; font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.vlib-cta { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.vlib-cta a { color: var(--dark-accent); text-decoration: none; }
.vlib-cta a::after { content: " \2192"; }
.vlib-featured { display: grid; grid-template-columns: 1.1fr 0.9fr; margin: 0 0 56px; cursor: default; }
.vlib-featured .vlib-body { padding: 26px 28px; justify-content: center; }
.vlib-featured .vlib-title { font-size: 22px; line-height: 1.3; }
.vlib-featured .vlib-media { min-height: 260px; }
.vlib-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vlib-eyebrow .vlib-pill { background: var(--dark-accent); color: var(--accent); }
.vlib-eyebrow-category { color: #5a6482; font-size: 12px; }
.vlib-empty { display: none; padding: 40px 0; color: #5a6482; font-size: 14px; text-align: center; }
@media (max-width: 640px) {
  .vlib-featured { grid-template-columns: minmax(0, 1fr); }
  .vlib-featured .vlib-media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .vlib-featured .vlib-body { padding: 18px; }
}
.vlib-list:has(.vlib-f:not([value="0"]):checked) .vlib-featured { display: none; }
.vlib-list:has(.vlib-f[value="1"]:checked) .vlib-sec:not([data-c="1"]) { display: none; }
.vlib-list:has(.vlib-f[value="1"]:checked) .vlib-empty[data-c="1"] { display: block; }
.vlib-list:has(.vlib-f[value="2"]:checked) .vlib-sec:not([data-c="2"]) { display: none; }
.vlib-list:has(.vlib-f[value="2"]:checked) .vlib-empty[data-c="2"] { display: block; }
.vlib-list:has(.vlib-f[value="3"]:checked) .vlib-sec:not([data-c="3"]) { display: none; }
.vlib-list:has(.vlib-f[value="3"]:checked) .vlib-empty[data-c="3"] { display: block; }
.vlib-list:has(.vlib-f[value="4"]:checked) .vlib-sec:not([data-c="4"]) { display: none; }
.vlib-list:has(.vlib-f[value="4"]:checked) .vlib-empty[data-c="4"] { display: block; }
.vlib-list:has(.vlib-f[value="5"]:checked) .vlib-sec:not([data-c="5"]) { display: none; }
.vlib-list:has(.vlib-f[value="5"]:checked) .vlib-empty[data-c="5"] { display: block; }
.vlib-list:has(.vlib-f[value="6"]:checked) .vlib-sec:not([data-c="6"]) { display: none; }
.vlib-list:has(.vlib-f[value="6"]:checked) .vlib-empty[data-c="6"] { display: block; }
.vlib-list:has(.vlib-f[value="7"]:checked) .vlib-sec:not([data-c="7"]) { display: none; }
.vlib-list:has(.vlib-f[value="7"]:checked) .vlib-empty[data-c="7"] { display: block; }
.vlib-list:has(.vlib-f[value="8"]:checked) .vlib-sec:not([data-c="8"]) { display: none; }
.vlib-list:has(.vlib-f[value="8"]:checked) .vlib-empty[data-c="8"] { display: block; }
.vlib-list:has(.vlib-f[value="9"]:checked) .vlib-sec:not([data-c="9"]) { display: none; }
.vlib-list:has(.vlib-f[value="9"]:checked) .vlib-empty[data-c="9"] { display: block; }
.vlib-list:has(.vlib-f[value="10"]:checked) .vlib-sec:not([data-c="10"]) { display: none; }
.vlib-list:has(.vlib-f[value="10"]:checked) .vlib-empty[data-c="10"] { display: block; }
.vlib-list:has(.vlib-f[value="11"]:checked) .vlib-sec:not([data-c="11"]) { display: none; }
.vlib-list:has(.vlib-f[value="11"]:checked) .vlib-empty[data-c="11"] { display: block; }
.vlib-list:has(.vlib-f[value="12"]:checked) .vlib-sec:not([data-c="12"]) { display: none; }
.vlib-list:has(.vlib-f[value="12"]:checked) .vlib-empty[data-c="12"] { display: block; }

/* A row of social icons: links drawn as icons, their words kept as each link's accessible name. */
.social-icons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1em 0; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: inherit; border: 1.5px solid currentColor; text-decoration: none; }
.social-icons a:hover { opacity: 0.7; }
.social-icons a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Lead form (Transpond): the form draws itself; a button-style form keeps its slot closed until the button is clicked. */
.tp-form-slot { margin-top: 1.5rem; }
.tp-form-slot[hidden] { display: none; }