/* ==========================================================================
   Nextalent — "How We Work"
   Page styles only. Loaded after style.css, so it wins ties.
   Design frame: 1280px. Tokens and primitives come from base.css.
   ========================================================================== */

.s-how-we-work-hero,
.s-how-we-work-method,
.s-how-we-work-expect,
.s-how-we-work-models,
.s-how-we-work-impact,
.s-how-we-work-governance,
.s-how-we-work-cta {
  /* band colours the design uses that no token covers.
     Beige measured off the frame at #F3EDE2 (x=12 inside the expect and
     governance bands), not the #F5EDE2 that was assumed. */
  --hww-beige:  #F3EDE2;   /* "what you can expect" + governance band        */
  --hww-warm:   #FAF7F2;   /* engagement-models band / hero wash             */
  --hww-tile:   #F7F1E9;   /* small icon tiles on a light card               */

  /* This frame does NOT use the 52px site gutter. Measured on the reference:
     every band's content runs x=88 → 1190, i.e. an 1104px column inset 88px
     on both sides (card grid, headings, ledes, dark CTA panel all agree).
     The hero sits on the same 88, not 16px further in. */
  --gutter:      88px;
  --gutter-hero: 88px;
}

/* Indonesian compounds ("Whistleblower", "mengevaluasi") are long; let any
   heading or body line break rather than widen the page. */
.s-how-we-work-hero :where(h1, h2, h3, p),
.s-how-we-work-method :where(h2, h3, p),
.s-how-we-work-expect :where(h2, h3, p),
.s-how-we-work-models :where(h2, h3, p),
.s-how-we-work-impact :where(h2, h3, p),
.s-how-we-work-governance :where(h2, h3, p),
.s-how-we-work-cta :where(h2, h3, p) { overflow-wrap: break-word; }

/* The column wrappers the markup hangs on. Each one is a grid or flex child
   holding prose, so it needs an explicit min-width:0 — the default `auto`
   floors a track at its longest word, and the Indonesian copy has words long
   enough ("Whistleblower", "mengkombinasikan") to push a column past its
   share and the band into a horizontal scroll. */
.s-how-we-work-hero__copy,
.s-how-we-work-method__head,
.s-how-we-work-expect__intro,
.s-how-we-work-models__formats-text,
.s-how-we-work-impact__intro,
.s-how-we-work-governance__item,
.s-how-we-work-cta__copy { min-width: 0; }

/* --------------------------------------------------------------------------
   Serif heading scale for this frame.
   Same strings measured on both renders: "Understand" 193 vs 220, "practical."
   145 vs 166, "issue." 84 vs 96, "change" 112 vs 127, and the centred
   "Three ways to work together" 463 vs 529 - a flat 0.878 against .h-serif-lg
   at 44px, so the frame draws 38.5px. Its line boxes step 48px (method
   heading ink tops 774 -> 822), which is 1.247, not the 1.2 of the utility.
   The dark CTA heading scales the same way: a two-line block 91px tall
   against 107, so .h-serif-xl's 48px is 42px here.
   -------------------------------------------------------------------------- */
.s-how-we-work-method__title,
.s-how-we-work-expect__title,
.s-how-we-work-models__title,
.s-how-we-work-impact__title,
.s-how-we-work-governance__title {
  font-size: 38.5px;
  line-height: 48px;
}
.s-how-we-work-cta__title {
  font-size: 42px;
  line-height: 50px;
}

/* The eyebrows go down the same step: "START THE DIALOGUE" 150px against 160,
   the hero kicker 317 against 342. */
.s-how-we-work-method__eyebrow,
.s-how-we-work-expect__eyebrow,
.s-how-we-work-models__eyebrow,
.s-how-we-work-impact__eyebrow,
.s-how-we-work-governance__eyebrow,
.s-how-we-work-cta__eyebrow { font-size: 10px; }

/* Frame draws the eyebrow lettering dark brown with a teal dot, not the
   terracotta of the shared utility (sampled #56433A text / #006B5E dot). */
.s-how-we-work-method__eyebrow,
.s-how-we-work-models__eyebrow,
.s-how-we-work-impact__eyebrow,
.s-how-we-work-governance__eyebrow { color: #56433A; }
.s-how-we-work-method__eyebrow::before,
.s-how-we-work-models__eyebrow::before,
.s-how-we-work-impact__eyebrow::before,
.s-how-we-work-governance__eyebrow::before { background: #006B5E; }
.s-how-we-work-expect__eyebrow { color: #9D4408; }

/* ==========================================================================
   1 — hero
   ========================================================================== */

.s-how-we-work-hero {
  background:
    radial-gradient(120% 90% at 42% 88%, rgba(211, 136, 94, .10), transparent 62%),
    var(--hww-warm);
}
.s-how-we-work-hero__inner { padding-block: 47px 48px; }

.s-how-we-work-hero__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.s-how-we-work-hero__kicker-text {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  /* frame ink 317px wide against 342px here at 11px -> 0.93x */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--green-900);
}
.s-how-we-work-hero__kicker-rule {
  flex: none;
  width: 92px;
  height: 1px;
  background: var(--line);
}

/* Frame: note card 342px wide, flush with the content right edge at x=1190,
   its box bottom level with the lede's, so the row is end-aligned not centred.
   The 672px left column is what makes the lede break after "...solution. We". */
.s-how-we-work-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 342px;
  gap: 90px;
  align-items: end;
}

/* All three lines are Newsreader in the frame, not just line 2: the build drew
   lines 1 and 3 in the sans bold. The italic line is the same string in both
   renders - 345px / 41px tall against 318 / 38 at 52px - so the frame is
   drawing 56px, and its line boxes step 64px (1.143). */
.s-how-we-work-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -.01em;   /* roman lines came out 1.8% wide at normal */
  margin-bottom: 26px;
}
.s-how-we-work-hero__line { display: block; }

/* frame lede ink 18px tall stepping 31px, against 17/29 at 18px.
   At 19px the cap heights agree but the frame's glyph run is still 6.5% wider
   ("The ... solution. We" = 619px there, 581 here), which is why it breaks
   after "We" and the build carried "agree" up. .03em closes exactly that gap
   (66 chars x .57px = 38px) and hands the break back. */
.s-how-we-work-hero__lede {
  max-width: none;
  font-size: 19px;
  line-height: 31px;
  letter-spacing: .03em;
}

/* note card ------------------------------------------------------------- */
.s-how-we-work-hero__note {
  padding: 24px 26px 26px;
  border-radius: var(--radius-lg);
}
.s-how-we-work-hero__note-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  color: var(--ink-900);
}
.s-how-we-work-hero__note-icon { flex: none; color: var(--green-700); }
/* frame card body ink 13px tall stepping 22px, against 14/25 at 15px */
.s-how-we-work-hero__note-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* three pillars --------------------------------------------------------- */
.s-how-we-work-hero__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.s-how-we-work-hero__pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.s-how-we-work-hero__pillar-label {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-900);
}
.s-how-we-work-hero__pillar-label::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-700);
}
.s-how-we-work-hero__pillar-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-400);
}

/* ==========================================================================
   2 — methodology
   ========================================================================== */

.s-how-we-work-method { background: var(--surface); }
.s-how-we-work-method__inner { padding-block: 37px 56px; }

.s-how-we-work-method__eyebrow { margin-bottom: 9px; }
.s-how-we-work-method__title { max-width: 620px; }

.s-how-we-work-method__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-top: 13px;
}
/* frame lede ink 15px tall stepping 26px, against 14/24 at 15px. Both renders
   now break identically (".. slide deck" / "documentation.") but the frame's
   first line carries 562px of ink to this build's 540, so .02em of tracking
   lines the two up without moving the break. */
.s-how-we-work-method__lede {
  max-width: 600px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .02em;
  color: var(--ink-500);
}
.s-how-we-work-method__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-400);
  white-space: nowrap;
}

.s-how-we-work-method__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;                /* frame cards 256px wide at x 89/371/653/934 */
  margin-top: 68px;
}
/* The frame fills these cards with the warm wash and hairlines them, where the
   build had them white with a shadow - 4 x 256x305px of 255 against 250,247,242
   was most of band y=1000's error on its own. */
.s-how-we-work-method__card {
  padding: 34px 24px 28px;
  border: 1px solid #E8E0D5;
  border-radius: var(--radius-lg);
  background: var(--hww-warm);
  box-shadow: none;
}
.s-how-we-work-method__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.s-how-we-work-method__num {
  font-family: var(--serif);
  font-size: 42px;          /* frame figure ink 28px tall against 24 at 36px */
  line-height: 1;
  color: #C7DBCF;
}
.s-how-we-work-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--hww-beige);   /* frame tile #F3EDE2, not #F7F1E9 */
  color: #56433A;                 /* frame draws this glyph dark brown */
}
.s-how-we-work-method__name {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink-900);
}
/* frame body ink steps 26px, against 22.4 at 14px, which is also what makes it
   run to four lines where the build managed three */
.s-how-we-work-method__body {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-500);
}

/* ==========================================================================
   3 — what you can expect
   ========================================================================== */

.s-how-we-work-expect { background: var(--hww-beige); }
.s-how-we-work-expect__inner {
  display: grid;
  /* frame card column runs x 568 -> 1192, i.e. 624px, leaving 424 on the left */
  grid-template-columns: minmax(0, 1fr) 624px;
  gap: 56px;
  align-items: start;
  padding-block: 54px 52px;
}

.s-how-we-work-expect__eyebrow { margin-bottom: 16px; }
/* frame sets this heading as "What you can expect from" / "us" - 429px of ink
   on line 1 - so the measure has to clear 429 and stop short of 474 */
.s-how-we-work-expect__title { max-width: 450px; }
/* frame lede ink 17px tall stepping 31px, against 14/24 at 15px */
.s-how-we-work-expect__lede {
  max-width: 450px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 31px;
}

.s-how-we-work-expect__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
}
.s-how-we-work-expect__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--green-700);
}
.s-how-we-work-expect__chip-icon { flex: none; }

.s-how-we-work-expect__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 25px;           /* frame cards 299px wide at x 569 and 893 */
}
.s-how-we-work-expect__card {
  padding: 20px 22px 22px;
  border-radius: var(--radius-lg);
}
.s-how-we-work-expect__card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-900);
}
.s-how-we-work-expect__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: #E7EFE4;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--green-700);
}
.s-how-we-work-expect__card-body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
}

/* ==========================================================================
   4 — engagement models
   ========================================================================== */

.s-how-we-work-models { background: var(--hww-warm); }
.s-how-we-work-models__inner { padding-block: 64px 46px; }

.s-how-we-work-models__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s-how-we-work-models__eyebrow { margin-bottom: 16px; }
/* frame sets this on ONE centred line, x 271 -> 1008 */
.s-how-we-work-models__lede {
  max-width: 820px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-500);
}

.s-how-we-work-models__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;                /* frame cards 346px at x 88 / 466 / 845 */
  align-items: stretch;
  margin-top: 46px;
}
.s-how-we-work-models__item {
  position: relative;
  display: flex;
}
.s-how-we-work-models__item--featured { margin-block: -14px; }

.s-how-we-work-models__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  color: var(--green-900);
  white-space: nowrap;
}

.s-how-we-work-models__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 26px 26px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.s-how-we-work-models__card--dark {
  background: var(--green-900);
  border-color: transparent;
  color: var(--on-dark);
}

.s-how-we-work-models__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.s-how-we-work-models__tag {
  padding: 7px 13px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  background: var(--hww-tile);
  border-color: transparent;
  color: var(--ink-700);
}
.s-how-we-work-models__tag::before { display: none; }
.s-how-we-work-models__tag.tag--dark { background: var(--green-700); color: var(--lime); }

.s-how-we-work-models__icon {
  flex: none;
  color: var(--ink-900);
}
.s-how-we-work-models__icon--dark { color: var(--lime); }

.s-how-we-work-models__name { margin-top: 24px; }
.s-how-we-work-models__card--dark .s-how-we-work-models__name { color: var(--on-dark); }

.s-how-we-work-models__body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
}
.s-how-we-work-models__card--dark .s-how-we-work-models__body { color: var(--on-dark-muted); }

.s-how-we-work-models__best {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.s-how-we-work-models__card--dark .s-how-we-work-models__best { border-top-color: var(--line-dark); }

.s-how-we-work-models__best-label {
  margin-bottom: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-400);
}
.s-how-we-work-models__card--dark .s-how-we-work-models__best-label { color: var(--on-dark-faint); }

.s-how-we-work-models__best-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600);
}
.s-how-we-work-models__card--dark .s-how-we-work-models__best-text { color: var(--on-dark-muted); }

.s-how-we-work-models__duration {
  margin-top: auto;
  padding-top: 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-700);
}
.s-how-we-work-models__card--dark .s-how-we-work-models__duration { color: var(--lime); }

/* tailored delivery formats --------------------------------------------- */
.s-how-we-work-models__formats {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 36px;
  padding: 22px 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--hww-beige);
}
.s-how-we-work-models__formats-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--green-700);
}
.s-how-we-work-models__formats-title {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-900);
}
.s-how-we-work-models__formats-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-600);
}

/* ==========================================================================
   5 — impact & evidence
   ========================================================================== */

.s-how-we-work-impact { background: var(--surface); }
.s-how-we-work-impact__inner {
  display: grid;
  /* frame step column runs x 568 -> 1192, the same 624px the expect cards use */
  grid-template-columns: minmax(0, 1fr) 624px;
  gap: 64px;
  align-items: center;
  padding-block: 58px 60px;
}

.s-how-we-work-impact__eyebrow { margin-bottom: 16px; }
.s-how-we-work-impact__title { max-width: 420px; }
.s-how-we-work-impact__lede {
  max-width: 460px;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.7;
}
.s-how-we-work-impact__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-700);
}
.s-how-we-work-impact__chip-icon { flex: none; }

.s-how-we-work-impact__steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* frame fills the steps with the warm wash over the white band, not white */
.s-how-we-work-impact__step {
  padding: 18px 22px 20px;
  border: 1px solid #E8E0D5;
  border-radius: var(--radius-lg);
  background: var(--hww-warm);
}
.s-how-we-work-impact__step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.s-how-we-work-impact__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E7EFE4;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-700);
}
.s-how-we-work-impact__step-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-400);
}

.s-how-we-work-impact__step-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.s-how-we-work-impact__step-text { min-width: 0; }
.s-how-we-work-impact__step-title { font-size: 24px; }
.s-how-we-work-impact__step-body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-500);
}

.s-how-we-work-impact__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--green-700);
  white-space: nowrap;
}

.s-how-we-work-impact__arrow {
  display: flex;
  justify-content: center;
  padding-block: 8px;
  color: var(--ink-300);
}

/* ==========================================================================
   6 — governance & trust
   ========================================================================== */

.s-how-we-work-governance {
  background: var(--hww-beige);
  padding-block: 58px 34px;
}
/* frame panel inset: eyebrow dot at x=146 inside a panel starting at x=89 */
.s-how-we-work-governance__panel {
  padding: 44px 57px 46px;
  border-radius: var(--radius-xl);
}

.s-how-we-work-governance__eyebrow { margin-bottom: 16px; }
.s-how-we-work-governance__title { max-width: 720px; }
/* frame lede ink steps 31px over three lines (build: 26px over two) */
.s-how-we-work-governance__lede {
  max-width: 750px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 31px;
}

.s-how-we-work-governance__label {
  margin-top: 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-400);
}

.s-how-we-work-governance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 30px;
}
.s-how-we-work-governance__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background: var(--hww-tile);
  color: var(--green-700);
}
.s-how-we-work-governance__item-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-900);
}
.s-how-we-work-governance__item-body {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-500);
}

/* ==========================================================================
   7 — start the dialogue
   ========================================================================== */

.s-how-we-work-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 56px;
  align-items: center;
  padding-block: 62px 54px;
}

.s-how-we-work-cta__eyebrow { margin-bottom: 18px; }
.s-how-we-work-cta__title { max-width: 620px; }
.s-how-we-work-cta__lede {
  max-width: 540px;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-dark-muted);
}

.s-how-we-work-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.s-how-we-work-cta__btn { white-space: normal; text-align: center; }
.s-how-we-work-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark-muted);
  transition: gap .18s ease, color .18s ease;
}
.s-how-we-work-cta__link:hover { gap: 12px; color: var(--on-dark); }
.s-how-we-work-cta__link-arrow { flex: none; }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .s-how-we-work-hero__title { font-size: 44px; }
  .s-how-we-work-hero__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
  .s-how-we-work-method__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-how-we-work-expect__inner { gap: 40px; }
  .s-how-we-work-governance__panel { padding: 36px 32px 38px; }
  .s-how-we-work-governance__grid { gap: 28px; }
}

@media (max-width: 1024px) {
  /* the shared .container keeps its 52px gutter at every width, so each band
     narrows its own inset the way the Home page sections do */
  .s-how-we-work-hero__inner,
  .s-how-we-work-method__inner,
  .s-how-we-work-expect__inner,
  .s-how-we-work-models__inner,
  .s-how-we-work-impact__inner,
  .s-how-we-work-governance .container,
  .s-how-we-work-cta__inner { padding-inline: 32px; }

  .s-how-we-work-hero__inner { padding-block: 28px 40px; }
  .s-how-we-work-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s-how-we-work-hero__note { max-width: 520px; }
  .s-how-we-work-hero__pillars { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 34px; }
  .s-how-we-work-hero__pillar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

  .s-how-we-work-method__inner { padding-block: 38px 40px; }
  .s-how-we-work-method__grid { margin-top: 32px; }

  .s-how-we-work-expect__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 44px 44px; }
  .s-how-we-work-expect__title,
  .s-how-we-work-expect__lede { max-width: none; }

  .s-how-we-work-models__inner { padding-block: 48px 40px; }
  .s-how-we-work-models__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 34px; }
  .s-how-we-work-models__item--featured { margin-block: 0; margin-top: 14px; }

  .s-how-we-work-impact__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 46px 48px; }
  .s-how-we-work-impact__title,
  .s-how-we-work-impact__lede { max-width: none; }

  .s-how-we-work-governance { padding-block: 44px 28px; }
  .s-how-we-work-governance__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .s-how-we-work-cta__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px 44px; }
  .s-how-we-work-cta__title,
  .s-how-we-work-cta__lede { max-width: none; }
}

@media (max-width: 640px) {
  .s-how-we-work-hero__inner,
  .s-how-we-work-method__inner,
  .s-how-we-work-expect__inner,
  .s-how-we-work-models__inner,
  .s-how-we-work-impact__inner,
  .s-how-we-work-governance .container,
  .s-how-we-work-cta__inner { padding-inline: 24px; }

  /* Indonesian runs long: drop the serif headings a step so no single word
     has to outrun the column */
  .s-how-we-work-method__title,
  .s-how-we-work-expect__title,
  .s-how-we-work-models__title,
  .s-how-we-work-impact__title,
  .s-how-we-work-governance__title,
  .s-how-we-work-cta__title { font-size: 30px; line-height: 1.22; }
  .s-how-we-work-impact__step-title { font-size: 21px; }

  .s-how-we-work-hero__kicker { flex-wrap: wrap; gap: 10px; }
  .s-how-we-work-hero__kicker-text { letter-spacing: .12em; }
  .s-how-we-work-hero__kicker-rule { display: none; }
  .s-how-we-work-hero__title { font-size: 34px; line-height: 1.2; }
  .s-how-we-work-hero__note { padding: 20px 20px 22px; }
  .s-how-we-work-hero__pillar { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .s-how-we-work-method__meta { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
  .s-how-we-work-method__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .s-how-we-work-method__card { padding: 22px 20px 24px; }

  .s-how-we-work-expect__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .s-how-we-work-models__card { padding: 22px 20px 24px; }
  .s-how-we-work-models__card-top { flex-wrap: wrap; gap: 10px; }
  .s-how-we-work-models__formats { flex-direction: column; gap: 14px; padding: 20px; }

  .s-how-we-work-impact__step { padding: 16px 18px 18px; }
  .s-how-we-work-impact__step-main { flex-direction: column; gap: 14px; }
  .s-how-we-work-impact__pill { white-space: normal; }

  .s-how-we-work-governance__panel { padding: 28px 22px 30px; border-radius: var(--radius-lg); }
  .s-how-we-work-governance__item-title { font-size: 19px; }

  .s-how-we-work-cta__btn { width: 100%; height: auto; min-height: 52px; padding-block: 12px; }
}

@media (max-width: 400px) {
  .s-how-we-work-hero__inner,
  .s-how-we-work-method__inner,
  .s-how-we-work-expect__inner,
  .s-how-we-work-models__inner,
  .s-how-we-work-impact__inner,
  .s-how-we-work-governance .container,
  .s-how-we-work-cta__inner { padding-inline: 18px; }

  .s-how-we-work-hero__title { font-size: 30px; }
  .s-how-we-work-method__title,
  .s-how-we-work-expect__title,
  .s-how-we-work-models__title,
  .s-how-we-work-impact__title,
  .s-how-we-work-governance__title,
  .s-how-we-work-cta__title { font-size: 26px; }
  .s-how-we-work-governance__panel { padding: 24px 18px 26px; }
  .s-how-we-work-models__ribbon { font-size: 9px; letter-spacing: .1em; }
}

/* base.css already zeroes every transition under prefers-reduced-motion, which
   leaves the CTA link snapping to its wider hover gap. Hold the gap steady so
   the arrow does not jump for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .s-how-we-work-cta__link:hover { gap: 8px; }
}