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

.s-services-hero,
.s-services-practices,
.s-services-connect,
.s-services-wolf,
.s-services-cta {
  /* Sampled off the frame's own ink, which runs warmer and a shade brighter
     than the shared tokens: accents #006B5E, headings #1B1B1D, body #56433A. */
  --services-teal:  #006B5E;
  --services-ink:   #1B1B1D;
  --services-body:  #56433A;
  --services-meta:  #8A7268;
  /* the mint pip on the diagnosis card */
  --services-mint:  #5FD3B6;
  /* warm panel + chip fills measured off the frame — no token covers them */
  --services-beige: #F4F0E5;
  --services-chip:  #F3EDE2;
  --services-tagbg: #F7F4F6;
  --services-soft:  #F8F6F1;
  --services-sage:  #EEF2E4;

  /* The frame's own column. Hero + practices sit in a 1184px box centred in
     the 1280 frame (48px gutters); the panelled sections below carry the same
     1184px box 8px further left (40 / 56). Both measured off the frame. */
  --gutter: 48px;
}

/* the panelled run: same 1184px box, shifted 8px left of the frame's centre */
.s-services-connect > .container,
.s-services-wolf > .container,
.s-services-cta > .container {
  padding-left: 40px;
  padding-right: 56px;
}

/* ==========================================================================
   1 — hero
   ========================================================================== */
.s-services-hero { padding-block: 47px 74px; }

/* the frame sets this eyebrow in a pill: 459 x 24, teal on the chip fill */
.s-services-hero__eyebrow {
  flex-wrap: wrap;
  gap: 7px;
  row-gap: 2px;
  padding: 6px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--services-chip);
  font-size: 10px;
  line-height: 1.26;
  color: var(--services-teal);
}
.s-services-hero__eyebrow-sep { opacity: .5; }

/* The frame sets the WHOLE headline in Newsreader — line 1 upright and near
   black, the tail italic teal — at 56/64 with the break after "connected".
   Both lines live in ONE text node so the English sentence stays the i18n key,
   and ::first-line does the restyling.

   The break is solved by measure, not by a newline in the markup: in English
   i18n.js restores the raw node verbatim, so a markup newline under pre-line
   would pin the break at the wrong word. max-width therefore sits between the
   width of line 1 and the width of line 1 plus the next word, in em so it
   holds at every font-size step. Measured in Newsreader at -.01em:
     EN  "Connected challenges need a connected" 15.88em / + "approach." 19.9em
   18em sits inside that window with room for the longer Indonesian string,
   which simply breaks a word earlier — harmless now that one face runs the
   whole line and no mid-sentence face change can be split.                   */
.s-services-hero__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.143;
  letter-spacing: -.01em;
  color: var(--services-teal);
  max-width: 18em;
  margin-bottom: 18px;
}
.s-services-hero__title::first-line {
  font-style: normal;
  color: var(--services-ink);
}

.s-services-hero__lede {
  max-width: 750px;
  margin-bottom: 53px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--services-body);
}

.s-services-hero__interlock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.s-services-hero__lock {
  padding: 19px 24px 22px;
  border-radius: var(--radius);
}
.s-services-hero__lock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1px;
}
.s-services-hero__lock-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 5px;
  background: var(--services-chip);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--services-teal);
}
/* 10.8px, not 11.5: at 11.5 the frame's one-line labels wrap to two and every
   interlock card grows 19px taller than the frame's 106 */
.s-services-hero__lock-label {
  font-size: 10.8px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--services-ink);
}
.s-services-hero__lock-body {
  padding-left: 38px;   /* 26px numeral + 12px gap → body aligns with the label */
  font-size: 14.5px;
  line-height: 1.517;
  color: var(--services-body);
}

/* ==========================================================================
   2 — the six practices
   ========================================================================== */
.s-services-practices { padding-block: 10px 100px; }

.s-services-practices__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 447px);
  gap: 48px;
  align-items: end;
  margin-bottom: 33px;
}
/* left cell of the head grid — min-width:0 so a long translated heading wraps
   inside the track instead of widening it */
.s-services-practices__intro { min-width: 0; }
.s-services-practices__eyebrow {
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--services-teal);
}
/* the frame draws this one at 40/48, a step down from the home page's 44 */
.s-services-practices__title {
  max-width: 680px;
  font-size: 38.4px;
  line-height: 1.25;
  color: var(--services-ink);
}
.s-services-practices__note {
  font-size: 16.5px;
  line-height: 1.576;
  color: var(--services-body);
}

.s-services-practices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 27px;
}

.s-services-practices__card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius);
}

.s-services-practices__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
/* the frame's numeral sits in a 40x40 tile, not the 32x26 chip */
.s-services-practices__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 7px;
  border-radius: 10px;
  background: var(--services-chip);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--services-ink);
}
.s-services-practices__tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--services-tagbg);
  font-size: 9.9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-align: right;
  text-transform: uppercase;
  color: var(--services-meta);
}

.s-services-practices__name {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--services-ink);
}
.s-services-practices__desc {
  margin-bottom: 26px;
  font-size: 16.5px;
  line-height: 1.576;
  color: var(--services-body);
}

.s-services-practices__checks {
  display: grid;
  gap: 6px;
  /* the frame's card row is 471 tall — this is what lifts the link off the
     list and down to the card foot that margin-top:auto then pins it to */
  margin-bottom: 47px;
}
.s-services-practices__check {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.467;
  color: var(--services-body);
}
.s-services-practices__tick {
  flex: none;
  margin-top: 2px;
  color: var(--services-teal);
}

.s-services-practices__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--services-teal);
  transition: gap .18s ease, opacity .18s ease;
}
.s-services-practices__link:hover { gap: 12px; opacity: .82; }
/* the longer Indonesian label wraps; the arrow must never be squeezed with it */
.s-services-practices__arrow { flex: none; }

/* ==========================================================================
   3 — how the practices connect  (symptom → diagnosis)
   ========================================================================== */
.s-services-connect { padding-block: 0 96px; }

/* the frame leaves a deep 87px head on this panel and closes it tight */
.s-services-connect__panel {
  padding: 78px 56px 21px;
  border-radius: var(--radius-xl);
  background: var(--services-beige);
}
.s-services-connect__eyebrow {
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--services-teal);
}
.s-services-connect__title {
  margin-bottom: 5px;
  font-size: 27px;
  line-height: 1.25;
  color: var(--services-ink);
}
.s-services-connect__lede {
  max-width: 680px;
  margin-bottom: 24px;
  font-size: 14.8px;
  line-height: 1.45;
  color: var(--services-body);
}

.s-services-connect__grid {
  display: grid;
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  gap: 20px;
  align-items: start;
}

/* ---- the symptom list -------------------------------------------------- */
.s-services-connect__symptoms {
  display: grid;
  align-content: start;
  gap: 9px;
}
.s-services-connect__row { position: relative; }

/* real radios, so the group is keyboard operable and still marks a choice
   with the page script absent */
.s-services-connect__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.s-services-connect__symptom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--services-ink);
  transition: background-color .18s ease, color .18s ease;
}
.s-services-connect__symptom:hover { background: rgba(255, 255, 255, .5); }
/* the symptom labels roughly double in length in Indonesian — let them wrap
   inside the pill rather than push the dial towards the edge */
.s-services-connect__symptom-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.s-services-connect__dial {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(31, 37, 35, .22);
  border-radius: 50%;
}

.s-services-connect__input:checked + .s-services-connect__symptom {
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-weight: 700;
  color: var(--ink-900);
}
.s-services-connect__input:checked + .s-services-connect__symptom .s-services-connect__dial {
  border-color: var(--services-teal);
}
.s-services-connect__input:checked + .s-services-connect__symptom .s-services-connect__dial::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--services-teal);
}
.s-services-connect__input:focus-visible + .s-services-connect__symptom {
  outline: 2px solid var(--services-teal);
  outline-offset: 2px;
}

/* ---- the diagnosis cards ------------------------------------------------
   Every card is in the markup and stacked by default, so the band reads
   correctly with JavaScript off. The inline script sets .is-enhanced on the
   panel, and only then does it become a one-at-a-time switch.              */
.s-services-connect__diagnoses {
  display: grid;
  gap: 16px;
}
.s-services-connect__diagnosis {
  padding: 20px 20px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.s-services-connect__panel.is-enhanced .s-services-connect__diagnosis { display: none; }
.s-services-connect__panel.is-enhanced .s-services-connect__diagnosis.is-current {
  display: block;
  animation: s-services-rise .2s ease both;
}
@keyframes s-services-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-services-connect__panel.is-enhanced .s-services-connect__diagnosis.is-current { animation: none; }
}

.s-services-connect__diagnosis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.s-services-connect__diagnosis-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--services-ink);
}
.s-services-connect__diagnosis-title::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--services-mint);
}
.s-services-connect__diagnosis-meta {
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.s-services-connect__diagnosis-body {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--services-body);
}

.s-services-connect__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.s-services-connect__chip {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 11px 12px 12px;
  border-radius: 8px;
  background: var(--services-chip);
}
.s-services-connect__chip-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--services-teal);
}
.s-services-connect__chip-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--services-ink);
  overflow-wrap: break-word;
}

/* ==========================================================================
   4 — the wolf trainer
   ========================================================================== */
.s-services-wolf { padding-block: 0 95px; }

.s-services-wolf__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 41.5%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.s-services-wolf__copy { padding: 51px 56px 56px; }

.s-services-wolf__tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 17px;
  border-radius: 999px;
  background: var(--services-sage);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.s-services-wolf__mark { flex: none; }
.s-services-wolf__tag-sep { opacity: .55; }

.s-services-wolf__title {
  margin-bottom: 11px;
  font-size: 38.4px;
  line-height: 1.25;
  color: var(--services-ink);
}
.s-services-wolf__lede {
  max-width: none;
  margin-bottom: 28px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--services-body);
}

.s-services-wolf__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.s-services-wolf__feature {
  padding: 16px 12px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--services-soft);
}
.s-services-wolf__icon {
  display: block;
  margin-bottom: 8px;
  color: var(--services-teal);
}
.s-services-wolf__feature-title {
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--services-ink);
}
.s-services-wolf__feature-body {
  font-size: 14.35px;
  line-height: 1.533;
  color: var(--services-body);
}

.s-services-wolf__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* the frame keeps the note beside the button, so the label has to wrap to the
   two lines it draws rather than run the row past the column */
.s-services-wolf__cta {
  height: 57px;
  max-width: 215px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: normal;
  text-align: left;
}
.s-services-wolf__arrow { color: var(--lime); }
.s-services-wolf__note {
  max-width: 330px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--services-meta);
}

.s-services-wolf__media {
  display: block;
  height: 100%;
  margin: 0;
}
.s-services-wolf__photo {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   5 — closing call to action
   ========================================================================== */
.s-services-cta { padding-block: 0 72px; }

.s-services-cta__card {
  padding: 52px 56px 56px;
  border-radius: var(--radius-xl);
  background: var(--green-900);
  background-image: radial-gradient(118% 150% at 86% 48%, var(--green-700), rgba(24, 51, 42, 0) 62%);
  color: var(--on-dark);
}
.s-services-cta__tag {
  margin-bottom: 16px;
  padding: 6px 14px;
  font-size: 9.2px;
  letter-spacing: .15em;
}
.s-services-cta__title {
  margin-bottom: 19px;
  font-size: 55px;
  line-height: 1.16;
  color: var(--on-dark);
}
.s-services-cta__body {
  max-width: 670px;
  margin-bottom: 34px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--on-dark-muted);
}
.s-services-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.s-services-cta__btn {
  height: 40px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.s-services-cta__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.9px;
  line-height: 1.5;
  color: var(--on-dark-faint);
}
.s-services-cta__note::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* ==========================================================================
   6 — responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .s-services-hero,
  .s-services-practices,
  .s-services-connect,
  .s-services-wolf,
  .s-services-cta { --gutter: 32px; }

  /* the panelled run drops back to the shared gutter below the design width */
  .s-services-connect > .container,
  .s-services-wolf > .container,
  .s-services-cta > .container { padding-inline: var(--gutter); }

  .s-services-hero { padding-block: 34px 44px; }
  .s-services-hero__lede { margin-bottom: 32px; font-size: 18px; }
  .s-services-hero__title { font-size: min(44px, 6vw); }

  .s-services-hero__interlock,
  .s-services-practices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .s-services-practices__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .s-services-practices__note { padding-bottom: 0; }

  .s-services-practices__card { padding: 24px 26px 26px; }
  .s-services-practices__desc { font-size: 15px; margin-bottom: 20px; }

  .s-services-connect__panel { padding: 34px 32px 36px; }
  .s-services-connect__grid { grid-template-columns: minmax(0, 1fr); }

  .s-services-wolf__card { grid-template-columns: minmax(0, 1fr); }
  .s-services-wolf__copy { padding: 34px 32px 36px; }
  .s-services-wolf__title { font-size: 32px; }
  .s-services-wolf__lede { font-size: 17px; }
  .s-services-wolf__photo { min-height: 320px; }

  .s-services-cta__card { padding: 36px 32px 38px; }
  .s-services-cta__title { font-size: 36px; }
  .s-services-cta__body { font-size: 17px; }
  .s-services-cta__btn { height: 48px; }
}

@media (max-width: 640px) {
  .s-services-hero,
  .s-services-practices,
  .s-services-connect,
  .s-services-wolf,
  .s-services-cta { --gutter: 20px; }

  .s-services-hero__title { font-size: min(34px, 7.4vw); }
  .s-services-hero__lede { font-size: 16px; margin-bottom: 28px; }

  .s-services-hero__interlock,
  .s-services-practices__grid,
  .s-services-connect__chips,
  .s-services-wolf__features { grid-template-columns: minmax(0, 1fr); }

  .s-services-practices__title { font-size: 32px; }
  .s-services-practices__card { padding: 20px 20px 22px; }

  .s-services-connect__panel { padding: 26px 20px 28px; }
  .s-services-connect__title { font-size: 26px; }
  .s-services-connect__symptom { padding: 13px 14px; font-size: 14px; }
  .s-services-connect__diagnosis { padding: 18px 18px 20px; }
  .s-services-connect__diagnosis-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .s-services-wolf__copy { padding: 26px 20px 28px; }
  .s-services-wolf__title { font-size: 27px; }
  .s-services-wolf__lede { font-size: 15px; }
  .s-services-wolf__foot { gap: 16px; }
  .s-services-wolf__cta { width: 100%; max-width: none; height: auto; min-height: 54px; }
  .s-services-wolf__note { max-width: none; }
  .s-services-wolf__photo { min-height: 240px; }

  .s-services-cta__card { padding: 28px 20px 30px; }
  .s-services-cta__title { font-size: 30px; }
  .s-services-cta__body { font-size: 15px; }
  .s-services-cta__actions { align-items: flex-start; gap: 14px; }
  .s-services-cta__btn { width: 100%; }
}