/* =====================================================================
   SOLUTIONS+ — html.slx (assets/revamp/solution-plus.js): one design for every solution page.
   ===================================================================== */
.slx { --slx-frame: rgba(17, 19, 31, .07); --slx-line: #e3e4ea; }
/* hero: one centred column (heading ≤ 2 lines), no drawing, frame lines */
.slx .advHero { position: relative; isolation: isolate; min-height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: center; padding: 120px 0 64px !important; box-sizing: border-box; }
.slx .advHero::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none; border-left: 1px solid var(--slx-frame); border-right: 1px solid var(--slx-frame); }
.slx .advHero__grid { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
.slx .advHero__copy { grid-column: auto !important; max-width: 1080px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.slx .solHeroArt, .slx .advTrust, .slx .advHero .advStage, .slx .advCrumb { display: none !important; }
.slx .advCrumb { justify-content: center; }
.slx .advHero .advH1 { text-align: center; margin-left: auto; margin-right: auto; max-width: 1080px; font-weight: 500 !important; letter-spacing: -.03em !important; font-size: clamp(40px, 4.3vw, 66px) !important; line-height: 1.06 !important; text-wrap: balance; }
.slx .advHero .advLead { text-align: center; margin-left: auto; margin-right: auto; max-width: 620px; }
.slx .advHero__actions { justify-content: center; }
/* Home's logo row (main.js flips the logos) with Home's frame lines */
.slx .slx-chosen { background-image: linear-gradient(var(--slx-frame), var(--slx-frame)), linear-gradient(var(--slx-frame), var(--slx-frame)); background-size: 1px 100%, 1px 100%; background-position: var(--pad-x) 0, calc(100% - var(--pad-x)) 0; background-repeat: no-repeat; border-top: 1px solid var(--slx-line); border-bottom: 1px solid var(--slx-line); }

/* approach: two equal halves with a centre line, white, one screen tall; the list runs edge to edge in the left half */
.slx .solApproach { min-height: 0 !important; padding: 0 !important; display: block !important; background: #fff !important; }
.slx .solApproach .advView__inner { width: auto !important; max-width: none !important; margin: 0 var(--pad-x) !important; padding: 0 !important; border-left: 1px solid var(--slx-frame); border-right: 1px solid var(--slx-frame); }
.slx .solApproach__row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; height: 100vh; min-height: 640px; max-height: 960px; align-items: stretch !important; margin: 0 !important; }
.slx .slxApL { display: flex; flex-direction: column; justify-content: center; }
.slx .slxApHead { padding: 0 32px 0 24px; }
.slx .slxApHead .advH2 { margin: 0 !important; font-weight: 500 !important; letter-spacing: -.03em !important; font-size: clamp(34px, 3.6vw, 56px) !important; line-height: 1.08 !important; max-width: none !important; }
.slx .solApproach .advTabs { margin: 40px 0 0 !important; max-width: none !important; border-top: 1px solid var(--slx-line); }
.slx .solApproach .advTab { padding: 22px 32px 22px 24px !important; border-bottom: 1px solid var(--slx-line); }
.slx .solApproach .advTab::before { display: none; }
.slx .solApproach .advTab:last-child { border-bottom: 1px solid var(--slx-line); }
.slx .solApproachFig { grid-column: auto !important; border-left: 1px solid var(--slx-line) !important; display: grid !important; place-items: center; margin: 0 !important; padding: 48px 6% !important; }
.slx .solApproachFig .advFig__art { width: 100%; max-width: 520px; }

/* capabilities: the Advisory services cards (dark, a drawing each), 3 across; no FIG labels anywhere */
.slx .advFig__no { display: none !important; }
.slx .solCaps .slxCards { grid-template-columns: repeat(3, 1fr) !important; }
.slx .slxCards .advCard:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.slx .slxCards .advCard:nth-child(n + 4) { border-top: 1px solid var(--adv-night-line, rgba(255, 255, 255, .1)); }
.slx .slxCards .advCard__art { margin-top: 24px; }

/* steps: a big wireframe globe centred above the title */
.slx .rvProc .rvPin__stick { position: sticky; overflow: hidden; isolation: isolate; }

@media (max-width: 900px) {
  .slx .advHero { min-height: 0; padding: 120px 0 56px !important; }
  .slx .advHero .advH1 { font-size: clamp(34px, 9vw, 44px) !important; }
  .slx .solApproach__row { grid-template-columns: 1fr !important; height: auto; max-height: none; min-height: 0; }
  .slx .slxApL { padding-top: 80px; }
  .slx .slxApHead { padding: 0 20px; }
  .slx .solApproach .advTab { padding: 20px !important; }
  .slx .solApproachFig { border-left: 0 !important; border-top: 1px solid var(--slx-line) !important; padding: 40px 20px !important; }
  .slx .solCaps .slxCards { grid-template-columns: 1fr !important; }
  .slx .slxCards .advCard { border-left: 0 !important; padding-left: 0 !important; }
  .slx .slxCards .advCard + .advCard { border-top: 1px solid var(--adv-night-line, rgba(255, 255, 255, .1)); }
  }
.slx .rvCaps__grid[hidden], .slx .rvFaq[hidden], .slx .advTrust[hidden] { display: none !important; }
/* steps: the globe sits above the title (its lower half shows), the content starts below it */
.slx .rvProc .rvPin__stick { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8vh; box-sizing: border-box; }
.slx .rvStatement[hidden], .slx .rvBlocks[hidden] { display: none !important; }
/* steps globe: only its lower half shows, hanging from the top edge, well clear of the text */

.slx .rvProc .rvPin__stick { justify-content: flex-end; padding-bottom: 6vh; }
@media (max-width: 900px) { .slx .slxApL { order: 1; } .slx .solApproachFig { order: 2; } .slx .advHero__grid { flex: none; } }

/* hero holds the logo row at its bottom; one screen tall */
.slx .advHero { min-height: 100vh !important; padding: 72px 0 0 !important; justify-content: flex-start; }
.slx .advHero__grid { flex: 1 1 auto !important; padding: 48px 0; }
.slx .advHero > .slx-chosen { flex: none; margin: 0; }   /* its bottom line meets the approach centre line */
.slx .rvProc[hidden] { display: none !important; }
.slx .slxVProc .rvVProc__grid > .advH2 { position: sticky; top: 140px; }
@media (max-width: 900px) { .slx .advHero { min-height: 0 !important; padding-top: 72px !important; } .slx .advHero__grid { padding: 56px 0; } }
/* steps: a normal section top (the globe space is gone) */
.slx .rvVProc { padding-top: clamp(96px, 10vw, 140px) !important; padding-bottom: clamp(96px, 10vw, 140px) !important; }
/* mobile: the approach drawing comes first, right under the logo row's line — its line goes below it instead */
@media (max-width: 900px) { .slx .solApproach__row .solApproachFig { border-top: 0 !important; border-bottom: 1px solid var(--slx-line) !important; } }

/* ---- approach section, left column v2: heading at the top, the list anchored to the bottom edge, boxed rows ---- */
@media (min-width: 901px) {
  .slx .slxApL { justify-content: space-between; padding: 96px 0 0; }
  .slx .slxApHead { padding: 0 48px 48px 24px; }
  .slx .slxApHead::before { content: "Our approach"; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6b7080; }
  html.slx[lang^="id"] .slxApHead::before { content: "Pendekatan kami"; }
  .slx .slxApHead::after { content: none; }
  .slx .solApproach .advTabs { margin: 0 !important; border-top: 1px solid var(--slx-line); }
  .slx .solApproach .advTab { grid-template-columns: 40px 1fr; column-gap: 16px; padding: 26px 48px 26px 24px !important; transition: background .35s, grid-template-rows .5s cubic-bezier(.65, 0, .25, 1); }
  .slx .solApproach .advTab:last-child { border-bottom: 0; }
  .slx .solApproach .advTab.is-on { background: #fafafc; }
  /* the progress line runs along the bottom of the active row */
  .slx .solApproach .advTab::after { top: auto; bottom: -1px; height: 2px; }
  .slx .solApproach .advTab:last-child::after { bottom: 0; }
  /* numbers sit in a small hairline box */
  .slx .solApproach .advTab__no { align-self: start; width: 32px; height: 26px; display: grid; place-items: center; border: 1px solid var(--slx-line); font-size: 11px; line-height: 1; transition: color .4s, border-color .4s, background .4s; }
  .slx .solApproach .advTab.is-on .advTab__no { border-color: rgba(74, 61, 204, .35); background: #fff; }
  .slx .solApproach .advTab__title { font-size: 20px; }
  .slx .solApproach .advTab__desc { font-size: 15.5px; max-width: 46ch; }
}
@media (min-width: 901px) {
  /* the three rows share the room under the heading as equal boxes; every line of copy shows, the active one in ink */
  .slx .solApproach .advTabs { flex: 1; display: grid; grid-auto-rows: 1fr; }
  .slx .solApproach .advTab { grid-template-rows: auto auto !important; align-content: center; border-bottom: 1px solid var(--slx-line); }
  .slx .solApproach .advTab__desc { opacity: 1 !important; transform: none !important; padding-top: 6px; color: #a2a7b5; transition: color .4s; }
  .slx .solApproach .advTab.is-on .advTab__desc { color: var(--adv-ink2, #555a6b); }
}
@media (max-width: 900px) {
  .slx .slxApHead::before { content: "Our approach"; display: block; margin-bottom: 14px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6b7080; }
  html.slx[lang^="id"] .slxApHead::before { content: "Pendekatan kami"; }
  .slx .solApproach .advTab__no { align-self: start; width: 30px; height: 24px; display: grid; place-items: center; border: 1px solid var(--slx-line); font-size: 10.5px; line-height: 1; }
  .slx .solApproach .advTab.is-on .advTab__no { border-color: rgba(74, 61, 204, .35); }
  .slx .solApproach .advTab.is-on { background: #fafafc; }
}

/* ---- approach v3: icons instead of numbers, a buffer box under the list, the drawing on a dark panel ---- */
.slx .solApproach .advTab__no.is-ic { font-size: 0; }
.slx .solApproach .advTab__no.is-ic svg { width: 16px; height: 16px; }
@media (min-width: 901px) {
  .slx .solApproach .advTab__no { width: 34px; height: 34px; }
  .slx .solApproach .advTabs::after { content: ""; border-top: 1px solid var(--slx-line); margin-top: -1px; }
}
@media (max-width: 900px) { .slx .solApproach .advTab__no { width: 30px; height: 30px; } }
/* icons sit bare, no box around them */
.slx .solApproach .advTab__no.is-ic, .slx .solApproach .advTab.is-on .advTab__no.is-ic { border: 0 !important; background: none !important; width: 22px !important; height: 26px !important; place-items: start; padding-top: 3px; }
.slx .solApproach .advTab__no.is-ic svg { width: 20px; height: 20px; }
.slx .solApproach .advTab { grid-template-columns: 22px 1fr !important; }