/* /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;
  }
}

/* /assets/styles/homepage-fixes.css */
/**
 * Homepage layout fixes.
 *
 * Plain CSS loaded after dist/styles/theme.css (see AssetsServiceProvider).
 * Kept outside the Sass build because the Mix toolchain in node_modules
 * is incomplete and cannot currently rebuild dist/. Fold these rules into
 * assets/styles/theme/components/_banner.scss and blocks/_homepage.scss
 * once the build works again.
 */

/* Hero: below the laptop breakpoint the container had a fixed 600px height
   while the absolute header (94px) sat over the heading, and the button
   overflowed into the next section. Let the hero grow with its content and
   clear the header. */
@media only screen and (max-width: 739px) {
  .home .hero-container {
    height: auto;
    min-height: 0;
    padding-top: 126px; /* 94px header + 32px */
    padding-bottom: 64px;
  }

  .home .hero-content .btn {
    margin-bottom: 0;
  }
}

/* Hero: 100dvh avoids the iOS Safari jump caused by 100vh. */
@media only screen and (min-width: 740px) {
  .home .hero-container {
    height: 100dvh;
  }
}

/* Hero arrows (markup in views/blocks/banner.twig). Each arrow grows up
   from the bottom of the hero on load, left to right, then a soft band of
   light runs up it on a loop. Both effects stroke the arrow's spine: the
   reveal inside a mask, the pulse inside a clip-path of the arrow shape.
   pathLength="100" lets one dash length and offset fit all four arrows.
   --i is the arrow's index, set inline, and drives the stagger. */
.hero-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-arrows__body {
  fill: url(#hero-arrow-fill);
}

.hero-arrows__reveal,
.hero-arrows__pulse {
  fill: none;
  stroke-width: 260; /* user units: wider than any part of an arrow */
  stroke-linejoin: round;
}

.hero-arrows__reveal {
  stroke: #fff;
  stroke-dasharray: 101 101;
  stroke-dashoffset: 101;
  animation: hero-arrow-grow 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.18s);
}

.hero-arrows__pulse {
  stroke: #fff;
  stroke-dasharray: 12 120;
  stroke-dashoffset: 12;
  opacity: 0;
  animation: hero-arrow-pulse 5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  animation-delay: calc(2.2s + var(--i, 0) * 0.35s);
}

/* Custom properties set on the <g> reach the mask path only through the
   mask reference, which does not inherit, so the reveal stagger is set here. */
.hero-arrows mask:nth-of-type(1) .hero-arrows__reveal { --i: 0; }
.hero-arrows mask:nth-of-type(2) .hero-arrows__reveal { --i: 1; }
.hero-arrows mask:nth-of-type(3) .hero-arrows__reveal { --i: 2; }
.hero-arrows mask:nth-of-type(4) .hero-arrows__reveal { --i: 3; }

@keyframes hero-arrow-grow {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-arrow-pulse {
  0%   { stroke-dashoffset: 12;   opacity: 0; }
  10%  { opacity: 0.55; }
  45%  { opacity: 0.55; }
  60%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* No motion: show the arrows as they were painted, without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .hero-arrows__reveal {
    animation: none;
    stroke-dashoffset: 0;
  }

  .hero-arrows__pulse {
    display: none;
  }
}

/* Constrained sections (group layout "constrained", content width 1440px):
   the theme's ".xpt-container h1, h2, p { max-width: 100% }" undoes the
   block layout's max-width, so headings and paragraphs ran edge to edge
   while columns stayed at 1440px. Restore the 1440px width so text lines
   up with the other sections. */
.home .xpt-container.is-layout-constrained > h1,
.home .xpt-container.is-layout-constrained > h2,
.home .xpt-container.is-layout-constrained > p {
  max-width: 1440px;
}