/* B2B Commerce page (#1478): extras on top of ecommerce.css. Scoped under .ec-page--b2b (the wrapper also carries .ec-page). */

/* Hero: keep "re-keyed" on one line */
.ec-page--b2b .b2b5-nw { white-space: nowrap; }

/* Hero photo grade: the eCommerce hero photo ships with a dark green grade baked in; this warehouse photo is a
   bright, warm, neutral shot. Multiply a green layer over it so the frame matches the other pages. */
.ec-page--b2b .ec-hero__frame::after { content: ""; position: absolute; inset: 0; background: rgba(54, 117, 120, .8); mix-blend-mode: multiply; pointer-events: none; }

/* Trusted: three logos sized to look equal */
.ec-page--b2b .ec-logo--b2b-tanks { --lh: 40px; }

/* Services: every left-hand browser frame has the same box (the three screenshots share one ratio), so the
   tabs line up. Images fill the frame under the dots bar, anchored top. */
.ec-page--b2b .ec-svc__media > .ec9-shot__frame { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.ec-page--b2b .ec-svc__media > .ec9-shot__frame img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Platforms: five tools and three industries fill their rows */
.ec-page--b2b .ec-tile--ind .ec-tile__art img { display: block; width: min(40px, 31cqw); height: min(40px, 31cqw); max-width: none; max-height: none; }
@media (max-width: 639.98px) {
  .ec-page--b2b .ec-platform-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (min-width: 640px) {
  .ec-page--b2b .ec-platform-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ec-page--b2b .ec-platform-grid--3 .ec-tile { width: 100%; height: 132px; }
  .ec-page--b2b .ec-tile--ind .ec-tile__art img { width: 46px; height: 46px; }
}

/* Our Work: these are full-page site screenshots (1092x520), not photos, so show them whole at their own
   ratio instead of eCommerce's stretch-and-cover crop. */
.ec-page--b2b .ec-case__media { height: auto; min-height: 0; aspect-ratio: 1092 / 520; object-fit: contain; align-self: center; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ec-page--b2b .ec-case { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ec-page--b2b .ec-case__media { grid-column: 1; grid-row: 1; }
  .ec-page--b2b .ec-case__copy { grid-row: 2; grid-column: 1; max-width: 640px; }
  .ec-page--b2b .ec-case__link { grid-row: 1; grid-column: 1; margin: 12px; }
}
.ec-page--b2b .b2b6-src { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .6); }

/* FAQ: "still unsure" line under the intro */
.ec-page--b2b .b2b5-faq-ask { margin: 20px 0 0; font-size: 15px; line-height: 24px; color: #4A5550; }
.ec-page--b2b .b2b5-faq-ask a { color: #00744A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Contact: book-a-time note under the steps, on the dark panel */
/* Stacked cards share the tallest card's height; keep image + copy at the top
   instead of stretching the image row into a gap. */
@media (max-width: 1279.98px) {
  .ec-page--b2b .ec-case { align-content: start; }
  .ec-page--b2b .ec-case__media { align-self: start; }
}
.ec-page--b2b .ec-tile__client { color: #fff; }

/* Contact: "Rather pick a time yourself?" booking link under What happens next */
.ec-page--b2b .pv-cal { margin-top: 32px; padding-top: 24px; max-width: 420px; border-top: 1px solid rgba(255, 255, 255, .16); }
.ec-page--b2b .pv-cal__q { margin: 0; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .78); }
.ec-page--b2b .pv-cal__link { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ec-page--b2b .pv-cal__link:hover { color: #6EE7B7; }
.ec-page--b2b .pv-cal__link:focus-visible { outline: 2px solid #6EE7B7; outline-offset: 3px; border-radius: 4px; }
.ec-page--b2b .pv-cal__who { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .72); }

/* tighter gaps (as on eCommerce): next section after the services stage, partnerships -> platforms, platforms intro -> content */
.ec-page--b2b #services + * { position: relative; z-index: 6; }   /* pulled up under the stage's empty lower part (JS negative margin): paint over it */
.ec-page--b2b .ec13-pa { padding-bottom: calc(var(--ec-sec-y) * .5); }
.ec-page--b2b .ec-xp > .ec-prows { margin-top: 0; }

/* Closing CTA logo strip: three B2B client logos (sizes per logo; the eCommerce ones are tuned for its own order) */
.ec-page.ec-page--b2b .ec14-logos li:nth-child(n) img { max-width: 130px; mix-blend-mode: multiply; }
.ec-page.ec-page--b2b .ec14-logos li:nth-child(3n+1) img { height: 30px; }
.ec-page.ec-page--b2b .ec14-logos li:nth-child(3n+2) img { height: 24px; }
.ec-page.ec-page--b2b .ec14-logos li:nth-child(3n+3) img { height: 40px; }
@media (min-width: 640px) { .ec-page.ec-page--b2b .ec14-logos { justify-content: flex-start; gap: 40px; } }

/* Hero: the free estimate offer is "Coming soon" (not linked), same as the eCommerce hero */
.ec-page .ec8-offer--soon { cursor: default; }
.ec-page .ec8-offer--soon .ec8-offer__txt b { text-decoration: none !important; }
.ec-page .ec8-offer--soon { align-items: flex-start; }
.ec-page .ec8-offer--soon .ec8-offer__txt { display: grid; justify-items: start; gap: 4px; }
.ec-page .ec8-offer--soon .ec8-offer__txt b { display: block; }
.ec-page .ec8-offer--soon .ec8-offer__txt .ec8-offer__desc { display: block; }
.ec-page .ec8-offer--soon .ec8-offer__txt .ec8-soon { display: inline-block; margin: 0; padding: 2px 10px; border: 1px solid rgba(110, 231, 183, .55); border-radius: 999px; background: rgba(110, 231, 183, .08); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 16px; color: #6EE7B7; white-space: nowrap; }