:root{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#333;font-size:15px;line-height:1.65}*{box-sizing:border-box}body{margin:0}a{color:#5374ab;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:3px solid #5374ab;outline-offset:3px}header{background:#202029;color:white;display:flex;align-items:center;justify-content:space-between;padding:18px max(20px,calc((100vw - 1200px)/2));gap:24px}header a{color:white}header nav>ul{display:flex;gap:20px;list-style:none;padding:0;margin:0}header nav li{position:relative}header nav li ul{display:none;position:absolute;z-index:2;background:#202029;padding:15px;min-width:230px;list-style:none}header nav li:hover>ul,header nav li:focus-within>ul{display:block}header nav li ul ul{position:static}header nav>ul>li>ul>li>ul{display:block}.logo{font-size:36px;white-space:nowrap;letter-spacing:-2px}.logo span{color:#a7b9da}main{max-width:1200px;margin:auto;padding:0 24px 36px}h1{font-size:26px;line-height:1.3;font-weight:400}h2,h3{font-size:20px;font-weight:400;line-height:1.4}p{margin:0 0 20px}img{max-width:100%;height:auto}figure{margin:20px 0}.section{padding:16px 0}.row{display:flex;gap:35px;align-items:flex-start}.column{min-width:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.grid_item{background:#e7ebf4;padding:25px;text-align:center}.grid_item img{height:80px;width:auto}.slideshow_item{position:relative;min-height:293px;background:#e7ebf4;display:flex;align-items:center;justify-content:center;overflow:hidden}.slideshow_item img{position:absolute;width:100%;height:100%;object-fit:cover}.slideshow_item :is(h1,h2,h3){position:relative;background:#202029bd;color:white;padding:12px;text-align:center;font-size:30px;text-transform:uppercase;text-shadow:1px 1px 3px #202029}.panel{padding:25px;margin:20px 0}.card-primary{background:#e7ebf4;text-align:center}.panel img{max-width:35%;float:right;margin:0 0 15px 25px}.panel:after{content:"";display:block;clear:both}.button{display:inline-block;padding:7px 16px;border:1px solid #5374ab}.module-menu ul{list-style:none;padding-left:18px}.module-menu>ul{padding:0}.module-menu li a{display:block;padding:5px 8px}.module-menu [aria-current]{background:#5374ab;color:white}.breadcrumbs{font-size:13px;margin:15px 0}.content-list li{margin-bottom:8px}hr{border:0;border-top:1px solid #ddd;margin:25px 0}footer{background:#202029;color:#ddd;padding:25px max(24px,calc((100vw - 1152px)/2))}footer a{color:#b7c9e9}footer .row{align-items:center}footer .module-menu>ul{display:flex;gap:12px}footer .section{padding:0}.skip{position:absolute;left:-9999px}.skip:focus{position:static}@media(max-width:800px){header{flex-direction:column;align-items:flex-start}header nav>ul{flex-wrap:wrap;gap:10px}.row{flex-direction:column}.column{width:100%}.grid{grid-template-columns:1fr}.slideshow_item{min-height:200px}.slideshow_item :is(h1,h2,h3){font-size:23px}footer .row{align-items:flex-start}}

/* Single-image YOOtheme banners: full viewport width and unboxed title. */
.section:has(.slideshow){width:100vw;margin-left:calc(50% - 50vw);padding:0 0 16px}
.section:has(.slideshow)>.row{gap:0}
.section:has(.slideshow) .column{width:100%}
.slideshow_item{height:300px;min-height:300px}
.slideshow_item img{inset:0;object-position:center}
.slideshow_item :is(h1,h2,h3){background:transparent;padding:0 24px;margin:0;color:#fff;font-size:36px;font-weight:400;text-shadow:1px 1px 3px #202029}
@media(max-width:959px){.section:has(.slideshow){display:none}}

/* Match the original navbar: transparent selection and white top rule. */
header{min-height:100px;padding-top:0;padding-bottom:0}
header .module-menu>ul{gap:0}
header .module-menu>ul>li>a{position:relative;display:flex;align-items:center;min-height:100px;padding:0 10px;color:rgba(255,255,255,.8);background:transparent;font-size:16px;letter-spacing:1px;text-decoration:none}
header .module-menu>ul>li>a::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent}
header .module-menu>ul>li.active-branch>a,header .module-menu>ul>li>a:hover,header .module-menu>ul>li>a:focus-visible{color:#fff;background:transparent}
header .module-menu>ul>li.active-branch>a::before,header .module-menu>ul>li:hover>a::before,header .module-menu>ul>li:focus-within>a::before{background:#fff}
header .module-menu li ul{background:#fff;box-shadow:0 5px 15px #0002}
header .module-menu li ul a{color:rgba(0,0,0,.6);background:transparent}
header .module-menu li ul a:hover,header .module-menu li ul a[aria-current]{color:#222;background:#f5f5f5}
@media(max-width:800px){header{padding-top:18px;padding-bottom:18px}header .module-menu>ul>li>a{min-height:44px;font-size:14px}}

/* Pale blue sidebar menus for the service and security sections. */
main .column>.module-menu{background:#e7ebf4;padding:25px}
main .column>.module-menu>ul{margin:0}
main .column>.module-menu li a{color:#333}
main .column>.module-menu li a:hover{color:#5374ab}
main .column>.module-menu li a[aria-current]{background:#5374ab;color:#fff}

/* Software Solutions technology sidebar matches the other sidebar panels. */
main .column>.panel.tile-muted{background:#e7ebf4;padding:25px;margin:0}
main .column>.panel.tile-muted>h3{margin-top:0}

/* Original plan42 image logo, shown at native dimensions. */
header .logo{display:flex;align-items:center;flex-shrink:0;line-height:1}
header .logo img{display:block;width:100px;height:57px;object-fit:contain}

/* Homepage entry cards: title above the icon, as in the source layout. */
.grid>.grid_item{display:flex;flex-direction:column;align-items:center}
.grid>.grid_item>:is(h1,h2,h3,h4,h5,h6){order:-1;margin-top:0;margin-bottom:20px}
.grid>.grid_item>img{flex-shrink:0;margin-bottom:20px}

/* Original footer: three aligned columns and a centered back-to-top control. */
footer{background:#242427;color:rgba(255,255,255,.7);font-size:16px;line-height:26px;padding:40px max(40px,calc((100vw - 1200px)/2))}
footer .section{padding:0}
footer .row{display:flex;gap:40px;align-items:center}
footer .row>.column{flex:1;min-width:0}
footer .row:first-child>.column:nth-child(2){text-align:center}
footer .row:first-child>.column:nth-child(3){text-align:right}
footer p{margin:0}
footer .module-menu>ul{margin:0;padding:0;gap:0;flex-wrap:wrap}
footer .module-menu li a,footer .module-menu [aria-current]{padding:0;color:#5374ab;background:transparent}
footer .module-menu>ul>li+li{display:flex;align-items:center;padding-left:10px}
footer .module-menu>ul>li+li::before{content:"";height:16px;border-left:1px solid #484848;margin-right:10px}
footer nav[aria-label="Language"]{display:flex;justify-content:flex-end;align-items:center;font-size:0;gap:0}
footer nav[aria-label="Language"] a{font-size:16px;color:rgba(255,255,255,.7);padding:0 8px}
footer nav[aria-label="Language"] a:first-child{border-right:1px solid #fff}
footer nav[aria-label="Language"] a:last-child{padding-right:8px}
html[lang="de-DE"] footer nav[aria-label="Language"] a[href="/de/"],html[lang="en-GB"] footer nav[aria-label="Language"] a[href="/en/"]{color:#fff}
footer .row:last-child>.column{text-align:center}
footer a[aria-label="Back to top"]{display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);width:28px;height:26px;padding:5px;text-decoration:none}
footer a[aria-label="Back to top"] svg{width:18px;height:10px}
footer a:hover{color:#fff}
@media(max-width:959px){footer{padding:30px 24px}footer .row{flex-direction:column;gap:16px}footer .row:first-child>.column,footer .row:first-child>.column:nth-child(3){text-align:center}footer .module-menu>ul,footer nav[aria-label="Language"]{justify-content:center}}

/* Equal-height homepage cards, aligned links and original hover colour. */
.grid{align-items:stretch}
.grid>.grid_item{height:100%;transition:background-color .18s ease}
.grid>.grid_item:hover,.grid>.grid_item:focus-within{background:#d5dcec}
.grid>.grid_item>p:last-child{margin-top:auto;margin-bottom:0;padding-top:20px}
.grid>.grid_item>p:last-child .button{border:0;padding:0;color:#5374ab;line-height:1.65}
.grid>.grid_item>p:last-child .button:hover{text-decoration:underline}

/* Contact callout uses the same plain link and spacing as the entry cards. */
main .panel.card-primary{padding:25px}
main .panel.card-primary>:is(h1,h2,h3,h4,h5,h6){margin-top:0;margin-bottom:20px}
main .panel.card-primary>p:last-child{margin:0;padding-top:20px}
main .panel.card-primary .button{border:0;padding:0;color:#5374ab;line-height:1.65}
main .panel.card-primary .button:hover{text-decoration:underline}

/* Match the original body colour and give homepage prose room below the cards. */
:root{color:#1e416c}
main>.section:has(.grid)>.row:has(.grid)+.row{margin-top:40px}

/* Extend each entry link over its whole card without nesting links. */
.grid>.grid_item{position:relative;cursor:pointer}
.grid>.grid_item .button::after{content:"";position:absolute;inset:0;z-index:1}
.grid>.grid_item:has(.button:focus-visible){outline:3px solid #5374ab;outline-offset:3px}

/* Desktop alignment and an accessible compact navigation below 960px. */
header{padding:0 max(40px,calc((100vw - 1200px)/2));gap:30px;min-height:100px;flex-direction:row;align-items:center;flex-wrap:wrap}
header .logo{width:150px;justify-content:center}
#primary-navigation{flex:1;min-width:0}
header #primary-navigation .module-menu>ul{display:flex;justify-content:space-around;gap:0;flex-wrap:nowrap}
header #primary-navigation .module-menu>ul>li>a{white-space:nowrap;font-weight:400;min-height:100px;font-size:16px}
.menu-toggle,.submenu-toggle{display:none}
@media(max-width:959px){
 header{min-height:80px;padding:12px 24px;gap:0;justify-content:space-between}
 header .logo{width:auto}
 header .logo img{width:88px;height:auto}
 .menu-toggle{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#fff;font:inherit;cursor:pointer;padding:12px}
 .menu-toggle>span:first-child{font-size:25px;line-height:1}
 #primary-navigation{display:none;flex-basis:100%;padding-top:12px}
 header.menu-open #primary-navigation{display:block}
 header #primary-navigation .module-menu>ul{display:block}
 header #primary-navigation .module-menu>ul>li>a{min-height:48px;font-size:16px;padding:10px 42px 10px 12px;white-space:normal}
 header #primary-navigation .module-menu li{position:relative}
 header #primary-navigation .module-menu li ul{display:none;position:static;min-width:0;box-shadow:none;background:#29292f;padding:0 0 0 14px}
 header #primary-navigation .module-menu li.submenu-open>ul{display:block}
 header #primary-navigation .module-menu li ul a{color:rgba(255,255,255,.8);padding:10px 42px 10px 12px;white-space:normal}
 header #primary-navigation .module-menu li ul a:hover,header #primary-navigation .module-menu li ul a[aria-current]{background:#35353f;color:#fff}
 header #primary-navigation .module-menu>ul>li>a::before{display:none}
 header #primary-navigation .module-menu>ul>li.active-branch>a{background:#35353f}
 .submenu-toggle{display:block;position:absolute;right:0;top:0;width:42px;height:46px;background:transparent;border:0;color:white;font-size:22px;cursor:pointer}
 .menu-toggle:focus-visible,.submenu-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
}

/* Sidebar text uses the same navy as the Software Solutions panel. */
main .column>.module-menu{background:#e7ebf4;color:#1e416c}
main .column>.module-menu li a{color:#1e416c}
main .column>.module-menu li a:hover{color:#5374ab}
main .column>.module-menu li a[aria-current]{background:#5374ab;color:#fff}

/* Original menu hover states: colour changes without underlines or grey tiles. */
main .column>.module-menu a{transition:color .1s ease-in-out}
main .column>.module-menu a:hover,main .column>.module-menu a:focus-visible{text-decoration:none;color:#5374ab;background:transparent}
main .column>.module-menu>ul>li>a[aria-current]{background:#5374ab;color:#fff}
main .column>.module-menu ul ul a[aria-current]{background:transparent;color:#2d2e33}
@media(min-width:960px){
 header #primary-navigation .module-menu li ul{font-size:14px;font-weight:500;letter-spacing:1px}
 header #primary-navigation .module-menu li ul a{background:transparent;text-decoration:none;transition:color .1s ease-in-out}
 header #primary-navigation .module-menu>ul>li>ul>li>a{color:rgba(0,0,0,.6)}
 header #primary-navigation .module-menu>ul>li>ul>li>a:hover,header #primary-navigation .module-menu>ul>li>ul>li>a:focus-visible{color:#222;background:transparent}
 header #primary-navigation .module-menu li ul ul a{color:#b4b5ba}
 header #primary-navigation .module-menu li ul ul a:hover,header #primary-navigation .module-menu li ul ul a:focus-visible{color:#6c6d74;background:transparent}
 header #primary-navigation .module-menu li ul a[aria-current]{color:#2d2e33;background:transparent}
}

/* Entry-card links stay un-underlined in every interaction state. */
.grid>.grid_item .button,.grid>.grid_item>p:last-child .button:hover,.grid>.grid_item .button:focus-visible,.grid>.grid_item .button:active{text-decoration:none}

/* The entire contact callout links to the contact page. */
main .panel.card-primary:has(.button){position:relative;cursor:pointer}
main .panel.card-primary .button,main .panel.card-primary .button:hover,main .panel.card-primary .button:focus-visible,main .panel.card-primary .button:active{text-decoration:none}
main .panel.card-primary .button::after{content:"";position:absolute;inset:0;z-index:1}
main .panel.card-primary:has(.button:focus-visible){outline:3px solid #5374ab;outline-offset:3px}

/* Contact page aligns with the shared sidebar/content grid. */
.contact-sidebar-empty{min-height:180px;background:#fff}
.contact-content>.section{padding:0}
.contact-content figure{margin-top:0}
@media(max-width:800px){.contact-layout .contact-sidebar{display:none}}

/* Match the visible text inset of sidebar menus (25px panel + link padding). */
main .column>.panel.tile-muted{padding:30px 33px}
main .column>.panel.tile-muted>p:first-child{margin-top:0}
main .column>.panel.tile-muted>ul{padding-left:18px;margin-top:0;margin-bottom:0}

/* Footer links stay un-underlined in every interaction state. */
footer a,footer a:hover,footer a:focus-visible,footer a:active{text-decoration:none}

/* Keep the sidebar's selected parent highlighted on descendant pages. */
main .column>.module-menu>ul>li.active-branch>a,main .column>.module-menu>ul>li.active-branch>a:hover,main .column>.module-menu>ul>li.active-branch>a:focus-visible{background:#5374ab;color:#fff;text-decoration:none}

/* Article body typography matches the original: 16px with 26px line height. */
main .text,main .content-list,main .panel,main .grid_item{font-size:16px;line-height:26px}

/* Article subtitle sits directly below its title, as in the source layout. */
main .column>h1:has(+h2){margin-bottom:0}
main .column>h1+h2{margin-top:0;margin-bottom:10px}

/* Section headings and taglines in the left sidebar. */
main .sidebar-heading h3{margin:0 0 10px;font-size:20px;line-height:1.4;font-weight:400}
main .sidebar-heading p,main .panel.tile-muted .sidebar-slogan{margin:0 0 25px;font-size:16px;line-height:26px;color:#1e416c}
main .column>.panel.tile-muted>h3{margin:0 0 10px}

/* Keep claim insets and spacing identical across all three sidebars. */
main .column>.panel.tile-muted{padding:25px}
main .column>.panel.tile-muted .sidebar-slogan{margin:0 0 25px}
main .column>.panel.tile-muted>ul{padding-left:26px;margin-top:0;margin-bottom:0}

/* Compact article subheadings corresponding to the original h4 visual style. */
main h3.article-subheading{font-size:16px;line-height:26px;font-weight:400;margin:20px 0 10px}

/* Preserve the smaller YOOtheme visual heading styles from the source layouts. */
main :is(h1,h2,h3,h4,h5,h6).source-heading-h2{font-size:20px;line-height:26px;font-weight:400}
main :is(h1,h2,h3,h4,h5,h6).source-heading-h3{font-size:20px;line-height:28px;font-weight:400}
main :is(h1,h2,h3,h4,h5,h6).source-heading-h4{font-size:16px;line-height:24px;font-weight:400}
main :is(h1,h2,h3,h4,h5,h6).source-heading-h5{font-size:14px;line-height:20px;font-weight:400}
main :is(h1,h2,h3,h4,h5,h6).source-heading-h6{font-size:12px;line-height:18px;font-weight:400}