/* ============================================================
   Product preview thumbnails (catalog cards) — unchanged behaviour
   ============================================================ */
.product-preview{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .35s ease}
.product-card:hover .product-preview{transform:scale(1.04)}
.product-cover:has(.product-preview){padding:0;background:#fff}
.product-cover:has(.product-preview):after{display:none}
@media(prefers-reduced-motion:reduce){.product-preview{transition:none}.product-card:hover .product-preview{transform:none}}

/* ============================================================
   BUSINESSES WE SERVE — photo cards
   Pattern from FieldBoss_Businesses_We_Serve brand asset:
   trade photo, green number badge on the seam, solid navy caption.
   Mobile-first: 2-up on phones, 4-up from 900px.
   ============================================================ */
.serve-section{background:#fff;padding:3.5rem 1.2rem 0;border-top:1px solid var(--line)}
.serve-heading{max-width:1320px;margin:auto}
.serve-heading h2{font:900 clamp(2.1rem,7vw,4.4rem)/.95 var(--display);letter-spacing:-.02em;margin:.75rem 0 0;color:var(--brand-navy)}
.serve-heading h2 em{font-style:normal;color:var(--brand-green-text)}
.serve-heading>p{color:var(--muted);font-size:.95rem;max-width:44ch;margin:1rem 0 0}

.trade-grid{max-width:1320px;margin:2rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.trade-card{position:relative;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0;overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column;font-family:var(--body);box-shadow:0 1px 3px rgba(16,24,40,.06);transition:transform .18s ease,box-shadow .18s ease}
.trade-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,24,40,.14)}
.trade-card:focus-visible{outline:3px solid var(--brand-green-text);outline-offset:2px}

.trade-card__art{display:block;aspect-ratio:3/2;background:#e8edf4;overflow:hidden}
.trade-card__art img{width:100%;height:100%;object-fit:cover;display:block}

/* green number badge straddling the photo / caption seam */
.trade-card__badge{position:absolute;z-index:2;left:50%;transform:translateX(-50%);top:calc(66.66% - 15px);width:30px;height:30px;border-radius:50%;background:var(--brand-green);color:#fff;display:grid;place-items:center;font:800 .82rem var(--mono);border:3px solid #fff;box-shadow:0 2px 6px rgba(16,24,40,.28)}

.trade-card__cap{background:var(--brand-navy);color:#fff;padding:1.15rem .8rem .85rem;flex:1;display:flex;flex-direction:column;justify-content:center}
.trade-card__cap strong{display:block;font:800 .84rem/1.15 var(--display);letter-spacing:-.01em;text-transform:uppercase}
.trade-card__cap small{display:block;font:600 .64rem var(--body);color:#B6C4E4;margin-top:.3rem}

/* ---------- trust row ---------- */
.serve-benefits{max-width:1320px;margin:2.2rem auto 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.serve-benefits span{display:flex;align-items:center;gap:.55rem;padding:1rem .5rem;border-right:1px solid var(--line);font:800 .68rem/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--brand-navy)}
.serve-benefits span:nth-child(2n){border-right:0}
.serve-benefits svg{flex:none;width:23px;height:23px;fill:none;stroke:var(--brand-navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

@media(min-width:700px){
  .serve-section{padding:4.5rem 4vw 0}
  .trade-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .serve-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
  .serve-heading>p{margin:0 0 .4rem;flex:none;width:280px}
  .serve-benefits{grid-template-columns:repeat(4,1fr);margin-top:3rem}
  .serve-benefits span{border-right:1px solid var(--line);padding:1.2rem .8rem;font-size:.72rem}
  .serve-benefits span:nth-child(2n){border-right:1px solid var(--line)}
  .serve-benefits span:last-child{border-right:0}
  .trade-card__cap{padding:1.25rem .9rem .95rem}
  .trade-card__cap strong{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){
  .trade-card{transition:none}
  .trade-card:hover{transform:none}
}