@font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 400; src: url("../fonts/roboto/roboto-v51-latin-regular.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 500; src: url("../fonts/roboto/roboto-v51-latin-500.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 600; src: url("../fonts/roboto/roboto-v51-latin-600.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 700; src: url("../fonts/roboto/roboto-v51-latin-700.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 800; src: url("../fonts/roboto/roboto-v51-latin-800.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 900; src: url("../fonts/roboto/roboto-v51-latin-900.woff2") format("woff2"); }

.btn-mobile__icon {
    display: block;
    width: 1em;
    height: 1em;
}

.customers {
    --tv-ink: #111;
    --tv-muted: #6d6d6d;

    
    --logo-h: 41px;
    --logo-w: 180px;

    
    padding-block: clamp(2rem, 4vw, 3.5rem) 0;
}

.customers__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;

    
    border-top: 1px solid rgba(17, 17, 17, .09);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.customers__inner:has(.customers__num) {
    grid-template-columns: 4rem minmax(0, 1fr);
}
.customers__inner:has(.customers__num) .customers__num   { grid-column: 1; grid-row: 1; }
.customers__inner:has(.customers__num) .customers__intro { grid-column: 2; grid-row: 1; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.customers__inner:has(.customers__num) .customers__wall  { grid-column: 2; grid-row: 2; }
.customers__inner:has(.customers__num) .customers__link  { grid-column: 2; grid-row: 3; justify-self: start; }

.customers__label {
    margin: 0 0 clamp(.25rem, .5vw, .5rem);
    text-align: center;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tv-muted);
}

.customers__wall {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.customers__row {
    display: flex;
    width: max-content;
    animation: customers-drift-left var(--drift, 72s) linear infinite;
}

.customers__row--right { animation-direction: reverse; --drift: 64s; }
.customers__row--left  { --drift: 72s; }

@keyframes customers-drift-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}@media (hover: hover) {
    .customers__row:hover { animation-play-state: paused; }}

.customers__track {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.customers__item {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 13.5rem;
    min-height: 8.625rem;
    padding: .5rem 1rem;
}

.customers__item > a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.customers__item > a > .customers__logo {
    max-height: calc(var(--logo-h) * var(--s, 1));
}

.customers__logo {
    
    max-width: min(100%, calc(var(--logo-w) * var(--s, 1)));
    max-height: min(100%, calc(var(--logo-h) * var(--s, 1)));
    width: auto;
    height: auto;

    
    filter: brightness(0);
    opacity: .55;

    transition: filter .28s ease, opacity .28s ease;
}@media (hover: hover) {
    .customers__item:hover .customers__logo {
        
   
    }

    
    .customers__item[data-logo="metropolitan-police"]:hover .customers__logo {
   
      
    }}@media (prefers-reduced-motion: reduce) {
    .customers__logo { transition: none; }}

.customers__item[data-logo="boursa-kuwait"]      { --s: 1.45; }
.customers__item[data-logo="oglaigh-na-heireann"]{ --s: 1.30; }
.customers__item[data-logo="qatar-central-bank"] { --s: 1.20; }
.customers__item[data-logo="deutsche-boerse"]    { --s: 1.15; }
.customers__item[data-logo="fineco"]             { --s: 1.10; }
.customers__item[data-logo="lseg"]               { --s: 1.05; }
.customers__item[data-logo="ing"]                { --s: 0.95; }
.customers__item[data-logo="metropolitan-police"]{ --s: 0.92; }
.customers__item[data-logo="allianz"]            { --s: 0.90; }
.customers__item[data-logo="heineken"]           { --s: 0.90; }
.customers__item[data-logo="strate"]             { --s: 0.85; }
.customers__item[data-logo="alcon"]              { --s: 0.80; }

.customers__item[data-logo="metropolitan-police"] .customers__logo {
    filter: grayscale(1);
    opacity: .72;
}@supports (animation-timeline: view()) {@media (prefers-reduced-motion: no-preference) {
        .customers__wall {
            animation: customers-in linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 22%;
        }}}

@keyframes customers-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}@media (prefers-reduced-motion: reduce) {
    .customers__row {
        animation: none;
        width: auto;
        justify-content: center;
    }

    .customers__track { flex-wrap: wrap; justify-content: center; }
    .customers__track[aria-hidden="true"] { display: none; }

    .customers__wall {
        -webkit-mask-image: none;
                mask-image: none;
    }}@media (max-width: 991.98px) {
    .customers { --logo-w: 153px; --logo-h: 38px; }
    .customers__item { width: 11.5rem; min-height: 7.625rem; }}@media (max-width: 575.98px) {
    
    .customers { --logo-w: 108px; }

    
    .customers__item {
        width: 9.5rem;
        min-height: 6.6875rem;
        padding: .5rem .75rem;
    }


    
    .customers__inner:has(.customers__num) { grid-template-columns: minmax(0, 1fr); }
    .customers__inner:has(.customers__num) .customers__num   { grid-column: 1; grid-row: 1; margin-bottom: .5rem; }
    .customers__inner:has(.customers__num) .customers__intro { grid-column: 1; grid-row: 2; }
    .customers__inner:has(.customers__num) .customers__wall  { grid-column: 1; grid-row: 3; }
    .customers__inner:has(.customers__num) .customers__link  { grid-column: 1; grid-row: 4; }}

@keyframes stats-bar-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.eco {
    --tv-ink: #111;
    --tv-muted: #6d6d6d;
    --tv-accent: #0035AD;

    padding-block: clamp(3.5rem, 7vw, 6rem) 0;

    
    overflow-x: clip;
}

.eco__inner {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: start;

    border-top: 1px solid rgba(17, 17, 17, .09);
    padding-top: clamp(3rem, 6vw, 5rem);
}

.eco__num     { grid-column: 1; grid-row: 1; }
.eco__intro   { grid-column: 2; grid-row: 1; }

.eco__diagram { grid-column: 1 / -1; grid-row: 2; }

.eco__num {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--tv-muted);
    font-variant-numeric: tabular-nums;
}

.eco__title {
    margin: 0 0 1.25rem;
    max-width: 34ch;
    font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--tv-ink);
}

.eco__title-turn { display: block; }@media (min-width: 992px) {
    .eco__title { max-width: 44ch; }
    
    .eco__title-turn { display: inline; }}

.eco__text {
    margin: 0 0 1.125rem;
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.74994;
}

.eco__text:last-child { margin-bottom: 0; }

.eco__diagram {
    position: relative;      
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    max-width: 63rem;

    
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.eco__diagram.is-live .eco__wire {
    animation: eco-wire calc(var(--eco-count, 10) * 1.4s) linear infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
}

@keyframes eco-wire {
    0%              { stroke-dashoffset: 1; opacity: 0; }
    2%              { stroke-dashoffset: 1; opacity: 1; }
    
    6%              { stroke-dashoffset: 0; opacity: 1; }
    8%              { stroke-dashoffset: 0; opacity: 1; }
    10%, 100%       { stroke-dashoffset: 0; opacity: 0; }
}

.eco__diagram.is-live .eco__cell.is-wired {
    animation: eco-lit calc(var(--eco-count, 10) * 1.4s) linear infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
}

@keyframes eco-lit {
    0%, 4%    { border-color: rgba(17, 17, 17, .08); }
    7%, 9%    { border-color: rgba(0, 53, 173, .38); }
    12%, 100% { border-color: rgba(17, 17, 17, .08); }
}

.eco__diagram.is-live .eco__cell.is-wired img {
    animation: eco-mark calc(var(--eco-count, 10) * 1.4s) linear infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
}

@keyframes eco-mark {
    0%, 4%    { filter: brightness(0); opacity: .55; }
    7%, 9%    { filter: brightness(1); opacity: 1; }
    12%, 100% { filter: brightness(0); opacity: .55; }
}@media (prefers-reduced-motion: reduce) {

    .eco__diagram.is-live .eco__wire,
    .eco__diagram.is-live .eco__cell.is-wired,
    .eco__diagram.is-live .eco__cell.is-wired img {
        animation: none;
    }}

.eco__grid {
    --eco-cell-ar: 1;

    display: grid;

    
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;

    margin: 0;
    padding: 0;
    list-style: none;
}

.eco__cell:nth-child(1) { grid-column: 2; grid-row: 1; }
.eco__cell:nth-child(2) { grid-column: 3; grid-row: 1; }
.eco__cell:nth-child(3) { grid-column: 4; grid-row: 1; }
.eco__cell:nth-child(4) { grid-column: 5; grid-row: 1; }

.eco__cell:nth-child(5) { grid-column: 2; grid-row: 2; }
.eco__cell:nth-child(6) { grid-column: 5; grid-row: 2; }

.eco__cell--core { grid-column: 3 / 5; grid-row: 2; }

.eco__cell:nth-child(8)  { grid-column: 2; grid-row: 3; }
.eco__cell:nth-child(9)  { grid-column: 3; grid-row: 3; }
.eco__cell:nth-child(10) { grid-column: 4; grid-row: 3; }
.eco__cell:nth-child(11) { grid-column: 5; grid-row: 3; }

.eco__cell:nth-child(12) { grid-column: 1; grid-row: 1; }
.eco__cell:nth-child(13) { grid-column: 6; grid-row: 1; }
.eco__cell:nth-child(14) { grid-column: 1; grid-row: 2; }
.eco__cell:nth-child(15) { grid-column: 6; grid-row: 2; }
.eco__cell:nth-child(16) { grid-column: 1; grid-row: 3; }
.eco__cell:nth-child(17) { grid-column: 6; grid-row: 3; }

.eco__cell--ghost {
    background: none;
}

.eco__cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: var(--eco-cell-ar);
    padding: clamp(.75rem, 2vw, 1.25rem);
    border: 1px solid rgba(17, 17, 17, .08);

    
    background: #fff;

    
    position: relative;
    z-index: 1;

    transition: border-color .45s ease;
}

.eco__cell img {
    display: block;
    width: auto;

    
    max-width: min(100%, calc(9.5rem * var(--s, 1)));
    height: auto;
    max-height: calc(2.5rem * var(--s, 1));
    object-fit: contain;

    filter: brightness(0);
    opacity: .55;
    transition: filter .28s ease, opacity .28s ease;
}

.eco__cell[data-mark="moonshot"]   { --s: 1.06; }   
.eco__cell[data-mark="claude"]     { --s: 1.02; }   
.eco__cell[data-mark="chatgpt"]    { --s: .88; }    
.eco__cell[data-mark="mistral"]    { --s: .90; }    
.eco__cell[data-mark="sharepoint"] { --s: .92; }    
.eco__cell[data-mark="slack"]      { --s: .92; }    

.eco__cell[data-mark="databricks"] { --s: 1.06; }   
.eco__cell[data-mark="microsoft"]  { --s: 1.02; }   
.eco__cell[data-mark="snowflake"]  { --s: .96; }    

.eco__cell[data-mark="aws"]        { --s: 1.10; }@media (hover: hover) {
    .eco__cell:hover img {
        filter: none !important;
        opacity: 1 !important;
    }}

.eco__cell--core {
    aspect-ratio: auto;

    background: #fff;
    border-color: rgba(17, 17, 17, .08);
    border-radius: 0;

    
    margin: 2px;
}

.eco__cell--core img {
    max-width: min(100%, 18rem);
    max-height: 5.25rem;

    
    filter: none;
    opacity: 1;
}

.eco__text strong {
    font-weight: 500;
    color: var(--tv-ink);
}@supports (animation-timeline: view()) {@media (prefers-reduced-motion: no-preference) {
        .eco__grid {
            animation: eco-in linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 32%;
        }}}

@keyframes eco-in {
    from { opacity: 0; transform: translateY(.5rem); }
    to   { opacity: 1; transform: none; }
}@media (max-width: 767.98px) {
    .eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    
    .eco__cell--ghost { display: none; }

    .eco__diagram {
        -webkit-mask-image: none;
                mask-image: none;
    }

    
    .eco__cell:nth-child(n) {
        grid-column: auto;
        grid-row: auto;

        
        aspect-ratio: auto;
        min-height: 4.5rem;
    }

    
    .eco__cell--core:nth-child(n) {
        grid-column: 1 / -1;
        aspect-ratio: auto;
        min-height: 7rem;
    }}@media (max-width: 767.98px) {
    .eco--a .eco__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        
        gap: .25rem;
    }

    
    .eco--a .eco__cell--ghost { display: none; }

    .eco--a .eco__diagram {
        -webkit-mask-image: none;
                mask-image: none;
    }

    
    .eco--a .eco__cell:nth-child(n) {
        aspect-ratio: 1;
        min-height: 0;

        
        padding: .375rem;
    }

    
    .eco--a .eco__cell:nth-child(1) { grid-column: 1; grid-row: 1; }
    .eco--a .eco__cell:nth-child(2) { grid-column: 2; grid-row: 1; }
    .eco--a .eco__cell:nth-child(3) { grid-column: 3; grid-row: 1; }
    .eco--a .eco__cell:nth-child(4) { grid-column: 4; grid-row: 1; }

    
    .eco--a .eco__cell:nth-child(5) { grid-column: 1; grid-row: 2; }
    .eco--a .eco__cell:nth-child(6) { grid-column: 4; grid-row: 2; }

    
    .eco--a .eco__cell--core:nth-child(n) {
        grid-column: 2 / 4;
        grid-row: 2;
        aspect-ratio: auto;
        min-height: 0;
    }

    
    .eco--a .eco__cell:nth-child(8)  { grid-column: 1; grid-row: 3; }
    .eco--a .eco__cell:nth-child(9)  { grid-column: 2; grid-row: 3; }
    .eco--a .eco__cell:nth-child(10) { grid-column: 3; grid-row: 3; }
    .eco--a .eco__cell:nth-child(11) { grid-column: 4; grid-row: 3; }

    
    .eco--a .eco__cell--core img {
        max-width: min(66%, 18rem);
        max-height: 2.25rem;
    }}@media (max-width: 575.98px) {
    
    .eco__inner   { grid-template-columns: minmax(0, 1fr); }
    .eco__num     { grid-column: 1; grid-row: 1; margin-bottom: .5rem; }
    .eco__intro   { grid-column: 1; grid-row: 2; }
    .eco__diagram { grid-column: 1; grid-row: 3; }}@media (min-width: 992px) {
    .eco__inner {
        --eco-shift: 3.75rem;           
        margin-inline: calc(-1 * var(--eco-shift));
    }}@media (min-width: 1460px) {
    .eco__inner {
        --eco-shift: 8.75rem;           
    }}

.hero__panel {
    position: relative;
    isolation: isolate;   

    
    --hero-pad-top: clamp(1rem, 2vw, 1.75rem);
    --hero-pad-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.hero__panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: url("../img/bg-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}@media (min-width: 992px) {
    .hero__panel::before { top: var(--hero-pad-top); }}

html:root .hero__panel::before { display: none; }

.hero__btn.btn-light:hover,
.hero__btn.btn-light:focus-visible {
    border-color: #0035ad;
    background-color: #0035ad;
    color: #fff;
}@media (min-width: 992px) {
    .hero__figure {
        max-width: 88%;
        margin-left: auto;
    }

    
    html:root .hero__figure {
        
        max-width: 100%;
        margin-top: 3rem;

        
        margin-right: -.75rem;
    }}@media (min-width: 992px) {
    .hero__col {
        padding-left: calc(4.75rem - clamp(1.5rem, 4vw, 3rem));

        
        padding-right: 0;
    }

    
    .homepage .hero__title { font-size: 2.25rem; }}@media (min-width: 1460px) {
    
    .hero__col { padding-right: 4rem; }}

.eco--a .eco__grid {
    animation: none;
    animation-timeline: none;
}@media (hover: hover) {
    .eco--a .eco__cell:hover img {
        filter: brightness(0) !important;
        opacity: .6 !important;
    }}@media (min-width: 992px) {
    .hero__title-nb { white-space: nowrap; }}@media (max-width: 991.98px) {
    

    
    .btn-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;

        
        margin-right: -12px;
    }

    
    .mobile-nav__link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    
    .hero__btn {
        min-height: 44px;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    
    .site-footer__list { gap: .75rem; }
    .site-footer__link {
        display: block;
        padding-block: .25rem;
    }

    
    .cards .card__heading { padding-right: 0; }

    
    .cards .row { row-gap: 2.5rem; }}@media (max-width: 575.98px) {
    
    .cards .card__media { }

    
    .ask__submit {
        min-width: 40px;
        min-height: 40px;
    }}

/* Homepage layout rules. These were inline in the page's <head> and are
   moved here so the markup carries no embedded stylesheet. The html:root
   prefix carries no meaning beyond specificity; it always matches. */
html:root .cards { margin-top: 9rem; }

@media (max-width: 767.98px) {
            html:root .cards { margin-top: 5rem; }
        }

html:root .customers {
            padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
        }

.eco--a .eco__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.eco--a .eco__link:focus-visible {
    outline: 2px solid var(--tv-accent);
    outline-offset: 3px;
}

.eco--a .eco__inner {
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid rgba(17, 17, 17, .09);
}

/* Scoped to the homepage. teravera.css now loads site-wide (it is linked from
   _Layout, not from Home - Teravera's @section Head), and /solutions/ and
   /contact-us/ have .cards blocks of their own that were never meant to gain
   this padding. The .homepage class comes from _Layout's <body> tag. */
.homepage .cards { padding-bottom: 4rem; }


/* ============================================================
   FULL-WIDTH PAGE FIGURE — interior pages
   ============================================================

   An image placed in Page Sections, rendered between the page title
   and the body copy by _SectionImage.cshtml (Umbraco).

   ⚠️ THE NEGATIVE MARGINS MIRROR --kinds-shift IN kinds.css AND
      --eco-shift ABOVE IN THIS FILE. Both diagrams reach the
      container's full width by breaking back out of the px-lg-5 /
      px-xxl-9 padding: 3rem + .75rem gutter at >=992px, 8rem +
      .75rem at >=1460px. An image dropped into the same slot has to
      do the same or it lands 60px a side narrower and the two do not
      line up down the page. Below 992px neither shifts, because
      px-lg-5 has no padding there.

      If those spacers ever change, they change in all three places. */
.pagefig {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

.pagefig__figure {
    margin: 0;
}

@media (min-width: 992px) {
    .pagefig__figure { margin-inline: -3.75rem; }
}

/* 1460px, NOT 1400px — this Bootstrap build's xxl breakpoint is
   customised. Must fire at the same width as the diagrams do. */
@media (min-width: 1460px) {
    .pagefig__figure { margin-inline: -8.75rem; }
}

.pagefig__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Optional line under a Section Image, from the block's caption field.
   Lives INSIDE .pagefig__figure so it inherits the figure's negative
   margins and aligns to the image edge, not to the narrower text column.
   Size, weight and colour are .customers__label's, minus the uppercase
   and the letter-spacing, which are wrong for a sentence this long. */
.pagefig__caption {
    margin-top: clamp(.75rem, 1.5vw, 1.125rem);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: #6d6d6d;
}


/* ============================================================
   STANDALONE ECOSYSTEM SECTION — interior pages
   ============================================================

   The ecosystem diagram rendered on its own, inside the body of a
   page, rather than as numbered panel 03 on the homepage. Both
   render the same _Ecosystem.cshtml partial in Umbraco, so there is
   one copy of the markup.

   ⚠️ THE SECTION KEEPS BOTH .eco AND .eco--a.
      .eco declares --tv-ink, --tv-muted and --tv-accent; without it
      the cells lose their colour. .eco--a is not cosmetic either: it
      carries the four-column mobile grid, the animation: none that
      holds the diagram still, the hover treatment and the absolute
      positioning of .eco__link. Drop it and the diagram animates on
      mobile and the click target collapses.

   ⚠️ .eco__inner STAYS TOO, FOR ITS NEGATIVE MARGINS.
      At >=992px it carries margin-inline: -3.75rem (-8.75rem at
      >=1460px), which breaks back out of the px-lg-5 / px-xxl-9
      padding. .eco__diagram is capped at max-width: 63rem, so above
      about 1200px the shift makes no visible difference — but
      between 992 and 1200 it is the difference between 960px and
      840px. Same trick as .kinds__inner and .pagefig__figure.

   What --bare removes is the PANEL: the hanging number, the rule
   above, the rule below, and the grid that placed them. */
.eco--bare {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

/* Specificity note: this has to be (0,2,0) to beat .eco--a .eco__inner,
   which sets the padding-bottom and the grey border-bottom that divide
   panel 03 from the cards on the homepage. Neither belongs mid-article.
   It also has to sit BELOW that rule in the file, which is why this
   block goes at the very end. */
.eco--bare .eco__inner {
    display: block;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* .eco__diagram is margin: clamp(3rem, 6vw, 4.5rem) auto 0 — the top
   value is the numbered panel's rhythm below its heading. There is no
   heading here, so only the top is zeroed; auto stays and keeps the
   diagram centred inside the wrapper. */
.eco--bare .eco__diagram {
    margin-top: 0;
}


/* ============================================================
   STATIC LOGO MATRIX — interior pages
   ============================================================

   The client logos as a plain grid, rendered below a page title by
   _LogoWallStatic.cshtml (Umbraco). Used on About Us.

   ⚠️ THE HOMEPAGE WALL IS NOT TOUCHED BY ANY OF THIS.
      Tom, 2026-09-07: he likes the two drifting rows and does not
      want them changed. Every rule here is scoped to
      .customers--static, which only the interior-page partial
      carries. .customers__row, .customers__track and the drift
      keyframes are not used by the static markup at all.

   ⚠️ .customers AND .customers__item ARE REUSED ON PURPOSE, so the
      logos come out the same size and the same grey as the homepage:
      --logo-w / --logo-h live on .customers, and the per-logo scale
      overrides ([data-logo="boursa-kuwait"] and the rest) are keyed
      off .customers__item. Only the layout differs. */
.customers--static {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);

    /* ⚠️ --logo-h IS RETUNED HERE, AND IT HAS TO BE. Misha, 2026-09-08:
       the wall now sits in the reading column, not the full container,
       so it has ~813px to spend where it used to have 1120. The
       wordmarks came down with the cell on their own — they are bound
       by the cell's own width (see the min(100%) note on
       .customers__logo), and 141px became 108px without anyone asking.

       The CRESTS are not. Boursa Kuwait, Óglaigh na hÉireann and Qatar
       Central Bank are bound by --logo-h × --s, which knows nothing
       about the cell, so at 41px they would have stayed exactly the
       size they were while every wordmark beside them shrank by a
       quarter — three marks suddenly dominating the wall. 31px is
       41 × 0.76, the same ratio the cell imposed on the wordmarks, so
       the two families come down together.

       --logo-w is deliberately LEFT ALONE. On this wall and on the
       homepage both, every wide wordmark is clamped by the cell rather
       than by its own cap, so --logo-w is not the binding value and
       changing it would move nothing. */
    --logo-h: 31px;
}

/* ⚠️ SIX FIXED COLUMNS, NOT auto-fit. This was
   repeat(auto-fit, minmax(9.5rem, 1fr)) until 2026-09-08, on the
   reasoning that Tom asked for "a matrix, depending how many logos
   there are" and auto-fit adapts to the count on its own.

   It does — but it adapts to the WIDTH, and the width just changed.
   In the reading column 12 logos at minmax(9.5rem) land as 4x3, not
   the 6x2 that is on the page now. Measured, not assumed:
   813px available, 152px minimum, 16px gap gives 4 columns.

   auto-fit was also never as tidy as the old comment claimed. At the
   lg container (936px) it resolves to 5 columns, which puts 12 logos
   out as 5+5+2 with a half-empty last row. A fixed count that divides
   12 cannot do that.

   TO CHANGE THE SHAPE: edit the three counts below. They are 6/4/3 —
   all divisors of 12, which is why every row comes out full. Add a
   13th logo and it starts a row of its own; that was true of auto-fit
   too, and the answer either way is to pick a count that divides the
   list. */
.customers__matrix {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    /* Down from clamp(.5rem, 1.5vw, 1rem). The gap is only half the
       space between two neighbouring marks — .customers__item's own
       horizontal padding is the other half — so this reads with the
       .5rem padding below, not on its own. 14px gap + 8px + 8px of
       padding = 30px between marks, against 48px before. */
    gap: clamp(.5rem, 1vw, .875rem);

    margin: 0;
    padding: 0;
    list-style: none;
}

/* .customers__item is a fixed 13.5rem flex item in the drifting
   wall. In the grid the cell decides the width, so the fixed width
   has to come off or the columns will not divide evenly.

   ⚠️ THE min-height IS WHAT SETS THE GAP BETWEEN THE TWO ROWS, and
   it is doing the same job here as it does on the homepage: there is
   no row-gap doing it. Each mark is centred in its cell, so the space
   between row 1 and row 2 is (cell − mark) ÷ 2, twice, plus the grid
   gap. The homepage's 8.625rem left ~124px between two typical 26px
   wordmarks, which is what read as two separate bands rather than one
   wall — Misha, 2026-09-08.

   4.75rem = 76px, less .5rem of padding either side, leaves a 60px
   content box. The tallest mark is Boursa Kuwait at --logo-h 31px ×
   --s 1.45 = 45px, so it clears by 15px. ⚠️ DO NOT GO BELOW 4.5rem
   without moving --logo-h with it, or the cell starts clamping that
   crest instead of its own optical cap and one mark shrinks while the
   others do not — the same trap the base rule documents.

   The padding drops 1rem → .5rem horizontally on purpose: at a 124px
   cell, 1rem either side was eating a quarter of the width the marks
   needed. The grid gap above carries the gutter instead. */
.customers--static .customers__item {
    width: auto;
    min-height: 4.75rem;
    padding: .5rem;
}

/* ⚠️ THE 100% COMES OFF THE HEIGHT HERE, AND ONLY THE HEIGHT.
   Without this the min-height above does nothing: measured 2026-09-08,
   the cells came out 115px tall against a 76px min-height and the rows
   would not close up.

   Why: .customers__logo caps height at min(100%, calc(--logo-h × --s)).
   In a grid track that sizes to its content the percentage is circular
   — the row sizes from the image, the image's cap sizes from the row —
   and Chrome resolves it by measuring the row from the image's RAW
   height, applying the cap only when it paints. The source PNGs are
   several hundred pixels tall, so the rows were being set by the
   assets rather than by any number in this file. Same fault the base
   .customers__item note records from 2026-09-07; it survived here
   because the drifting wall's <a> wrapper, which already dodges it,
   does not exist in the static markup.

   Safe because the calc() was always the binding value on height — the
   base rule's own note says so. max-width keeps its min(100%): there
   the 100% is genuinely load-bearing, and it is what shrinks the
   wordmarks to the narrower cell. */
.customers--static .customers__logo {
    max-height: calc(var(--logo-h) * var(--s, 1));
}

/* Below xl the reading column is the full container, so the wall gets
   wider rather than narrower and the marks can take a little back.
   ⚠️ .customers--static beats the plain .customers responsive blocks
   at the foot of this file on specificity, so those --logo-h values
   (38px, and the 9.5rem/11.5rem cells) never reach this wall. Every
   size it uses at every width is declared here. */
@media (max-width: 991.98px) {
    .customers--static { --logo-h: 34px; }
    .customers__matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .customers--static { --logo-h: 32px; }
    .customers__matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ⚠️ THE BOTTOM BAR WAS CARRYING THE FOOTER'S ENTIRE BOTTOM PADDING.
   .site-footer sets padding-top: 4rem and no bottom at all; the space
   underneath came from .site-footer__bottom's own margin-top: 3rem
   plus padding-bottom: 1.5rem. Remove that bar and the footer ends
   flush against the last line — measured 0px below Bengaluru.

   Scoped with :has() so it is safe either way: while
   .site-footer__bottom exists the rule does not apply, and it takes
   over the moment the bar goes. Verified 2026-09-08 that the div is
   absent from the DOM, not merely empty — the template drops it when
   the Copyright field is blank, so :has() sees nothing and the rule
   fires. */
.site-footer:not(:has(.site-footer__bottom)) {
    padding-bottom: 6rem;
}

/* ============================================================
   FOOTER — column widths at desktop
   ============================================================

   Misha, 2026-09-08: the trading-name paragraph wants more width, and
   the two nav columns want to sit together rather than a third of the
   row apart.

   Measured before: the row is 1472px and every group gets col-xl-3, so
   each is a 368px box carrying about 70px of text. The gap between
   "Software" and "Contact Us" was not spacing anyone chose, it was
   three quarters of two fixed columns standing empty.

   ⚠️ ANCHORED TO .site-footer__brand, NOT nth-child. The groups are a
      Block List and Misha has reordered and re-split them twice today;
      an index would have to be re-checked every time. "The column
      after the logo" and "the one after that" survive it, because the
      brand column is not part of the Block List and cannot move.

   ⚠️ xl ONLY. Below 1200px the groups stack to col-md-6 / col-lg-4 and
      the fixed widths here would fight that. Bootstrap's own breakpoint
      is 1200px; this build's xxl is customised to 1460px but xl is not. */
@media (min-width: 1200px) {
    .site-footer__column {
        flex: 0 0 auto;
        width: auto;
    }

    /* ⚠️ 30rem IS THE BOX, NOT THE TEXT. The 6rem row gutter puts 3rem
       of padding on each side of every column, so the paragraph itself
       measures 30rem − 6rem = 24rem, about 384px against the 272px it
       had. Four lines instead of six. Raising this past about 34rem
       starts giving the legal line a longer measure than is comfortable
       to read at 14px. */
    .site-footer__brand + .site-footer__column {
        width: 30rem;
    }

    /* ⚠️ THIS IS THE DIAL. Smaller percentage moves the pair left,
       larger moves it right. Nothing else in this block needs touching. */
    .site-footer__brand + .site-footer__column + .site-footer__column {
        margin-left: 6%;
    }

    .site-footer__column:last-child {
        margin-right: auto;
    }
}