/* Home page */
/* (Hero component + .section-head + .section--paper moved to main.css — shared.) */

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.stat__num { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: var(--fw-extra); color: var(--c-navy); line-height: 1; }
.stat__label { font-size: var(--fs-small); color: #51616c; margin-top: 0.4rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* Services overview cards (with colored top accent) */
.svc-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--c-white);
  border: 1px solid rgba(3,48,75,0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc-card .link-arrow { margin-top: auto; padding-top: 1rem; }   /* pin to bottom */
/* whole card clickable via stretched link */
.svc-card .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.svc-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--grad-wash); color: var(--c-navy);
  font-weight: var(--fw-bold);
}
.svc-card__icon img { width: 80%; height: 80%; object-fit: contain; display: block; }
.svc-card p { color: #41515c; font-size: 0.95rem; }

/* Image + text split (value-prop / intro) */
.media-split { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.media-split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-md); }
@media (min-width: 900px) {
  .media-split { grid-template-columns: 1fr 1fr; }
  .media-split--reverse .media-split__media { order: -1; }
}

/* Resource/blog post card meta */
.work-card__date { font-size: var(--fs-small); color: var(--c-navy-2); font-weight: var(--fw-medium); }

/* Brand statement section (centered, distinct from hero) */
/* Trim bottom padding so it visually matches the top (the next CTA section adds its own top padding). */
.statement { padding-bottom: clamp(1rem, 0.5rem + 1.2vw, 3rem); }
.statement__inner { max-width: 820px; margin-inline: auto; }
.statement__title { font-size: var(--fs-h1); margin-bottom: 0.6em; }

/* ===== Our Work: trusted partner + logo wall + carousel ===== */
.trusted { overflow-x: clip; }   /* contain the full-bleed carousel */
.trusted__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .trusted__top { grid-template-columns: 0.85fr 1.15fr; } }
.trusted__intro em { font-style: normal; font-weight: var(--fw-semibold); color: var(--c-navy-2); }

/* Client logo wall — white tiles with hairline separators */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* clean 3x3 at all sizes */
  gap: 1px;
  background: rgba(3, 48, 75, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.logo-cell {
  background: var(--c-white);
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 3 / 2;
  padding: clamp(0.6rem, 2.5vw, 1.5rem);
  text-decoration: none;
  transition: background var(--t-fast);
}
.logo-cell:hover { background: var(--c-paper); }
.logo-cell img {
  max-height: clamp(26px, 6vw, 46px);
  max-width: 100%; width: auto; height: auto;
  transition: transform var(--t-fast);
}
.logo-cell:hover img { transform: scale(1.05); }

/* Work carousel (boxed: ~2 slides + peek, horizontal scroll) */
.work-carousel { position: relative; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); margin-inline: calc(50% - 50vw); }  /* full-bleed */
.work-carousel .work-swiper { overflow: visible; padding-block: 1.5rem; }   /* peeks show; room for shadows */
.work-swiper .swiper-slide { width: min(540px, 85vw); height: auto; }
.work-slide { display: block; text-decoration: none; color: inherit; }
.work-slide__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--c-white);
  aspect-ratio: 16 / 11;
  transition: box-shadow var(--t-med);
}
.work-slide:hover .work-slide__media { box-shadow: 0 26px 52px rgba(3, 48, 75, 0.18); }
.work-slide__media picture { display: block; width: 100%; height: 100%; }
.work-slide__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.work-slide:hover .work-slide__media img { transform: scale(1.03); }
.work-slide__body { padding: 0.9rem 0.25rem 0; }
.work-slide__cat { font-size: var(--fs-small); color: var(--c-navy-2); font-weight: var(--fw-medium); }
.work-slide__title { font-size: var(--fs-h4); color: var(--c-navy); font-weight: var(--fw-semibold); margin: 0.15rem 0 0; }
.work-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-white); border: 0; box-shadow: var(--shadow-md);
  color: var(--c-navy); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2;
  display: grid; place-items: center;
  transition: transform var(--t-fast);
}
.work-carousel__nav:hover { transform: translateY(-50%) scale(1.06); }
.work-carousel__prev { left: clamp(8px, 2vw, 40px); }
.work-carousel__next { right: clamp(8px, 2vw, 40px); }


/* Anchor target for the "Our Work" nav/hero links — clear the sticky header */
#our-work { scroll-margin-top: calc(var(--header-h) + 16px); }