/* pages/services.css — P5: Services hub, the five service pages, and the
   patterns shared with About and How we work (linked from those views too).
   Tokens only, mobile-first, no !important. Breakpoints: 560 / 820 / 1100. */

/* ── Hero text ─────────────────────────────────────────────────────────── */
.p5-hero-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 34rem;
}
.hero-page .p5-hero-text {
  margin-top: var(--sp-16);
}
.p5-display {
  font-size: var(--fs-h4);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-heading);
  color: var(--text-brand);
  text-wrap: balance;
  max-width: 30rem;
}
.p5-hub-media {
  min-height: 16rem;
}
@media (min-width: 820px) {
  .p5-hub-media {
    min-height: 22rem;
  }
}

/* ── Service bento: pictures fill photo tiles; controls above the card link */
.service-tile--photo > picture {
  position: absolute;
  inset: 0;
}
.service-tile--photo > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-tile :is(.btn, .link):not(.stretched-link) {
  position: relative;
  z-index: 2;
}
.service-tile .stretched-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.p5-tile-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}
.p5-tile-more--plain {
  color: var(--text-brand);
}
.p5-service-grid .service-tile--photo.span-rows-2 {
  min-height: 26rem;
}

/* ── Related cards and feature cards with one stretched link ───────────── */
.p5-related .feature {
  position: relative;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.p5-related .feature:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
}
.p5-related .feature h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ── FAQ excerpt intro ─────────────────────────────────────────────────── */
.p5-faq__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
}

/* ── Checklist (what to send / what to include) ────────────────────────── */
.p5-checklist {
  display: grid;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .p5-checklist--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.p5-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.p5-checklist .icon-circle {
  width: 1.75rem;
  height: 1.75rem;
}
.p5-checklist .icon-circle .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.p5-checklist li > span:last-child {
  padding-top: 0.2rem;
}

/* ── Numbered feature list (4-step sequences that are not the 5 steps) ─── */
.p5-sequence .feature .num {
  margin-bottom: var(--sp-4);
}
@media (min-width: 1100px) {
  .p5-sequence--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .p5-sequence--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── Two-column text + aside block ─────────────────────────────────────── */
.p5-split {
  display: grid;
  gap: var(--sp-24);
}
@media (min-width: 900px) {
  .p5-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-40);
    align-items: start;
  }
}
.p5-copy {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 40rem;
}
.p5-copy + .p5-copy {
  margin-top: var(--sp-16);
}
.p5-subhead {
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.25;
  margin-bottom: var(--sp-16);
}

/* ── Terms list on panels ──────────────────────────────────────────────── */
.p5-terms {
  margin-top: var(--sp-16);
}

/* ── Incoterm cards ─────────────────────────────────────────────────────── */
.p5-incoterms {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .p5-incoterms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .p5-incoterms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.p5-incoterm {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-24);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.p5-incoterm__code {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2.5rem;
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--r-pill);
  background: var(--surface-brand);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-code);
}
.p5-incoterm h3 {
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.25;
}
.p5-incoterm p {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.p5-note {
  margin-top: var(--sp-20);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 48rem;
}

/* ── Photo grid of colour cards (private label) ────────────────────────── */
.p5-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) {
  .p5-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.p5-cards a {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.p5-cards a:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
}
.p5-cards img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}
.p5-cards .mono {
  display: block;
  padding: var(--sp-10) var(--sp-14);
  font-size: var(--fs-small);
}

/* ── Inline CTA spacing inside sections ────────────────────────────────── */
.p5-inline-cta {
  margin-top: var(--sp-32);
}

@media (prefers-reduced-motion: reduce) {
  .p5-related .feature,
  .p5-cards a {
    transition: none;
  }
  .p5-related .feature:hover,
  .p5-cards a:hover {
    transform: none;
  }
}

@media print {
  .p5-related,
  .service-tile .btn-group {
    display: none;
  }
}

/* ── Space between the last section and the full-width CTA band ────────── */
.p5-end {
  padding-top: var(--section-space);
}

/* ── Dealer programme: "who it is for" strip ───────────────────────────── */
.p5-who {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
@media (min-width: 560px) {
  .p5-who {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-24);
  }
}
.p5-step-text {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.55;
  color: var(--text);
}