/* ==========================================================================
   Net-Vendor - Customer Service page
   One addition only. The page head is the shared .hero, and everything else
   here is base.css / main.css.
     .phone-cta - the old site's phone sidebar, pulled out as a real block.
   ========================================================================== */

/* --- Phone call to action ------------------------------------------------- */

.phone-cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--nv-blue-tint);
  border-radius: var(--r-lg);
}

@media (min-width: 62rem) {
  .phone-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-8);
  }
}

.phone-cta__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--nv-blue);
  color: #fff;
}

.phone-cta__t {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  text-wrap: balance;
}

.phone-cta__d {
  margin-top: var(--s-3);
  max-width: 54ch;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.6;
}

.phone-cta__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--nv-blue);
  transition: color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}

.phone-cta__num:hover {
  color: var(--nv-blue-hover);
  transform: translateY(-2px);
}

.phone-cta__note { margin-top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  .phone-cta__num { transition: none; }
  .phone-cta__num:hover { transform: none; }
}

/* --- Small shared bits ----------------------------------------------------- */

/* The audit footnote carries a link on the right at wide widths. */
.note-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
}

.note-row strong { color: var(--fg); }
.section--dark .note-row strong { color: var(--fg-on-dark); }

/* --------------------------------------------------------------------------
   Hero crop
   cs-floor is now the client's own photograph of the team round the table
   (1920x1280), replacing the stock office shot. It is close to 3:2, so a tall
   phone crop still holds the people; the anchor just sits slightly high so
   heads are never clipped.
   -------------------------------------------------------------------------- */

.hero__photo img { object-position: 50% 38%; }

@media (max-width: 62rem) {
  .hero__photo img { object-position: 50% 32%; }
}

/* --------------------------------------------------------------------------
   Customer First Service - no photograph
   Story on the left, the five things CFS handles on the right as numbered
   rows. Both columns carry real weight, so neither side is left empty the way
   the old image column was.
   -------------------------------------------------------------------------- */

.cfs__title {
  max-width: 18ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cfs__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
  .cfs__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

.cfs__story {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  max-width: 36rem;
}

.cfs__story p { font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.62; }
.cfs__story .lead { color: #fff; }

.cfs__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  width: 100%;
  margin: var(--s-2) 0;
  padding-block: var(--s-5);
  border-block: 1px solid var(--rule-on-dark);
}

.cfs__facts dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--nv-blue-bright);
}

.cfs__facts dd {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--fg-on-dark-mut);
}

.cfs__label {
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  color: var(--fg-on-dark-mut);
}

/* The shared .duty rows are drawn for a light ground; recolour for dark. */
.duties--dark .duty { border-top-color: var(--rule-on-dark); }
.duties--dark .duty:last-child { border-bottom-color: var(--rule-on-dark); }
.duties--dark .duty__n { color: var(--fg-on-dark-fnt); }
.duties--dark .duty__t { color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .duties--dark .duty:hover { background: rgba(26, 109, 255, 0.12); }
  .duties--dark .duty:hover .duty__n { color: var(--nv-blue-bright); }
}