/* Site additions layered over the original theme (dist/styles/main.css).
   Loaded site-wide after main.css and the icon font. */

/* ---------------------------------------------------------------------------
   Solution icons
   The icomoon font only carries glyphs for the original five solutions, so
   solutions added since are drawn as CSS masks in the same line style. They
   inherit colour (currentColor) and size (1em) exactly like a font glyph.
   ------------------------------------------------------------------------- */

/* Alias onto an existing glyph (bills + coin). */
.icon-retail-cash-management:before { content: "\e919"; }

.icon-vault-operations:before,
.icon-billing-and-accounting:before,
.icon-cash-forecasting:before,
.icon-route-optimization:before,
.icon-branch-cash-management:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

/* Bank building: vaults and branches. */
.icon-vault-operations {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5 16 4.5l12.5 8z'/%3E%3Cpath d='M8 16.5v8M16 16.5v8M24 16.5v8M3.5 28.5h25'/%3E%3C/svg%3E");
}

/* Invoice. */
.icon-billing-and-accounting {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h13l6 6v19h-19z'/%3E%3Cpath d='M19.5 3.5v6h6'/%3E%3Cpath d='M11 15.5h10M11 20.5h10M11 25.5h5'/%3E%3C/svg%3E");
}

/* Trend line continuing into a dotted forecast. */
.icon-cash-forecasting {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5v25h25'/%3E%3Cpath d='M8.5 22.5l5-6.5 4 3.5 3.5-5'/%3E%3Cpath d='M21 14.5 27.5 6.5' stroke-dasharray='0.1 4.2'/%3E%3C/svg%3E");
}

/* Winding route between a start and an end stop. */
.icon-route-optimization {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='25' r='3.5'/%3E%3Ccircle cx='24.5' cy='7' r='3.5'/%3E%3Cpath d='M11 25h11.5a4.5 4.5 0 0 0 0-9h-13a4.5 4.5 0 0 1 0-9H21'/%3E%3C/svg%3E");
}

/* Branch storefront with cash coming in and going out. */
.icon-branch-cash-management {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h25v5h-25z'/%3E%3Cpath d='M5.5 11.5v17h21v-17M3.5 28.5h25'/%3E%3Cpath d='M11.5 15.5v8M9 21l2.5 2.5L14 21'/%3E%3Cpath d='M20.5 23.5v-8M18 18l2.5-2.5L23 18'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Layout variants for grids that shipped sized for exactly three items.
   ------------------------------------------------------------------------- */

/* Home: four industry cards. */
@media (min-width: 1200px) {
  .pop-cards.count-4 > div { width: 23.5%; }
  .pop-cards.count-4 .pop-card { padding: 3.5rem 3rem; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .pop-cards.count-4 { justify-content: space-between; }
  .pop-cards.count-4 > div { width: 48.5%; margin-bottom: 3rem; }
}

/* Industries index: four industry blocks. */
@media (min-width: 1200px) {
  .industry-blocks.count-4 > div { width: 25%; padding: 2rem; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .industry-blocks.count-4 > div { width: 50%; }
}

/* Header logo. Hold its box to the logo's own 400x98 shape so the header keeps
   one height before and after the Lottie loads. A 2:1 box (the canvas
   renderer's default) pushed the logo and menu down on desktop, and below
   1024px put the header's bottom border through the hero title. */
#logo-bm { aspect-ratio: 400 / 98; }
#logo-bm svg { display: block; }

/* Mobile menu. The theme drops the menu a fixed 9.3-10.3rem below the top and
   sizes its scroller to 100vh minus that, while the page underneath keeps
   scrolling. The header is taller than that offset, so the logo and the
   header's bottom border sit over the first menu items, and the page and the
   menu each show a scrollbar. Cover the viewport from the top, start the items
   below the header (its padding + border + the logo box above), hold the
   scroller to the visible height, and stop the page scrolling while open. */
@media (max-width: 1024px) {
  .mobile-nav-wrapper {
    top: 0;
    bottom: 0;
    height: auto;
    padding-top: calc(3rem + 2px + 250px * 98 / 400);
  }
  .mobile-nav-scroller { height: 100%; overscroll-behavior: contain; }
  body.mobile-nav-is-open { overflow: hidden; }
}

/* Solution picker (home + Solutions menu): more than five solutions. Below
   1024px the theme lays the items out in a single row; let them wrap. */
@media (max-width: 1024px) and (min-width: 600px) {
  .solution-picker-nav-items { flex-wrap: wrap; justify-content: center; }
  .solution-picker .solution-picker-nav__item { flex: 0 0 33.333%; }
}
.solution-picker-dropdown .solution-picker-nav__item { padding-top: 1rem; padding-bottom: 1rem; }

/* Featured case study cards. On phones a long title word ("transformational")
   is wider than the card's text column; in the slider the column then grows to
   fit it and spills past the card's right padding, pushing the centred copy off
   centre. Keep the column inside the card, give it a little more room, and let
   a word that still doesn't fit wrap rather than overflow. The button keeps its
   arrow beside the label, so on the narrowest phones the label wraps instead of
   the arrow dropping onto it. */
.featured-case-study__content { min-width: 0; }
.featured-case-study__title { overflow-wrap: break-word; }
@media (max-width: 599px) {
  .featured-case-study,
  .case-study-has-logo .featured-case-study { padding-left: 3.5rem; padding-right: 3.5rem; }
  .featured-case-study__title { font-size: 3.4rem; }
  .featured-case-study .btn-round {
    display: inline-flex;
    align-items: center;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Footer: ISO/IEC 27001 seal beside the AICPA SOC logo, drawn to the same
   100px round footprint. The theme stacks the footer seals on phones; with two
   of them, keep them side by side. */
.footer-copyright a.footer-iso-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.15;
}
.footer-iso-feature span { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; }
.footer-iso-feature strong { font-size: 15px; font-weight: 800; margin: 2px 0; }
@media (max-width: 599px) {
  .footer__features { flex-direction: row; justify-content: center; }
  .footer-soc-feature { margin: 2rem 1.5rem; }
}

/* Industry pages list solutions without a case study beside every one. */
.industry-solution .solution:only-child { width: 100%; max-width: 760px; }

/* Header visual that is a still image rather than a Lottie animation. */
.page-header__visual > img.page-header__still { display: block; max-width: 100%; margin: 4rem auto 0; }
/* On phones the theme pulls the visual up by 10rem to absorb the empty top
   of the Lottie animations; a still has none, so push it clear of the buttons. */
@media (max-width: 599px) {
  .page-header__visual > img.page-header__still { margin-top: 13rem; }
}

/* The theme nudges each solution's header animation down to sit level with
   the copy (e.g. .cash-vault-management #bm); this one is a later addition. */
.cash-forecasting #bm,
.branch-cash-management #bm { margin-top: 7rem; }
@media (max-width: 768px) {
  .cash-forecasting #bm,
  .branch-cash-management #bm { margin-top: 0; }
}

/* CIT handheld shot: drawn at the size of the image it replaced, so the
   higher-resolution file stays sharp without crowding the copy beside it. */
.cash-in-transit-logistics .feature-image img { width: 770px; }

/* ---------------------------------------------------------------------------
   Solutions page: the Cirreon platform, integrations and capabilities.
   ------------------------------------------------------------------------- */

.platform-section { padding: 6rem 0; }
.platform-section.alt { background-color: #f6f9fc; }
.platform-section .row-title { margin-bottom: 5rem; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}
@media (max-width: 1024px) { .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .capability-grid { grid-template-columns: minmax(0, 1fr); } }

.capability {
  background-color: #fff;
  border-radius: 20px;
  padding: 3.5rem 3rem;
  box-shadow: 0 5px 40px 0 rgba(35, 78, 143, 0.1);
}
.platform-section:not(.alt) .capability { box-shadow: none; border: 2px solid #ebf0f5; }
.capability__title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.capability p { font-size: 1.7rem; line-height: 1.6; margin-bottom: 1.2rem; }
.capability p:last-child { margin-bottom: 0; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tag-list li {
  margin: 0;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  background-color: #eef4fb;
  color: #234e8f;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
}
.tag-list li:before { display: none; }