/* =====================================================================
   SITE CONTENT styles: the partner grid (many logos, slots for logos still being confirmed), the
   Get in Touch note, the Insights switch and the email chooser (assets/components/site-content.js).
   ===================================================================== */

/* partner grid: more, smaller cells so more logos fit (4 across, the invite runs as a band underneath) */
.partners__grid--many .partnerItem { min-height: clamp(118px, 9.5vw, 150px) !important; }
.partners__grid--many .partnerItem__logo { transform: scale(.82); transform-origin: center; }
.partners__grid--many .partnerItem--cta { grid-column: 1 / -1; min-height: 84px !important; }
/* the "Become a partner" tile fills whatever is left of the last row, so an uneven logo count never leaves empty cells */
.partners__grid--many .partnerItem--cta:nth-child(4n + 2) { grid-column: span 3; }
.partners__grid--many .partnerItem--cta:nth-child(4n + 3) { grid-column: span 2; }
.partners__grid--many .partnerItem--cta:nth-child(4n) { grid-column: span 1; }
/* desktop (review 28 Oct 2026): 5 across, so nine logos + the invite make two full rows. Overrides the 4-across grid
   and the 4n hairline rules of the Home / Our Story boards; tablet and phone keep 3 and 2 across. */
@media (min-width: 1025px) {
  .partners__grid.partners__grid--many { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hp .partners__grid--many .partnerItem:nth-child(n), .stx2 .partners__grid--many .partnerItem:nth-child(n) { border-left: 0; border-right: 1px solid #e3e4ea; }
  .hp .partners__grid--many .partnerItem:nth-child(5n + 1), .stx2 .partners__grid--many .partnerItem:nth-child(5n + 1) { border-left: 1px solid #e3e4ea; }
  .partners__grid--many .partnerItem--cta:nth-child(n) { grid-column: 1 / -1; }
  .partners__grid--many .partnerItem--cta:nth-child(5n + 2) { grid-column: span 4; }
  .partners__grid--many .partnerItem--cta:nth-child(5n + 3) { grid-column: span 3; }
  .partners__grid--many .partnerItem--cta:nth-child(5n + 4) { grid-column: span 2; }
  .partners__grid--many .partnerItem--cta:nth-child(5n) { grid-column: span 1; }
}
@media (max-width: 1024px) {
  .partners__grid--many .partnerItem--cta:nth-child(n) { grid-column: 1 / -1; }
  .partners__grid--many .partnerItem--cta:nth-child(3n + 2) { grid-column: span 2; }
  .partners__grid--many .partnerItem--cta:nth-child(3n) { grid-column: span 1; }
}
@media (max-width: 760px) {
  .partners__grid--many .partnerItem--cta:nth-child(n) { grid-column: 1 / -1; }
  .partners__grid--many .partnerItem--cta:nth-child(2n) { grid-column: span 1; }
}
/* a slot waiting for its logo: a quiet dashed frame with the partner's name when known */
.partnerItem--slot { display: grid !important; place-items: center; }
.partnerItem__slot { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 22px; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 10px; color: rgba(255, 255, 255, .7); font: 600 13px/1.2 "Geologica", sans-serif; letter-spacing: .04em; }
.partnerItem__slot b { font-size: 18px; letter-spacing: .02em; color: #fff; }
.partnerItem__slot i { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
/* on the white partner boards (Home, Our Story) the slot is drawn in ink */
.hp .partnerItem__slot, .stx2 .partnerItem__slot { border-color: rgba(17, 19, 31, .22); color: #8a8f9e; }
.hp .partnerItem__slot b, .stx2 .partnerItem__slot b { color: #11131f; }

/* Get in Touch while the form waits for its backend: the fields, the send button and the success state step aside */
:root.ct-empty .contactForm__fields, :root.ct-empty .contactForm__footer, :root.ct-empty .contactSuccess { display: none !important; }
.ctNote { margin-top: 0; border-top: 1px solid #e3e4ea; }   /* the modal body already spaces its children 24px apart */
.ctNote__row { position: relative; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; padding: 24px 0; border-bottom: 1px solid #e3e4ea; color: #11131f; text-decoration: none; }
.ctNote__k { font: 600 11px/1 "Geologica", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a8f9e; }
.ctNote__v { font: 500 clamp(20px, 2vw, 26px)/1.2 "Geologica", sans-serif; letter-spacing: -.015em; }
/* the same arrow disc as the site buttons */
.ctNote__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #4a3dcc; color: #fff; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.ctNote__go svg { width: 18px; height: 18px; display: block; transition: transform .45s cubic-bezier(.65, 0, .25, 1); }
/* hover: a purple line draws under the row and the arrow turns to point right */
.ctNote__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #4a3dcc; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.ctNote__row:hover::after, .ctNote__row:focus-visible::after { transform: scaleX(1); }
.ctNote__row:hover .ctNote__go svg { transform: rotate(45deg); }
/* the modal body itself: even room above and below on every screen */
:root.ct-empty .contactModal__scroll { padding-bottom: 36px !important; }
:root.ct-empty .contactModal__intro { margin-bottom: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 640px) {
  .ctNote { margin-top: -6px; }
  .ctNote__row { grid-template-columns: 1fr auto; row-gap: 8px; column-gap: 12px; padding: 20px 0; }
  .ctNote__k { grid-column: 1 / -1; }
  .ctNote__v { font-size: 20px; }
  :root.ct-empty .contactModal__scroll { padding-bottom: 28px !important; }
}

/* Insights hidden (INSIGHTS in site-content.js): no link to it from the nav, drawer, mega menus or footer */
:root.ins-off :is(.nav, #drawer, .mega, footer) :is(a[href="insights.html"], a[href^="insight-detail.html"]),
:root.ins-off footer li:has(> a[href="insights.html"]),
:root.ins-off #drawer .drawerItem:has(> a[href="insights.html"]) { display: none !important; }

/* email chooser (desktop): a small white card under the address */
.mailMenu { position: fixed; z-index: 2147482500; display: flex; flex-direction: column; min-width: 220px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e3e4ea, 0 18px 40px -16px rgba(14, 16, 32, .35); animation: mailIn .22s cubic-bezier(.2, .8, .2, 1); }
.mailMenu a, .mailMenu button { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 9px; background: none; color: #11131f; font: 500 14px/1.2 "Inter", sans-serif; text-align: left; text-decoration: none; }
.mailMenu a:hover, .mailMenu button:hover { background: #f1f0fd; color: #4a3dcc; }
.mailMenu button { border-top: 1px solid #eef0f4; border-radius: 0 0 9px 9px; margin-top: 4px; }
@keyframes mailIn { from { opacity: 0; transform: translateY(-6px); } }
.ctNote__row--addr .ctNote__v { display: flex; flex-direction: column; gap: 4px; }
.ctNote__row--addr .ctNote__v b { font-weight: 500; }
.ctNote__row--addr .ctNote__v small { font: 400 14px/1.45 "Inter", sans-serif; color: #6b7080; letter-spacing: 0; }
:root.ct-empty .contactModal__lead { margin-bottom: 0 !important; }
/* both office lines in one row, stacked; each number is its own link (a line draws under it on hover) */
.ctNote__row--phones .ctNote__v { display: flex; flex-direction: column; gap: 6px; }
.ctNote__row--phones .ctNote__v a { width: fit-content; color: inherit; text-decoration: none; background: linear-gradient(#4a3dcc, #4a3dcc) 0 100% / 0 2px no-repeat; transition: background-size .5s cubic-bezier(.65, 0, .35, 1), color .3s; }
.ctNote__row--phones .ctNote__v a:hover { color: #4a3dcc; background-size: 100% 2px; }
.ctNote__row--phones .ctNote__go { visibility: hidden; }
.ctNote__row--phones::after { content: none; }

/* text selection in the brand colour: purple with white text; on purple surfaces it flips to white with purple text */
::selection { background: #4a3dcc; color: #fff; -webkit-text-fill-color: #fff; }
.lastCta ::selection, .counter ::selection, .statement ::selection, .indCard ::selection, .coLead__face--bio ::selection,
.btn.sbx--pri ::selection, .partnerItem--cta:hover ::selection, .prx .n3Tab.is-active ::selection { background: #fff; color: #4a3dcc; -webkit-text-fill-color: #4a3dcc; }

/* "Chosen by Leading Enterprises" (review): boxed like the partner grid. Four equal cells with hairlines,
   logos sized to the partner logos. Slots stay content-sized (main.js measures them for the hero fly),
   they only sit centred in their cell; the lines are drawn by the row itself. */
html .chosen:not(.solDHero__logos) { padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; }   /* row spans frame line to frame line */
html .chosen:not(.solDHero__logos) > .chosen__row {
  --s: 1 !important;
  --cl: #e3e4ea;
  position: relative; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: 136px;
  gap: 0 !important; width: 100%; max-width: none !important; padding: 0 !important; margin: 0; zoom: 1 !important;
  justify-content: stretch !important; align-items: center;
  background: linear-gradient(var(--cl), var(--cl)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--cl), var(--cl)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--cl), var(--cl)) 75% 0 / 1px 100% no-repeat;
}
html .chosen:not(.solDHero__logos) > .chosen__row::before,
html .chosen:not(.solDHero__logos) > .chosen__row::after { content: ""; position: absolute; left: calc(-1 * var(--pad-x)); right: calc(-1 * var(--pad-x)); height: 1px; background: var(--cl); pointer-events: none; }
html .chosen:not(.solDHero__logos) > .chosen__row::before { top: 0; }
html .chosen:not(.solDHero__logos) > .chosen__row::after { bottom: 0; }
html .chosen:not(.solDHero__logos) > .chosen__row > .chosen__slot { justify-self: center; align-self: center; }
@media (max-width: 1024px) {
  html .chosen:not(.solDHero__logos) > .chosen__row {
    --s: .82 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 112px;
    background: linear-gradient(var(--cl), var(--cl)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--cl), var(--cl)) 0 50% / 100% 1px no-repeat;
  }
}
@media (max-width: 640px) {
  html .chosen:not(.solDHero__logos) > .chosen__row { --s: .66 !important; grid-auto-rows: 96px; }
}
/* Footer badges (review 27 Oct 2026): only the ISO mark (new, site-content.js 2d) and Fintech Indonesia */
html .ft__certLogo--snap, html .ft__certLogo--iaf, html .ft__certLogo--kan { display: none !important; }
html.sfx .ft__certLogo--iso { height: 52px; }
/* Five client slots (review 27 Oct 2026, site-content.js 2c): five equal cells on desktop; on tablet/phone two columns
   with the fifth cell across both. Standalone client logos (.cyc__face--solo) sit centred in their window instead of
   being cropped from the sprite, and take the same grey (white in the hero) through the shared .cyc__face img filter. */
html .chosen.chosen--5:not(.solDHero__logos) > .chosen__row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  background: linear-gradient(var(--cl), var(--cl)) 20% 0 / 1px 100% no-repeat, linear-gradient(var(--cl), var(--cl)) 40% 0 / 1px 100% no-repeat, linear-gradient(var(--cl), var(--cl)) 60% 0 / 1px 100% no-repeat, linear-gradient(var(--cl), var(--cl)) 80% 0 / 1px 100% no-repeat;
}
@media (max-width: 1024px) {
  html .chosen.chosen--5:not(.solDHero__logos) > .chosen__row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: linear-gradient(var(--cl), var(--cl)) 50% 0 / 1px 66.667% no-repeat, linear-gradient(var(--cl), var(--cl)) 0 33.333% / 100% 1px no-repeat, linear-gradient(var(--cl), var(--cl)) 0 66.667% / 100% 1px no-repeat;
  }
  html .chosen.chosen--5:not(.solDHero__logos) > .chosen__row > .chosen__slot:nth-child(5) { grid-column: 1 / -1; }
}
.cyc__face.cyc__face--solo { display: flex; align-items: center; justify-content: center; }
html .cyc__face.cyc__face--solo img { position: static !important; left: auto !important; top: auto !important; width: auto !important; max-width: 100%; height: calc(var(--lh) * var(--s) * 1px) !important; max-height: 100%; }
html .chosen > .chosen__row .cyc__face.cyc__face--solo { width: calc(var(--lw) * var(--s) * 1px); }
/* Per-logo optical size (--f). Every window is --H tall so a scaled logo never touches its crop edge, and
   the logo is centred in it; all faces in a slot share one height because the flip steps by it. */
html .chosen > .chosen__row { --H: 1.4; }
html .chosen > .chosen__row .cyc__face { --f: 1; }
html .chosen > .chosen__row :is(.cyc, .cyc__face) { height: calc(28 * var(--s) * var(--H) * 1px); }
html .chosen > .chosen__row .cyc { width: calc(var(--cw) * var(--s) * 1.18 * 1px); }
html .chosen > .chosen__row .cyc__face { width: calc(var(--fw) * var(--s) * var(--f) * 1px); }
html .chosen > .chosen__row .cyc__face img { width: calc(624 * var(--s) * var(--f) * 1px); height: calc(28 * var(--s) * var(--f) * 1px); left: calc(var(--fx) * var(--s) * var(--f) * -1px); top: calc(28 * var(--s) * (var(--H) - var(--f)) / 2 * 1px); }
html .chosen > .chosen__row .cyc__face:is([style*="--fx:10.5;"], [style*="--fx:363.2;"]) { --f: 1.12; }   /* Nobu, Zurich */
html .chosen > .chosen__row .cyc__face[style*="--fx:509.6;"] { --f: 1.15; }                              /* Meditap */
html .chosen > .chosen__row .cyc__face[style*="--fx:441.8;"] { --f: 1.35; }                              /* Toko Mama */
/* title one step up the type scale: h5 -> h4 */
html .chosen:not(.solDHero__logos) .chosen__title { font-size: clamp(20px, .38vw + 18.6px, 24px) !important; line-height: 1.3 !important; letter-spacing: -.01em; }
/* no empty strip under the logo grid: the cells run down to the section's end */
html .chosen:not(.solDHero__logos) { padding-bottom: 0 !important; }
html.n3x .chosen.n3xLogos.n3xLogos, html.sla .solHero__logos.chosen.chosen, html body section.chosen, html body div.chosen:not(.solDHero__logos) { padding-bottom: 0 !important; }
/* the title sits in the middle of its box: the same space above it as between it and the logo grid */
html .chosen:not(.solDHero__logos) { gap: 0 !important; padding-top: 56px !important; }
html .chosen:not(.solDHero__logos) > .chosen__title, html .n3x .n3xLogos .chosen__title, html.sla .solHero__logos .chosen__title { margin: 0 0 56px !important; }
@media (max-width: 640px) {
  html .chosen:not(.solDHero__logos) { padding-top: 40px !important; }
  html .chosen:not(.solDHero__logos) > .chosen__title, html .n3x .n3xLogos .chosen__title, html.sla .solHero__logos .chosen__title { margin-bottom: 40px !important; }
}