@font-face{font-family:"PEC Source Solid";src:url("pec-fa-solid-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:block}
.portfolio-page .portfolio-card .portfolio-source-arrow{display:inline-block}
.portfolio-page .portfolio-source-arrow::before{content:"\e093";font:900 16px/1 "PEC Source Solid"}
.portfolio-page{--portfolio-blue:#454dff;--portfolio-green:#3cff66;--portfolio-navy:#100c2f}
.portfolio-page main{overflow:hidden}
.portfolio-page .portfolio-hero{position:relative;height:540px;overflow:hidden}
.portfolio-page .portfolio-hero img{width:100%;height:100%;object-fit:cover;object-position:center top}

.portfolio-page .portfolio-distinction{height:610px;padding:68px 30px 30px}
.portfolio-page .portfolio-copy{max-width:888px;margin:0 auto}
.portfolio-page .portfolio-copy--centered{text-align:center}
.portfolio-page .portfolio-distinction h1{margin:0 0 38px;font:200 60px/72px var(--heading);letter-spacing:.3px}
.portfolio-page .portfolio-distinction h1 strong{font-weight:700}
.portfolio-page .portfolio-distinction p{margin:0 0 20px;line-height:1.5}

.portfolio-page .portfolio-contact{height:574px;margin-bottom:40px;display:grid;place-items:start center}
.portfolio-page .portfolio-contact-card{position:relative;width:min(950px,calc(100% - 60px));height:554px;border:8px solid var(--portfolio-blue);display:grid;grid-template-columns:1fr 1fr;overflow:visible}
.portfolio-page .portfolio-contact-card>img{position:absolute;left:20px;bottom:0;width:470px;max-height:650px;object-fit:contain;object-position:bottom}
.portfolio-page .portfolio-contact-copy{grid-column:2;padding:135px 45px 30px;color:var(--portfolio-blue)}
.portfolio-page .portfolio-contact-copy h2{margin:0 0 42px;font:700 25px/1.18 var(--heading)}
.portfolio-page .portfolio-contact-copy>p{margin:0 0 38px}
.portfolio-page .portfolio-linkedin{display:grid;gap:8px;font:600 14px/1.35 var(--heading)}
.portfolio-page .portfolio-linkedin strong{font-size:22px;line-height:1}
.portfolio-page .portfolio-linkedin:hover span,.portfolio-page .portfolio-linkedin:focus-visible span{text-decoration:underline;text-underline-offset:4px}

.portfolio-page .portfolio-intro{height:235px;margin-bottom:30px;padding-top:14px}
.portfolio-page .portfolio-section-copy{width:min(888px,calc(100% - 60px));margin:0 auto}
.portfolio-page .portfolio-section-copy h2{margin:0 0 38px;font:600 24px/1.2 var(--heading)}
.portfolio-page .portfolio-section-body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:48px;align-items:start}
.portfolio-page .portfolio-section-body img{width:100px;height:100px;object-fit:contain;opacity:.72}
.portfolio-page .portfolio-section-body p{margin:0 0 20px;line-height:1.5}

.portfolio-page .portfolio-cards{height:824px;margin-bottom:40px}
.portfolio-page .portfolio-card-grid{width:min(1200px,calc(100% - 60px));height:824px;margin:0 auto;padding:20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:368px;gap:48px}
.portfolio-page .portfolio-card{position:relative;min-width:0;border-radius:10px;padding:55px 24px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:var(--portfolio-navy) url("portfolio-card-background.png") center/cover no-repeat;overflow:hidden}
.portfolio-page .portfolio-card img{width:104px;height:104px;margin:0 0 22px;object-fit:contain}
.portfolio-page .portfolio-card h2{margin:0;color:var(--portfolio-green);font:600 18px/1.25 var(--heading)}
.portfolio-page .portfolio-card--overview h2{color:#fff}
.portfolio-page .portfolio-card-summary{margin:13px 0 0;color:var(--portfolio-green);font:400 16px/1.2 var(--heading)}
.portfolio-page .portfolio-card-eyebrow{display:none;margin:0 0 24px;color:var(--portfolio-green);font:600 13px/1.3 var(--heading);text-transform:uppercase}
.portfolio-page .portfolio-card-details{display:none}
.portfolio-page .portfolio-card-details a{color:#fff}

.portfolio-page .portfolio-academy{height:264px;padding-top:16px}
.portfolio-page .portfolio-iso{height:351px;padding-top:20px}
.portfolio-page .portfolio-partnerships{height:191px;padding-top:18px}
.portfolio-page .portfolio-partnerships .portfolio-section-body--text-only{grid-template-columns:120px minmax(0,1fr)}
.portfolio-page .portfolio-partnerships .portfolio-section-body--text-only::before{content:""}

.portfolio-page .portfolio-customers{height:238px;display:grid;place-items:start center;padding-top:35px}
.portfolio-page .customer-logo-grid{width:min(1100px,calc(100% - 60px));display:flex;gap:58px;align-items:center;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;touch-action:pan-y;cursor:grab;user-select:none}
.portfolio-page .customer-logo-grid::-webkit-scrollbar{display:none}
.portfolio-page .customer-logo-grid.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.portfolio-page .customer-logo-grid img{flex:0 0 200px;width:200px;height:105px;object-fit:contain;filter:grayscale(1);scroll-snap-align:start;scroll-snap-stop:always}

.portfolio-page .portfolio-card-toggle{display:none}
@media (min-width:561px){
  .portfolio-page .portfolio-card-toggle{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
  .portfolio-page .portfolio-card-toggle:focus-visible{outline:2px solid var(--portfolio-green);outline-offset:-5px}
  .portfolio-page .portfolio-card.is-open>.portfolio-card-toggle{pointer-events:none}
  .portfolio-page .portfolio-card>h2{color:#fff}
  .portfolio-page .portfolio-card>h2 a{color:inherit}
  .portfolio-page .portfolio-card>img,
  .portfolio-page .portfolio-card>h2,
  .portfolio-page .portfolio-card>.portfolio-card-summary{transition:opacity .18s ease,visibility 0s linear 0s}
  /* A fixed center in both states: fade the panel, never animate its position. */
  .portfolio-page .portfolio-card>.portfolio-card-details,
  .portfolio-page .portfolio-card--overview>.portfolio-card-eyebrow{position:absolute;top:50%;right:24px;left:24px;display:grid;gap:29px;margin:0;opacity:0;visibility:hidden;transform:translateY(-50%);font-size:16px;line-height:1.2;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
  .portfolio-page .portfolio-card--overview>.portfolio-card-eyebrow{color:#fff;font:600 18px/1.2 var(--heading);text-transform:none}
  .portfolio-page .portfolio-card>.portfolio-card-details::before{content:attr(data-i18n-portfolio-details-title);color:var(--portfolio-green);font:700 16px/1.2 var(--heading)}
  .portfolio-page .portfolio-card.is-open>img,
  .portfolio-page .portfolio-card.is-open>h2,
  .portfolio-page .portfolio-card.is-open>.portfolio-card-summary{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
  .portfolio-page .portfolio-card.is-open>.portfolio-card-details,
  .portfolio-page .portfolio-card--overview.is-open>.portfolio-card-eyebrow{opacity:1;visibility:visible;pointer-events:auto;transition-delay:.06s,0s}
  .portfolio-page .portfolio-card>.portfolio-card-details a:hover,
  .portfolio-page .portfolio-card>.portfolio-card-details a:focus-visible{text-decoration:underline;text-underline-offset:4px}
}

/* Source tablet panels use 16px Montserrat, 15px insets and 20px paragraph gaps.
   Emergency wrapping keeps long compounds readable in the narrowest columns. */
@media (min-width:561px) and (max-width:1024px){
  .portfolio-page .portfolio-card>.portfolio-card-details{left:15px;right:15px;gap:20px;font-family:"PEC Mobile Montserrat",var(--heading);overflow-wrap:anywhere;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .portfolio-page .customer-logo-grid{scroll-behavior:auto}
  .portfolio-page .portfolio-card,.portfolio-page .portfolio-card *{transition:none!important}
}

@media (max-width:1600px){
  .portfolio-page .portfolio-hero{height:450px}
}

@media (max-width:1024px){
  .portfolio-page .site-header{display:none!important}
  .portfolio-page .portfolio-hero{height:424px}
  .portfolio-page .portfolio-distinction{height:706px;padding-top:65px}
  .portfolio-page .portfolio-contact{display:none}
  .portfolio-page .portfolio-intro{height:235px}
  .portfolio-page .portfolio-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .portfolio-page .portfolio-academy{height:288px}
  .portfolio-page .portfolio-iso{height:428px}
  .portfolio-page .portfolio-partnerships{height:244px}
  .portfolio-page .portfolio-customers{height:200px}
  .portfolio-page .project-request{height:601px}
}

@media (max-width:768px){
  .portfolio-page .portfolio-hero{height:552px}
  .portfolio-page .portfolio-distinction{height:894px}
  .portfolio-page .portfolio-copy{max-width:650px}
  .portfolio-page .portfolio-intro{height:312px}
  .portfolio-page .portfolio-card-grid{gap:20px;width:calc(100% - 40px)}
  .portfolio-page .portfolio-card{padding-left:12px;padding-right:12px}
  .portfolio-page .portfolio-card h2{font-size:15px}
  .portfolio-page .portfolio-card-summary{font-size:13px}
  .portfolio-page .portfolio-academy{height:340px}
  .portfolio-page .portfolio-iso{height:524px}
  .portfolio-page .portfolio-partnerships{height:268px}
  .portfolio-page .project-request{height:769px}
}

@media (max-width:560px){
  .portfolio-page .portfolio-hero{height:293px}
  .portfolio-page .portfolio-hero img{object-position:center}
  .portfolio-page .portfolio-distinction{height:auto;padding:51px 30px 60px}
  .portfolio-page .portfolio-distinction p:last-child{margin-bottom:0}
  .portfolio-page .portfolio-distinction h1{margin-bottom:37px;font-size:38px;line-height:1.13}
  .portfolio-page .portfolio-distinction h1 strong{display:block}
  .portfolio-page .portfolio-distinction p{font-size:16px;line-height:1.48;margin-bottom:24px}

  .portfolio-page .portfolio-contact{height:812px;margin-bottom:40px;display:grid;padding:0 30px}
  .portfolio-page .portfolio-contact-card{width:100%;max-width:100%;height:792px;border-width:8px;display:block;text-align:center;overflow:hidden}
  .portfolio-page .portfolio-contact-card>img{width:300px;left:50%;transform:translateX(-50%);bottom:-2px;max-height:470px}
  .portfolio-page .portfolio-contact-copy{padding:42px 20px 0}
  .portfolio-page .portfolio-contact-copy h2{margin-bottom:40px;font-size:24px;line-height:1.2}
  .portfolio-page .portfolio-contact-copy>p{margin:0 auto 34px;max-width:190px;font-size:14px;line-height:1.4}
  .portfolio-page .portfolio-linkedin{position:relative;z-index:1;gap:7px;font-size:12px;line-height:1.35}
  .portfolio-page .portfolio-linkedin span{max-width:245px;margin:auto}

  .portfolio-page .portfolio-intro{height:338px;margin-bottom:30px;padding:25px 30px 0}
  .portfolio-page .portfolio-section-copy{width:100%}
  .portfolio-page .portfolio-section-copy h2{margin-bottom:20px;font-size:24px;line-height:1.14}
  .portfolio-page .portfolio-intro .portfolio-section-body{display:block}
  .portfolio-page .portfolio-intro .portfolio-section-body img{display:none}
  .portfolio-page .portfolio-section-body p{font-size:16px;line-height:1.48}

  .portfolio-page .portfolio-cards{height:2456px;margin-bottom:40px}
  .portfolio-page .portfolio-card-grid{width:calc(100% - 60px);max-width:calc(100% - 60px);height:2456px;padding:50px 0;display:grid;grid-template-columns:1fr;grid-auto-rows:376px;gap:20px}
  .portfolio-page .portfolio-card{padding:25px 24px;border-radius:9px;justify-content:center}
  .portfolio-page .portfolio-card img{width:96px;height:96px;margin:0 0 18px}
  .portfolio-page .portfolio-card h2{font-size:17px;line-height:1.25;color:var(--portfolio-green)}
  .portfolio-page .portfolio-card--overview h2{color:#fff}
  .portfolio-page .portfolio-card-eyebrow{display:block;margin-bottom:18px}
  .portfolio-page .portfolio-card-summary{display:none}
  .portfolio-page .portfolio-card-details{margin-top:17px;display:grid;gap:14px;font-size:14px;line-height:1.25}
  .portfolio-page .portfolio-card-details a,.portfolio-page .portfolio-card-details span{display:block}
  .portfolio-page .portfolio-card-details a:hover,.portfolio-page .portfolio-card-details a:focus-visible{text-decoration:underline;text-underline-offset:4px}

  .portfolio-page .portfolio-feature{padding:33px 30px 20px}
  .portfolio-page .portfolio-feature .portfolio-section-body{display:block}
  .portfolio-page .portfolio-feature .portfolio-section-body>img{display:none}
  .portfolio-page .portfolio-academy{height:387px}
  .portfolio-page .portfolio-iso{height:594px}
  .portfolio-page .portfolio-iso .portfolio-section-body p{margin-bottom:25px}
  .portfolio-page .portfolio-partnerships{height:343px;padding:42px 30px 25px}
  .portfolio-page .portfolio-partnerships .portfolio-section-body--text-only{display:block}
  .portfolio-page .portfolio-partnerships .portfolio-section-body--text-only::before{display:none}

  .portfolio-page .portfolio-customers{height:200px;padding:0}
  .portfolio-page .customer-logo-grid{display:flex}
  .portfolio-page .project-request{height:924px}
}
/* Remaining ISO-copy to partner-heading source gap: 28 + 42 = 70px. */
@media(max-width:560px){
html[lang|="de"] body.portfolio-page .portfolio-iso{height:auto;padding-bottom:28px}
html[lang|="de"] body.portfolio-page .portfolio-iso .portfolio-section-body p:last-child{margin-bottom:0}
}
/* Source overview carousel: four whole desktop cells, one on tablet/mobile,
   50px item spacing. Fractional cell widths eliminate a clipped right logo. */
.portfolio-page .customer-logo-grid{--logo-columns:4;gap:50px}
.portfolio-page .customer-logo-grid img{flex:0 0 calc((100% - (var(--logo-columns) - 1)*50px)/var(--logo-columns));width:calc((100% - (var(--logo-columns) - 1)*50px)/var(--logo-columns));-webkit-user-drag:none}
.portfolio-page [data-customer-logo-pause]{border:1px solid currentColor;border-radius:4px;background:transparent;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px}
@media(max-width:1024px){.portfolio-page .customer-logo-grid{--logo-columns:1}}