/* ==========================================================================
   Nextalent — Our Work
   Page-scoped styles. Loaded after style.css, so it wins ties.
   Design frame: 1280px, 52px gutter → 1176px content column.
   ========================================================================== */

.s-our-work-hero,
.s-our-work-cases,
.s-our-work-governance,
.s-our-work-sectors,
.s-our-work-cta {
  /* measured off the frame — no token covers these warm neutrals */
  --work-band:      #FDF9FA;   /* the page band this layout sits on        */
  --work-beige:     #F4F0E7;   /* tinted "challenge" / "outcome" boxes     */
  --work-beige-2:   #EFE9E1;   /* case-study badge                         */
  --work-quiet:     #EFECE6;   /* small square tags                        */
  --work-border:    #E8E0D4;   /* beige hairline around the case panels    */
  --work-tile-clay: #FBE9D4;   /* icon tile, terracotta family             */
  --work-tile-mint: #E4EFE9;   /* icon tile, green family                  */
  --work-teal:      #3E7E6E;   /* the muted green used for small marks     */
  --work-label:     #A08A79;   /* desaturated brown of the micro-labels    */
  --work-orange:    #F08A5D;   /* the Figma CTA button                     */
}

/* ---- shared small primitives ------------------------------------------- */
.s-our-work-hero__label,
.s-our-work-hero__kicker,
.s-our-work-cases__badge,
.s-our-work-cases__pill,
.s-our-work-cases__focus-label,
.s-our-work-cases__validated,
.s-our-work-governance__eyebrow,
.s-our-work-governance__pill,
.s-our-work-sectors__index,
.s-our-work-sectors__protocol-link {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.4;
}

/* grid/flex children that must be allowed to shrink below their content's
   intrinsic width, so a long unbroken string cannot widen the track */
.s-our-work-hero__copy,
.s-our-work-cases__intro,
.s-our-work-cases__approach {
  min-width: 0;
}

/* an icon tile — a rounded square holding a 18–20px inline svg */
.s-our-work-hero__tile,
.s-our-work-governance__tile,
.s-our-work-sectors__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  flex: none;
}
.s-our-work-hero__tile--clay,
.s-our-work-sectors__tile--clay,
.s-our-work-governance__tile {
  background: var(--work-tile-clay);
  color: var(--terracotta);
}
.s-our-work-hero__tile--forest,
.s-our-work-sectors__tile--forest {
  background: var(--work-tile-mint);
  color: var(--work-teal);
}

/* ==========================================================================
   1 — hero
   ========================================================================== */
.s-our-work-hero {
  padding-block: 40px 56px;
  /* the frame washes a soft lime haze in from the left and a peach haze
     in from the right over an almost-white band */
  background:
    radial-gradient(820px 380px at 4% 22%, rgba(214, 236, 109, .20), transparent 62%),
    radial-gradient(900px 440px at 96% 6%, rgba(211, 136, 94, .22), transparent 64%),
    #FBF7F6;
}

.s-our-work-hero__kickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 30px;
}
.s-our-work-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 10.5px;
  color: var(--ink-900);
}
.s-our-work-hero__kicker svg { flex: none; color: var(--terracotta); }
.s-our-work-hero__kicker--clay { background: transparent; }
.s-our-work-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-900);
  flex: none;
}

.s-our-work-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 56px;
  align-items: start;
}

/* Line 1 is the sans display face, line 2 the serif italic in terracotta —
   both live in ONE text node so the English sentence stays the i18n key,
   and ::first-line restyles the top line.

   The break has to come from the MEASURE, not from the newline: i18n.js
   rewrites every text node with its whitespace-collapsed value on load
   (and the Indonesian string has no newline at all), so the markup newline
   only survives with JavaScript off. max-width is in em so it tracks the
   font-size down the breakpoints: it is wider than line 2 ("Strict
   confidentiality." = 8.45em) and narrower than line 1 plus the next word
   ("Proven impact. Strict" = 10.3em in the sans face), which pins the break
   after the full stop at every width. */
.s-our-work-hero__title {
  white-space: pre-line;
  max-width: 9.3em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--terracotta);
  margin-bottom: 20px;
}
.s-our-work-hero__title::first-line {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink-900);
}

.s-our-work-hero__lede { max-width: 560px; }

.s-our-work-hero__aside { padding-top: 6px; }
.s-our-work-hero__note {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-600);
}
.s-our-work-hero__note + .s-our-work-hero__note { margin-top: 12px; }

.s-our-work-hero__charter {
  display: inline-block;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  color: var(--terracotta);
  transition: color .18s ease;
}
.s-our-work-hero__charter:hover { color: #B96F45; }

/* ---- stat cards -------------------------------------------------------- */
.s-our-work-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.s-our-work-hero__stat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 24px;
  border-radius: var(--radius-lg);
}
.s-our-work-hero__stat-text { min-width: 0; }
.s-our-work-hero__value {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.s-our-work-hero__label {
  font-size: 11px;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.s-our-work-hero__stat-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ==========================================================================
   2 — case studies
   ========================================================================== */
.s-our-work-cases {
  padding-block: 44px 52px;
  background: var(--work-band);
}

.s-our-work-cases__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  column-gap: 56px;
  align-items: end;
  margin-bottom: 30px;
}
.s-our-work-cases__eyebrow { margin-bottom: 12px; }
.s-our-work-cases__note {
  font-size: 15.5px;
  line-height: 1.6;
  padding-bottom: 6px;
}

.s-our-work-cases__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.s-our-work-cases__panel {
  background: var(--surface);
  border: 1px solid var(--work-border);
  border-radius: var(--radius-lg);
  padding: 26px 32px 32px;
}

.s-our-work-cases__panel-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 22px;
}
.s-our-work-cases__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--work-beige-2);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ink-900);
}
.s-our-work-cases__badge-no { color: var(--ink-900); }
.s-our-work-cases__badge-sep,
.s-our-work-cases__badge-kind { color: var(--work-label); }

.s-our-work-cases__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.s-our-work-cases__pill {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--work-quiet);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: #8A857D;
}

.s-our-work-cases__cols {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}

/* ---- left column: the brief -------------------------------------------- */
.s-our-work-cases__brief {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.s-our-work-cases__name { margin-bottom: 14px; }

.s-our-work-cases__client {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
  margin-bottom: 18px;
}
.s-our-work-cases__client svg { flex: none; margin-top: 2px; color: var(--work-teal); }

.s-our-work-cases__challenge {
  background: var(--work-beige);
  border-radius: var(--radius);
  padding: 15px 18px 17px;
}
.s-our-work-cases__box-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--terracotta);
}
.s-our-work-cases__box-title svg { flex: none; }
.s-our-work-cases__box-body {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600);
}

.s-our-work-cases__focus-label {
  margin-top: 20px;
  font-size: 11px;
  color: var(--work-label);
}
.s-our-work-cases__focus {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}

.s-our-work-cases__chips--quiet {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.s-our-work-cases__chip-quiet {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--work-quiet);
  font-size: 10.5px;
  line-height: 1.4;
  color: #6B655C;
}

.s-our-work-cases__mandate {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-400);
}
.s-our-work-cases__mandate-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--work-tile-mint);
  color: var(--work-teal);
  flex: none;
}

/* ---- right column: approach + outcome ---------------------------------- */
.s-our-work-cases__approach-title { margin-bottom: 14px; }

.s-our-work-cases__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.s-our-work-cases__step {
  border: 1px solid var(--line-soft);
  border-left: 2px solid rgba(211, 136, 94, .45);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 13px 16px 15px;
}
.s-our-work-cases__step-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-900);
}
.s-our-work-cases__step-body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
}

.s-our-work-cases__outcome {
  background: var(--work-beige);
  border-radius: var(--radius);
  padding: 17px 20px 19px;
}
.s-our-work-cases__outcome-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
}
.s-our-work-cases__validated {
  font-size: 9px;
  letter-spacing: .13em;
  color: var(--work-label);
}
.s-our-work-cases__quote {
  margin: 11px 0 15px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-700);
}

.s-our-work-cases__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.s-our-work-cases__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-700);
}
.s-our-work-cases__chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.s-our-work-cases__chip--ink::before   { background: var(--ink-900); }
.s-our-work-cases__chip--clay::before  { background: var(--terracotta); }
.s-our-work-cases__chip--teal::before  { background: var(--work-teal); }

/* ==========================================================================
   3 — governance note
   ========================================================================== */
.s-our-work-governance {
  padding-block: 8px 44px;
  background: var(--work-band);
}
.s-our-work-governance__card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 260px;
  column-gap: 20px;
  align-items: start;
  padding: 26px 30px 28px;
  border-radius: var(--radius-lg);
}
.s-our-work-governance__text { padding-top: 2px; }
.s-our-work-governance__eyebrow {
  font-size: 11px;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.s-our-work-governance__title {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 12px;
  max-width: 620px;
}
.s-our-work-governance__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 620px;
}

.s-our-work-governance__pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.s-our-work-governance__pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--work-beige);
  font-size: 9.5px;
  letter-spacing: .11em;
  color: var(--green-900);
}
.s-our-work-governance__pill svg { flex: none; color: var(--work-teal); }

/* ==========================================================================
   4 — sectors
   ========================================================================== */
.s-our-work-sectors {
  padding-block: 8px 56px;
  background: var(--work-band);
}
.s-our-work-sectors__head { margin-bottom: 26px; }
.s-our-work-sectors__eyebrow { margin-bottom: 12px; }
.s-our-work-sectors__title { margin-bottom: 12px; }
.s-our-work-sectors__lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 560px;
}

.s-our-work-sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.s-our-work-sectors__card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  border-radius: var(--radius-lg);
}
.s-our-work-sectors__index {
  margin-top: 18px;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: #A5A09A;
}
.s-our-work-sectors__name {
  margin-top: 8px;
  font-size: 19px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.25;
}
.s-our-work-sectors__body {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-500);
}
.s-our-work-sectors__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}
.s-our-work-sectors__tag {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--work-quiet);
  font-size: 10.5px;
  line-height: 1.4;
  color: #6B655C;
}

.s-our-work-sectors__card--protocol {
  align-self: start;
  background: var(--work-beige);
  border: 1px solid var(--work-border);
}
.s-our-work-sectors__protocol-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--green-900);
}
.s-our-work-sectors__protocol-body {
  margin-top: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-600);
}
.s-our-work-sectors__protocol-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--terracotta);
  transition: gap .18s ease, color .18s ease;
}
.s-our-work-sectors__protocol-link svg { flex: none; }
.s-our-work-sectors__protocol-link:hover { gap: 12px; color: #B96F45; }

/* ==========================================================================
   5 — closing CTA
   ========================================================================== */
.s-our-work-cta { padding-block: 72px 66px; }
.s-our-work-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s-our-work-cta__tag {
  background: #215145;
  color: var(--lime);
  padding: 8px 17px;
  font-size: 10px;
  letter-spacing: .15em;
  margin-bottom: 26px;
}
.s-our-work-cta__title {
  max-width: 760px;
  margin-bottom: 18px;
}
.s-our-work-cta__lede {
  max-width: 600px;
  color: var(--on-dark-muted);
  margin-bottom: 32px;
}

/* the Figma CTA is an orange rounded rectangle, not a brand pill — kept as a
   page-level modifier so .btn itself stays untouched */
.s-our-work-cta__btn {
  height: 54px;
  padding: 0 28px;
  border-radius: var(--radius);
  background: var(--work-orange);
  color: var(--green-900);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.s-our-work-cta__btn:hover { background: #E67D4D; }
.s-our-work-cta__btn svg { flex: none; }

.s-our-work-cta__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 30px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-faint);
}
.s-our-work-cta__note svg { flex: none; margin-top: 2px; color: var(--work-teal); }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1279px) {
  .s-our-work-hero__grid { column-gap: 40px; }
  .s-our-work-cases__head { column-gap: 40px; grid-template-columns: minmax(0, 1fr) 360px; }
  .s-our-work-cases__cols { column-gap: 36px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .s-our-work-governance__card { grid-template-columns: 42px minmax(0, 1fr) 230px; }
}

@media (max-width: 1024px) {
  .s-our-work-hero,
  .s-our-work-cases,
  .s-our-work-governance,
  .s-our-work-sectors,
  .s-our-work-cta { --gutter: 32px; }

  .s-our-work-hero { padding-block: 32px 44px; }
  .s-our-work-hero__title { font-size: 42px; }
  .s-our-work-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
  }
  .s-our-work-hero__lede { max-width: none; }
  .s-our-work-hero__aside { padding-top: 0; }
  .s-our-work-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 34px;
  }

  .s-our-work-cases { padding-block: 36px 40px; }
  .s-our-work-cases__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
  .s-our-work-cases__note { padding-bottom: 0; }
  .s-our-work-cases__panel { padding: 22px 24px 26px; }
  .s-our-work-cases__cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .s-our-work-cases__mandate { padding-top: 20px; }

  .s-our-work-governance__card {
    grid-template-columns: 42px minmax(0, 1fr);
    row-gap: 18px;
    padding: 24px;
  }
  .s-our-work-governance__pills { grid-column: 1 / -1; }
  .s-our-work-governance__title,
  .s-our-work-governance__body { max-width: none; }

  .s-our-work-sectors { padding-block: 4px 44px; }
  .s-our-work-sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

  .s-our-work-cta { padding-block: 56px 52px; }
}

@media (max-width: 640px) {
  .s-our-work-hero,
  .s-our-work-cases,
  .s-our-work-governance,
  .s-our-work-sectors,
  .s-our-work-cta { --gutter: 20px; }

  .s-our-work-hero { padding-block: 26px 36px; }
  .s-our-work-hero__kickers { margin-bottom: 22px; }
  .s-our-work-hero__kicker { font-size: 9.5px; letter-spacing: .1em; }
  /* keeps line 1 on a single visual line down to 320px, so ::first-line
     never splits the sans face mid-sentence */
  .s-our-work-hero__title { font-size: min(32px, 8.6vw); line-height: 1.22; }
  .s-our-work-hero__lede { font-size: 16px; }
  .s-our-work-hero__stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s-our-work-hero__stat { padding: 18px 18px 20px; }

  .s-our-work-cases__title { font-size: 30px; }
  .s-our-work-cases__note { font-size: 15px; }
  .s-our-work-cases__panel { padding: 18px 18px 22px; border-radius: var(--radius); }
  .s-our-work-cases__panel-top { gap: 10px; }
  .s-our-work-cases__badge {
    flex-wrap: wrap;
    font-size: 9.5px;
    letter-spacing: .1em;
    padding: 7px 13px;
  }
  .s-our-work-cases__pill { font-size: 9px; letter-spacing: .1em; }
  .s-our-work-cases__name { font-size: 24px; }
  .s-our-work-cases__step { padding: 12px 14px 14px; }
  .s-our-work-cases__step-title { font-size: 16px; }
  .s-our-work-cases__outcome { padding: 15px 16px 17px; }
  .s-our-work-cases__quote { font-size: 15px; }

  .s-our-work-governance__card {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 18px 22px;
  }
  .s-our-work-governance__title { font-size: 21px; }

  .s-our-work-sectors__title { font-size: 30px; }
  .s-our-work-sectors__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s-our-work-sectors__card { padding: 20px 18px 22px; }

  .s-our-work-cta { padding-block: 44px 42px; }
  .s-our-work-cta__title { font-size: 30px; }
  .s-our-work-cta__lede { font-size: 16px; margin-bottom: 26px; }
  .s-our-work-cta__btn {
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: 14px 20px;
    font-size: 11.5px;
    white-space: normal;
    line-height: 1.4;
  }
  .s-our-work-cta__note { font-size: 11.5px; text-align: left; }
}