/* Visual layer: icons, images, sidebar, key-idea visuals, home journey and logo carousel. */
:root {
  --t-teal: #E0F2EF; --s-teal: #0A6B6A; --t-orange: #FDEBDC; --s-orange: #B4541A;
  --t-blue: #E3EEFA; --s-blue: #1F5FA8; --t-violet: #EEE9FB; --s-violet: #5B3FB5;
  --t-green: #E4F4E8; --s-green: #2B7A3F; --t-ink: #E6EBEE; --s-ink: #0B2233;
}
.pb-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; }
.pb-ic--teal { background: var(--t-teal); color: var(--s-teal); }
.pb-ic--orange { background: var(--t-orange); color: var(--s-orange); }
.pb-ic--blue { background: var(--t-blue); color: var(--s-blue); }
.pb-ic--violet { background: var(--t-violet); color: var(--s-violet); }
.pb-ic--green { background: var(--t-green); color: var(--s-green); }
.pb-ic--ink { background: var(--t-ink); color: var(--s-ink); }
.pb-hero .pb-ic { background: rgba(255, 255, 255, .1); color: var(--accent-on-dark); }

/* Images and placeholders */
.pb-img { border-radius: var(--r-card); overflow: hidden; background: var(--mint); width: 100%; }
.pb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-img--contain img { object-fit: contain; background: #fff; } /* product shots on white: show the whole product */
.pb-map { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; }
.pb-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.pb-doc { margin: 4px 0; }
.pb-img--16-9 { aspect-ratio: 16 / 9; }
.pb-img--4-3 { aspect-ratio: 4 / 3; }
.pb-img--1-1 { aspect-ratio: 1 / 1; }
.pb-img--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, #E4F0ED 0 14px, #DCEBE7 14px 28px); color: var(--s-teal); border: 1px dashed #A9CFC7; }
.pb-img--empty span { font-weight: 600; font-size: 14px; color: var(--ink); }
.pb-img--empty small { font-size: 12px; color: var(--muted); }
.pb-hero .pb-img--empty { background: repeating-linear-gradient(135deg, #13354A 0 14px, #163B52 14px 28px); border-color: #2C5268; color: var(--accent-on-dark); }
.pb-hero .pb-img--empty span { color: var(--white); }
.pb-hero .pb-img--empty small { color: var(--on-dark); }
.pb-product__media { background: none; min-height: 0; }
.pb-card .pb-img { margin-bottom: 4px; }
.pb-card__head { display: flex; align-items: center; gap: 12px; }

/* Section headings with icons */
.pb-h2 { display: flex; align-items: center; gap: 14px; scroll-margin-top: 90px; }
.pb-h2 .pb-ic { width: 42px; height: 42px; border-radius: 12px; }

/* Content + sticky sidebar */
.pb-layout { display: grid; gap: 32px; }
.pb-layout > .pb-content { max-width: none; min-width: 0; }
.pb-aside__inner { display: grid; gap: 16px; }
.pb-aside__box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.pb-aside__h { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pb-aside__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 500; }
.pb-aside__facts li { display: flex; gap: 8px; align-items: flex-start; }
.pb-aside__facts svg { color: var(--teal); margin-top: 3px; flex-shrink: 0; }
.pb-aside__toc { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.pb-aside__toc a { color: var(--ink); text-decoration: none; }
.pb-aside__toc a:hover { color: var(--teal); text-decoration: underline; }
.pb-aside__cta { display: grid; gap: 10px; background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.pb-aside__cta strong { color: var(--white); font-family: var(--font-head); font-size: 19px; }
.pb-aside__cta .pb-btn { width: 100%; gap: 8px; }

/* Key-idea visuals */
.pb-visual { margin: 28px 0; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.pb-visual__title { font-family: var(--font-head); font-weight: 600; font-size: 18px; margin-bottom: 16px; }
.pb-visual figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); }
.pb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pb-steps__item { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.pb-steps__item .pb-ic { grid-row: span 2; }
.pb-steps__num { display: none; }
.pb-steps__item strong { font-family: var(--font-head); }
.pb-steps__item > span:last-child:not(.pb-ic) { font-size: 14px; color: var(--muted); grid-column: 2; }
.pb-bars { display: grid; gap: 14px; }
.pb-bars__row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pb-bars__label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.pb-bars__track { height: 18px; background: #EEF2F1; border-radius: 999px; overflow: hidden; }
.pb-bars__fill { display: block; height: 100%; background: #B9C9D1; border-radius: 999px; }
.pb-bars__value { font-size: 14px; color: var(--muted); }
.pb-bars__row.is-hot .pb-bars__fill { background: var(--signal); }
.pb-bars__row.is-hot .pb-bars__label, .pb-bars__row.is-hot .pb-bars__value { color: var(--s-orange); }
.pb-versus { display: grid; gap: 16px; align-items: stretch; }
.pb-versus__col { border-radius: 12px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.pb-versus__col--a { background: var(--t-orange); }
.pb-versus__col--b { background: var(--t-teal); }
.pb-versus__col strong { font-family: var(--font-head); font-size: 20px; }
.pb-versus__col ul { margin: 0; padding-left: 18px; }
.pb-versus__vs { align-self: center; justify-self: center; font-family: var(--font-head); font-weight: 700; color: var(--muted); }
.pb-train { display: grid; gap: 10px; }
.pb-train__stage { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--ground); border-radius: 12px; padding: 12px 14px; }
.pb-train__rating { font-weight: 600; color: var(--s-blue); white-space: nowrap; }
.pb-train__pipe { justify-self: center; color: var(--muted); transform: rotate(90deg); }
.pb-stats, .pb-icongrid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-stats__item, .pb-icongrid__item { display: grid; gap: 8px; align-content: start; }
.pb-stats__item strong { font-family: var(--font-head); font-size: 28px; line-height: 1; }
.pb-stats__item span, .pb-icongrid__item span { font-size: 14px; color: var(--muted); }
.pb-icongrid__item strong { font-family: var(--font-head); }

/* Home: trust tiles, journey CTA band, logo carousel */
.pb-trust > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.pb-trust .pb-ic { grid-row: span 2; }
.pb-journey { background: var(--ink); color: var(--white); border-radius: 20px; padding: 32px 24px; }
.pb-journey h2 { color: var(--white); }
.pb-journey p { color: var(--on-dark); }
.pb-journey .pb-visual { background: none; border: 0; padding: 0; margin: 20px 0 24px; }
.pb-journey .pb-steps__item strong { color: var(--white); }
.pb-journey .pb-steps__item > span:last-child:not(.pb-ic) { color: var(--on-dark); }
.pb-journey .pb-ic { background: rgba(127, 209, 201, .15); color: var(--accent-on-dark); }
.pb-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pb-marquee__track { display: flex; gap: 16px; width: max-content; animation: pb-scroll 45s linear infinite; }
.pb-marquee:hover .pb-marquee__track, .pb-marquee:focus-within .pb-marquee__track { animation-play-state: paused; }
.pb-logo-tile { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 200px; height: 88px; padding: 0 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; font-family: var(--font-head); font-weight: 600; }
.pb-logo-tile img { max-height: 48px; width: auto; }
@keyframes pb-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pb-marquee { mask-image: none; }
  .pb-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .pb-marquee__track [aria-hidden="true"] { display: none; }
}

@media (min-width: 768px) {
  .pb-steps { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .pb-steps__item { grid-template-columns: 1fr; row-gap: 8px; }
  .pb-steps__item .pb-ic { grid-row: auto; }
  .pb-steps__item > span:last-child:not(.pb-ic) { grid-column: 1; }
  .pb-steps__item:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 60px; right: -8px; border-top: 2px dashed #C5D3CF; }
  .pb-bars__row { grid-template-columns: 280px 1fr 150px; align-items: center; }
  .pb-versus { grid-template-columns: 1fr auto 1fr; }
  .pb-train { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; }
  .pb-train__stage { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pb-train__pipe { transform: none; }
  .pb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb-icongrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb-journey { padding: 48px; }
}
@media (min-width: 1100px) {
  .pb-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
  .pb-aside { position: sticky; top: 88px; }
}

/* Product finder */
.pb-shop { display: grid; gap: 24px; }
.pb-shop__results { min-width: 0; }
.pb-shop__count { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.pb-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #B9C4C1; border-radius: var(--r-btn); font: 15px var(--font-body); }
.pb-input:focus { border: 2px solid var(--teal); outline: none; }
.pb-filter fieldset { margin: 0; min-width: 0; }
.pb-filter__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pb-filter__cats a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.pb-filter__cats a small { margin-left: auto; color: var(--muted); }
.pb-filter__cats a:hover, .pb-filter__cats a.is-active { background: var(--mint); }
.pb-filter__cats a.is-active { font-weight: 600; }
.pb-filter__cats .pb-ic { width: 32px; height: 32px; border-radius: 9px; }
.pb-check { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; cursor: pointer; }
.pb-check input { width: 18px; height: 18px; accent-color: var(--teal); }
.pb-check small { color: var(--muted); }
.pb-filter .pb-btn { width: 100%; }
.pb-filter__reset { display: block; text-align: center; font-size: 14px; }
@media (min-width: 1100px) {
  .pb-shop { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
  .pb-filter { position: sticky; top: 88px; }
}

/* Lead forms (PB Sales) */
.pb-form { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 16px; }
.pb-form__grid { display: grid; gap: 16px; }
.pb-form__field { display: grid; gap: 6px; }
.pb-form__field label { font-size: 14px; font-weight: 600; }
.pb-form__field input, .pb-form__field select, .pb-form__field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #B9C4C1; border-radius: var(--r-btn); font: 16px var(--font-body); background: var(--white); color: var(--ink); }
.pb-form__field textarea { min-height: 110px; }
.pb-form__field input:focus, .pb-form__field select:focus, .pb-form__field textarea:focus { outline: none; border: 2px solid var(--teal); }
.pb-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pb-form__submit { width: 100%; min-height: 52px; font-size: 17px; border: 0; cursor: pointer; }
.pb-form__note { font-size: 14px; color: var(--muted); margin: 0; }
.pb-form__error { background: #FDECEA; color: #8A1C12; border-radius: var(--r-btn); padding: 12px 14px; font-weight: 500; }
@media (min-width: 768px) {
  .pb-form { padding: 32px; }
  .pb-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-form__field--wide { grid-column: 1 / -1; }
  .pb-form__submit { width: auto; justify-self: start; padding: 0 32px; }
}

/* Filter: collapsible panel on mobile, "show more" lists */
.pb-filter__summary { list-style: none; width: 100%; gap: 8px; cursor: pointer; margin-bottom: 12px; }
.pb-filter__summary::-webkit-details-marker { display: none; }
.pb-filter__more summary { cursor: pointer; color: var(--teal); font-size: 14px; font-weight: 600; padding: 6px 0; }
@media (min-width: 1100px) { .pb-filter__summary { display: none; } }
.pb-figure { margin: 24px 0; }
.pb-figure img { width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; }
.pb-figure figcaption { font-size: .875rem; color: var(--muted); margin-top: 6px; }
.pb-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.pb-contact-info { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 8px 0 24px; padding: 16px; background: var(--mint); border-radius: var(--r-card); }
.pb-contact-info > div { display: flex; gap: 10px; align-items: flex-start; }
.pb-contact-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
.pb-contact-grid .pb-map { aspect-ratio: auto; height: 100%; min-height: 360px; }
.pb-contact-grid h2 { margin-top: 0; }
@media (min-width: 900px) {
  .pb-contact-info { grid-template-columns: 1.4fr 1fr; }
  .pb-contact-grid { grid-template-columns: 1fr 1fr; }
}
.pb-phone { white-space: nowrap; }
.pb-phone__wa { color: #25D366; display: inline-flex; vertical-align: -3px; margin-left: 2px; }
.pb-phone__wa:hover { color: #128C7E; }