.ppd-banner{min-height:var(--ppd-banner-height,330px)}
/* Solid colour banner (no background photo / dark dimming overlay), used by
   both product and service pages. */
.ppd-banner.ppd-banner-solid{background-image:none!important;background:linear-gradient(135deg,var(--ppd-banner-bg),color-mix(in srgb,var(--ppd-banner-bg),var(--ppd-accent) 35%))!important}
.ppd-banner.ppd-banner-solid::after{opacity:.4}
/* Photo banner: rendered as a real <img> (see .ppd-banner-photo-img) that is
   always 100% width with height:auto, so the banner box grows to match the
   image's own aspect ratio - the whole image shows edge-to-edge with no
   cropping AND no leftover blank colour bars (the previous background-image
   + fixed-height approach always did one or the other). A stronger, more
   even dimming gradient is used (rather than just a light bottom fade) so
   the centred title/breadcrumb overlay stays readable over busy artwork. */
.ppd-banner.ppd-banner-photo{min-height:0!important;display:block!important;background:var(--ppd-banner-bg)}
.ppd-banner-photo-img{display:block;width:100%;height:auto}
.ppd-banner.ppd-banner-photo::after{background-image:linear-gradient(180deg,rgba(7,31,99,.15) 0%,rgba(7,31,99,.45) 100%);opacity:1}
/* Title + breadcrumb centred on top of the banner itself (product and
   service detail pages), instead of in their own block underneath it.
   position:absolute so this overlays correctly whether the banner is in
   solid-colour mode (display:grid) or photo mode (display:block!important,
   height determined by the image's own aspect ratio) - .ppd-banner already
   has position:relative from product-project.css. */
.ppd-banner-title-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;max-width:900px;margin:0 auto;padding:20px;text-align:center}
.ppd-banner-title-overlay h1{margin:0;color:var(--ppd-banner-title,#ffffff);font-size:clamp(2rem,4.5vw,3.4rem);text-shadow:0 2px 20px rgba(0,0,0,.28)}
.ppd-banner-title-overlay nav{display:inline-flex;gap:9px;align-items:center;padding:9px 18px;border-radius:30px;background:rgba(255,255,255,.18);backdrop-filter:blur(3px);color:var(--ppd-banner-title,#ffffff)}
.ppd-banner-title-overlay nav a{color:var(--ppd-banner-title,#ffffff);text-decoration:none;opacity:.82}
.ppd-banner-title-overlay nav span{color:rgba(255,255,255,.55)}
.ppd-banner-title-overlay nav b{color:var(--ppd-banner-title,#ffffff)}
.ppd-image-wrap{height:var(--ppd-image-height,420px)}
.ppd-image-wrap img{object-position:var(--ppd-image-position,center)}
/* Full-width product image: breaks the image out of the constrained
   article column to span edge-to-edge, matching the top banner's width
   (same margin treatment as .ppd-banner{margin:0 20px}). Opt-in per
   product via the "Full-width Product Image" toggle in Page Design. */
.ppd-image-fullwidth{width:calc(100vw - 40px);max-width:calc(100vw - 40px);margin-left:calc(50% - 50vw + 20px);margin-right:calc(50% - 50vw + 20px);border-radius:28px}
@media(max-width:600px){.ppd-image-fullwidth{width:calc(100vw - 20px);max-width:calc(100vw - 20px);margin-left:calc(50% - 50vw + 10px);margin-right:calc(50% - 50vw + 10px)}}
.ppd-speed-slow .ppd-motion i{animation-duration:8s!important}
.ppd-speed-fast .ppd-motion i{animation-duration:2.8s!important}
.ppd-motion-off .ppd-motion i{animation:none!important}
.ppd-sidebar-contact{display:grid;gap:8px;margin:18px 0 4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);text-align:left}
.ppd-sidebar-contact a{display:flex;align-items:center;gap:9px;color:var(--ppd-sidebar-text);font-size:.82rem;overflow-wrap:anywhere}
.ppd-sidebar-contact a:hover{color:#fff}
@media(max-width:900px){.ppd-image-wrap{height:min(var(--ppd-image-height,420px),360px)}}
@media(max-width:600px){.ppd-banner{min-height:min(var(--ppd-banner-height,330px),300px)}.ppd-image-wrap{height:min(var(--ppd-image-height,420px),280px)}}
.ppd-product-tabs{margin-top:42px}.ppd-tab-nav{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid color-mix(in srgb,var(--ppd-accent) 22%,#dce5fc);scrollbar-width:thin}.ppd-tab-button{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:13px 15px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--ppd-text);font-weight:600}.ppd-tab-button:hover,.ppd-tab-button.is-active{color:var(--ppd-accent);border-bottom-color:var(--ppd-accent)}.ppd-tab-button b{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:20px;background:color-mix(in srgb,var(--ppd-accent) 12%,#fff);font-size:.72rem}.ppd-tab-button.is-active b{background:var(--ppd-accent);color:#fff}.ppd-tab-panel{display:none;padding-top:25px}.ppd-tab-panel.is-active{display:block;animation:ppdTabIn .3s ease both}@keyframes ppdTabIn{from{opacity:0;transform:translateY(8px)}}.ppd-card-image{overflow:hidden}.ppd-card-image img{width:100%;height:100%;object-fit:cover}.ppd-screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ppd-screenshot-grid figure{margin:0;padding:10px;border-radius:14px;background:var(--ppd-card)}.ppd-screenshot-grid img{width:100%;height:220px;object-fit:cover;border-radius:10px}.ppd-screenshot-grid figcaption{padding:10px 4px 3px;color:var(--ppd-title);font-weight:600}.ppd-faq-list{display:grid;gap:10px}.ppd-faq-list details{border:1px solid color-mix(in srgb,var(--ppd-accent) 18%,#dce5fc);border-radius:12px;background:var(--ppd-card)}.ppd-faq-list summary{display:flex;justify-content:space-between;gap:20px;padding:17px 19px;color:var(--ppd-title);font-weight:700;cursor:pointer;list-style:none}.ppd-faq-list summary::-webkit-details-marker{display:none}.ppd-faq-list details[open] summary i{transform:rotate(45deg)}.ppd-faq-list summary i{color:var(--ppd-accent);transition:.2s}.ppd-faq-list details>div{padding:0 19px 18px;color:var(--ppd-text);line-height:1.7}@media(max-width:600px){.ppd-tab-button{padding:12px 10px}.ppd-screenshot-grid{grid-template-columns:1fr}.ppd-screenshot-grid img{height:190px}}