.m-nav-toggle,.m-nav,.m-nav-backdrop{display:none}
@media (max-width:991px){
  .m-nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;position:fixed;top:12px;right:14px;z-index:1100;width:46px;height:46px;padding:11px;box-sizing:border-box;background:#1f8ceb;border:0;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer}
  .m-nav-toggle span{display:block;height:3px;width:100%;background:#fff;border-radius:2px;transition:.2s}
  /* While the page is scrolled down the button is out of the way of the text
     (#217, site.js); keyboard focus on it shows it wherever the page is. */
  .m-nav-toggle{transition:transform .2s ease,opacity .2s ease}
  .m-nav-toggle--away:not(:focus-visible){transform:translateY(-70px);opacity:0;pointer-events:none}
  body.m-nav-open .m-nav-toggle--away{transform:none;opacity:1;pointer-events:auto}
  @media (prefers-reduced-motion:reduce){.m-nav-toggle{transition:none}}
  body.m-nav-open .m-nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.m-nav-open .m-nav-toggle span:nth-child(2){opacity:0}
  body.m-nav-open .m-nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .m-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.2s;z-index:1090}
  body.m-nav-open .m-nav-backdrop{opacity:1;visibility:visible}
  /* A closed menu is also hidden (once it has slid out), so its controls take no
     focus and are not exposed to screen readers (#107). */
  .m-nav{display:block;position:fixed;top:0;right:0;width:84%;max-width:340px;height:100%;background:#171717;z-index:1095;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 0 30px}
  .m-nav:before{content:"";display:block;position:sticky;top:0;height:68px;background:#171717;z-index:2}
  body.m-nav-open .m-nav{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  html:has(body.m-nav-open){overflow:hidden}
  /* The open menu lies above the CookieScript banner (z-index 999997, the bottom 355 px of
     a phone on a first visit), so About and Contact can be tapped; once it closes the banner
     is on top again (#258, MNAV-29). */
  body.m-nav-open .m-nav-backdrop{z-index:999998}
  body.m-nav-open .m-nav{z-index:999999}
  body.m-nav-open .m-nav-toggle{z-index:1000000}
  /* the suggestions of the menu's search field (search.js) stay above the open menu */
  body.m-nav-open .c-search-dd{z-index:1000001}
  .m-nav-search{padding:0 16px 12px}
  .m-nav-search-input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #3a3a3a;border-radius:6px;background:#222;color:#fff;font-size:15px}
  .m-nav-search-input::placeholder{color:#9aa0a6}
  .m-nav-list,.m-nav .m-sub{list-style:none;margin:0;padding:0}
  .m-nav-list>li{border-bottom:1px solid #2a2a2a}
  .m-nav a{display:block;color:#fff;text-decoration:none;padding:13px 20px;font-size:15px;line-height:1.3}
  .m-nav a:active,.m-nav a:hover{background:#222}
  /* the page on show, and the entry above it (#225, MNAV-25): a blue bar, also in forced colours */
  .m-nav a[aria-current]{border-left:4px solid #1f8ceb;padding-left:16px}
  .m-nav a[aria-current="page"]{font-weight:600;background:#222}
  .m-has-sub{position:relative}
  .m-nav .m-has-sub>a{padding-right:54px}
  .m-sub-toggle{position:absolute;top:0;right:0;width:54px;height:48px;background:transparent;border:0;cursor:pointer;padding:0}
  .m-sub-toggle:before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-right:2px solid #8fb7d6;border-bottom:2px solid #8fb7d6;transform:translate(-50%,-70%) rotate(45deg);transition:transform .2s}
  .m-has-sub.m-open>.m-sub-toggle:before{transform:translate(-50%,-30%) rotate(-135deg)}
  .m-sub{display:none;background:rgba(0,0,0,.25)}
  .m-has-sub.m-open>.m-sub{display:block}
  .m-sub a{padding-left:34px;font-size:14px;color:#cfd6dd}
  .m-sub .m-sub a{padding-left:48px}
  .m-nav .m-sub a[aria-current]{padding-left:30px}
}
/* Without JavaScript (NOJS-01) the menu button cannot work. Links stand in for it,
   in <noscript class="m-nav-nojs"> right after the drawer (rebuild/navigation.mjs),
   so with scripts on they do not exist and none of this applies. "Open menu"
   (#mNavToggle) goes to #mNav: while the drawer is the :target it is open, the
   page behind it dimmed and still. The X in place of the button and the dimmed
   strip go back to #mNavToggle, which closes the drawer and puts the focus on
   "Open menu" again. Each step is a history entry, so Back closes an open drawer.
   All submenus are shown; their arrows and the search field need scripts and are
   hidden, and the label without a page ("Events and News") ignores a tap. In a
   browser without the scripting media feature the links stay hidden. */
.m-nav-nojs a{display:none}
@media (max-width:991px) and (scripting:none){
  button.m-nav-toggle,.m-nav-search,.m-sub-toggle{display:none}
  #mNavToggle,#mNav:target~.m-nav-nojs .m-nav-toggle.m-nav-close{display:flex}
  #mNav:target~.m-nav-nojs #mNavToggle{display:none}
  .m-nav-nojs .m-nav-backdrop{display:block}
  #mNav:target~.m-nav-nojs .m-nav-backdrop{opacity:1;visibility:visible}
  .m-nav-close span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .m-nav-close span:nth-child(2){opacity:0}
  .m-nav-close span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  #mNav:target{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  html:has(#mNav:target){overflow:hidden}
  .m-nav .m-sub{display:block}
  .m-nav .m-has-sub>a{padding-right:20px}
  .m-nav a[href^="javascript:"]{pointer-events:none}
}
/* The page-title band scrolls under the fixed menu button: its heading ends
   60 px short of the right edge, so no title text runs under the button
   (#109). A margin, not padding: the heading is a shrink-to-fit inline-block
   with a blue bottom border, which stays as wide as the text. Frozen and Astro
   pages share the band markup. The rule follows the look of the plain title
   below, whose margin it changes. */
/* One <h1> per page (#198): where the content brings the page's own <h1> (article,
   training page) the band shows the section or page name as plain text,
   <div class="page-top-title">. It looks as the band's <h1> does: the theme's
   h1 and ".page-top h1" rules, repeated for the class. */
.page-top .page-top-title{border-bottom:5px solid #0074ad;color:#fff;display:inline-block;font-family:inherit;font-weight:200;letter-spacing:-1px;margin:0 0 -25px;min-height:37px;font-size:2.6em;line-height:46px;padding:0 0 17px;position:relative}
@media (max-width:479px){.page-top .page-top-title{line-height:37px}}
@media (max-width:991px){.page-top h1,.page-top h2,.page-top .page-top-title{margin-right:60px}}
/* Below 992 px the desktop header (d-none d-lg-block) shows only its logo, the
   link to the homepage (MNAV-33): a white bar of 70 px at the top of the page
   that scrolls away with it, the fixed menu button (46 px, 12 px from the top)
   centred at its right end. Search, social icons and the desktop menu stay
   hidden; the drawer has the menu and the search. Every page type (frozen,
   Astro, /search, 404) carries the same header markup. */
@media (max-width:991px){
  #header.fixedheader{display:block!important}
  #header.fixedheader .header-body{min-height:0;border-bottom:0}
  #header.fixedheader .header-container{width:100%;max-width:none;height:70px;padding:0 15px}
  #header.fixedheader .header-column{min-height:0;align-items:flex-start}
  #header.fixedheader .header-column.justify-content-end{display:none}
  #header.fixedheader .logo{margin:0!important;max-height:none}
  #header.fixedheader .logo a{display:block}
  #header.fixedheader .logo img{display:block!important;width:auto;height:40px!important}
}
@media (min-width:992px){.m-nav-toggle,.m-nav,.m-nav-backdrop{display:none!important}}
@media (min-width:992px){#header.fixedheader{position:sticky!important;top:0;z-index:1080}}
/* Desktop dropdowns (#100). Besides on hover, a dropdown is open while the focus is
   in it, also without JavaScript (:focus-within; :has(:focus-visible) lets go for a
   moment between two entries and Tab then finds the next one hidden). site.js adds
   .dd-pointer while the mouse or a finger is in use (a click keeps the hover
   behaviour), .dd-open (keys, first tap) and .dd-shut (Escape). The open item looks
   as on hover, a focused entry lights up as on hover. Below 1100 px there is no room
   right of the Scrum Training dropdown, so the third level opens to the left. */
@media (min-width:992px){
  header nav ul.nav-main:not(.dd-pointer) li.dropdown:focus-within>ul.dropdown-menu,header nav ul.nav-main:not(.dd-pointer) .dropdown-submenu:focus-within>.dropdown-menu,header nav ul.nav-main li.dd-open>ul.dropdown-menu{display:block}
  header nav ul.nav-main li.dd-shut:not(:hover)>ul.dropdown-menu{display:none!important}
  header nav ul.nav-main:not(.dd-pointer)>li.has-children:not(.dd-shut):focus-within>a,header nav ul.nav-main>li.dd-open>a{color:#fff!important;background:#0074ad!important;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .dropdown .dropdown-menu .c-item a:focus-visible{background:#fff2!important}
}
@media (min-width:992px) and (max-width:1099.98px){
  header nav ul.nav-main .dropdown-submenu>.dropdown-menu{left:auto;right:100%;border-radius:6px 0 6px 6px}
  header nav ul.nav-main .dropdown-submenu>a:after{border-width:5px 5px 5px 0}
  /* Services or Events and News can end the first menu row, depending on its width.
     Their dropdowns open to the left, with the right edge under the item. */
  header nav ul.nav-main>li.dropdown:has(>a[href="/services"]),header nav ul.nav-main>li.dropdown:has(>a[href="javascript:void(0)"]){position:relative}
  header nav ul.nav-main>li.dropdown:has(>a[href="/services"])>ul.dropdown-menu,header nav ul.nav-main>li.dropdown:has(>a[href="javascript:void(0)"])>ul.dropdown-menu{left:auto;right:0}
}
/* In-page links, #fragment addresses and keyboard focus land below the sticky
   header (129 px, 165 px with the two-row menu) and, below 992 px, below the
   fixed menu button (bottom edge 58 px), #124. The Suggested Reading page had
   its own offset (.anchored{top:-180px}); dropped, so it is not offset twice. */
@media (min-width:992px){html{scroll-padding-top:175px}}
@media (max-width:991px){html{scroll-padding-top:66px}}
/* The header does not cover its own controls: on a scrolled page, the focus on
   the logo, the search field, the magnifier or a menu entry (Tab, Shift+Tab,
   typing in the search field) must not scroll the page toward the top. So the
   padding is off while the focus is in the header. A large scroll margin on
   the controls instead is not enough: Chrome 145 ignores it on a link (151
   does not), and Chrome scrolls a text field without it. */
@media (min-width:992px){html:has(#header.fixedheader :focus){scroll-padding-top:0}}
.anchored{top:0!important}
/* Scroll-to-top button (#115): site.js shows it (.visible) once the page is
   scrolled; with keyboard focus it shows wherever the page is, so the focus is
   never on an invisible element. Pointing at it still makes it opaque (theme). */
html .scroll-to-top:focus-visible:not(:hover){opacity:.75}
/* Collapse panels (the course accordion on /scrum-training/, #212) are closed by
   the theme (.collapse:not(.show){display:none}) and opened by site.js. Without
   JavaScript nothing could open them, and on paper nobody can: there every panel
   is open. Print also leaves out what only works on a screen: the menu, the
   search field, the drawer and its button, the skip link and the "to top" button
   (PRINT-01). */
@media (scripting:none){.collapse.accordion-body{display:block}}
@media print{
  .collapse.accordion-body{display:block!important}
  #header .header-nav,#header .header-nav-main,.m-nav-toggle,.m-nav,.m-nav-backdrop,.m-nav-nojs,.skip-link,a.scroll-to-top{display:none!important}
}
/* Without JavaScript (#213) a control that only a script can work is not shown:
   the search field and magnifier of the header (search is /search, which needs
   the script and says so) and the arrows and dots of the home page slider (its
   first slide stays). The contact form is posted by the browser itself and
   contact.php sends it back to /contact-us/ with the id of the outcome as the
   #fragment: that message of the form (#msgOk, #msgError, #msgIncomplete,
   hidden by the page's own .alert rule) is shown as the :target. The article
   galleries: gallery.css. */
@media (scripting:none){
  #dnn_ctl13_ClassicSearch,[class*="js-hero-slider"] .slick-arrow,[class*="js-hero-slider"] .slick-dots{display:none!important}
  .app-jqfs-form .app-app-jqfs-message:target{display:block}
}
/* Contact form on phones and tablets (#211): 16 px text in the fields (iOS Safari
   zooms the page in when a field with smaller text takes the focus; the theme
   has 14.4 px) and a message box of about six lines instead of two. */
@media (max-width:991px){
  .app-jqfs-form .form-control{font-size:16px}
  .app-jqfs-form textarea.form-control{min-height:164px}
}
/* Home page band under the slider at 768-991 px (#224): its button
   ("Book a Free 1-Hour Consultation!", one line of about 285 px) sits in a
   column of 210 px and ran past it, up to and beyond the right edge of the
   screen. There the button wraps inside its column. Up to 1199 px the
   handwritten text takes two lines: they get the height of their letters, so
   they no longer run into each other. */
@media (min-width:768px) and (max-width:991.98px){.home-intro .get-started .btn{max-width:100%;white-space:normal}}
@media (min-width:768px) and (max-width:1199.98px){.home-intro p em{display:inline-block;line-height:1.15}}
/* The *PaneFull panes span the viewport. Their content bleeds past it (the -15px row
   gutters of the homepage intro band, the -16px margins of the News / Training and Events
   carousels) and widened the page at every width (#47). The theme only contained this as
   .mobile #Form{overflow-x:hidden}, and nothing sets the "mobile" class in the static
   export. clip, unlike hidden, creates no scroll container, so the sticky header and any
   vertical overflow keep working. */
#dnn_TopPaneFull,#dnn_TopUpperPaneFull,#dnn_TopLowerPaneFull,#dnn_ContentPaneFull,#dnn_MiddlePaneFull,#dnn_BottomPaneFull{overflow-x:clip}
/* Events listing: uniform 260:140 card media + the primary-blue LOAD MORE button
   (behaviour is the "Load more" shim in site.js). The picture is shown whole
   inside that box, on a light tile (#214): cropped to the box, pictures with
   text in them (logos, titles, speaker names) lost part of it. The News listing
   (NewsListing.astro) and the home page strips (below) do the same. */
.edn_549_article_list_wrapper .c-article-card__media{aspect-ratio:13/7;overflow:hidden;background:#f4f4f4}
.edn_549_article_list_wrapper .c-article-card__image{width:100%;height:100%;object-fit:contain}
.eds_news_Sistemi .ednMoreArticlesTriggerWrapper>.trigger{font-size:13px!important;color:#fff!important;background-color:#0074ad!important;border-color:#007bff!important}
.eds_news_Sistemi .ednMoreArticlesTriggerWrapper>.trigger:hover,.eds_news_Sistemi .ednMoreArticlesTriggerWrapper>.trigger:focus{color:#fff!important;border-color:#0062cc!important}
.eds_news_Sistemi .ednMoreArticlesTriggerWrapper>.trigger:before{background-color:#0069d9!important}
.eds_news_Sistemi .ednMoreArticlesTriggerWrapper>.trigger>.actionTextContainer{font-size:13px}
/* Its loading state (.loading, set by the shim while a click waits for
   /loadmore.json) is the theme's spinner overlay, drawn with "animation: spin",
   which no stylesheet of the page defines (#105). The arc turns only while
   loading. */
@keyframes spin{to{transform:rotate(360deg)}}
.ednMoreArticlesTriggerWrapper:not(.loading)>.trigger>.loadingOverlay:before{animation:none}
/* News / Training and Events strips (Swiper markup; behaviour is the carousel
   shim in site.js). Native horizontal scrolling with the original Swiper
   breakpoints: 1 card per view, 3 from 768px, 4 from 1024px, snapping to whole
   pages. Static CSS, so every card stays reachable without JavaScript. */
.l-swiper--carousel .swiper-container{overflow-x:auto!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.l-swiper--carousel .swiper-container::-webkit-scrollbar{display:none}
.l-swiper--carousel .swiper-wrapper{transform:none!important}
.l-swiper--carousel .swiper-slide{width:100%!important;margin-right:0!important;scroll-snap-align:start;overflow-wrap:anywhere}
@media (min-width:768px) and (max-width:1023.98px){
  .l-swiper--carousel .swiper-slide{width:calc((100% - 32px)/3)!important;margin-right:16px!important;scroll-snap-align:none}
  .l-swiper--carousel .swiper-slide:nth-child(3n+1){scroll-snap-align:start}
}
@media (min-width:1024px){
  .l-swiper--carousel .swiper-slide{width:calc((100% - 48px)/4)!important;margin-right:16px!important;scroll-snap-align:none}
  .l-swiper--carousel .swiper-slide:nth-child(4n+1){scroll-snap-align:start}
}
.l-swiper--carousel .swiper-slide:last-child{margin-right:0!important}
/* A card picture is shown whole in its 16:9 box, not cropped to it (#214; the
   theme: object-fit:cover with min-width/min-height 100%). */
.l-swiper--carousel .embed-responsive-item{background:#e8e8e8}
.l-swiper--carousel .embed-responsive-item img,.l-swiper--carousel .embed-responsive-item .img-fluid{width:100%;height:100%;min-width:0;min-height:0;max-width:100%!important;object-fit:contain}
@media (prefers-reduced-motion:reduce){.l-swiper--carousel .swiper-container{scroll-behavior:auto}}
/* A disabled arrow keeps receiving pointer input (site.js ignores the click), so
   a tap on it is never passed on to the card it overlaps on narrow screens
   (Swiper's own CSS makes it click-through). */
.l-swiper--carousel .swiper-button-disabled{pointer-events:auto!important;cursor:default}
.l-swiper--carousel .swiper-button-lock{display:none!important}
/* Without JavaScript the arrows cannot work: hide them, the strip still scrolls. */
@media (scripting:none){.l-swiper--carousel div[class*="swiper-button"]{display:none!important}}
/* Frozen Slick galleries on the training pages (#61). The frozen markup carries
   the pixel widths slick computed on a 1200 px desktop (1110 px slides, 185 px
   thumbnails, 6660 px track) and slick's JS is not shipped. Override them so the
   gallery follows its column: the fade slides share one grid cell, the thumbnails
   are a 6-column grid (3 columns on phones). Behaviour: the Slick shim in site.js. */
[class*="js-slick-slider__carousel--"] .slick-track{display:grid!important;width:auto!important;transform:none!important}
[class*="js-slick-slider__carousel--"] .slick-slide{grid-area:1/1;float:none;width:auto!important;left:auto!important;top:auto!important}
[class*="js-slick-slider__carousel--"] .slick-slide img{-webkit-user-drag:none;user-select:none}
[class*="js-slick-slider__slider--"] .slick-track{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));width:auto!important;transform:none!important}
[class*="js-slick-slider__slider--"] .slick-slide{float:none;width:auto!important;min-width:0;cursor:pointer}
[class*="js-slick-slider__slider--"] .slick-slide img{height:auto}
[class*="js-slick-slider__carousel--"] .slick-track::before,[class*="js-slick-slider__carousel--"] .slick-track::after,[class*="js-slick-slider__slider--"] .slick-track::before,[class*="js-slick-slider__slider--"] .slick-track::after{display:none}
[class*="js-slick-slider__slider--"] .slick-slide.slick-current img{outline:3px solid #1f8ceb;outline-offset:-3px}
[class*="js-slick-slider__slider--"] .slick-slide:focus-visible{outline:3px solid #1f8ceb;outline-offset:-2px}
@media (max-width:767px){[class*="js-slick-slider__slider--"] .slick-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Tables in articles on phones (#96): the cells stack in one column at the column
   width and the images in them shrink to it, so a table laid out for the desktop
   (slides next to text, two 200 px logos) never makes the page wider than the
   screen. Nothing is clipped; from 576 px the authored layout stays. */
@media (max-width:575px){
  .post-content table,.post-content thead,.post-content tbody,.post-content tfoot,.post-content tr,.post-content td,.post-content th{display:block;width:100%!important;box-sizing:border-box}
  .post-content td img,.post-content th img{max-width:100%;height:auto!important}
}
/* Related articles under the frozen /event articles: below 768 px the theme hides
   the thumbnails (.post-image img{display:none}) but not their links, which were
   left as empty links without a name, invisible tab stops before the title link
   to the same article. The picture link goes with its picture; the layout does
   not change (the hidden thumbnail took no space). */
@media (max-width:767px){.edn_relatedArticles .related-article .post-image{display:none}}
/* Hide the floating CookieScript "Cookie settings" badge (per request: it kept
   showing on every page). The consent banner itself still shows on a first visit;
   "Manage cookies" in the footer shows it again (site.js, COOK-16). The clean
   toggle is in the CookieScript dashboard. */
#cookiescript_badge,#cookiescript_badge_wrapper{display:none!important}
/* "Manage cookies" right of the copyright, in its small grey type (#999, 6.8:1 on
   the black bar, as the footer text since #195), so it does not draw the eye;
   white and underlined on hover. */
#footer .footer-copyright a.cookie-settings{margin-left:1.5em;color:#999!important;white-space:nowrap}
#footer .footer-copyright a.cookie-settings:hover{color:#fff!important;text-decoration:underline}
/* Hero slider dots (HERO-08, the owner's option C): the dot of the shown slide
   is a white pill, the others are white rings, and a thin dark edge keeps both
   visible on the light photos. Each dot is a 24 x 24 px tap target (the pill
   42 x 24; WCAG 2.5.8), and bottom:26px keeps the rings at the height of the
   old 20 px glyph dots. The pill widens in 0.25 s, at once with reduced
   motion. The training pages load the same Slick stylesheet for their
   galleries (no dots): hence the hero scope. Keyboard focus ring: #103 below. */
[class*="js-hero-slider"] .slick-dots{bottom:26px}
[class*="js-hero-slider"] .slick-dots li{width:auto;height:24px;margin:0;vertical-align:middle}
[class*="js-hero-slider"] .slick-dots li button{position:relative;width:24px;height:24px;padding:0;transition:width .25s}
[class*="js-hero-slider"] .slick-dots li button::before{content:"";top:7px;left:7px;width:10px;height:10px;border:2px solid #fff;border-radius:5px;box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.55);font-family:inherit;opacity:.85;transition:width .25s}
[class*="js-hero-slider"] .slick-dots li button:hover::before,[class*="js-hero-slider"] .slick-dots li button:focus::before{opacity:1}
[class*="js-hero-slider"] .slick-dots li.slick-active button{width:42px}
[class*="js-hero-slider"] .slick-dots li.slick-active button::before{width:28px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.55);opacity:1}
@media (prefers-reduced-motion:reduce){[class*="js-hero-slider"] .slick-dots li button,[class*="js-hero-slider"] .slick-dots li button::before{transition:none}}
/* Pause / play of the hero rotation (#225; site.js adds the button): a 24 px
   ring in the row of the dots, at the right edge, drawn like them (white with a
   dark edge), with two bars (pause) or a triangle (play) inside. */
[class*="js-hero-slider"] .hero-pause{position:absolute;right:16px;bottom:26px;z-index:1000;width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.45);box-shadow:0 0 0 1px rgba(0,0,0,.55);cursor:pointer;opacity:.85}
[class*="js-hero-slider"] .hero-pause:hover,[class*="js-hero-slider"] .hero-pause:focus{opacity:1}
[class*="js-hero-slider"] .hero-pause::before{content:"";position:absolute;left:6px;top:5px;width:8px;height:10px;box-sizing:border-box;border:solid #fff;border-width:0 3px}
[class*="js-hero-slider"] .hero-pause.is-paused::before{left:7px;width:0;border-style:solid;border-color:transparent transparent transparent #fff;border-width:5px 0 5px 8px}
[class*="js-hero-slider"] .hero-pause[hidden]{display:none}
/* Keyboard focus (#103). The theme strips the outline from every link
   (body a{outline:0!important}) and Slick's stylesheet from the hero arrows and
   dots, with nothing in its place. Every tab stop gets a 2px ring under
   :focus-visible only, so a mouse click on a link shows none: dark blue on the
   light page, white in the dark bands (footer, intro band, page title, menu
   dropdown, mobile drawer) and white with a dark edge on the hero photo and the
   floating menu button. Inside a strip, slider or drawer that clips its content
   the ring is drawn inwards. The article galleries (gallery.css) and the
   training-page thumbnails (above) keep their own rings. "html body" plus
   :focus-visible outweighs the theme's !important resets; :where() keeps the
   general rules at that weight, so a later one overrides an earlier one, and
   the component rules below add a class to win where they must. */
html body :where(a,:not(.agl-gallery *,.agl-coverflow *,.agl-lightbox *,[class*="js-slick-slider__slider--"] *):is(button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]))):focus-visible{outline:2px solid #0056b3!important;outline-offset:2px!important}
html body :where(#footer,.home-intro,.page-top,#mainMenu .dropdown-menu,.m-nav) :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:#fff!important}
html body :where(#mainMenu .dropdown-menu,.m-nav,.l-swiper--carousel .swiper-container) :where(a,button,input):focus-visible{outline-offset:-2px!important}
html body :where([class*="js-hero-slider"] .slick-dots button,[class*="js-hero-slider"] .hero-pause,.m-nav-toggle):focus-visible{outline:2px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 6px rgba(0,0,0,.6)!important}
/* A tap or click focuses the menu button or a drawer arrow, and closing the drawer
   puts the focus back on the button (#107). That focus is not :focus-visible and
   gets no ring, but the theme's Bootstrap reboot rings every focused button
   (button:focus{outline:5px auto -webkit-focus-ring-color}), so the ring stayed
   on the button after a tap (#230). The keyboard keeps the ring above. */
.m-nav-toggle:focus:not(:focus-visible),.m-sub-toggle:focus:not(:focus-visible){outline:0}
/* a hero arrow draws its chevron (a 60px glyph) outside its 20px box: ring the glyph */
html body [class*="js-hero-slider"] .slick-arrow:focus-visible{outline:0!important}
html body [class*="js-hero-slider"] .slick-arrow:focus-visible::before{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(0,0,0,.6)}
/* a strip card's image covers its link's ring: the ring is drawn over the image */
html body .l-swiper--carousel a:focus-visible .embed-responsive::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px #0056b3,inset 0 0 0 4px #fff;pointer-events:none}
/* a related article's image link fills a figure that clips it: ring the figure */
html body .c-article-detail__media:has(>a:focus-visible){outline:2px solid #0056b3;outline-offset:2px}
/* a strip arrow that turns disabled keeps the focus with tabindex="-1" */
html body .l-swiper--carousel :where(.swiper-button-prev,.swiper-button-next):focus-visible{outline:2px solid #0056b3!important;outline-offset:2px!important}
/* the shown slide of the hero or a training-page gallery: a white ring with a
   dark inner edge, inside the slide (the slider clips anything outside) */
html body :where([class*="js-hero-slider"],[class*="js-slick-slider__carousel--"]) .slick-slide:focus-visible{outline:3px solid #fff!important;outline-offset:-3px!important}
html body :where([class*="js-hero-slider"],[class*="js-slick-slider__carousel--"]) .slick-slide:focus-visible::after{content:"";position:absolute;inset:3px;border:2px solid #1a1a1a;pointer-events:none}
/* scroll-to-top sits on the bottom edge (shown while focused, #115): ring inside */
html body a.scroll-to-top:focus-visible{outline-color:#fff!important;outline-offset:-6px!important}
/* Skip link, the first tab stop of every page (enhance.mjs, SiteLayout.astro):
   off screen until focused, then over the top left corner. Enter moves the focus
   to the main region (#main-content, tabindex="-1"). */
.skip-link{position:fixed;top:8px;left:8px;z-index:2000;padding:10px 16px;border-radius:4px;background:#0056b3;color:#fff!important;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none!important;transform:translateY(-200%)}
.skip-link:focus{transform:none}
/* Colour contrast (#195, WCAG 1.4.3 and 1.4.1). The brand blue on a light
   background is #0074ad (5.1:1 on white, 4.6:1 on the grey bands) and body text
   #666 (5.7:1); the skin's stylesheet and the pages carry those values. The
   rules below cover what a plain replacement cannot:
   - grey text on the black footer is lightened instead (#999, 6.8:1);
   - Bootstrap's own blue (#007bff) on the date label of a card and the type
     icon of a document, and its pink for inline code, get colours that pass;
   Links in running text: not marked beyond their colour for now. WCAG 1.4.1 asks
   for a cue besides colour (underline, weight) or 3:1 between link and text;
   which one to use is an open decision of the owners, see issue #242. */
html body #footer,html body #footer p,html body #footer li{color:#999}
html body #footer .footer-copyright span,html body #footer .footer-copyright p{color:#999!important}
html body .c-article-card__label{background-color:#0074ad!important;color:#fff!important}
html body .c-documents-list__item:not(:hover) :is(.c-documents-list__item-icon--type,.c-documents-list__item-title,i.doc-ico-pdf){color:#0074ad!important}
html body code{color:#b3145a}
/* Content pictures carry their true width and height as attributes, so the browser
   reserves their space before the file arrives and the text below does not jump
   (#221). The theme sets only their width (100% of the column); with the attribute
   present the height has to follow it. */
.o-image[width][height],.c-article-detail__image[width][height]{height:auto}