/* ==========================================================================
   SERVICES — /services/ landing page and the individual service pages
   --------------------------------------------------------------------------
   Both templates load this file.

   SCOPE. Every rule below is under `.pcr-services` (landing) or `.pcr-service`
   (single). The templates reuse the existing `case`, `case__hero`, `case__body`,
   `case__h2`, `case__cta`, `prose`, `btn`, `chip`, `pf-grid`, `pf-card`, `slot`,
   `work-meta`, `work-tag` and `crumbs` classes; nothing global is restyled
   without one of those two scopes in front of it.

   GROUND RHYTHM. The approved front page alternates grounds. These pages used
   to inherit the case-study chrome's `--void` from top to bottom and read as
   one long black column, so each page now alternates explicitly:

     /services/            dark hero -> .sect-light -> .section--void
                           -> .sect-light -> .sect-copper
     /services/<slug>/     dark hero -> .sect-light -> .section--void
                           -> .sect-light -> .sect-copper

   `.sect-light` and `.sect-copper` are global (assets/css/chrome.css) and
   `.section--void` is a base.css utility, so only this file's own components
   need restyling for the light ground.

   ACCENT. --copper-hot is for DARK grounds only. Everything under
   `.sect-light` below uses --copper / --copper-dim / --copper-wash /
   --copper-edge. Every colour resolves to a token in tokens.css; the only raw
   values are white (#fff) and white-at-opacity on the copper band, exactly as
   chrome.css writes them.

   GEOMETRY. Chamfers only — --clip / --clip-sm / --clip-xs. No border-radius.
   ========================================================================== */

/* ============================================================ page tokens === */

/*
 * --pcr-band-pad is THE vertical rhythm for both templates.
 *
 * The bug this replaces: bands took `padding-block: var(--section-pad)`
 * (clamp 64px→160px) and then had `padding-top: 0` knocked off every band after
 * the first. So a mid-page band measured 160px of air under its content and 0px
 * above it, and the light band above "Typical projects" ended on a dead
 * half-screen of `--base` with nothing anchoring it. Worse, it put the last
 * element in a band 160px clear of the ground change, which is what read as the
 * "See every project" button being clipped by the band below it.
 *
 * The fix is not a bigger number, it is ONE number on BOTH sides of every band.
 * Every gap on the page is then exactly `--pcr-band-pad`, at any viewport, and
 * no band is visually heavier than its neighbour. The CTA is not an exception:
 * `.case__cta` is reset to `padding: 0` below and its inner block takes this
 * same token, so the closing copper band measures identically to the rest.
 *
 * The token is declared on the two root scope classes rather than on `:root` so
 * it cannot leak into another page's stylesheet.
 */
.pcr-services,
.pcr-service {
  --pcr-band-pad: clamp(56px, 7vw, 96px);
}

/* ======================================================== shared grounds === */

/*
 * Both templates open with `.case__hero` that carries NO `.case__hero-media`.
 * `.case__hero-inner` is `position: absolute; inset: 0` so that the case-study
 * hero can sit over its 21:9 artwork — with no artwork, `.case__hero` has no
 * height and the inner block collapses to nothing. Taking it out of absolute
 * positioning is what gives these pages a header, and the padding-block is
 * where the fixed nav's space gets reserved (`--pcr-nav-offset` is chrome.css's
 * own measured offset; `--nav-height` is a different number and is not
 * interchangeable with it).
 *
 * The bottom padding is the band token, so the hero→first-band gap matches
 * every band→band gap on the page instead of being 64px against 160px.
 *
 * `.pcr-inner .section:first-child` does not apply here because these templates
 * do not open with a `.section`.
 */
.pcr-services__hero,
.pcr-service__hero {
  position: relative;
  overflow: hidden;
}
.pcr-services__hero::before,
.pcr-service__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 80% at 90% 10%, rgba(222, 73, 22, .18), transparent 70%);
}
.pcr-services__hero .case__hero-inner,
.pcr-service__hero .case__hero-inner {
  position: static;
  z-index: 1;
  justify-content: flex-start;
  gap: 0;
  padding-block: calc(var(--pcr-nav-offset) + var(--pcr-band-pad)) var(--pcr-band-pad);
}

/* The eyebrow carries the service icon; nudge it onto the baseline. */
.pcr-service__hero .eyebrow i {
  display: inline-block;
  margin-right: 6px;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -1px;
}

.pcr-services__hero .case__title,
.pcr-service__hero .case__title { max-width: 24ch; }

.pcr-services__hero .case__tagline,
.pcr-service__hero .case__tagline { max-width: 62ch; }

/* ---------------------------------------------------------------------------
   Bands.

   ---------------------------------------------------------------------------
   `.case__body` carries `padding-block: var(--sp-3xl)`. That padding existed to
   space a single dark column; with alternating bands each one carries its own
   vertical rhythm instead, so the body's padding goes to zero and every band
   touches the one above and below it — which is the only way the alternation
   actually reads.

   Every band below takes the SAME `padding-block`. There is deliberately no
   `:first-child` override and no adjacent-sibling `padding-top: 0` — those two
   rules are what made the rhythm uneven.

   `.case__block` is deliberately NOT used on these bands. All it does in
   project.css is `.case__block + .case__block { margin-top }`, which would
   open a dead `--sp-4xl` gap between two bands that are supposed to abut.
   --------------------------------------------------------------------------- */
.pcr-services__body,
.pcr-service__body { padding-block: 0; }

.pcr-services__band,
.pcr-service__band { padding-block: var(--pcr-band-pad); }

/* Section head: eyebrow over an h2 over an optional lede.

   `.eyebrow` is `display: inline-flex`, and a vertical margin on an inline-level
   box does not open a gap — so it has to become block-level (still hugging its
   content via `width: fit-content`) for the eyebrow/h2 spacing to exist at all. */
.pcr-services__head .eyebrow,
.pcr-service__head .eyebrow {
  display: flex;
  width: fit-content;
  margin-bottom: var(--sp-xs);
}
.pcr-services__head .case__h2,
.pcr-service__head .case__h2 { margin-bottom: 0; }

/* The one-paragraph standfirst under a section heading, mirroring the approved
   front page's `.caps-lede`. Deliberately a `<p class="pcr-services__lede">`
   rather than `.prose` so it does not inherit `.prose`'s 68ch measure. */
.pcr-services__lede,
.pcr-service__lede {
  max-width: 68ch;
  margin-top: var(--sp-md);
  margin-bottom: 0;
  color: var(--ink-light);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
/* On the dark void band the light-ground ink token is unreadable. */
.pcr-services .section--void .pcr-services__lede,
.pcr-service .section--void .pcr-service__lede,
.pcr-services .section--void .pcr-service__lede,
.pcr-service .section--void .pcr-services__lede {
  color: var(--on-dark);
}

/* A short lead-in under a section heading, and the closing caveat line. */
.pcr-services__note { margin-top: var(--sp-xl); }

/*
 * The owner's body copy is the reason this page exists, so it gets a proper
 * editorial column: `margin-inline: auto` centres `.prose`'s existing
 * `--measure` inside the 1680px wide shell instead of hanging it off the far
 * left with half a screen of nothing beside it.
 */
.pcr-service__content {
  margin-top: 0;
  margin-inline: auto;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  clip-path: var(--clip-sm);
}
/* `.prose > * + *` adds --sp-3xl above every h2, which is right mid-document
   and wrong for the very first block — Gutenberg content almost always opens
   with one. */
.pcr-service__content > h2:first-child,
.pcr-service__content > h3:first-child { margin-top: 0; }

.pcr-services__foot,
.pcr-service__foot {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line);
  max-width: var(--measure);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--ink-light);
}
.pcr-service__foot { margin-inline: auto; }

/* ====================================================== service cards ==== */

/*
 * The four service cards are the centrepiece of /services/. They are a SET, not
 * four unrelated boxes, and they are built to the approved design's `.card-proj`:
 *
 *     icon plate + ordinal / title / two-line summary / meta rule / button
 *
 * Every step is load-bearing.
 *   - the ordinal (01–04) makes the set countable, which is what makes it read
 *     as a list of four lines rather than four marketing boxes;
 *   - the meta row carries `margin-top: auto` on a flex column, which only works
 *     because grid items stretch to the tallest card in the row — that is what
 *     puts all four rules and all four buttons on the same line;
 *   - the full-width copper button is the link affordance. An arrow on its own
 *     is a hint; a filled, chamfered, uppercase button at the bottom of the card
 *     is an instruction, and the whole card is the hit area behind it.
 *
 * The summary text is kept short in the template so that two lines is really two
 * lines at desktop and the row of cards stays level.
 *
 * These sit on `.sect-light`, so chrome.css's `.sect-light .card` primitive would
 * supply a raised-light look — but `card` is not applied here. The selectors
 * below carry `.pcr-services` in front of them so the chamfer and the hover
 * treatment win on specificity rather than on load order.
 */
.pcr-services__grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-2xl);
}
@media (max-width: 860px) {
  .pcr-services__grid { grid-template-columns: minmax(0, 1fr); }
}

.pcr-services__card {
  position: relative;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  /* Chamfer, not a pill. One 45 degree cut is the brand. */
  clip-path: var(--clip);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
@media (hover: hover) {
  .pcr-services__card:hover {
    border-color: var(--copper-edge);
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcr-services__card:hover { transform: none; }
}

/*
 * A 3px copper rule flush with the card's top edge. `::before` rather than a
 * `border-top` because the card is chamfer-clipped — a border would be cut away
 * at the corner, whereas this paints inside the clip.
 */
.pcr-services__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}
@media (hover: hover) {
  .pcr-services__card:hover::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pcr-services__card::before { transition: none; }
}

.pcr-services__card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: clamp(22px, 2.4vw, 32px);
  color: inherit;
  text-decoration: none;
}
.pcr-services__card-link:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -4px;
}

/* icon plate + ordinal */
.pcr-services__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.pcr-services__card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  color: var(--copper);
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  clip-path: var(--clip-xs);
  transition: color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.pcr-services__card:hover .pcr-services__card-icon {
  color: #fff;
  background: var(--copper);
  border-color: var(--copper);
}

.pcr-services__card-no {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--support);
  transition: color var(--t-base) var(--ease);
}
.pcr-services__card:hover .pcr-services__card-no { color: var(--copper-edge); }

.pcr-services .pcr-services__card-title {
  margin-top: var(--sp-lg);
  margin-bottom: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  transition: color var(--t-base) var(--ease);
}
.pcr-services__card:hover .pcr-services__card-title { color: var(--copper-dim); }

.pcr-services .pcr-services__card-text {
  margin-top: var(--sp-sm);
  margin-bottom: 0;
  color: var(--ink-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* the meta rule — the design's `.card-proj .meta`, and the row that levels */
.pcr-services .pcr-services__card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  /* auto, not a fixed margin: this is what levels the four cards */
  margin-top: auto;
  padding-top: var(--sp-lg);
  color: var(--copper);
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.pcr-services .pcr-services__card-meta > span {
  min-width: 0;
  overflow-wrap: break-word;
}
.pcr-services .pcr-services__card-meta > span + span { text-align: right; }

/* the pinned footer — the link affordance */
.pcr-services .pcr-services__card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-md);
  padding: 0 var(--sp-md);
  background: var(--copper);
  border: 1px solid var(--copper);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  clip-path: var(--clip-xs);
  transition: background var(--t-base) var(--ease-io),
              border-color var(--t-base) var(--ease-io);
}
.pcr-services__card:hover .pcr-services__card-cta {
  background: var(--copper-dim);
  border-color: var(--copper-dim);
}
.pcr-services__card-cta i {
  flex: 0 0 auto;
  font-size: 1.05em;
  transition: transform var(--t-base) var(--ease);
}
.pcr-services__card:hover .pcr-services__card-cta i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .pcr-services__card-cta i { transition: none; }
}

/* ------------------------------------------------- the long form, below --- */

/*
 * The full description of each engagement, kept on the landing page rather than
 * discarded. Two columns on a wide screen, one on a phone. The key is a
 * `<p>`, not a heading: this is an expansion of the card above it, and adding
 * four more headings to the page outline would put six h3s on a page whose
 * service cards already carry the same four titles.
 */
.pcr-services__detail {
  display: grid;
  gap: clamp(18px, 2vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) {
  .pcr-services__detail { grid-template-columns: minmax(0, 1fr); }
}

.pcr-services__detail-row {
  min-width: 0;
  position: relative;
  padding: var(--sp-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
@media (hover: hover) {
  .pcr-services__detail-row:hover {
    border-color: var(--copper-edge);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcr-services__detail-row:hover { transform: none; }
}

.pcr-services__detail-key {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  margin: 0 0 var(--sp-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.pcr-services__detail-no {
  flex: 0 0 auto;
  color: var(--copper);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
  line-height: 1;
  opacity: .35;
  transition: opacity var(--t-base) var(--ease);
}
.pcr-services__detail-row:hover .pcr-services__detail-no { opacity: 1; }
.pcr-services__detail-text {
  margin: 0;
  color: var(--ink-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ==================================================== typical projects ==== */

.pcr-services .pcr-work,
.pcr-service .pcr-work { margin-top: var(--sp-2xl); }

/*
 * `display: grid` is declared HERE, not inherited from front.css.
 *
 * `pcr_is_projects_view()` in inc/pages.php only returns true on the front page,
 * /projects/ and the category archives — so front.css, the only file that ever
 * declared `.pf-grid`, does not load on these two templates at all. Overriding
 * `grid-template-columns` on a selector that was never `display: grid` does
 * nothing, and the strip rendered as four stacked full-width cards with the
 * button shoved off the bottom. Everything the project card needs is restated
 * below for exactly that reason.
 */
.pcr-services .pcr-work .pf-grid,
.pcr-service .pcr-work .pf-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
}

/*
 * The strip is four across on a wide screen, where `.pf-grid`'s three columns
 * would leave the fourth card orphaned on its own row. The single-service strip
 * shows three, which the grid already handles.
 */
.pcr-services .pcr-services__projects .pf-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1180px) {
  .pcr-services .pcr-services__projects .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pcr-services .pcr-services__projects .pf-grid { grid-template-columns: minmax(0, 1fr); }
}

.pcr-service .pcr-service__projects .pf-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1180px) {
  .pcr-service .pcr-service__projects .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pcr-service .pcr-service__projects .pf-grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The band-closing button. `margin-block: 0 auto` keeps it clear of the band's
 * bottom padding instead of floating in the middle of it, and `.reveal` on the
 * row means it is observed like everything else rather than appearing while the
 * cards above it are still animating in.
 */
.pcr-services__more,
.pcr-service__more {
  margin-top: var(--sp-xl);
  margin-bottom: 0;
}

/*
 * ---------------------------------------------------------------------------
 * Project card, restated for this scope.
 *
 * `.pf-card`, `.work-card__link`, `.work-img`, `.work-meta`, `.work-tag` and
 * `figure.slot` are styled in front.css / front-addendum.css. front.css does not
 * load here, and even where it does these values are the DARK-ground ones
 * (`background: var(--void)`, `.work-meta h3 { color: #fff }`, a
 * `--glass-border` rule) because on the front page this component only ever sits
 * on the `--void` portfolio section.
 *
 * The block below restates the component under this scope, on the dark `--void`
 * band it actually sits on, with the same values the front page uses so the two
 * look identical — and follows it with a `.sect-light` variant for the case
 * where the same strip is dropped onto a light band. The values that have to
 * change are the ones that assume a dark ground: `figure.slot`'s background,
 * `.work-meta h3`'s colour, `.work-tag`'s fill and border, and the focus ring.
 *
 * `--chamfer-card-sm` is deliberately NOT used here: it is referenced by
 * front-addendum.css but is not declared in tokens.css, so it resolves to
 * nothing and the clip silently drops out. `--clip-sm` is the declared token
 * and gives the same single 45 degree cut.
 * ---------------------------------------------------------------------------
 */
.pcr-services .pcr-work .pf-card,
.pcr-service .pcr-work .pf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  overflow: hidden;
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
@media (hover: hover) {
  .pcr-services .pcr-work .pf-card:hover,
  .pcr-service .pcr-work .pf-card:hover {
    border-color: var(--copper-edge);
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcr-services .pcr-work .pf-card:hover,
  .pcr-service .pcr-work .pf-card:hover { transform: none; }
}

.pcr-services .pcr-work .pf-card .work-card__link,
.pcr-service .pcr-work .pf-card .work-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.pcr-services .pcr-work .pf-card .work-card__link:focus-visible,
.pcr-service .pcr-work .pf-card .work-card__link:focus-visible {
  outline: 2px solid var(--copper-hot);
  outline-offset: -2px;
}

.pcr-services .pcr-work .pf-card figure.slot,
.pcr-service .pcr-work .pf-card figure.slot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--void);
}
.pcr-services .pcr-work .pf-card figure.slot img,
.pcr-service .pcr-work .pf-card figure.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the two-image hover swap pcr_project_card() emits (.pk-a / .pk-b) */
.pcr-services .pcr-work .pf-card .work-img .pk,
.pcr-service .pcr-work .pf-card .work-img .pk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease);
}
.pcr-services .pcr-work .pf-card .work-img .pk-b,
.pcr-service .pcr-work .pf-card .work-img .pk-b { opacity: 0; transform: scale(1.06); }
.pcr-services .pcr-work .pf-card:hover .work-img .pk-a,
.pcr-service .pcr-work .pf-card:hover .work-img .pk-a { opacity: 0; transform: scale(1.04); }
.pcr-services .pcr-work .pf-card:hover .work-img .pk-b,
.pcr-service .pcr-work .pf-card:hover .work-img .pk-b { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .pcr-services .pcr-work .pf-card .work-img .pk,
  .pcr-service .pcr-work .pf-card .work-img .pk { transition: none; }
}

.pcr-services .pcr-work .pf-card .work-meta,
.pcr-service .pcr-work .pf-card .work-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  border-top: 1px solid var(--on-dark-line);
}
.pcr-services .pcr-work .pf-card .work-meta h3,
.pcr-service .pcr-work .pf-card .work-meta h3 {
  margin: 0 0 var(--sp-xs);
  color: #fff;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  transition: color var(--t-base) var(--ease);
}
.pcr-services .pcr-work .pf-card:hover .work-meta h3,
.pcr-service .pcr-work .pf-card:hover .work-meta h3 { color: var(--copper-hot); }
.pcr-services .pcr-work .pf-card .work-meta p,
.pcr-service .pcr-work .pf-card .work-meta p {
  margin: 0;
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.pcr-services .pcr-work .pf-card .work-tags,
.pcr-service .pcr-work .pf-card .work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: auto;
  padding-top: var(--sp-md);
}
.pcr-services .pcr-work .pf-card .work-tag,
.pcr-service .pcr-work .pf-card .work-tag {
  display: inline-block;
  padding: 4px 9px;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--on-dark-mute);
  background: var(--on-dark-wash);
  border: 1px solid var(--on-dark-line);
  clip-path: var(--clip-xs);
}

/* ---- the same card, on a light ground ---- */
.pcr-services .sect-light .pcr-work .pf-card,
.pcr-service .sect-light .pcr-work .pf-card {
  background: var(--surface);
  border-color: var(--line);
}
.pcr-services .sect-light .pcr-work .pf-card figure.slot,
.pcr-service .sect-light .pcr-work .pf-card figure.slot { background: var(--base); }
.pcr-services .sect-light .pcr-work .pf-card .work-card__link:focus-visible,
.pcr-service .sect-light .pcr-work .pf-card .work-card__link:focus-visible { outline-color: var(--copper); }
.pcr-services .sect-light .pcr-work .pf-card .work-meta,
.pcr-service .sect-light .pcr-work .pf-card .work-meta { border-top-color: var(--line); }
.pcr-services .sect-light .pcr-work .pf-card .work-meta h3,
.pcr-service .sect-light .pcr-work .pf-card .work-meta h3 { color: var(--ink); }
.pcr-services .sect-light .pcr-work .pf-card:hover .work-meta h3,
.pcr-service .sect-light .pcr-work .pf-card:hover .work-meta h3 { color: var(--copper-dim); }
.pcr-services .sect-light .pcr-work .pf-card .work-meta p,
.pcr-service .sect-light .pcr-work .pf-card .work-meta p { color: var(--ink-light); }
.pcr-services .sect-light .pcr-work .pf-card .work-tag,
.pcr-service .sect-light .pcr-work .pf-card .work-tag {
  color: var(--ink-light);
  background: var(--base);
  border-color: var(--line);
}

/* ================================================================ tools === */

/*
 * Three of the four tool marks are monochrome SVGs with no `fill` attribute, so
 * they paint black. On the old `--graphite` row they were effectively invisible;
 * on `.sect-light` they read correctly, which is one of the reasons this band
 * belongs on the light ground at all. Each still gets its own `--base` plate so
 * the row reads as a deliberate swatch set next to the full-colour Cadence
 * wordmark — the plate is the answer to four logos of four different optical
 * sizes, not decoration.
 *
 * The logos themselves are NOT recoloured or filtered: official brand colours
 * are left exactly as the SVGs ship them.
 */
.pcr-services__tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: var(--sp-2xl);
  padding: 0;
  list-style: none;
}
@media (max-width: 1020px) { .pcr-services__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .pcr-services__tools { grid-template-columns: minmax(0, 1fr); } }

.pcr-services .pcr-services__tool {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-width: 0;
  padding: var(--sp-md);
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
@media (hover: hover) {
  .pcr-services .pcr-services__tool:hover {
    border-color: var(--copper-edge);
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcr-services .pcr-services__tool:hover { transform: none; }
}

.pcr-services__tool-plate {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 104px;
  max-width: 46%;
  height: 52px;
  padding: 0 var(--sp-sm);
  background: var(--base);
  border: 1px solid var(--line);
  clip-path: var(--clip-xs);
}
.pcr-services__tool-plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 24px;
}

.pcr-services .pcr-services__tool-name {
  min-width: 0;
  color: var(--ink-light);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* ============================================== single service — others === */

/*
 * `auto-fit` + `minmax( min(100%, 240px), 1fr )` so the row reflows when the
 * owner adds a fifth service page, and never overflows a 390px phone (the
 * `min(100%, …)` is what guarantees the second half).
 */
.pcr-service__others {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: var(--sp-2xl);
  padding: 0;
  list-style: none;
}

.pcr-service .pcr-service__other-link {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  height: 100%;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
  box-shadow: var(--sh-1);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
@media (hover: hover) {
  .pcr-service__other-link:hover {
    border-color: var(--copper-edge);
    box-shadow: var(--sh-lift);
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcr-service__other-link:hover { transform: none; }
}
.pcr-service__other-link:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* the ordinal, so the "other services" row reads as a continuation of the
   four-item set on the landing page rather than a loose list of links */
.pcr-service .pcr-service__other-no {
  flex: 0 0 auto;
  color: var(--support);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-label);
  line-height: 1;
  transition: color var(--t-base) var(--ease);
}
.pcr-service__other-link:hover .pcr-service__other-no { color: var(--copper); }

.pcr-service__other-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 17px;
  line-height: 1;
  color: var(--copper);
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  clip-path: var(--clip-xs);
  transition: color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.pcr-service__other-link:hover .pcr-service__other-icon {
  color: #fff;
  background: var(--copper);
  border-color: var(--copper);
}

.pcr-service__other-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs);
  min-width: 0;
  flex: 1;
}
.pcr-service .pcr-service__other-text strong {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.pcr-service__other-text i {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--copper);
  transition: transform var(--t-base) var(--ease);
}
.pcr-service__other-link:hover .pcr-service__other-text i { transform: translateX(3px); }

/* ============================================================ CTA blocks === */

/*
 * `.case__cta` is a graphite card with a copper left rule and a `--clip`
 * chamfer, sitting in the middle of the column. As the closing band it has to
 * go full-bleed and take the copper ground, so every one of those is reset
 * here — and it has to be reset HERE rather than left to `.sect-copper`, because
 * `.case__cta` is a single class in project.css, `.sect-copper` is a single
 * class in chrome.css, and chrome.css loads FIRST. Equal specificity would hand
 * the decision to load order.
 *
 * `<section>` rather than `<div>`: it is a section of the page, and the outline
 * button next to the primary one needs an explicit drawing because
 * `.sect-copper .btn` (0,2,0) outranks `.btn--outline-light` (0,1,0) and would
 * otherwise paint both buttons solid white.
 */
.pcr-services .sect-copper.case__cta,
.pcr-service .sect-copper.case__cta {
  display: block;
  margin-top: 0;
  padding: 0;
  background: var(--copper);
  border: 0;
  box-shadow: none;
  clip-path: none;
}

/* The same page token as every other band, so the closing band is not lighter
   or heavier than the ones above it. */
.pcr-services__cta-inner,
.pcr-service__cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding-block: var(--pcr-band-pad);
}

/* Same inline-level trap as the section heads: `.eyebrow` is inline-flex, so it
   needs to become block-level before a vertical margin does anything. */
.pcr-services__cta-inner .eyebrow,
.pcr-service__cta-inner .eyebrow {
  display: flex;
  width: fit-content;
  margin-bottom: var(--sp-xs);
}
.pcr-services__cta-inner h2,
.pcr-service__cta-inner h2 { margin-top: 0; }

.pcr-services .sect-copper h2,
.pcr-service .sect-copper h2 {
  color: #fff;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

/*
 * `.case__cta p` colours the body copy `--on-dark-mute` (#98A2B3), which is a
 * 1.8:1 contrast ratio on copper and unreadable. White is 4.9:1.
 */
.pcr-services .sect-copper p,
.pcr-service .sect-copper p { color: #fff; }

.pcr-services .sect-copper .btn--outline-light,
.pcr-service .sect-copper .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .55);
}
.pcr-services .sect-copper .btn--outline-light:hover,
.pcr-service .sect-copper .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}

/* =============================================================== print ==== */

@media print {
  .pcr-services .pcr-work,
  .pcr-service .pcr-work,
  .pcr-service__others { display: none; }
}