/* ============================================================
   CYNEXIX — Products & Solutions / Services ("portfolio") pages
   Editorial register — the reference for every portfolio template:
   a single dominant headline under the breadcrumb; full-width split
   rows (media / content) alternating sides on the two section surfaces;
   hairline link rows with arrows; sentence-case text links; at most one
   pill per page (the closing contact band).

   Built on css/product-showcase.css tokens (--ps-*): navy, the two
   section surfaces, the media-frame fill and the 16/80px radius motif.
   Accent discipline: bright blue is reserved for the vertical numbers
   and hover states; arrows and links rest in navy/grey.

   Type scale (desktop, Poppins): title 48 / standfirst 20 / body 16,
   text links and the closing pill at body size. Ratios follow
   Ingenico's product pages (3.5 : 1.24 : 1), with the title held at 48
   so every page title fits on two lines in the 520px content column.
   ============================================================ */

.cx-pf-page {
  padding-bottom: 0; /* the closing band meets the footer */
}

/* ------------------------------------------------------------
   Page intro: one editorial headline (H1); the breadcrumb gives context
   ------------------------------------------------------------ */
.cx-pf-hero {
  max-width: 860px;
  padding: 24px 0 72px;
}
.cx-pf-headline {
  margin: 0 0 20px;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ps-navy);
}
/* Controlled line break inside a heading or standfirst (cynexix_copy_lines). */
.cx-pf-line {
  display: block;
  text-wrap: balance; /* when a line wraps on narrow screens, split it evenly */
}
/* Standfirst: the page's first descriptive line under the H1 (intro,
   one-liner or summary), set apart from body copy. */
.cx-pf-standfirst {
  margin: 0 0 24px;
  max-width: 55ch;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a2e;
  text-wrap: pretty; /* no single-word last line where supported */
}
.cx-pf-standfirst:last-child,
.cx-pf-hero .cx-pf-headline:last-child {
  margin-bottom: 0;
}
/* Statement header (Careers, About Us), as on Ingenico's jobs site: the H1
   set small as the kicker, then a statement in the headline scale. A long
   statement (--long, About Us) steps down to just above the section
   headings, so it stays the page's one large moment without shouting. */
.cx-pf-hero--statement {
  max-width: 1040px;
  padding-top: 40px;
}
.cx-pf-hero__title {
  margin-bottom: 20px;
}
.cx-pf-statement {
  text-wrap: balance; /* splits evenly where it wraps */
}
@media (max-width: 575.98px) {
  .cx-pf-hero--statement .cx-pf-statement {
    font-size: 28px;
  }
}
.cx-pf-hero--statement .cx-pf-statement--long {
  max-width: 30em;
  font-size: clamp(26px, 2.6vw, 34px); /* section headings: clamp(24px, 2.4vw, 32px) */
  line-height: 1.35;
}
/* Supporting text inside rows and sections (row one-liners, section intros). */
.cx-pf-lead {
  margin: 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.65;
  color: #444;
}

/* ------------------------------------------------------------
   Split rows: media / content, alternating sides (01 media-left; add
   .cx-pf-split--media-right to flip) and surfaces, vertically centred. The media frame is an empty placeholder
   until photography lands; its flare mirrors with the side it sits on,
   as in the homepage showcase.
   ------------------------------------------------------------ */
.cx-pf-row {
  padding: 56px 0;
  background: var(--ps-surface-section);
}
.cx-pf-row--band {
  background: var(--ps-surface-band);
}
.cx-pf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.cx-pf-media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--ps-surface-panel);
  border-radius: var(--ps-radius-card) var(--ps-radius-flare)
                 var(--ps-radius-card) var(--ps-radius-card);
}
.cx-pf-split--media-right .cx-pf-media {
  order: 2;
  border-radius: var(--ps-radius-flare) var(--ps-radius-card)
                 var(--ps-radius-card) var(--ps-radius-card);
}
.cx-pf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 16:9 photo frame (e.g. press release photography), kept on phones. */
.cx-pf-media.cx-pf-media--wide {
  aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------
   Article detail (template-parts/article.php: press releases and blog
   posts): the landing page's headline over a reading column of about 72
   characters, opening with the hero frame. Media frames inside an article
   take the plain 16px radius, no flare.
   ------------------------------------------------------------ */
/* The trail stays on one line: the headline below repeats the last crumb
   in full, so that crumb truncates. */
.cx-pr .breadcrumb {
  flex-wrap: nowrap;
}
.cx-pr .breadcrumb-item {
  flex: none;
}
.cx-pr .breadcrumb-item.active {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The page hangs on one left axis, the edge a centred 900px column would
   have: the header (date line, headline) runs from it to the
   container's right edge, the body keeps its reading measure on it, and
   the latest releases share the header's span. */
.cx-pr {
  --cx-pr-axis: max(0px, calc((100% - 900px) / 2));
}
.cx-pr__layout {
  display: grid;
  grid-template-columns: var(--cx-pr-axis) minmax(0, 1fr);
}
.cx-pr__article {
  grid-column: 2;
}
.cx-pr__column {
  margin-left: var(--cx-pr-axis);
}
/* Scoped under .cx-pr to outrank .cx-pf-textlink, which comes later. */
.cx-pr .cx-pr__back {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
}
.cx-pr .cx-pr__back:hover .bi {
  transform: translateX(-4px);
}
.cx-pr__header {
  padding: 40px 0;
}
.cx-pr__nowrap {
  white-space: nowrap;
}
/* From 1400px (the 1320px container) the back link sits in the left
   gutter, level with the date line; narrower, it stays above the header.
   The 198px gutter is a little short for the label, so it breaks after
   "Back to", the arrow beside the first line. */
@media (min-width: 1400px) {
  .cx-pr .cx-pr__back {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    align-items: flex-start;
    margin-top: 40px;
    padding-right: 24px;
    line-height: 1.4;
  }
  .cx-pr .cx-pr__back .bi {
    margin-top: 2px;
  }
  .cx-pr__article {
    grid-row: 1;
  }
}
.cx-pr__meta {
  margin-bottom: 16px;
}
/* Each meta item ("8 min read") wraps as a whole. */
.cx-pr__meta time,
.cx-pr__meta-item {
  white-space: nowrap;
}
/* Multi-line headlines wrap to even lines. Press release titles run long,
   so on phones the headline steps down from 32px to 26px, still above the
   24px section headings. */
.cx-pr__header .cx-pf-headline {
  margin-bottom: 0;
  text-wrap: balance;
}
@media (max-width: 575.98px) {
  .cx-pr__header .cx-pf-headline {
    font-size: 26px;
  }
}
.cx-pr__body {
  max-width: 72ch;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #444;
}
.cx-pr__body p {
  margin: 0 0 1.25em;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.cx-pr__body strong {
  font-weight: 600;
  color: #1a1a2e;
}
/* From 768px running paragraphs justify the way Ingenico's press releases
   do: word spaces stretch, words never hyphenate. Lines wrap greedily, as
   Chrome's "pretty" pulls words down to lengthen last lines, stretching the
   lines above. Narrower columns stay ragged. */
@media (min-width: 768px) {
  .cx-pr__body p:not(.cx-pr__dateline) {
    text-align: justify;
    text-wrap: wrap;
  }
}
/* Share row closing the article: plain share links, no third-party
   scripts. "Copy link" stays hidden until js/share-links.js runs. */
.cx-pr__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  row-gap: 12px;
  max-width: 72ch;
  margin: 28px 0 88px;
  padding-top: 24px;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pr__share-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #555;
}
.cx-pr__share-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ps-navy);
  text-decoration: none;
  cursor: pointer;
}
.cx-pr__share-link[hidden] {
  display: none;
}
.cx-pr__share-link .bi {
  font-size: 18px;
  line-height: 1;
}
.cx-pr__share-link:hover {
  color: var(--ps-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cx-pr__share-link:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Phones: the label on its own line, the four options two by two below it,
   each a full-height tap target. */
@media (max-width: 575.98px) {
  .cx-pr__share {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 40px;
    row-gap: 0;
  }
  .cx-pr__share-label {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .cx-pr__share-link {
    min-height: 44px;
  }
}
/* Author blocks after a blog post's body (template-parts/author-bio.php),
   in Ingenico's register: a hairline, then each author with a 96px round
   photo beside the name, job title and bio; no card. The share row
   follows on its own hairline. */
.cx-pr__authors {
  display: grid;
  gap: 32px;
  max-width: 72ch;
  margin-top: 28px;
  padding: 32px 0 0;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pr__authors + .cx-pr__share {
  margin-top: 40px;
}
.cx-author {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.cx-author__photo {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.cx-author__name {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
}
.cx-author__role {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #555;
}
.cx-author__bio {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #444;
}
@media (max-width: 575.98px) {
  .cx-author {
    gap: 16px;
  }
  .cx-author__photo {
    width: 64px;
    height: 64px;
  }
}
.cx-pr__body h2 {
  margin: 48px 0 16px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ps-navy);
}
.cx-pr__body h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
}
.cx-pr__body .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ps-radius-card);
}
.cx-pr__body hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
  opacity: 1;
}
.cx-pr__body .cx-pf-media {
  margin: 40px 0;
  border-radius: var(--ps-radius-card);
}
.cx-pr__body > .cx-pf-media:first-child {
  margin-top: 0;
}
@media (max-width: 991.98px) {
  .cx-pr__header {
    padding: 24px 0 32px;
  }
  .cx-pr__share {
    margin-bottom: 56px;
  }
  .cx-pr__body h2 {
    margin-top: 40px;
  }
}
/* ------------------------------------------------------------
   Images in an article body (blog posts): image slots sit in a plain 16px
   frame and placed images keep their own shape, each with an optional
   caption below.
   ------------------------------------------------------------ */
.cx-blog-figure {
  margin: 32px 0;
}
.cx-blog-figure .cx-pf-media {
  border-radius: var(--ps-radius-card);
}
.cx-blog-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* ------------------------------------------------------------
   Blog listing (archive-blog.php): the featured post as a split panel,
   category chips, then a grid of blog cards (template-parts/blog-card.php).
   ------------------------------------------------------------ */
/* The promo cards close the page and sit as on the Press Releases page:
   96px below the grid and as far above the footer. */
.cx-blog {
  padding-bottom: 30px;
}
.cx-blog-grid-section {
  padding-bottom: 0;
}
.cx-blog-empty {
  margin: 0;
  font-size: 16px;
  color: #555;
}
/* Date and category over a title, on the featured panel and every card. */
.cx-blog-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #555;
}
.cx-blog-eyebrow__category {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cx-blog-featured {
  display: block;
  padding: 40px;
  border-radius: var(--ps-radius-card);
  background: #fff;
  box-shadow: 0 8px 32px rgba(28, 45, 90, 0.06);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}
.cx-blog-featured > .cx-pf-split,
.cx-blog-featured .cx-pf-media,
.cx-blog-featured .cx-pf-content,
.cx-blog-card__media {
  display: block;
}
.cx-blog-featured > .cx-pf-split {
  display: grid;
}
.cx-blog-featured .cx-blog-eyebrow {
  margin-bottom: 14px;
}
.cx-blog-featured .cx-blog-featured__title {
  margin-bottom: 28px;
  text-wrap: balance;
}
.cx-blog-featured:hover {
  box-shadow: 0 16px 40px rgba(28, 45, 90, 0.10);
}
.cx-blog-featured:hover .ps-cta {
  background: var(--ps-navy-hover);
}
.cx-blog-featured:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 4px;
}
/* Chips: "Latest" plus one per category; the selected chip is navy. */
.cx-blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 56px 0 40px;
  scroll-margin-top: 113px;
}
.cx-blog-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid rgba(28, 45, 90, 0.24);
  border-radius: 50px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ps-navy);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cx-blog-chip:hover {
  border-color: var(--ps-navy);
  color: var(--ps-navy);
}
.cx-blog-chip.is-active {
  border-color: var(--ps-navy);
  background: var(--ps-navy);
  color: #fff;
}
.cx-blog-chip:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 2px;
}
.cx-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The card's hover surface reaches 12px past its content, so the content
   itself stays on the grid. */
.cx-blog-card {
  display: block;
  height: calc(100% + 24px);
  margin: -12px;
  padding: 12px;
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.cx-blog-card__media {
  margin-bottom: 16px;
}
.cx-blog-card .cx-pf-media {
  border-radius: var(--ps-radius-card);
}
.cx-blog-card__title {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
}
.cx-blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ps-navy);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cx-blog-card:hover,
.cx-blog-card:focus-visible {
  background: #fff;
  box-shadow: 0 16px 40px rgba(28, 45, 90, 0.10);
  color: inherit;
  transform: scale(1.025);
}
.cx-blog-card:hover .cx-blog-card__more,
.cx-blog-card:focus-visible .cx-blog-card__more {
  opacity: 1;
  transform: none;
}
.cx-blog-card:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 2px;
}
/* Related-articles carousel (blog posts): native horizontal scrolling with
   scroll-snap, three cards across on desktop, two on tablets, one on
   phones. The track reaches 20px past the column on every side so a
   hovered card's lift and shadow are not clipped. Arrows: js/blog-carousel.js. */
/* Scoped under .cx-carousel to outrank .cx-pf-section__head, which comes later. */
.cx-carousel .cx-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
}
.cx-carousel .cx-carousel__head .cx-pf-title {
  margin-bottom: 0;
}
.cx-carousel__controls {
  display: flex;
  flex: none;
  gap: 12px;
}
.cx-carousel__controls[hidden] {
  display: none;
}
.cx-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ps-navy);
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  color: var(--ps-navy);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.cx-carousel__button:hover:not(:disabled) {
  background: var(--ps-navy);
  color: #fff;
}
.cx-carousel__button:disabled {
  opacity: 0.3;
  cursor: default;
}
.cx-carousel__button:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 3px;
}
.cx-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 64px) / 3);
  gap: 32px;
  margin: 0 -20px;
  padding: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
}
.cx-carousel__track::-webkit-scrollbar {
  display: none;
}
.cx-carousel__item {
  scroll-snap-align: start;
}
@media (max-width: 991.98px) {
  .cx-carousel__track {
    grid-auto-columns: calc((100% - 24px) / 2);
    gap: 24px;
  }
}
@media (max-width: 575.98px) {
  .cx-carousel__track {
    grid-auto-columns: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cx-carousel__track {
    scroll-behavior: auto;
  }
}
/* Newsroom (page-newsroom.php): the blog section's featured post, the three
   cards below it, and each section's closing "View all" link. */
.cx-newsroom .cx-blog-featured + .cx-blog-grid {
  margin-top: 56px;
}
.cx-newsroom .cx-pf-section .cx-pf-textlink {
  margin-top: 40px;
}
@media (max-width: 575.98px) {
  .cx-newsroom .cx-blog-featured + .cx-blog-grid {
    margin-top: 40px;
  }
}
/* Touch screens have no hover: "Read more" stays visible. */
@media (hover: none) {
  .cx-blog-card__more {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cx-blog-card,
  .cx-blog-card__more,
  .cx-blog-featured {
    transition: none;
  }
  .cx-blog-card:hover,
  .cx-blog-card:focus-visible {
    transform: none;
  }
}
@media (max-width: 991.98px) {
  .cx-blog-featured {
    padding: 24px;
  }
  .cx-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cx-blog-chips {
    scroll-margin-top: 93px;
  }
}
/* Phones: one column; the chips scroll sideways in a single row. */
@media (max-width: 575.98px) {
  .cx-blog-chips {
    flex-wrap: nowrap;
    margin: 40px -12px 32px;
    padding: 0 12px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cx-blog-chips::-webkit-scrollbar {
    display: none;
  }
  .cx-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ------------------------------------------------------------
   Press release rows (template-parts/press-release-list.php), on the
   Press Releases page, the homepage's Latest News and in each release's
   "Latest Press Releases": the
   date in a fixed column in the kicker style, the headline beside it on
   the date's baseline; the whole row is the link. Phones stack the date
   above the headline.
   ------------------------------------------------------------ */
.cx-pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pr-list li {
  border-bottom: 1px solid rgba(28, 45, 90, 0.14);
}
/* Open rows (the homepage's Latest News): no rule above the first row or
   below the last; the rows between keep their dividers. */
.cx-pr-list--open {
  border-top: 0;
}
.cx-pr-list--open li:last-child {
  border-bottom: 0;
}
.cx-pr-list__item {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  text-decoration: none;
}
.cx-pr-list__item .cx-pr-list__date {
  margin: 0;
}
.cx-pr-list__title {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ps-navy);
  text-wrap: pretty; /* no single-word second line where supported */
  transition: color 0.2s ease;
}
.cx-pr-list__item:hover .cx-pr-list__title {
  color: #0d6efd;
}
.cx-pr-list__item:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 2px;
}
/* Promo cards (template-parts/news-promos.php) on the Press Releases page
   and the blog listing: they sit 96px below the rows or the grid above (the
   cards' columns add 24px above them) and, when there are earlier releases,
   96px above the rows below. Earlier releases end as far above the footer
   as the cards do. */
.cx-news-promos {
  margin-top: 72px;
}
.cx-news-promos + .cx-pr-list {
  margin-top: 96px;
  margin-bottom: 48px;
}
@media (max-width: 575.98px) {
  .cx-pr-list__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 20px 0;
  }
  .cx-pr-list__title {
    font-size: 1.1rem;
  }
}
.cx-pf-content {
  max-width: 520px;
}
.cx-pf-number {
  margin: 0 0 14px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #0d6efd;
}
.cx-pf-title {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ps-navy);
}
.cx-pf-lead--row {
  margin-bottom: 28px;
}

/* ------------------------------------------------------------
   Hairline link rows: name left, arrow right; the whole row is the link.
   ------------------------------------------------------------ */
.cx-pf-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-links li {
  border-bottom: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-links__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ps-navy);
  text-decoration: none;
}
.cx-pf-links__item .bi {
  flex: none;
  color: #5a6a8a;
  transition: transform 0.2s ease, color 0.2s ease;
}
.cx-pf-links__item:hover {
  color: #0d6efd;
}
.cx-pf-links__item:hover .bi {
  color: #0d6efd;
  transform: translateX(4px);
}
.cx-pf-links__item:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Quiet text link (sentence case, arrow), e.g. "Explore … →"
   ------------------------------------------------------------ */
.cx-pf-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ps-navy);
  text-decoration: none;
}
.cx-pf-textlink .bi {
  transition: transform 0.2s ease;
}
.cx-pf-textlink:hover {
  color: var(--ps-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cx-pf-textlink:hover .bi {
  transform: translateX(4px);
}
.cx-pf-textlink:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   Page header (vertical, capability, Services and Partners pages): content
   / media split under the breadcrumb, on the page surface.
   ------------------------------------------------------------ */
.cx-pf-header {
  padding: 24px 0 80px;
}
.cx-pf-body {
  margin: 20px 0 0; /* collapses with the standfirst's 24px above the first paragraph */
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}

/* ------------------------------------------------------------
   Content sections: full width, alternating surfaces, no boxes.
   ------------------------------------------------------------ */
.cx-pf-section {
  padding: 88px 0;
  background: var(--ps-surface-section);
}
.cx-pf-section--band {
  background: var(--ps-surface-band);
}
.cx-pf-section__head {
  max-width: 720px;
  margin-bottom: 36px;
}
.cx-pf-section__head .cx-pf-title {
  margin-bottom: 12px;
}

/* Link rows in two columns from desktop; each column keeps its own top hairline. */
.cx-pf-links--columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  border-top: 0;
}
.cx-pf-links--columns li:nth-child(-n + 2) {
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}

/* Detailed link rows: name over a one-line description. */
.cx-pf-links__item--detailed {
  align-items: flex-start;
  padding: 20px 0;
}
.cx-pf-links__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cx-pf-links__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ps-navy);
}
.cx-pf-links__desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #444;
}
.cx-pf-links__item--detailed .bi {
  margin-top: 4px;
}
.cx-pf-links__item:hover .cx-pf-links__name {
  color: #0d6efd;
}

/* Technologies We Deploy: partner logo over one line, hairline-divided. */
.cx-pf-tech {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 64px;
}
.cx-pf-tech li {
  padding: 28px 0 8px;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-tech__logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 220px;
  margin-bottom: 16px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply; /* a logo supplied on white blends into either surface */
}
.cx-pf-tech__line {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}
/* Partners page: the same list with each partner's name under its logo,
   the country for business partners (in the kicker style) and a link to
   the vertical a technology partner serves. Four across from desktop, or
   three with .cx-pf-tech--three; the column counts step down here rather
   than in the blocks at the end, which run 991px before 1199px. */
.cx-pf-tech--partners {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cx-pf-tech--partners li {
  padding-bottom: 32px;
}
.cx-pf-tech--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Desktop: both partner grids share a 32px column gap, so the longest
   business partner name fits on one line from 1400px (the 1320px container). */
@media (min-width: 1200px) {
  .cx-pf-tech--partners {
    column-gap: 32px;
  }
}
.cx-pf-tech__name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
}
.cx-pf-tech__meta {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #555;
}
/* A partner's vertical links, stacked. In these narrow columns a long link
   wraps; the arrow follows its last word. */
.cx-pf-tech__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}
.cx-pf-tech__links .cx-pf-textlink {
  display: inline-block;
  margin-top: 0;
}
.cx-pf-tech__links .cx-pf-textlink .bi {
  margin-left: 6px;
}
/* A section intro that runs on one line where the container allows. */
.cx-pf-section__head--wide,
.cx-pf-section__head--wide .cx-pf-lead {
  max-width: none;
}
/* The partners map (template-parts/partner-map-animation.php) inside a
   section: its own container adds no second gutter. */
.cx-pf-map {
  margin-bottom: 56px;
}
.cx-pf-map > .container {
  max-width: none;
  padding: 0;
}
@media (max-width: 1199.98px) {
  .cx-pf-tech--partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cx-pf-tech--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .cx-pf-tech--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .cx-pf-tech--partners {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Anchored sections (e.g. the Partners dropdown links) start just under the
   fixed header: 93px tall from 1200px, 73px (the drawer header) below. */
.cx-pf-section[id],
.cx-pf-closing[id] {
  scroll-margin-top: 93px;
}
@media (max-width: 1199.98px) {
  .cx-pf-section[id],
  .cx-pf-closing[id] {
    scroll-margin-top: 73px;
  }
}
/* ------------------------------------------------------------
   Service rows (Services page): icon in a tinted circle, title and
   description across one full-width row, hairline-divided; unnumbered,
   as the services are not a sequence. Each row is anchored so vertical
   pages can link to it. One component, two configured title widths
   (--cx-pf-service-title): by default the title and description share the
   row 5:7, as on Services; the compact variant (.cx-pf-services--compact,
   Contact Us) fixes the title column at 200px so descriptions start closer
   to the titles, and lets each description run the full column. Rows
   stack below 992px; compact rows keep the icon beside the title and
   description down to 768px. Contact Us adds an actions column.
   ------------------------------------------------------------ */
.cx-pf-services {
  --cx-pf-service-title: minmax(0, 5fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-services--compact {
  --cx-pf-service-title: 200px; /* fits the longest title, "Become a Partner" */
}
.cx-pf-service {
  display: grid;
  grid-template-columns: 56px var(--cx-pf-service-title) minmax(0, 7fr);
  grid-template-areas: "icon title desc";
  column-gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
  scroll-margin-top: 112px; /* clears the fixed header when linked to */
  position: relative;
  isolation: isolate;
}
/* Arrival cue (js/service-arrival.js): when a row is reached through an
   anchor its surface flashes a light tint, then fades back over ~1.8s. A
   surface flash reads as "located"; the title stays navy and unlinked. The
   tint reaches 12px past the row, within the container's gutter. */
.cx-pf-service::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: 12px;
  background: rgba(13, 110, 253, 0.1);
  opacity: 0;
  pointer-events: none;
}
.cx-pf-service.is-arrived::before {
  animation: cx-pf-arrive 1.8s ease-out;
}
@keyframes cx-pf-arrive {
  0%,
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.cx-pf-service__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13, 110, 253, 0.08);
  color: var(--ps-navy);
  font-size: 24px;
  line-height: 1;
}
.cx-pf-service__title {
  grid-area: title;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
}
.cx-pf-service__desc {
  grid-area: desc;
  margin: 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.65;
  color: #444;
}
.cx-pf-services--compact .cx-pf-service__desc {
  max-width: none;
}
/* ------------------------------------------------------------
   Process flow ("How we work"): flat chevron markers ramping from a
   whisper tint through the CYNEXIX brand stripes (light blue, cyan, mid
   navy, deep navy), each holding the stage number and name, with the
   stage line beneath on the section surface. Points right from 1200px;
   stacks and points down below.
   ------------------------------------------------------------ */
.cx-pf-flow {
  --cx-flow-notch: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.cx-pf-flow__stage {
  flex: 1 1 0;
  min-width: 0;
}
.cx-pf-flow__stage + .cx-pf-flow__stage {
  margin-left: -14px; /* interlocks the chevrons with an even 6px gap */
}
.cx-pf-flow__marker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 76px;
  padding: 0 calc(var(--cx-flow-notch) + 8px) 0 calc(var(--cx-flow-notch) + 16px);
  background: var(--cx-flow-fill);
  color: var(--cx-flow-ink);
  clip-path: polygon(0 0, calc(100% - var(--cx-flow-notch)) 0, 100% 50%, calc(100% - var(--cx-flow-notch)) 100%, 0 100%, var(--cx-flow-notch) 50%);
}
.cx-pf-flow__stage:first-child .cx-pf-flow__marker {
  padding-left: 24px;
  clip-path: polygon(0 0, calc(100% - var(--cx-flow-notch)) 0, 100% 50%, calc(100% - var(--cx-flow-notch)) 100%, 0 100%);
}
/* Ramp: 01 whisper tint (the studio-sweep family), then the brand stripes
   as sampled from the letterhead artwork. Deep navy text on 01-03, white on
   04-05; every pairing passes WCAG AA (lowest: navy on cyan, 6.3:1). */
.cx-pf-flow__stage:nth-child(1) { --cx-flow-fill: #e4f3fc; --cx-flow-ink: #112d4e; }
.cx-pf-flow__stage:nth-child(2) { --cx-flow-fill: #a6d9f8; --cx-flow-ink: #112d4e; }
.cx-pf-flow__stage:nth-child(3) { --cx-flow-fill: #3cbaec; --cx-flow-ink: #112d4e; }
.cx-pf-flow__stage:nth-child(4) { --cx-flow-fill: #204875; --cx-flow-ink: #fff; }
.cx-pf-flow__stage:nth-child(5) { --cx-flow-fill: #112d4e; --cx-flow-ink: #fff; }
.cx-pf-flow__number {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cx-pf-flow__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}
.cx-pf-flow__desc {
  margin: 0;
  padding: 20px 20px 0 calc(var(--cx-flow-notch) + 16px);
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}
.cx-pf-flow__stage:first-child .cx-pf-flow__desc {
  padding-left: 24px;
}

/* ------------------------------------------------------------
   Homepage portfolio rows (template-parts/home-portfolio.php): the
   landing page's rows with a kicker (homepage only), the standfirst and
   a pill. Media may hold a carousel or a cutout. Rows reveal on scroll,
   so they clip the off-axis start positions.
   ------------------------------------------------------------ */
.cx-pf-row--home {
  overflow: hidden;
}
.cx-pf-kicker {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #555;
}
/* A carousel's slide track becomes the frame (same ratio, fill and
   inherited flare), so its dots can sit centred below it, outside the
   rounded frame as in the original showcase. They stay in flow, so the
   row's padding and the stacked gap on phones are kept. */
.cx-pf-media.cx-pf-media--carousel {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}
.cx-pf-media--carousel .carousel {
  display: flex;
  flex-direction: column;
  border-radius: inherit;
}
.cx-pf-media--carousel .carousel-inner {
  aspect-ratio: 5 / 4;
  background: var(--ps-surface-panel);
  border-radius: inherit;
}
.cx-pf-media--carousel .carousel-item {
  height: 100%;
}
.cx-pf-media--carousel .carousel-indicators {
  position: static;
  order: 1;
  margin: 26.8px 0 0; /* the hero's photo-to-dot gap: its image's 0.8rem bottom padding + 14px */
}
.cx-pf-media--carousel .carousel-indicators [data-bs-target] {
  width: 8px !important; /* the original showcase's dot size; the theme forces 10px */
  height: 8px !important;
}
.cx-pf-media .carousel-item,
.cx-pf-media .carousel-item img {
  padding: 0; /* the theme reserves space under each slide for its dots */
}
.cx-pf-media .carousel-item img {
  min-height: 0; /* the theme's carousel images are fixed at 500/360/260px */
  max-height: none;
}
/* A single transparent product cutout, centred on the studio-sweep fill. */
.cx-pf-media--cutout {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #e4f3fc 100%);
}
.cx-pf-media--cutout img {
  width: auto;
  height: auto;
  max-width: 94%;
  max-height: 95%;
  object-fit: contain;
}
/* Closing row (Professional Services): more air than the rows above it. */
.cx-pf-row--closing {
  padding: 88px 0;
}
/* The homepage sections below the rows (Our Customers, Our Partners,
   Latest News) take the section heading (.cx-pf-title, values repeated
   here) over the theme's uppercase eyebrow, flanking lines and underline
   (main.css, styles.css); each keeps its alignment. */
#clients .section-title h2.cx-pf-title,
#partners .section-title h2.cx-pf-title,
.newsevents h2.cx-pf-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ps-navy);
}
#clients .section-title h2.cx-pf-title::before,
#clients .section-title h2.cx-pf-title::after,
#partners .section-title h2.cx-pf-title::before,
#partners .section-title h2.cx-pf-title::after {
  content: none;
}
.newsevents h2.cx-pf-title {
  margin-bottom: 28px; /* as the theme's "Latest news" h3 */
}
/* The hero slide descriptions use the standfirst as is; its measure is
   centred so it lines up when the stacked hero centres its text (tablet
   and phone). On desktop the measure is wider than the column. */
.hero .cx-pf-standfirst {
  margin-left: auto;
  margin-right: auto;
}
/* The section intro lines take the standfirst too (values repeated over
   the theme's .section-title p), centred under the heading. */
.section-title .cx-pf-standfirst {
  max-width: 60ch;
  margin: 0 auto;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  color: #1a1a2e;
}

/* ------------------------------------------------------------
   Closing contact band: the page's only pill, in sentence case.
   ------------------------------------------------------------ */
.cx-pf-closing {
  padding: 88px 0;
  background: var(--ps-surface-band);
  text-align: center;
}
.cx-pf-closing__title {
  margin: 0 0 28px;
  font-size: clamp(24px, 2.4vw, 32px); /* the section heading scale */
  font-weight: 600;
  line-height: 1.25;
  color: var(--ps-navy);
}
/* Optional sentence between the heading and the pill (a page's closing_text),
   16px under the heading and 28px above the pill. */
.cx-pf-closing__text {
  margin: -12px auto 28px;
}
.cx-pf-closing--plain {
  background: var(--ps-surface-section);
}
/* Portfolio pill: the shared navy pill (.ps-cta) at body size, its label
   shown as written. Used by the closing band and the homepage rows. */
.cx-pf-cta {
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 16px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   Tablet and phone: media stacks above content on every row.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .cx-pf-hero {
    padding: 16px 0 48px;
  }
  .cx-pf-standfirst,
  .section-title .cx-pf-standfirst {
    font-size: 18px;
  }
  .cx-pf-row {
    padding: 48px 0;
  }
  .cx-pf-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .cx-pf-split--media-right .cx-pf-media {
    order: 0;
  }
  .cx-pf-media,
  .cx-pf-media--carousel .carousel-inner {
    aspect-ratio: 4 / 3;
  }
  .cx-pf-content {
    max-width: none;
  }
  .cx-pf-closing,
  .cx-pf-row--closing {
    padding: 64px 0;
  }
  .cx-pf-header {
    padding: 16px 0 48px;
  }
  .cx-pf-section {
    padding: 56px 0;
  }
  .cx-pf-links--columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-pf-links--columns li:nth-child(2) {
    border-top: 0;
  }
  .cx-pf-service {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "title"
      "desc";
    padding: 24px 0;
  }
  .cx-pf-service__icon {
    width: 48px;
    height: 48px;
    font-size: 21px;
  }
  .cx-pf-service__title {
    margin-top: 16px;
    font-size: 18px;
  }
  .cx-pf-service__desc {
    margin-top: 8px;
  }
}
/* Compact rows on tablets: the description under the title, the icon
   beside them (and, on Contact Us, the actions still at the right). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cx-pf-services--compact .cx-pf-service {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon desc";
    row-gap: 6px;
  }
  .cx-pf-services--compact .cx-pf-service--contact {
    grid-template-columns: 48px minmax(0, 1fr) 224px;
    grid-template-areas:
      "icon title actions"
      "icon desc  actions";
  }
  .cx-pf-services--compact .cx-pf-service__title,
  .cx-pf-services--compact .cx-pf-service__desc,
  .cx-pf-services--compact .cx-contact-route__actions {
    margin-top: 0;
  }
}

@media (max-width: 1199.98px) {
  .cx-pf-flow {
    flex-direction: column;
    gap: 32px;
    max-width: 640px;
  }
  .cx-pf-flow__stage + .cx-pf-flow__stage {
    margin-left: 0;
  }
  .cx-pf-flow__marker,
  .cx-pf-flow__stage:first-child .cx-pf-flow__marker {
    min-height: 0;
    padding: 16px 24px 30px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
  }
  .cx-pf-flow__desc,
  .cx-pf-flow__stage:first-child .cx-pf-flow__desc {
    padding: 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-pf-links__item .bi,
  .cx-pf-textlink .bi {
    transition: none;
  }
  /* The arrival tint shows, holds, then disappears without fading. */
  .cx-pf-service.is-arrived::before {
    animation: cx-pf-arrive 1.5s step-end;
  }
}

/* ------------------------------------------------------------
   Contact Us (page-contact-us.php): "How Can We Help?" rows built on the
   service rows with an actions column (email, link); the offices as split
   rows, a hairline details list beside the map (the map drops below the
   details on phones); and the enquiry form with visible labels.
   ------------------------------------------------------------ */
.cx-pf-service--contact {
  grid-template-columns: 56px var(--cx-pf-service-title) minmax(0, 7fr) 240px;
  grid-template-areas: "icon title desc actions";
}
.cx-contact-route__actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.cx-contact-route__actions .cx-pf-textlink {
  margin-top: 0;
}
.cx-contact-route__email,
.cx-contact-office__details a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ps-navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cx-contact-route__email:hover,
.cx-contact-office__details a:hover {
  color: var(--ps-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cx-contact-offices {
  display: grid;
  gap: 88px;
}
.cx-contact-office__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.cx-contact-office__city {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ps-navy);
}
.cx-contact-office__company {
  margin: 0 0 24px;
}
.cx-contact-office__details {
  margin: 0 0 24px;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-contact-office__details > div {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  column-gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-contact-office__details dt {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #555;
}
.cx-contact-office__details dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}
.cx-contact-office__details .cx-pf-line {
  text-wrap: wrap;
}
.cx-contact-notice {
  max-width: 880px;
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
}
.cx-contact-notice.is-sent {
  background: rgba(13, 110, 253, 0.08);
  color: var(--ps-navy);
}
.cx-contact-notice.is-error {
  background: rgba(255, 68, 68, 0.08);
  color: #b42318;
}
.cx-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  max-width: 880px;
}
.cx-contact-form__field--wide,
.cx-contact-form__actions {
  grid-column: 1 / -1;
}
.cx-contact-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ps-navy);
}
.cx-contact-form .form-control,
.cx-contact-form .form-select {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(28, 45, 90, 0.24);
  border-radius: 8px;
  background-color: #fff;
  font-size: 16px;
  color: #1a1a2e;
}
.cx-contact-form .form-select {
  padding-right: 40px;
}
.cx-contact-form textarea.form-control {
  min-height: 160px;
  resize: vertical;
}
.cx-contact-form .form-control:focus,
.cx-contact-form .form-select:focus {
  border-color: var(--ps-navy);
  box-shadow: 0 0 0 3px rgba(28, 45, 90, 0.15);
  outline: none;
}
.cx-contact-form__actions {
  margin-top: 8px;
}
.cx-contact-form__actions .ps-cta {
  border: 0;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .cx-pf-service--contact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "title"
      "desc"
      "actions";
  }
  .cx-contact-route__actions {
    margin-top: 12px;
  }
  .cx-contact-offices {
    gap: 56px;
  }
  .cx-contact-office .cx-pf-media {
    order: 2;
  }
}
@media (max-width: 575.98px) {
  .cx-contact-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-contact-office__details > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

/* ------------------------------------------------------------
   Mosaic (Careers "Why Join CYNEXIX?"): one wall weaving the heading, five
   reason tiles and six photos. Tiles alternate navy and the section
   surface; the large photo takes the media frame's flare. Photos fill
   their cells without sizing the rows, so each slot keeps its shape (see
   inc/cynexix-careers.php). Four columns from 1200px, two from 576px, then
   one column with photos and reasons alternating.
   ------------------------------------------------------------ */
.cx-pf-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(160px, auto); /* a shorter heading row makes the large slot about 3:2 */
  grid-auto-rows: minmax(240px, auto);
  gap: 16px;
  grid-template-areas:
    "title title large large"
    "r1    r2    large large"
    "tall1 wide1 wide1 r3"
    "tall1 r4    tall2 small"
    "wide2 wide2 tall2 r5";
}
.cx-pf-mosaic__title {
  grid-area: title;
  display: flex;
  align-items: flex-end;
  padding: 0 24px 8px 0;
}
.cx-pf-mosaic__title .cx-pf-headline {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 60px);
}
.cx-pf-mosaic__large { grid-area: large; }
.cx-pf-mosaic__tall-1 { grid-area: tall1; }
.cx-pf-mosaic__tall-2 { grid-area: tall2; }
.cx-pf-mosaic__wide-1 { grid-area: wide1; }
.cx-pf-mosaic__wide-2 { grid-area: wide2; }
.cx-pf-mosaic__small { grid-area: small; }
.cx-pf-mosaic__r1 { grid-area: r1; }
.cx-pf-mosaic__r2 { grid-area: r2; }
.cx-pf-mosaic__r3 { grid-area: r3; }
.cx-pf-mosaic__r4 { grid-area: r4; }
.cx-pf-mosaic__r5 { grid-area: r5; }
.cx-pf-mosaic__photo {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface-section); /* an empty slot keeps its place */
}
.cx-pf-mosaic__large {
  border-radius: var(--ps-radius-flare) var(--ps-radius-card) var(--ps-radius-card) var(--ps-radius-card); /* the media frame's flare */
}
.cx-pf-mosaic__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cx-pf-mosaic__tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface-section);
}
.cx-pf-mosaic__num {
  margin-bottom: auto;
  padding-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ps-navy);
  opacity: 0.45;
}
.cx-pf-mosaic__name {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ps-navy);
}
.cx-pf-mosaic__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #444;
}
.cx-pf-mosaic__tile--navy {
  background: var(--ps-navy);
}
.cx-pf-mosaic__tile--navy .cx-pf-mosaic__num,
.cx-pf-mosaic__tile--navy .cx-pf-mosaic__name {
  color: #fff;
}
.cx-pf-mosaic__tile--navy .cx-pf-mosaic__num {
  opacity: 0.6;
}
.cx-pf-mosaic__tile--navy .cx-pf-mosaic__line {
  color: rgba(255, 255, 255, 0.8);
}
.cx-pf-mosaic__captions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 48px;
  margin-top: 20px;
}
.cx-pf-mosaic__caption {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #555;
}
.cx-pf-mosaic__caption strong {
  margin-right: 8px;
  font-weight: 600;
  color: var(--ps-navy);
}
@media (max-width: 1399.98px) {
  .cx-pf-mosaic {
    grid-template-rows: auto; /* narrower tiles grow their row; the large slot stays near 3:2 */
  }
  .cx-pf-mosaic__title .cx-pf-headline {
    font-size: clamp(36px, 4.4vw, 52px); /* one line in the narrower heading cell */
  }
}
@media (max-width: 1199.98px) {
  .cx-pf-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto; /* the heading row; the rest take grid-auto-rows */
    grid-auto-rows: minmax(200px, auto);
    grid-template-areas:
      "title title"
      "large large"
      "r1    r2"
      "wide1 wide1"
      "tall1 r3"
      "tall1 r4"
      "wide2 wide2"
      "tall2 small"
      "tall2 r5";
  }
  .cx-pf-mosaic__title {
    padding: 0;
  }
  .cx-pf-mosaic__large {
    min-height: 360px;
  }
}
@media (max-width: 575.98px) {
  .cx-pf-mosaic {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
    grid-template-areas:
      "title"
      "large"
      "r1"
      "wide1"
      "r2"
      "tall1"
      "r3"
      "small"
      "r4"
      "tall2"
      "r5"
      "wide2";
  }
  .cx-pf-mosaic__title {
    padding-bottom: 8px;
  }
  .cx-pf-mosaic__photo {
    aspect-ratio: 4 / 3;
  }
  .cx-pf-mosaic__large {
    min-height: 0;
  }
  .cx-pf-mosaic__large {
    aspect-ratio: 3 / 2;
  }
  .cx-pf-mosaic__tall-1,
  .cx-pf-mosaic__tall-2 {
    aspect-ratio: 4 / 5;
  }
  .cx-pf-mosaic__tile {
    padding: 24px;
  }
  .cx-pf-mosaic__num {
    padding-bottom: 16px;
  }
  .cx-pf-mosaic__name {
    font-size: 20px;
  }
}

/* ------------------------------------------------------------
   Figures strip (Careers; reusable): big navy figures over quiet labels in
   one row, divided by hairlines; stacks below 768px.
   ------------------------------------------------------------ */
.cx-pf-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.cx-pf-stats__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 32px;
  border-left: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-stats__item:first-child {
  padding-left: 0;
  border-left: 0;
}
.cx-pf-stats__value {
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ps-navy);
}
.cx-pf-stats__label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #555;
}
@media (max-width: 767.98px) {
  .cx-pf-stats {
    grid-auto-flow: row;
    border-bottom: 1px solid rgba(28, 45, 90, 0.14);
  }
  .cx-pf-stats__item,
  .cx-pf-stats__item:first-child {
    gap: 8px;
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid rgba(28, 45, 90, 0.14);
  }
}

/* ------------------------------------------------------------
   Careers (page-careers.php): led by a statement, as on Ingenico's jobs
   site (the shared statement header, .cx-pf-hero--statement); the Jobnet
   widget sits in a plain hairline frame (its contents are Jobnet's own and
   cannot be restyled).
   ------------------------------------------------------------ */
.cx-careers__jobnet {
  overflow: hidden;
  border: 1px solid rgba(28, 45, 90, 0.14);
  border-radius: 16px;
  background: #fff;
}
.cx-careers__jobnet object {
  display: block;
  width: 100%;
  height: 750px;
  border: 0;
}
.cx-careers__jobnet object .cx-pf-textlink {
  display: inline-flex;
  margin: 24px;
}
.cx-careers__credit {
  margin: 12px 0 0;
  font-size: 13px;
  color: #555;
  text-align: center;
}
.cx-careers__credit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.cx-careers__credit img {
  height: 18px;
  width: auto;
}

/* ------------------------------------------------------------
   Support (page-support.php): the two routes are the promo card pair
   (template-parts/promo-cards.php, styled by .info-card in css/styles.css);
   the response line sits centred under them as one quiet line.
   ------------------------------------------------------------ */
.cx-support-response {
  margin: 32px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #555;
  text-align: center;
}

/* ------------------------------------------------------------
   Accordion (reusable; the Support FAQ): hairline-divided questions, each a
   full-width button whose chevron turns when its answer is open; one answer
   open at a time (js/accordion.js). Answers slide open and shut, instantly
   under prefers-reduced-motion.
   ------------------------------------------------------------ */
.cx-pf-accordion {
  border-bottom: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-accordion__item {
  border-top: 1px solid rgba(28, 45, 90, 0.14);
}
.cx-pf-accordion__heading {
  margin: 0;
}
.cx-pf-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
  cursor: pointer;
}
.cx-pf-accordion__trigger:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 4px;
  border-radius: 2px;
}
.cx-pf-accordion__chevron {
  flex: none;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
}
.cx-pf-accordion__trigger[aria-expanded="true"] .cx-pf-accordion__chevron {
  transform: rotate(180deg);
}
.cx-pf-accordion__panel {
  overflow: hidden;
  transition: height 0.3s ease;
}
.cx-pf-accordion__panel p {
  margin: 0;
  padding: 0 48px 24px 0;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.65;
  color: #444;
}
.cx-pf-accordion__panel a {
  font-weight: 500;
  color: var(--ps-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .cx-pf-accordion__chevron,
  .cx-pf-accordion__panel {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .cx-pf-accordion__trigger {
    padding: 20px 0;
    font-size: 18px;
  }
  .cx-pf-accordion__panel p {
    padding-right: 0;
  }
}

/* ------------------------------------------------------------
   About Us building blocks (reusable): a section head with a link at its
   right; mission, vision and values; the brand stripe rule; and people
   cards.
   ------------------------------------------------------------ */
.cx-pf-section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  max-width: none;
}
.cx-pf-section__head--split .cx-pf-title {
  margin-bottom: 0;
}
/* Mission, vision and values: mission and vision as equal standfirsts, set
   apart by the brand stripe, beside one photo in the media frame (5:4, with
   its flare); then the values as columns whose top edges step through the
   brand stripe. Mission, Vision and Our Values share the kicker label. */
.cx-pf-mvv {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px 80px;
  align-items: center;
}
.cx-pf-mvv__text .cx-pf-title {
  margin-bottom: 40px;
}
.cx-pf-mvv__text .cx-pf-kicker {
  margin: 0 0 10px;
}
/* The Our Values label: the same kicker, spaced as a subsection. */
.cx-pf-mvv__label {
  margin: 64px 0 24px;
}
/* Mission and vision: equal siblings at the standfirst scale. */
.cx-pf-mvv__statement {
  margin: 0;
  max-width: 46ch;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ps-navy);
  text-wrap: pretty;
}
.cx-pf-mvv__photo {
  margin: 0; /* the house 5:4 media frame */
}
/* The brand stripe as a short accent rule: the four darker steps of the
   ramp the process chevrons use. */
.cx-pf-stripe {
  display: flex;
  gap: 4px;
  margin: 40px 0;
}
.cx-pf-stripe span {
  width: 32px;
  height: 4px;
  border-radius: 2px;
}
.cx-pf-stripe span:nth-child(1) { background: #a6d9f8; }
.cx-pf-stripe span:nth-child(2) { background: #3cbaec; }
.cx-pf-stripe span:nth-child(3) { background: #204875; }
.cx-pf-stripe span:nth-child(4) { background: #112d4e; }
.cx-pf-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}
.cx-pf-values__item {
  padding-top: 28px;
  border-top: 3px solid var(--cx-stripe);
}
.cx-pf-values__item:nth-child(4n + 1) { --cx-stripe: #a6d9f8; }
.cx-pf-values__item:nth-child(4n + 2) { --cx-stripe: #3cbaec; }
.cx-pf-values__item:nth-child(4n + 3) { --cx-stripe: #204875; }
.cx-pf-values__item:nth-child(4n + 4) { --cx-stripe: #112d4e; }
.cx-pf-values__item .cx-pf-service__icon {
  margin-bottom: 20px;
}
.cx-pf-values__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ps-navy);
}
.cx-pf-values__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}
.cx-pf-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 24px;
}
.cx-pf-people__card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cx-pf-people__photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface-section); /* the frame while a photo is awaited */
}
.cx-pf-people__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cx-pf-people__name {
  display: block;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ps-navy);
}
.cx-pf-people__role {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: #555;
}
.cx-pf-people__card:hover .cx-pf-people__name,
.cx-pf-people__card:focus-visible .cx-pf-people__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cx-pf-people__card:focus-visible {
  outline: 2px solid var(--ps-navy);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 1199.98px) {
  .cx-pf-people {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .cx-pf-mvv {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-pf-mvv__photo {
    aspect-ratio: 4 / 3;
  }
  .cx-pf-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cx-pf-mvv__label {
    margin-top: 48px;
  }
}
@media (max-width: 575.98px) {
  .cx-pf-values,
  .cx-pf-people {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-pf-people__photo {
    max-width: 320px;
  }
}

/* ------------------------------------------------------------
   Leadership page (page-executive-management-team.php): one anchored
   profile per person, the photo beside the name, position and bio,
   hairline-divided; the photo stacks above on phones.
   ------------------------------------------------------------ */
.cx-pf-profile {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  column-gap: 56px;
  padding: 48px 0;
  border-top: 1px solid rgba(28, 45, 90, 0.14);
  scroll-margin-top: 93px; /* lands under the fixed header from an About Us card */
}
.cx-pf-profile:first-child {
  padding-top: 0;
  border-top: 0;
}
.cx-pf-profile__photo {
  align-self: start;
}
.cx-pf-profile__name {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ps-navy);
}
.cx-pf-profile__role {
  margin: 0 0 20px;
}
.cx-pf-profile__text p:not(.cx-pf-kicker) {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}
@media (max-width: 1199.98px) {
  .cx-pf-profile {
    scroll-margin-top: 73px;
  }
}
@media (max-width: 767.98px) {
  .cx-pf-profile {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    padding: 40px 0;
  }
  .cx-pf-profile__photo {
    max-width: 280px;
  }
  .cx-pf-profile__name {
    font-size: 24px;
  }
}