/* /assets/styles/buttons.css */
/**
 * Site-wide button style: the solid brand-green button first used on the
 * homepage banner (see banner-dark.css), applied to every button on every page.
 *
 * Covers the theme's .btn links, core Button / Search / File blocks, and
 * Gravity Forms buttons. Menu toggles, slider arrows and other bare
 * <button> elements are left alone.
 *
 * Why the heavy selectors: the Customizer's Additional CSS prints after
 * theme styles and styles core buttons with !important chains up to seven
 * classes deep (e.g. ".has-background .wp-block-button:not(.is-style-outline)
 * .wp-block-button__link:not(:hover):not(:active):not(.has-background)").
 * ":not(#xpt-btn)" adds ID-level specificity so these rules win without
 * matching those chains one by one. Editor-chosen button colours are
 * overridden on purpose, so all buttons match.
 *
 * Plain CSS outside the Sass build; loaded on the front end and in the
 * block editor by AssetsServiceProvider.
 */

:is(
  .btn,
  .wp-block-button__link,
  .wp-element-button,
  .wp-block-file .wp-block-file__button,
  .gform_wrapper .gform_button,
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button
):not(#xpt-btn) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 26px 15px !important;
  border: 2px solid #00ce7c !important;
  border-radius: 2px !important;
  background: #00ce7c !important;
  color: #16201d !important;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: normal !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

:is(
  .btn,
  .wp-block-button__link,
  .wp-element-button,
  .wp-block-file .wp-block-file__button,
  .gform_wrapper .gform_button,
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button
):not(#xpt-btn):is(:hover, :active) {
  border-color: #33e39a !important;
  background: #33e39a !important;
  color: #16201d !important;
}

:is(
  .btn,
  .wp-block-button__link,
  .wp-element-button,
  .wp-block-file .wp-block-file__button,
  .gform_wrapper .gform_button,
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button
):not(#xpt-btn):focus-visible {
  outline: 3px solid #00ce7c !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .wp-block-button__link, .wp-element-button):not(#xpt-btn) {
    transition: none !important;
  }
}

/* /assets/styles/banner-dark.css */
/**
 * Banner block, "Dark" style (ACF field banner_style = dark).
 *
 * Copy sits on a charcoal-green field on the left, the photo stays vivid on
 * the right, and a thin green frame runs round the hero, after the XPT
 * Specialty site's hero. Markup: views/blocks/banner.twig.
 *
 * Plain CSS outside the Sass build (see homepage-fixes.css for why), loaded
 * on the front end and in the block editor by AssetsServiceProvider.
 * Selectors start with .banner-xpt.banner-xpt--dark so they outrank the
 * Customizer's ".home .hero-content h1, .home .hero-content p" !important
 * colour rule, which prints after theme styles.
 */

.banner-xpt--dark {
  --banner-ink: #16201d;   /* charcoal green, a shade under XPT Specialty's #1f2926 */
  --banner-green: #00ce7c; /* --global--color-green */
  --banner-mist: #cfe3da;  /* body text on the dark field */
  background-color: var(--banner-ink);
  overflow: hidden;
}

/* Dark field. ::before paints before the arrows SVG inside the holder, so
   the arrows stay on top of it. */
.banner-xpt--dark #banner-hero-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(22, 32, 29, 0.95) 0%,
      rgba(22, 32, 29, 0.9) 30%,
      rgba(22, 32, 29, 0.55) 48%,
      rgba(22, 32, 29, 0) 66%),
    linear-gradient(180deg, rgba(22, 32, 29, 0.55) 0%, rgba(22, 32, 29, 0) 22%);
}

/* Thin green frame, clear of the 94px header. */
.banner-xpt--dark::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 102px 24px 24px 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.banner-xpt.banner-xpt--dark .hero-container > .hero-content {
  flex-basis: 62%;
  max-width: 860px;
  /* Keep the copy at least 32px inside the frame (frame sits 24px from the
     viewport edge) when the 1460px container reaches the viewport edge. */
  padding-left: max(var(--global--container-horizontal-padding, 20px), calc(56px - (100vw - 1460px) / 2));
}

.banner-xpt.banner-xpt--dark .hero-content h1 {
  margin: 0 !important;
  color: #fff !important;
  letter-spacing: 0;
  font-weight: 400;
}

.banner-xpt--dark .banner-xpt__lead {
  display: block;
  margin-bottom: 0.35em;
  font-family: "TradeGothicLT-Light", "TradeGothicLT", sans-serif;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  color: var(--banner-mist);
}

.banner-xpt--dark .banner-xpt__title {
  display: block;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* No lead-in: the heading field alone gets the condensed title face. */
.banner-xpt.banner-xpt--dark .hero-content h1:not(:has(.banner-xpt__title)) {
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.96;
}

.banner-xpt.banner-xpt--dark .hero-content hr {
  width: 72px;
  height: 4px;
  margin: clamp(24px, 3vw, 36px) 0 !important;
  border: 0;
  background: var(--banner-green);
}

.banner-xpt.banner-xpt--dark .hero-content p {
  max-width: 34em;
  margin: 0;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--banner-mist) !important;
}

/* Buttons: first one solid green, a second one outlined. !important beats
   the theme's .btn:not(:hover):not(:active)... chains and the
   .btn.primary:hover !important rule. */
.banner-xpt.banner-xpt--dark .hero-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: 17px 26px 15px;
  border: 2px solid var(--banner-green) !important;
  border-radius: 2px;
  background: var(--banner-green) !important;
  color: var(--banner-ink) !important;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.banner-xpt.banner-xpt--dark .hero-content .btn:hover {
  border-color: #33e39a !important;
  background: #33e39a !important;
}

.banner-xpt.banner-xpt--dark .hero-content .btn + .btn {
  background: transparent !important;
  color: #fff !important;
}

.banner-xpt.banner-xpt--dark .hero-content .btn + .btn:hover {
  background: rgba(0, 206, 124, 0.16) !important;
}

.banner-xpt.banner-xpt--dark .hero-content .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.banner-xpt--dark .banner-xpt__icon {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.2s ease;
}

.banner-xpt--dark .btn:hover .banner-xpt__icon {
  transform: translate(2px, -2px);
}

@media only screen and (max-width: 767px) {
  .banner-xpt--dark #banner-hero-holder::before {
    background: linear-gradient(180deg,
      rgba(22, 32, 29, 0.8) 0%,
      rgba(22, 32, 29, 0.88) 45%,
      rgba(22, 32, 29, 0.96) 100%);
  }

  .banner-xpt--dark::after {
    display: none;
  }

  /* On phones the arrows run behind the copy; quieten them so text reads. */
  .banner-xpt--dark .hero-arrows {
    opacity: 0.4;
  }

  .banner-xpt.banner-xpt--dark .hero-container > .hero-content {
    flex-basis: 100%;
    padding-left: var(--global--container-horizontal-padding, 20px);
  }

  .banner-xpt.banner-xpt--dark .hero-content .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-xpt.banner-xpt--dark .hero-content .btn,
  .banner-xpt--dark .banner-xpt__icon {
    transition: none;
  }
}

/* /assets/styles/portfolio-companies.css */
/**
 * Portfolio Companies block (views/blocks/portfolio-companies.twig), and the
 * two-column homepage intro it sits in.
 *
 * Plain CSS outside the Sass build (see homepage-fixes.css for why), loaded
 * on the front end and in the block editor by AssetsServiceProvider.
 */

.portfolio-companies {
  --pc-ink: #1e2b28;
  --pc-muted: #53625e;
  --pc-green-text: #00744b; /* brand green darkened for text on white (AA) */
  --pc-line: #d5deda;
  --pc-tile: #0e2622;       /* dark tile behind the logos */
  color: var(--pc-ink);
}

.portfolio-companies .portfolio-companies__heading {
  margin: 0 0 8px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #16201d;
}

.portfolio-companies .portfolio-companies__intro {
  max-width: 40ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--pc-muted);
}

.portfolio-companies .portfolio-companies__more {
  display: inline-block;
  margin-top: 10px;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  color: var(--pc-green-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.portfolio-companies .portfolio-companies__more:hover {
  color: var(--pc-ink);
}

.portfolio-companies__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--pc-line);
}

.portfolio-companies__list > li {
  margin: 0;
  border-bottom: 1px solid var(--pc-line);
}

.portfolio-companies__item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  color: inherit;
  text-decoration: none;
  transition: padding-left 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

a.portfolio-companies__item:hover {
  padding-left: 8px;
}

a.portfolio-companies__item:hover strong {
  color: var(--pc-green-text);
}

a.portfolio-companies__item:focus-visible,
.portfolio-companies .portfolio-companies__more:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 3px;
}

.portfolio-companies__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 72px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--pc-tile);
}

.portfolio-companies__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.portfolio-companies__text strong {
  display: block;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 19px;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.portfolio-companies__text span {
  display: block;
  margin-top: 4px;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif; /* links default to the bold face */
  font-weight: normal;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pc-muted);
}

@media only screen and (max-width: 599px) {
  .portfolio-companies__item {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }

  .portfolio-companies__logo {
    width: 112px;
    height: 56px;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-companies__item,
  .portfolio-companies__text strong {
    transition: none;
  }
}

/* Homepage intro: copy on the left, Portfolio Companies on the right.
   The columns block carries the class "platform-columns" (set in the
   editor under Advanced > Additional CSS class). */
.wp-block-columns.platform-columns {
  gap: clamp(40px, 6vw, 96px) !important;
  align-items: flex-start;
}

.platform-columns h2 {
  margin-top: 0 !important;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.02;
}

.platform-columns > .wp-block-column > p {
  max-width: 64ch;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
}

/* /assets/styles/carousel.css */
/**
 * Shared carousel parts: scrolling track, progress line and arrows.
 * Used by the Leadership Carousel and Logo Carousel blocks; behaviour in
 * assets/scripts/carousel.js.
 *
 * Set --carousel-per-view and --carousel-gap on the block root to size the
 * slides.
 *
 * Plain CSS outside the Sass build; loaded on the front end and in the
 * block editor by AssetsServiceProvider.
 */

[data-xpt-carousel] {
  --carousel-ink: #16201d;
  --carousel-green: #00ce7c;
  --carousel-line: #d5deda;
  --carousel-gap: 20px;
  --carousel-per-view: 5;
}

.xpt-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  margin: 0;
  padding: 4px 0 8px; /* room for the focus ring */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.xpt-carousel__track::-webkit-scrollbar { display: none; }

.xpt-carousel__track:focus-visible {
  outline: 3px solid var(--carousel-green);
  outline-offset: 4px;
}

.xpt-carousel__track > li {
  flex: 0 0 calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
  margin: 0;
  scroll-snap-align: start;
}

.xpt-carousel__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

[data-xpt-carousel].is-static .xpt-carousel__controls { display: none; }

.xpt-carousel__progress {
  position: relative;
  flex: 1;
  height: 2px;
  margin-right: 12px;
  overflow: hidden;
  background: var(--carousel-line);
}

.xpt-carousel__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--carousel-ink);
  transition: transform 0.15s linear;
}

/* :not(#xpt-carousel) outranks the theme's
   button:not(.popmake-close):not(:hover):not(:active)... rules. */
.xpt-carousel__arrow:not(#xpt-carousel) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--carousel-ink);
  border-radius: 2px;
  background: transparent;
  color: var(--carousel-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.xpt-carousel__arrow:not(#xpt-carousel) svg { width: 22px; height: 22px; }

.xpt-carousel__arrow:not(#xpt-carousel):hover:not(:disabled) {
  background: var(--carousel-ink);
  color: #fff;
}

.xpt-carousel__arrow:not(#xpt-carousel):focus-visible {
  outline: 3px solid var(--carousel-green);
  outline-offset: 3px;
}

.xpt-carousel__arrow:not(#xpt-carousel):disabled {
  opacity: 0.3;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .xpt-carousel__track { scroll-behavior: auto; }
  .xpt-carousel__progress-bar,
  .xpt-carousel__arrow:not(#xpt-carousel) { transition: none; }
}

/* /assets/styles/leadership-carousel.css */
/**
 * Leadership Carousel block (views/blocks/leadership-carousel.twig).
 *
 * Plain CSS outside the Sass build; loaded on the front end and in the
 * block editor by AssetsServiceProvider.
 */

.leader-carousel {
  --lc-ink: #16201d;
  --lc-text: #1e2b28;
  --lc-muted: #53625e;
  --lc-green: #00ce7c;
  --lc-green-text: #00744b; /* brand green darkened for text (AA) */
  --lc-line: #d5deda;
  --lc-paper: #f1f5f3;      /* light green-grey panel, set off from the white intro */
  --lc-tile: #0e2622;
  margin: 0 !important;
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--lc-paper);
  color: var(--lc-text);
}

.leader-carousel__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--global--container-horizontal-padding, 20px);
}

/* ---- Head: copy on the left, button on the right ----------------------- */

.leader-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.leader-carousel__copy { max-width: 760px; }

.leader-carousel .leader-carousel__title {
  margin: 0 0 16px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--lc-ink);
}

.leader-carousel .leader-carousel__intro {
  max-width: 64ch;
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
}

.leader-carousel .leader-carousel__cta { margin-top: 0 !important; }

/* Slides per view; track, arrows and progress line: carousel.css. */
@media (max-width: 1199px) { .leader-carousel { --carousel-per-view: 4; } }
@media (max-width: 899px)  { .leader-carousel { --carousel-per-view: 3; } }
@media (max-width: 599px)  { .leader-carousel { --carousel-per-view: 1.6; --carousel-gap: 14px; } }

/* ---- Card -------------------------------------------------------------- */

.leader-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.leader-card__photo {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--lc-tile);
}

.leader-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.leader-card__name {
  display: block;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 19px;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.leader-card__role {
  display: block;
  margin-top: 4px;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lc-muted);
}

a.leader-card:hover .leader-card__photo img { transform: scale(1.03); }
a.leader-card:hover .leader-card__name { color: var(--lc-green-text); }

a.leader-card:focus-visible {
  outline: 3px solid var(--lc-green);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .leader-card__photo img { transition: none; }
}

/* /assets/styles/logo-carousel.css */
/**
 * Logo Carousel block (views/blocks/logo-carousel.twig). Track, arrows and
 * progress line: carousel.css.
 *
 * Plain CSS outside the Sass build; loaded on the front end and in the
 * block editor by AssetsServiceProvider.
 */

.logo-carousel {
  --carousel-per-view: 5;
  --carousel-gap: 16px;
}

@media (max-width: 1023px) { .logo-carousel { --carousel-per-view: 3; } }
@media (max-width: 599px)  { .logo-carousel { --carousel-per-view: 2; --carousel-gap: 12px; } }

.logo-carousel .logo-carousel__title {
  margin: 0 0 24px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.05;
  color: #16201d;
}

.logo-carousel__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 16px 20px;
  border: 1px solid #d5deda;
  border-radius: 8px;
  background: #fff;
  color: #1e2b28;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.logo-carousel__tile img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-carousel__tile span {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  text-align: center;
}

a.logo-carousel__tile:hover { border-color: #16201d; }

a.logo-carousel__tile:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .logo-carousel__tile { transition: none; }
}

/* /assets/styles/faq.css */
/**
 * FAQ accordion (Yoast FAQ block, enhanced by assets/scripts/faq.js).
 *
 * Before the script runs, and without it, every answer is shown as a plain
 * list. :not(#xpt-faq) outranks the Customizer CSS and the theme's button
 * rules.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.schema-faq:not(#xpt-faq) {
  --faq-ink: #16201d;
  --faq-text: #3a4744;
  --faq-line: #cfd6d2;
  --faq-green: #00ce7c;
  --faq-green-text: #00744b;
  --faq-ease: cubic-bezier(0.32, 0.72, 0, 1);
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--faq-ink);
}

.schema-faq:not(#xpt-faq) .schema-faq-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--faq-line);
}

/* ---- Question ---------------------------------------------------------- */

.schema-faq:not(#xpt-faq) .xpt-faq__question {
  max-width: none;
  margin: 0;
  font-size: inherit;
}

.schema-faq:not(#xpt-faq) .xpt-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--faq-ink);
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.schema-faq:not(#xpt-faq) .xpt-faq__toggle:hover { color: var(--faq-green-text); }

.schema-faq:not(#xpt-faq) .xpt-faq__toggle:focus-visible {
  outline: 3px solid var(--faq-green);
  outline-offset: 2px;
}

/* Plus that turns into a minus. */
.xpt-faq__icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--faq-ink);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.xpt-faq__icon::before,
.xpt-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--faq-ink);
  transition: transform 0.35s var(--faq-ease);
}

.xpt-faq__icon::after { transform: rotate(90deg); }

.xpt-faq__item.is-open .xpt-faq__icon {
  border-color: var(--faq-green);
  background: var(--faq-green);
}

.xpt-faq__item.is-open .xpt-faq__icon::after { transform: rotate(0deg); }

/* ---- Answer ------------------------------------------------------------ */

.xpt-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--faq-ease);
}

.xpt-faq__item.is-open .xpt-faq__panel { grid-template-rows: 1fr; }

.xpt-faq__answer {
  min-height: 0;
  overflow: hidden;
}

.xpt-faq__item.is-open .xpt-faq__answer { padding-bottom: 32px; }

.schema-faq:not(#xpt-faq) .xpt-faq__answer p,
.schema-faq:not(#xpt-faq) .schema-faq-answer {
  max-width: 72ch;
  margin: 0 0 12px;
  padding: 0;
  color: var(--faq-text);
  font-size: 18px;
  line-height: 1.65;
}

.schema-faq:not(#xpt-faq) .xpt-faq__answer > :last-child { margin-bottom: 0; }

/* The office map inside an answer ("Where does XPT operate?"). */
.schema-faq:not(#xpt-faq) .xpt-faq__answer .office-map {
  margin: 24px 0 0;
}

@media (max-width: 599px) {
  .schema-faq:not(#xpt-faq) .xpt-faq__toggle { padding: 20px 0; }
  .xpt-faq__icon { width: 34px; height: 34px; }
  .schema-faq:not(#xpt-faq) .xpt-faq__answer p,
  .schema-faq:not(#xpt-faq) .schema-faq-answer { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .xpt-faq__panel,
  .xpt-faq__icon,
  .xpt-faq__icon::before,
  .xpt-faq__icon::after { transition: none; }
}

/* /assets/styles/portfolio-cta.css */
/**
 * "Explore XPT's Portfolio" section: a core Cover block with the class
 * explore-portfolio (homepage). Echoes the dark hero banner: thin green
 * frame, short green rule above the heading, condensed title face.
 *
 * The background image, text and button stay editable in the Cover block.
 * :not(#xpt-cta) outranks the Customizer CSS and the block's inline styles.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.wp-block-cover.explore-portfolio:not(#xpt-cta) {
  --cta-deep: 4, 38, 44;
  --cta-green: #00ce7c;
  min-height: clamp(520px, 42vw, 680px);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(72px, 8vw, 120px) var(--global--container-horizontal-padding, 20px);
  overflow: hidden;
  isolation: isolate;
}

/* The logo pattern sits top right in the image; keep it in view. */
.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__image-background {
  object-position: 70% 30%;
}

/* Deep teal from the left so white text stays readable on the light image. */
.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__background {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(90deg,
      rgba(var(--cta-deep), 0.86) 0%,
      rgba(var(--cta-deep), 0.62) 38%,
      rgba(var(--cta-deep), 0.12) 72%,
      rgba(var(--cta-deep), 0) 100%),
    linear-gradient(0deg, rgba(var(--cta-deep), 0.35) 0%, rgba(var(--cta-deep), 0) 45%) !important;
}

/* Thin inset frame, as on the hero. */
.wp-block-cover.explore-portfolio:not(#xpt-cta)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__inner-container {
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* Keep the copy clear of the frame on wide screens, as on the hero. */
  padding-left: max(0px, min(40px, calc(56px - (100vw - 1440px) / 2)));
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__inner-container > * {
  max-width: 640px;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) h2 {
  margin: 0 0 24px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(40px, 4.4vw, 68px) !important;
  line-height: 1;
  letter-spacing: 0;
}

/* Short green rule above the heading. */
.wp-block-cover.explore-portfolio:not(#xpt-cta) h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  background: var(--cta-green);
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) p {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92) !important;
}

.wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-buttons { margin-top: 32px; }

@media (max-width: 781px) {
  .wp-block-cover.explore-portfolio:not(#xpt-cta) {
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__background {
    background: rgba(var(--cta-deep), 0.72) !important;
  }
  .wp-block-cover.explore-portfolio:not(#xpt-cta)::after { inset: 12px; }
  .wp-block-cover.explore-portfolio:not(#xpt-cta) .wp-block-cover__inner-container { padding-left: 12px; }
}

/* /assets/styles/news-listing.css */
/**
 * News listing (views/blocks/homepage-industry-insights-block.twig).
 *
 * Cards (.news-card) are also used on the XPT News page (featured-post.twig,
 * article-card.twig).
 *
 * Section background stays as set in the editor (beige group). The whole
 * card is clickable through the title link's ::after.
 * :not(#xpt-news) outranks the theme and Customizer rules for the old
 * .home-insights-block / .featured-post markup.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.news-listing:not(#xpt-news) {
  --news-ink: #16201d;
  --news-text: #3a4744;
  --news-muted: #5f6b67;
  --news-line: #d9dcd6;
  --news-green: #00ce7c;
  --news-green-text: #00744b;
  padding: clamp(40px, 5vw, 72px) 0; /* the beige group around it adds 24px */
}

.news-listing:not(#xpt-news) .xpt-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--global--container-horizontal-padding, 20px);
}

/* ---- Head: heading left, button right ---------------------------------- */

.news-listing:not(#xpt-news) .news-listing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.news-listing:not(#xpt-news) .news-listing__title {
  margin: 0;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: 0;
  text-align: left;
  color: var(--news-ink);
}

/* Short green rule above the heading, as on the hero and portfolio section. */
.news-listing:not(#xpt-news) .news-listing__title::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: 20px;
  background: var(--news-green);
}

.news-listing:not(#xpt-news) .news-listing__intro {
  max-width: 64ch;
  margin: 16px 0 0;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  text-align: left;
}

.news-listing:not(#xpt-news) .news-listing__cta { margin: 0 !important; }

/* ---- Cards ------------------------------------------------------------- */

.news-listing:not(#xpt-news) .news-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-listing:not(#xpt-news) .news-listing__grid > li { margin: 0; }

.news-card:not(#xpt-news) {
  --news-ink: #16201d;
  --news-text: #3a4744;
  --news-muted: #5f6b67;
  --news-line: #d9dcd6;
  --news-green: #00ce7c;
  --news-green-text: #00744b;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 32px 28px;
  border-top: 4px solid var(--news-ink);
  background: #fff;
  transition: border-color 0.25s ease;
}

.news-card:not(#xpt-news):hover,
.news-card:not(#xpt-news):focus-within { border-top-color: var(--news-green); }

/* Generated title card (NewsCard) across the top of the card, edge to edge. */
.news-card:not(#xpt-news) .news-card__image {
  display: block;
  width: calc(100% + 64px);
  max-width: none;
  height: auto;
  aspect-ratio: 1200 / 630;
  margin: -32px -32px 24px;
  object-fit: cover;
}

.news-card:not(#xpt-news) .news-card__date {
  margin-bottom: 14px;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--news-muted);
}

.news-card:not(#xpt-news) .news-card__title {
  margin: 0 0 16px;
  max-width: none;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.18;
  letter-spacing: 0;
}

.news-card:not(#xpt-news) .news-card__title a {
  color: var(--news-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Stretch the title link over the whole card. */
.news-card:not(#xpt-news) .news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-card:not(#xpt-news):hover .news-card__title a { color: var(--news-green-text); }

.news-card:not(#xpt-news) .news-card__title a:focus-visible { outline: none; }
.news-card:not(#xpt-news) .news-card__title a:focus-visible::after {
  outline: 3px solid var(--news-green);
  outline-offset: 3px;
}

.news-card:not(#xpt-news) .news-card__excerpt {
  flex: 1;
  margin: 0 0 24px;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--news-text);
}

.news-card:not(#xpt-news) .news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--news-line);
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: var(--news-green-text);
}

.news-card:not(#xpt-news) .news-card__more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.news-card:not(#xpt-news):hover .news-card__more svg { transform: translateX(4px); }

@media (max-width: 1023px) {
  .news-listing:not(#xpt-news) .news-listing__grid { grid-template-columns: 1fr; gap: 16px; }
  .news-card:not(#xpt-news) { padding: 24px 22px 22px; }
  .news-card:not(#xpt-news) .news-card__image { width: calc(100% + 44px); margin: -24px -22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-card:not(#xpt-news),
  .news-card:not(#xpt-news) .news-card__more svg,
  .news-card:not(#xpt-news) .news-card__title a { transition: none; }
}

/* Company filter on the XPT News page (posts.twig, App\Helpers\NewsCompany). */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

.news-filter .news-filter__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px 8px;
  border: 2px solid #16201d;
  border-radius: 2px;
  background: transparent;
  color: #16201d;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.news-filter .news-filter__item:hover {
  border-color: #00ce7c;
  background: #00ce7c;
  color: #16201d;
}

.news-filter .news-filter__item[aria-current="page"] {
  border-color: #16201d;
  background: #16201d;
  color: #fff;
}

.news-filter .news-filter__item:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .news-filter .news-filter__item { transition: none; }
}

/* Under single news posts: the beige used by the homepage section, so the
   white cards stand out from the white article page. */
.news-listing.news-listing--single:not(#xpt-news) {
  background: var(--wp--preset--color--light-beige, #efeae6);
}

/* "About the company" boxes under news posts (single.twig). */
.post-companies {
  max-width: 1000px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  padding: 0 var(--global--container-horizontal-padding, 20px);
}

.post-companies__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.post-companies__item {
  padding: 24px 26px;
  border-left: 4px solid #00ce7c;
  background: #f4f6f5;
}

.post-companies .post-companies__title {
  max-width: none;
  margin: 0 0 8px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: 22px;
  line-height: 1.15;
  color: #16201d;
}

.post-companies__item p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: #3a4744; }

.post-companies .post-companies__link {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: #00744b;
}

/* /assets/styles/page-hero.css */
/**
 * Page banners on inner pages, styled after the homepage banner (no arrows).
 *
 * - .page-hero: the first Cover block on a page, tagged by App\Helpers\PageHero.
 * - .resources-header: the XPT News (posts page) header, views/templates/posts.twig.
 *
 * Dark charcoal-green field from the left, thin green frame clear of the
 * header, short green rule above the title, condensed title face.
 * :not(#xpt-hero) outranks the Customizer CSS and the blocks' inline styles.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

:is(.page-hero, .resources-header):not(#xpt-hero) {
  --hero-ink: 22, 32, 29;
  --hero-green: #00ce7c;
  --hero-mist: #d6e6df;
  position: relative;
  isolation: isolate;
}

/* ---- Dark field -------------------------------------------------------- */

.page-hero:not(#xpt-hero) .wp-block-cover__background {
  z-index: 1;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(var(--hero-ink), 0.92) 0%,
      rgba(var(--hero-ink), 0.8) 32%,
      rgba(var(--hero-ink), 0.4) 55%,
      rgba(var(--hero-ink), 0.08) 75%),
    linear-gradient(180deg, rgba(var(--hero-ink), 0.6) 0%, rgba(var(--hero-ink), 0) 28%) !important;
}

/* Centred banners (e.g. the brand pages) get an even wash instead. */
.page-hero:not(#xpt-hero):has(.wp-block-cover__inner-container > .has-text-align-center) .wp-block-cover__background {
  background:
    linear-gradient(180deg, rgba(var(--hero-ink), 0.7) 0%, rgba(var(--hero-ink), 0.45) 35%, rgba(var(--hero-ink), 0.6) 100%) !important;
}

.resources-header:not(#xpt-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--hero-ink), 0.9) 0%,
      rgba(var(--hero-ink), 0.7) 35%,
      rgba(var(--hero-ink), 0.2) 70%,
      rgba(var(--hero-ink), 0) 100%),
    linear-gradient(180deg, rgba(var(--hero-ink), 0.55) 0%, rgba(var(--hero-ink), 0) 30%);
  pointer-events: none;
}

/* ---- Thin green frame, clear of the 94px header ------------------------ */
/* Not on the XPT News header: its cards overlap the bottom edge. */

.page-hero:not(#xpt-hero)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 102px 24px 24px 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.page-hero:not(#xpt-hero) .wp-block-cover__inner-container { z-index: 3; }

/* ---- Title ------------------------------------------------------------- */

.page-hero:not(#xpt-hero) .wp-block-cover__inner-container h1,
.page-hero:not(#xpt-hero):not(:has(h1)) .wp-block-cover__inner-container h2:first-of-type,
.resources-header:not(#xpt-hero) .resources-heading {
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif !important;
  font-weight: normal !important;
  font-size: clamp(36px, 4.6vw, 72px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  color: #fff !important;
}

/* Short green rule above the banner title (not on leader profiles, where the
   title sits beside a portrait with contact details under it). */
.page-hero:not(#xpt-hero):not(.leader-profile) .wp-block-cover__inner-container h1::before,
.page-hero:not(#xpt-hero):not(.leader-profile):not(:has(h1)) .wp-block-cover__inner-container h2:first-of-type::before,
.resources-header:not(#xpt-hero) .resources-heading::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  background: var(--hero-green);
}

.page-hero:not(#xpt-hero) .wp-block-cover__inner-container .has-text-align-center:is(h1, h2)::before {
  margin-left: auto;
  margin-right: auto;
}

.page-hero:not(#xpt-hero) .wp-block-cover__inner-container > p:not(.has-text-align-center),
.resources-header:not(#xpt-hero) .resources-description p {
  max-width: 60ch;
  /* Left-aligned with the title: the constrained layout would otherwise
     centre this narrower block. Margin % is of the container width, so this
     matches the 1440px content box on wide screens. */
  margin-left: max(0px, calc((100% - 1440px) / 2)) !important;
  margin-right: auto !important;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: normal !important;
  font-size: clamp(17px, 1.3vw, 20px) !important;
  line-height: 1.6 !important;
  color: var(--hero-mist) !important;
}

/* ---- Phones ------------------------------------------------------------ */

@media (max-width: 781px) {
  /* Clear the fixed mobile header. */
  .page-hero:not(#xpt-hero) { padding-top: 112px !important; }
  .page-hero:not(#xpt-hero) .wp-block-cover__background {
    background: rgba(var(--hero-ink), 0.72) !important;
  }
  .resources-header:not(#xpt-hero)::before { background: rgba(var(--hero-ink), 0.72); }
  .page-hero:not(#xpt-hero)::after { display: none; }
}

/* ---- Single news post banner (views/templates/single.twig) -------------- */
/* Same treatment as the page banners: dark field from the left, thin green
   frame, green rule above the title. Background image per post:
   App\Helpers\PostBanner. */

.post-hero:not(#xpt-hero) {
  --hero-ink: 22, 32, 29;
  --hero-green: #00ce7c;
  --hero-mist: #d6e6df;
  position: relative;
  isolation: isolate;
  min-height: clamp(380px, 32vw, 480px);
  display: flex;
  align-items: center;
  /* On posts the header is a solid bar above the banner, not overlaid. */
  padding: 72px 0;
}

.post-hero:not(#xpt-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--hero-ink), 0.92) 0%,
      rgba(var(--hero-ink), 0.8) 38%,
      rgba(var(--hero-ink), 0.35) 70%,
      rgba(var(--hero-ink), 0.15) 100%),
    linear-gradient(180deg, rgba(var(--hero-ink), 0.6) 0%, rgba(var(--hero-ink), 0) 30%);
  pointer-events: none;
}

.post-hero:not(#xpt-hero)::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.post-hero:not(#xpt-hero) .xpt-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: max(var(--global--container-horizontal-padding, 20px), min(56px, calc(56px - (100vw - 1440px) / 2)));
  padding-right: var(--global--container-horizontal-padding, 20px);
}

.post-hero:not(#xpt-hero) .single-post-heading { max-width: 980px; }

.post-hero:not(#xpt-hero) .single-post-heading p {
  margin: 0 0 18px;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: normal !important;
  font-size: 16px !important;
  color: var(--hero-mist) !important;
}

.post-hero:not(#xpt-hero) .single-post-heading p::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: 24px;
  background: var(--hero-green);
}

.post-hero:not(#xpt-hero) h1 {
  max-width: none;
  margin: 0;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif !important;
  font-weight: normal !important;
  font-size: clamp(34px, 3.8vw, 60px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-wrap: balance;
}

.post-hero:not(#xpt-hero) .yoast-breadcrumbs {
  margin-top: 28px;
  font-size: 15px;
  color: var(--hero-mist);
}

.post-hero:not(#xpt-hero) .yoast-breadcrumbs a {
  color: #fff !important;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.post-hero:not(#xpt-hero) .yoast-breadcrumbs a:hover { color: var(--hero-green) !important; }

@media (max-width: 781px) {
  .post-hero:not(#xpt-hero) { min-height: 0; padding: 48px 0; }
  .post-hero:not(#xpt-hero)::before { background: rgba(var(--hero-ink), 0.75); }
  .post-hero:not(#xpt-hero)::after { display: none; }
  .post-hero:not(#xpt-hero) .xpt-container { padding-left: var(--global--container-horizontal-padding, 20px); }
}

/* Visually hidden, still read by screen readers and search engines (used for
   the H1 on the Portfolio and brand pages, whose banners show logos). */
.screen-reader-text:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* /assets/styles/about.css */
/**
 * About Us sections (page 875): Our Commitment, Our Growth Journey,
 * Nationwide Presence. Core blocks with the classes about-section,
 * about-split, about-lead, about-cards, about-card and about-cta, so editors
 * keep managing the text and images in the block editor.
 *
 * :not(#xpt-about) outranks the theme's .xpt-container / heading rules and
 * the Customizer CSS.
 *
 * Also used on Why XPT Group (page 941).
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.about-section:not(#xpt-about) {
  --about-ink: #16201d;
  --about-text: #3a4744;
  --about-green: #00ce7c;
  --about-line: #d9dcd6;
  margin: 0 !important;
  padding: clamp(64px, 8vw, 112px) var(--global--container-horizontal-padding, 20px);
}

.about-section:not(#xpt-about) > * {
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Headings: condensed face with the short green rule ---------------- */

.about-section:not(#xpt-about) h2 {
  max-width: 1440px;
  margin-top: 0;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: 0;
  text-align: left;
  color: var(--about-ink);
}

.about-section:not(#xpt-about) h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: 20px;
  background: var(--about-green);
}

/* ---- Heading left, copy right ------------------------------------------ */

.about-section:not(#xpt-about) .about-split {
  gap: 24px clamp(32px, 6vw, 96px);
  margin-top: 0;
  margin-bottom: 0;
}

.about-section:not(#xpt-about) .about-split h2 { margin-bottom: 0; }

.about-section:not(#xpt-about) p {
  max-width: 68ch;
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--about-text);
}

.about-section:not(#xpt-about) .about-lead {
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--about-ink);
}

/* Optional intro under a section heading, and closing text after the cards:
   full container width, aligned with the section's left edge. */
.about-section:not(#xpt-about) > p { max-width: 1440px; }
.about-section:not(#xpt-about) h2 + .about-intro { margin-top: -12px; margin-bottom: clamp(28px, 3.5vw, 40px); }
.about-section:not(#xpt-about) .about-outro { margin-top: clamp(32px, 4vw, 48px); margin-bottom: 0; }

/* ---- Growth journey cards ---------------------------------------------- */

.about-section:not(#xpt-about) .about-cards {
  flex-wrap: wrap !important;
  gap: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

/* 2 x 2 grid; icon on the left, title and text beside it. */
.about-section:not(#xpt-about) .about-cards > .about-card {
  flex: 0 0 calc(50% - 10px) !important;
}

.about-section:not(#xpt-about) .about-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  /* Spacer rows above and below keep the title and text centred on the icon. */
  grid-template-rows: 1fr auto auto 1fr;
  align-content: center;
  column-gap: 32px;
  padding: 36px 36px 34px;
  border-top: 4px solid var(--about-ink);
  background: #fff;
  transition: border-color 0.25s ease;
}

.about-section:not(#xpt-about) .about-card:hover { border-top-color: var(--about-green); }

.about-section:not(#xpt-about) .about-card .wp-block-image {
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
}



.about-section:not(#xpt-about) .about-card h3 { grid-column: 2; grid-row: 2; }
.about-section:not(#xpt-about) .about-card p { grid-column: 2; grid-row: 3; }

.about-section:not(#xpt-about) .about-card .wp-block-image img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.about-section:not(#xpt-about) .about-card h3 {
  max-width: none;
  margin: 0 0 10px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(22px, 1.7vw, 26px);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  color: var(--about-ink);
}

.about-section:not(#xpt-about) .about-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
}

/* ---- Partnership strip -------------------------------------------------- */

.about-section:not(#xpt-about) .about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between !important;
  gap: 20px 32px;
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--about-ink);
}

.about-section:not(#xpt-about) .about-cta { margin-left: auto; margin-right: auto; }
.about-section:not(#xpt-about) .about-cta > * { max-width: none; margin: 0 !important; }

/* The theme's clearfix pseudo-elements would count as flex items. */
.about-section:not(#xpt-about) .about-cta::before,
.about-section:not(#xpt-about) .about-cta::after { display: none; }

.about-section:not(#xpt-about) .about-cta p {
  margin: 0;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  color: #fff;
}

.about-section:not(#xpt-about) .about-cta .wp-block-buttons { margin: 0; }

/* ---- Nationwide presence ------------------------------------------------ */

.about-section:not(#xpt-about) .about-split + .wp-block-shortcode,
.about-section:not(#xpt-about) .about-split + .office-map,
.about-presence:not(#xpt-about) .office-map { margin-top: clamp(32px, 4vw, 56px); }

.about-presence:not(#xpt-about) .office-map__list-title::before { display: none; }

/* ---- Smaller screens ---------------------------------------------------- */

@media (max-width: 1023px) {
  .about-section:not(#xpt-about) .about-card { grid-template-columns: 110px minmax(0, 1fr); column-gap: 24px; padding: 28px; }
  .about-section:not(#xpt-about) .about-card .wp-block-image img { width: 110px; height: 110px; }
}

@media (max-width: 781px) {
  .about-section:not(#xpt-about) .about-cards > .about-card { flex-basis: 100% !important; }
  .about-section:not(#xpt-about) .about-card { grid-template-columns: 1fr; grid-template-rows: auto; }
  .about-section:not(#xpt-about) .about-card :is(.wp-block-image, h3, p) { grid-column: 1; grid-row: auto; }
  .about-section:not(#xpt-about) .about-card .wp-block-image { margin-bottom: 20px; }
  .about-section:not(#xpt-about) .about-cta { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-section:not(#xpt-about) .about-card { transition: none; }
}

/* ---- Leadership Team page (page 724) ------------------------------------ */
/* Sections .leader-section (also .about-section), each a .leader-grid of
   .leader-tile groups: photo, name (linked to the profile), role, "View
   profile". The name link is stretched over the whole tile. */

.leader-section:not(#xpt-about) .leader-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) 24px;
}

.leader-section:not(#xpt-about) .leader-grid::before,
.leader-section:not(#xpt-about) .leader-grid::after { display: none; }

.leader-section:not(#xpt-about) .leader-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

.leader-section:not(#xpt-about) .leader-tile .wp-block-image {
  margin: 0 0 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: #0e2622;
}

.leader-section:not(#xpt-about) .leader-tile .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.leader-section:not(#xpt-about) .leader-tile h3 {
  max-width: none;
  margin: 0 0 6px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
}

.leader-section:not(#xpt-about) .leader-tile h3 a {
  color: var(--about-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.leader-section:not(#xpt-about) .leader-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.leader-section:not(#xpt-about) .leader-tile h3 a:focus-visible { outline: none; }
.leader-section:not(#xpt-about) .leader-tile h3 a:focus-visible::after {
  outline: 3px solid var(--about-green);
  outline-offset: 4px;
  border-radius: 8px;
}

.leader-section:not(#xpt-about) .leader-tile .leader-tile__role {
  flex: 1;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.45;
  color: #5f6b67;
}

.leader-section:not(#xpt-about) .leader-tile .leader-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: #00744b;
}

.leader-section:not(#xpt-about) .leader-tile .leader-tile__more::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s ease;
}

.leader-section:not(#xpt-about) .leader-tile:hover img { transform: scale(1.03); }
.leader-section:not(#xpt-about) .leader-tile:hover h3 a { color: #00744b; }
.leader-section:not(#xpt-about) .leader-tile:hover .leader-tile__more::after { transform: translateX(4px); }

@media (max-width: 1023px) {
  .leader-section:not(#xpt-about) .leader-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
  .leader-section:not(#xpt-about) .leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .leader-section:not(#xpt-about) .leader-tile .leader-tile__role { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .leader-section:not(#xpt-about) .leader-tile img,
  .leader-section:not(#xpt-about) .leader-tile .leader-tile__more::after { transition: none; }
}

/* /assets/styles/leader-profile.css */
/**
 * Leader Profile page template (views/templates/leader-profile.twig).
 *
 * Banner in the style of the other page banners (dark field from the left,
 * thin green frame), cut-out portrait on the right; career path as a row of
 * steps; biography beside the contact QR code.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.leader-page {
  --lp-content: 1100px; /* career path, bio and breadcrumbs */
  --lp-ink: #16201d;
  --lp-ink-rgb: 22, 32, 29;
  --lp-text: #3a4744;
  --lp-muted: #5f6b67;
  --lp-line: #d9dcd6;
  --lp-green: #00ce7c;
  --lp-green-text: #00744b;
  --lp-mist: #d6e6df;
}

/* ---- Banner ------------------------------------------------------------ */

.leader-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--lp-ink);
  color: #fff;
}

.leader-hero__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--lp-ink-rgb), 0.94) 0%,
      rgba(var(--lp-ink-rgb), 0.82) 35%,
      rgba(var(--lp-ink-rgb), 0.35) 62%,
      rgba(var(--lp-ink-rgb), 0.1) 100%),
    linear-gradient(180deg, rgba(var(--lp-ink-rgb), 0.6) 0%, rgba(var(--lp-ink-rgb), 0) 30%);
}

/* Thin green frame clear of the 94px header; the portrait sits over it. */
.leader-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 102px 24px 24px 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.leader-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 32px;
  max-width: 1440px;
  min-height: clamp(460px, 38vw, 560px);
  margin: 0 auto;
  padding: 128px var(--global--container-horizontal-padding, 20px) 0;
  padding-left: max(var(--global--container-horizontal-padding, 20px), min(56px, calc(56px - (100vw - 1440px) / 2)));
}

.leader-hero__info { align-self: center; padding-bottom: 56px; }

.leader-page .leader-hero__name {
  max-width: none;
  margin: 0;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: 0;
  color: #fff;
}

.leader-page .leader-hero__name::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  background: var(--lp-green);
}

.leader-page .leader-hero__role {
  max-width: none;
  margin: 12px 0 0;
  font-family: "TradeGothicLT-Light", "TradeGothicLT", sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  color: var(--lp-mist);
}

.leader-hero__contact {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.leader-hero__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.leader-hero__contact svg { flex: none; width: 18px; height: 18px; color: var(--lp-green); }

.leader-page .leader-hero__contact a {
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.leader-page .leader-hero__contact a:hover { color: var(--lp-green); border-color: var(--lp-green); }

.leader-hero__links { display: flex; gap: 10px; margin-top: 24px; }

.leader-page .leader-hero__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.leader-page .leader-hero__links a:hover {
  border-color: var(--lp-green);
  background: var(--lp-green);
  color: var(--lp-ink);
}

.leader-hero__links svg { width: 18px; height: 18px; }

.leader-page .leader-hero a:focus-visible {
  outline: 3px solid var(--lp-green);
  outline-offset: 3px;
}

.leader-hero__photo { align-self: end; justify-self: center; }

.leader-hero__photo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(340px, 30vw, 440px);
}

/* Breadcrumbs (synced pattern, 900px wide elsewhere): line up with the page. */
.leader-page > .wp-block-group.has-background > * {
  max-width: var(--lp-content) !important;
}

/* ---- Career path ------------------------------------------------------- */

.leader-career {
  max-width: calc(var(--lp-content) + 2 * var(--global--container-horizontal-padding, 20px));
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--global--container-horizontal-padding, 20px) 0;
}

.leader-career__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.leader-career__list li {
  position: relative;
  flex: 1 1 180px;
  margin: 0;
  padding: 18px 28px 0 0;
  border-top: 2px solid var(--lp-line);
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  color: var(--lp-ink);
}

/* A dot on the line for each step; the last (current) one is green. */
.leader-career__list li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lp-ink);
}

.leader-career__list li:last-child { border-top-color: var(--lp-green); }
.leader-career__list li:last-child::before { background: var(--lp-green); }

/* ---- Biography --------------------------------------------------------- */

.leader-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px clamp(40px, 5vw, 72px);
  align-items: start;
  max-width: calc(var(--lp-content) + 2 * var(--global--container-horizontal-padding, 20px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--global--container-horizontal-padding, 20px) clamp(64px, 8vw, 112px);
}

.leader-body__bio { max-width: 72ch; }

.leader-page .leader-body__bio p {
  max-width: none;
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--lp-text);
}

.leader-page .leader-body__bio p:first-child:not(:only-child) {
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.55;
  color: var(--lp-ink);
}

.leader-body__qr {
  margin: 0;
  padding: 20px;
  border-top: 4px solid var(--lp-green);
  background: #f4f6f5;
  text-align: center;
}

.leader-body__qr img { display: block; width: 100%; height: auto; }

.leader-page .leader-body__qr figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--lp-muted);
}

/* ---- Smaller screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .leader-hero__inner { grid-template-columns: 1fr; padding-top: 112px; padding-left: var(--global--container-horizontal-padding, 20px); }
  .leader-hero__info { padding-bottom: 8px; }
  .leader-hero__photo img { max-height: 320px; }
  .leader-hero::after { display: none; }
  .leader-hero::before { background: rgba(var(--lp-ink-rgb), 0.72); }
  .leader-body { grid-template-columns: 1fr; }
  .leader-body__qr { max-width: 240px; }
}

@media (max-width: 599px) {
  .leader-career__list { flex-direction: column; gap: 0; }
  .leader-career__list li { flex: none; padding: 0 0 18px 26px; border-top: 0; border-left: 2px solid var(--lp-line); }
  .leader-career__list li::before { top: 2px; left: -7px; }
  .leader-career__list li:last-child { border-left-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .leader-page * { transition: none !important; }
}

/* .entry-content > * rules in the theme reset these sections' width and
   margins; keep them centred at the content width. */
.leader-page > .leader-career,
.leader-page > .leader-body {
  width: 100%;
  max-width: calc(var(--lp-content) + 2 * var(--global--container-horizontal-padding, 20px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* /assets/styles/pagination.css */
/**
 * Numbered pagination (views/partials/pagination.twig) on the XPT News,
 * category, author and search listings.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.xpt-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: clamp(32px, 4vw, 48px);
}

.xpt-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xpt-pagination__pages li { margin: 0; }

.xpt-pagination .xpt-pagination__page,
.xpt-pagination .xpt-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #d5deda;
  border-radius: 2px;
  background: #fff;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: #16201d;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.xpt-pagination .xpt-pagination__gap { border-color: transparent; background: none; }

.xpt-pagination a.xpt-pagination__page:hover { border-color: #16201d; }

.xpt-pagination .xpt-pagination__page.is-current {
  border-color: #16201d;
  background: #16201d;
  color: #fff;
}

.xpt-pagination .xpt-pagination__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: #00744b;
  text-decoration: none;
}

.xpt-pagination .xpt-pagination__step svg { width: 18px; height: 18px; }
.xpt-pagination .xpt-pagination__step:hover span { text-decoration: underline; }

.xpt-pagination a:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .xpt-pagination .xpt-pagination__page { transition: none; }
}

/* /assets/styles/breadcrumbs.css */
/**
 * Yoast breadcrumbs, site-wide: in the beige strip under page banners (synced
 * patterns) and under news post banners (.xpt-breadcrumbs-bar, single.twig).
 * Separator chevron: App\Helpers\Breadcrumbs.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.xpt-breadcrumbs-bar {
  padding: 0;
  background: var(--wp--preset--color--light-beige, #efeae6);
}

.xpt-breadcrumbs-bar .xpt-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--global--container-horizontal-padding, 20px);
}

/* Page strips (synced patterns): drop the group's own padding so every strip
   is just the breadcrumb line plus the padding below. */
.wp-block-group:has(> .yoast-breadcrumbs):not(#xpt-crumbs) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.yoast-breadcrumbs:not(#xpt-crumbs) {
  /* Only the vertical margins: the page strips' constrained layout centres
     the breadcrumb in the 1440px content box with auto side margins. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 14px 0 !important;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #5f6b67;
}

.yoast-breadcrumbs:not(#xpt-crumbs) a {
  color: #16201d;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.yoast-breadcrumbs:not(#xpt-crumbs) a:hover {
  color: #00744b;
  border-bottom-color: currentColor;
}

.yoast-breadcrumbs:not(#xpt-crumbs) a:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 2px;
}

.yoast-breadcrumbs:not(#xpt-crumbs) .breadcrumb_last {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  color: #16201d;
}

.xpt-breadcrumbs__sep {
  display: inline-block;
  margin: 0 6px;
  vertical-align: -3px;
  color: #00a866;
}

.xpt-breadcrumbs__sep svg { display: block; width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .yoast-breadcrumbs:not(#xpt-crumbs) a { transition: none; }
}

/* News posts: same box as the banner text (.post-hero .xpt-container and
   .single-hero-content, see page-hero.css), so the breadcrumb lines up with
   the post title. */
.xpt-breadcrumbs-bar .xpt-container {
  padding-left: max(var(--global--container-horizontal-padding, 20px), min(56px, calc(56px - (100vw - 1440px) / 2)));
}

.xpt-breadcrumbs-bar .single-hero-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 25px;
}

@media (max-width: 781px) {
  .xpt-breadcrumbs-bar .xpt-container { padding-left: var(--global--container-horizontal-padding, 20px); }
}

/* /assets/styles/portfolio-panels.css */
/**
 * Portfolio page banner (page 777): three Cover blocks in a Columns block
 * with the class "portfolio-panels". One dark overlay and one green frame
 * across all three, like the other page banners; each panel shows the
 * company logo, a one-line description and a "Learn more" button.
 * Hovering or focusing a panel lifts its overlay so the photo shows.
 *
 * :not(#xpt-portfolio) outranks the Customizer CSS and the covers' inline
 * styles. Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.wp-block-columns.portfolio-panels:not(#xpt-portfolio) {
  --pp-ink: 22, 32, 29;
  --pp-green: #00ce7c;
  --pp-mist: #d6e6df;
  position: relative;
  gap: 0 !important;
  margin: 0 !important;
  background: rgb(var(--pp-ink));
}

/* One frame across all three panels, clear of the 94px header. */
.wp-block-columns.portfolio-panels:not(#xpt-portfolio)::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 102px 24px 24px 24px;
  border: 1px solid rgba(0, 206, 124, 0.45);
  pointer-events: none;
}

.portfolio-panels:not(#xpt-portfolio) > .wp-block-column {
  flex-basis: 0 !important;
  flex-grow: 1;
  margin: 0 !important;
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-cover {
  position: relative;
  min-height: clamp(520px, 44vw, 640px);
  height: 100%;
  margin: 0 !important;
  padding: 140px 40px 72px;
  align-items: center;
}

/* Thin dividers between the panels, inside the frame. */
.portfolio-panels:not(#xpt-portfolio) > .wp-block-column + .wp-block-column .wp-block-cover::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 102px;
  bottom: 24px;
  left: 0;
  width: 1px;
  background: rgba(0, 206, 124, 0.3);
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-cover__image-background {
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1), filter 0.4s ease;
}

/* Same dark field as the other banners, darker at the bottom for the text. */
.portfolio-panels:not(#xpt-portfolio) .wp-block-cover__background {
  z-index: 1;
  opacity: 1 !important;
  background:
    linear-gradient(180deg,
      rgba(var(--pp-ink), 0.5) 0%,
      rgba(var(--pp-ink), 0.25) 40%,
      rgba(var(--pp-ink), 0.6) 100%) !important;
  transition: opacity 0.4s ease;
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-cover:hover .wp-block-cover__background,
.portfolio-panels:not(#xpt-portfolio) .wp-block-cover:focus-within .wp-block-cover__background {
  opacity: 0.8 !important;
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-cover:hover .wp-block-cover__image-background,
.portfolio-panels:not(#xpt-portfolio) .wp-block-cover:focus-within .wp-block-cover__image-background {
  transform: scale(1.04);
  filter: saturate(1);
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-cover__inner-container {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* The old spacers only padded the panel; spacing now comes from the cover. */
.portfolio-panels:not(#xpt-portfolio) .wp-block-spacer { display: none; }

/* Logos: same visual height; the XPT tile sits in a thin light border. */
.portfolio-panels:not(#xpt-portfolio) .wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin: 0 0 28px !important;
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-image img {
  width: auto !important;
  max-width: 280px;
  height: auto !important;
  max-height: 96px;
  object-fit: contain;
}

.portfolio-panels:not(#xpt-portfolio) .wp-block-image img.wp-image-1486 { max-height: 84px; }

/* Short green rule between logo and description. */
.portfolio-panels:not(#xpt-portfolio) .portfolio-panel__desc::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 20px;
  background: var(--pp-green);
}

.portfolio-panels:not(#xpt-portfolio) .portfolio-panel__desc {
  max-width: 34ch;
  min-height: 3em; /* two lines, so the links line up across panels */
  margin: 0 auto 20px !important;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.5;
  color: var(--pp-mist) !important;
}

/* "Learn more" keeps the site button style (buttons.css). */
.portfolio-panels:not(#xpt-portfolio) .portfolio-panel__link { margin: 8px 0 0 !important; }

/* The whole panel is the link target. */
.portfolio-panels:not(#xpt-portfolio) .portfolio-panel__link .wp-block-button__link::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
}

/* Hovering anywhere on the panel shows the button's hover state. */
.portfolio-panels:not(#xpt-portfolio) .wp-block-cover:hover .wp-block-button__link:not(#xpt-btn) { background: #33e39a; }

.portfolio-panels:not(#xpt-portfolio) .wp-block-button__link:focus-visible { outline: none !important; }
.portfolio-panels:not(#xpt-portfolio) .wp-block-button__link:focus-visible::before {
  outline: 3px solid var(--pp-green);
  outline-offset: -8px;
}

@media (max-width: 781px) {
  .wp-block-columns.portfolio-panels:not(#xpt-portfolio) { flex-direction: column; }
  .wp-block-columns.portfolio-panels:not(#xpt-portfolio)::after { display: none; }
  .portfolio-panels:not(#xpt-portfolio) > .wp-block-column { flex-basis: auto !important; }
  .portfolio-panels:not(#xpt-portfolio) .wp-block-cover { min-height: 0; padding: 56px 24px; }
  .portfolio-panels:not(#xpt-portfolio) > .wp-block-column:first-child .wp-block-cover { padding-top: 120px; }
  .portfolio-panels:not(#xpt-portfolio) > .wp-block-column + .wp-block-column .wp-block-cover::before {
    top: 0; bottom: auto; left: 24px; right: 24px; width: auto; height: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-panels:not(#xpt-portfolio) * { transition: none !important; }
}

/* /assets/styles/office-page.css */
/**
 * Office page (views/templates/office.twig). Banner and breadcrumbs share
 * the news-post styles (page-hero.css, breadcrumbs.css).
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.office-page:not(#xpt-office) {
  --op-ink: #16201d;
  --op-text: #3a4744;
  --op-muted: #5f6b67;
  --op-green: #00ce7c;
  --op-green-text: #00744b;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--global--container-horizontal-padding, 20px) clamp(64px, 8vw, 112px);
}

.office-page:not(#xpt-office) .office-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: start;
}

.office-page:not(#xpt-office) .office-page__card {
  padding: clamp(28px, 4vw, 44px);
  border-top: 4px solid var(--op-green);
  background: #f4f6f5;
}

.office-page:not(#xpt-office) .office-page__title {
  max-width: none;
  margin: 0 0 14px;
  font-family: "TradeGothicLT-BoldCondTwenty", "TradeGothicLT-Bold", "Arial Narrow", sans-serif;
  font-weight: normal;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--op-ink);
}

.office-page:not(#xpt-office) .office-page__company {
  margin: 0 0 16px;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: var(--op-muted);
}

.office-page:not(#xpt-office) .office-page__address {
  margin: 0 0 24px;
  font-style: normal;
  font-size: 20px;
  line-height: 1.5;
  color: var(--op-ink);
}

.office-page:not(#xpt-office) .office-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-page:not(#xpt-office) .office-page__actions li { margin: 0; }

.office-page:not(#xpt-office) .office-page__link {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: var(--op-green-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.office-page:not(#xpt-office) .office-page__link:hover { color: var(--op-ink); }

.office-page:not(#xpt-office) .office-page__text {
  max-width: 60ch;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--op-text);
}

.office-page:not(#xpt-office) .office-page__side > * + * { margin-top: 36px; }

.office-page:not(#xpt-office) .office-page__about .office-page__text { margin: 0 0 12px; }

.office-page:not(#xpt-office) .office-page__nearby ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #d9dcd6;
}

.office-page:not(#xpt-office) .office-page__nearby li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #d9dcd6;
  font-size: 16px;
  color: var(--op-ink);
}

.office-page:not(#xpt-office) .office-page__nearby li a { color: var(--op-ink); font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif; }
.office-page:not(#xpt-office) .office-page__nearby li span { font-size: 14px; color: var(--op-muted); text-align: right; }

.office-page:not(#xpt-office) a:focus-visible { outline: 3px solid var(--op-green); outline-offset: 3px; }

@media (max-width: 781px) {
  .office-page:not(#xpt-office) .office-page__grid { grid-template-columns: 1fr; }
}

/* "Office details" link on the office cards and map popups. */
.office-map .office-map__page a { color: #00744b; }

/* /assets/styles/header-sticky.css */
/**
 * Sticky compact header.
 *
 * At the top of the page the header keeps its normal 94px height over the
 * hero. Once assets/scripts/sticky-header.js adds .is-compact, the header
 * is fixed to the top of the viewport at 60px, on a solid charcoal-green
 * bar, and slides in from above.
 *
 * This replaces the old theme.js behaviour (.scrolling nudged the header up
 * 20% at 250px, .headerscroll pinned it at 400px). Those classes are still
 * toggled by dist/scripts/theme.js, so the rules below override them.
 * Plain CSS outside the Sass build; enqueued by AssetsServiceProvider.
 */

.o-header.is-compact {
  position: fixed !important;
  top: 0;
  transform: none !important;
  background-color: rgba(22, 32, 29, 0.96) !important;
  box-shadow: 0 1px 0 rgba(0, 206, 124, 0.35);
  animation: xpt-header-drop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (backdrop-filter: blur(8px)) {
  .o-header.is-compact {
    background-color: rgba(22, 32, 29, 0.94) !important;
    backdrop-filter: blur(8px);
  }
}

/* Light-banner pages use a white header; keep it white when compact. */
body.service-light-banner .o-header.is-compact {
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 1px 0 rgba(90, 90, 90, 0.2);
}

/* Clear the WordPress admin bar for logged-in users. */
body.logged-in > .o-header.is-compact {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.logged-in > .o-header.is-compact {
    top: 46px;
  }
}

/* Below 600px the admin bar scrolls away with the page. */
@media screen and (max-width: 600px) {
  body.logged-in > .o-header.is-compact {
    top: 0;
  }
}

/* 94px to 60px: smaller logo, tighter menu items. */
.o-header.is-compact .o-header__logo-link {
  width: 56px;
  height: 42px;
  margin: 9px 0;
}

@media only screen and (min-width: 889px) {
  .o-header.is-compact .o-menu--main > ul > li.menu-item {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

.o-header.is-compact .o-header__top-bar {
  display: none;
}

/* Animates `translate`, not `transform`: the transform: none !important
   above would override an animated transform. */
@keyframes xpt-header-drop {
  from { translate: 0 -100%; }
  to   { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .o-header.is-compact {
    animation: none;
  }
}

/* /assets/styles/footer.css */
/**
 * Site footer (views/partials/footer.twig, subfooter.twig).
 *
 * Same dark ink as the compact header. Row 1: logo and menu. Row 2:
 * disclaimer and membership logos. Row 3: copyright and LinkedIn on a
 * brand green strip.
 * :not(#xpt-footer) outranks the theme's compiled footer rules.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.o-footer:not(#xpt-footer) {
  --footer-bg: #16201d;
  --footer-text: rgba(255, 255, 255, 0.72);
  --footer-line: rgba(255, 255, 255, 0.12);
  --footer-green: #00ce7c;
  position: relative;
  padding: 0;
  background: var(--footer-bg);
  color: var(--footer-text);
}

/* Thin green line along the top edge. */
.o-footer:not(#xpt-footer)::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--footer-green);
}

.o-footer:not(#xpt-footer) .o-footer__inner,
.o-footer:not(#xpt-footer) .footer-images,
.o-footer:not(#xpt-footer) .o-footer__subfooter--container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--global--container-horizontal-padding, 20px);
  padding-right: var(--global--container-horizontal-padding, 20px);
}

/* ---- Row 1: logo and menu ---------------------------------------------- */

.o-footer:not(#xpt-footer) .o-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 48px;
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.o-footer:not(#xpt-footer) .o-footer__section--info,
.o-footer:not(#xpt-footer) .o-footer__section--nav {
  width: auto;
  margin: 0;
  padding: 0;
}

.o-footer:not(#xpt-footer) .o-footer__logo img {
  display: block;
  width: 72px;
  height: auto;
}

.o-footer:not(#xpt-footer) .o-footer__menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-footer:not(#xpt-footer) .o-footer__menu li { margin: 0; padding: 0; }

.o-footer:not(#xpt-footer) .o-footer__menu a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.o-footer:not(#xpt-footer) .o-footer__menu a:hover { color: var(--footer-green); }

.o-footer:not(#xpt-footer) a:focus-visible {
  outline: 3px solid var(--footer-green);
  outline-offset: 3px;
}

/* ---- Row 2: disclaimer and memberships --------------------------------- */

.o-footer:not(#xpt-footer) .footer-images {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 64px;
  padding-top: 40px;
  padding-bottom: 48px;
  border-top: 0;
  /* Divider drawn inside the side padding so it lines up with the content. */
  background-image: linear-gradient(var(--footer-line), var(--footer-line));
  background-size: calc(100% - 2 * var(--global--container-horizontal-padding, 20px)) 1px;
  background-position: top center;
  background-repeat: no-repeat;
}

.o-footer:not(#xpt-footer) .disclaimer { margin: 0; padding: 0; }

.o-footer:not(#xpt-footer) .disclaimer p {
  max-width: 68ch;
  margin: 0;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.65;
  color: var(--footer-text);
}

.o-footer:not(#xpt-footer) .footer-images__logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-footer:not(#xpt-footer) .footer-images__logos li { margin: 0; }

.o-footer:not(#xpt-footer) .footer-images__logos img {
  display: block;
  width: auto;
  max-width: 180px;
  height: 48px;
  margin: 0;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.o-footer:not(#xpt-footer) .footer-images__logos li:hover img { opacity: 1; }

/* ---- Row 3: copyright and LinkedIn ------------------------------------- */

.o-footer:not(#xpt-footer) .o-footer__subfooter {
  margin: 0;
  padding: 0;
  background: var(--footer-green); /* brand green strip, dark ink text */
}

.o-footer:not(#xpt-footer) .o-footer__subfooter--container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.o-footer:not(#xpt-footer) .o-footer__subfooter--info {
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #16201d;
}

.o-footer:not(#xpt-footer) .o-footer__subfooter--social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(22, 32, 29, 0.45);
  border-radius: 50%;
  color: #16201d;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.o-footer:not(#xpt-footer) .o-footer__subfooter--social a:hover {
  border-color: #16201d;
  background: #16201d;
  color: #fff;
}

/* The shared green focus ring would vanish on the green strip. */
.o-footer:not(#xpt-footer) .o-footer__subfooter a:focus-visible { outline-color: #16201d; }

.o-footer:not(#xpt-footer) .o-footer__subfooter--social svg { width: 16px; height: 16px; }

@media (max-width: 899px) {
  .o-footer:not(#xpt-footer) .o-footer__inner { flex-direction: column; align-items: flex-start; }
  .o-footer:not(#xpt-footer) .footer-images { grid-template-columns: 1fr; }
  .o-footer:not(#xpt-footer) .footer-images__logos { justify-content: flex-start; gap: 20px 28px; }
  .o-footer:not(#xpt-footer) .footer-images__logos img { height: 40px; }
  .o-footer:not(#xpt-footer) .o-footer__menu ul { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .o-footer:not(#xpt-footer) * { transition: none !important; }
}

/* /assets/styles/cookie-consent.css */
/**
 * Pressidium Cookie Consent: consent box, preferences panel and floating
 * button, matched to the site template (dark green panels, brand-green
 * buttons, Trade Gothic, 2px corners like buttons.css).
 *
 * Colours come from the plugin's own settings (Settings -> Cookie Consent ->
 * Customization), which it prints as --cc-* variables; this file sets the
 * type, corners and spacing the plugin has no settings for.
 *
 * Plain CSS outside the Sass build; loaded on the front end by
 * AssetsServiceProvider.
 */

body.pressidium-cc-theme {
  --cc-font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  --cc-font-size: 16px;
  --cc-border-radius: 4px;
  --cc-btn-border-radius: 2px;
  --cc-consent-modal-box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --cc-overlay-opacity: 0.75;
}

/* Consent box */
#cc--main #cm {
  max-width: 26em;
  padding: 1.5em 1.5em 1.4em;
  border-top: 4px solid #00ce7c;
}

#cc--main #c-ttl,
#cc--main #s-ttl,
#cc--main .b-tl {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  letter-spacing: 0.01em;
}

#cc--main #c-ttl {
  margin-bottom: 0.6em;
  font-size: 1.25em;
}

#cc--main #c-txt,
#cc--main .p {
  font-size: 0.95em;
  line-height: 1.55;
}

#cc--main .cc-link {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  line-height: inherit;
  border-bottom: 1px solid currentColor;
  color: #00ce7c;
  font-family: inherit;
  font-weight: normal;
}

#cc--main .cc-link:hover {
  color: #33e39a;
}

/* Buttons: same type and weight as the site buttons */
#cc--main .c-bn {
  line-height: 1.2;
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * The theme's global button rule adds a top margin to every button; the
 * plugin's ".cc_div :hover" reset removes it on hover, so buttons and
 * category rows jumped under the cursor. No top margin, hovered or not.
 */
#cc--main button {
  margin-top: 0;
}

/* Stacked on phones: keep a small gap between them. */
@media (max-width: 688px) {
  #cc--main #s-bns .c-bn {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
  }

  #cc--main #s-bns .c-bn + .c-bn {
    margin-top: 6px;
  }

  /* Stacked consent box buttons: keep the plugin's gap. */
  #cc--main #c-bns .c-bn + .c-bn {
    margin-top: 0.625em;
  }
}

/* Taller buttons in the consent box only: the preferences panel footer has a fixed height. */
#cc--main #cm .c-bn {
  padding: 1em 1.4em 0.9em;
}

#cc--main .c-bn:focus-visible,
#cc--main .cc-link:focus-visible,
#cc--main .b-tl:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 2px;
}

/* Preferences panel */
#cc--main #s-hdr {
  border-bottom-color: var(--cc-section-border);
}

#cc--main #s-ttl {
  font-size: 1.3em;
}

#cc--main .c-bl {
  border-radius: 4px;
}

#cc--main .b-tl {
  font-size: 1em;
}

@media (prefers-reduced-motion: reduce) {
  #cc--main .c-bn {
    transition: none;
  }
}