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

.s-talent-acquisition-hero,
.s-talent-acquisition-risk,
.s-talent-acquisition-focus,
.s-talent-acquisition-impact,
.s-talent-acquisition-quote,
.s-talent-acquisition-connect,
.s-talent-acquisition-cta {
  /* This practice frame runs on a saturated teal that no token covers: it is
     the hero CTA, the serif half of the headline, the meter fills and the
     avatar. --green-900 is the darker, greyer brand green and stays on the
     header button and the closing band. Measured off the frame. */
  --ta-teal:        #076A5B;
  --ta-teal-ink:    #05564A;   /* hover                                       */
  --ta-mint:        #6FD9C2;   /* the teal read back out of the dark card     */

  /* warm beige band + the inset panels inside the white cards — measured off
     the frame, no token covers either */
  --ta-beige:       #F4EEE2;
  --ta-inset:       #F6F1E9;

  /* The metric card is NOT the brand green: sampled across both captures it is
     a neutral near-black (#1D1D1F / #242426, R=G=B), and the only colour on it
     is the mint glow in the top-right corner. */
  --ta-ink:         #1D1D1F;

  /* the three card rules, left to right */
  --ta-rule-1:      #7C4E2A;
  --ta-rule-2:      #235C4D;
  --ta-rule-3:      #D7A582;

  --ta-label:       #9C8674;   /* muted brown on the pills                    */
}

/* ---- shared small primitives ------------------------------------------- */
.s-talent-acquisition-hero__stat-label,
.s-talent-acquisition-hero__caption,
.s-talent-acquisition-risk__metric-eyebrow,
.s-talent-acquisition-risk__bar-head,
.s-talent-acquisition-focus__phase,
.s-talent-acquisition-focus__deliverables-title,
.s-talent-acquisition-impact__badge,
.s-talent-acquisition-impact__caption,
.s-talent-acquisition-connect__pill {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* the serif card titles across the page */
.s-talent-acquisition-focus__name,
.s-talent-acquisition-impact__name,
.s-talent-acquisition-connect__name {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink-900);
  overflow-wrap: break-word;
}

/* base.css resets p / figure / ul but not blockquote, which still carries the
   browser's own 1em 40px margin — both pull quotes need it cleared */
.s-talent-acquisition-hero__note,
.s-talent-acquisition-quote__text {
  margin: 0;
  overflow-wrap: break-word;
}

/* ==========================================================================
   1 — hero
   ========================================================================== */
.s-talent-acquisition-hero { padding-block: 39px 48px; }

.s-talent-acquisition-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 373px;
  gap: 56px;
  align-items: start;
}

.s-talent-acquisition-hero__eyebrow {
  font-size: 10.5px;
  letter-spacing: .15em;
  margin-bottom: 32px;
}

/* Both lines are Newsreader in this frame — upright ink on line 1, italic in the
   practice teal on line 2. (This is NOT the site's .h-display pattern, where
   line 1 is the bold sans; the capture clearly shows a serif on both lines, and
   52px is the size that reproduces its measured ink box.) Both halves are one
   row of the client's sheet, so each line keeps its own text node and the
   script at the foot of the page writes the Indonesian back into them. */
.s-talent-acquisition-hero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-size: 53.3px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ink-900);
  margin-bottom: 22px;
}
.s-talent-acquisition-hero__line--serif {
  font-style: italic;
  color: var(--ta-teal);
}

/* the frame sets this lede a step above the site's .lede (18/1.6): its ink
   measures 1.12x the build's on every one of the three lines, and the measure
   widens with it so the wrap stays identical. */
.s-talent-acquisition-hero__lede {
  max-width: 694px;
  font-size: 20px;
  line-height: 1.55;
  margin-bottom: 44px;
}

.s-talent-acquisition-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 51px;
}
.s-talent-acquisition-hero__cta,
.s-talent-acquisition-hero__cta-2 {
  height: 43px;
  padding: 0 21px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.s-talent-acquisition-hero__cta {
  background: var(--ta-teal);
  color: var(--on-dark);
}
.s-talent-acquisition-hero__cta:hover { background: var(--ta-teal-ink); }

.s-talent-acquisition-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
}
.s-talent-acquisition-hero__stat-value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1px;
}
.s-talent-acquisition-hero__stat-value--ink        { color: var(--ink-900); }
.s-talent-acquisition-hero__stat-value--teal       { color: var(--ta-teal); }
.s-talent-acquisition-hero__stat-value--terracotta { color: var(--terracotta); }

.s-talent-acquisition-hero__stat-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-400);
}

/* ---- the index card ---------------------------------------------------- */
.s-talent-acquisition-hero__panel {
  /* the frame drops the panel below the eyebrow's line rather than aligning it
     to the grid top, and insets its contents by 24px, not 14 */
  margin-top: 25px;
  padding: 24px;
  border-radius: var(--radius-lg);
}

.s-talent-acquisition-hero__figure {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.s-talent-acquisition-hero__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 325 / 256;
  object-fit: cover;
}
.s-talent-acquisition-hero__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 26px 12px 9px;
  background: linear-gradient(to top, rgba(10, 22, 19, .86), rgba(10, 22, 19, 0));
  color: var(--on-dark);
  font-size: 9.5px;
  letter-spacing: .11em;
}

.s-talent-acquisition-hero__index {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 23px;
}
.s-talent-acquisition-hero__index-title {
  font-family: var(--sans);
  font-size: 13.6px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink-900);
}
.s-talent-acquisition-hero__index-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--ta-teal);
  white-space: nowrap;
}

.s-talent-acquisition-hero__meter {
  margin-top: 9px;
  height: 7px;
  border-radius: 999px;
  /* the unfilled half of the track is warm in the frame, not the cool grey
     that a neutral alpha over white gives */
  background: #F3EDE2;
  overflow: hidden;
}
.s-talent-acquisition-hero__meter-fill {
  display: block;
  /* the frame fills 305 of the track's 325px */
  width: 94%;
  height: 100%;
  border-radius: 999px;
  background: #006B5E;
}

.s-talent-acquisition-hero__note {
  /* the frame sets this note in the sans italic, not the serif: at the same
     ink height it fits a third fewer characters per line, which is what puts
     it on three lines there and two here */
  margin-top: 15px;
  font-family: var(--sans);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.52;
  color: var(--ink-600);
}

/* ==========================================================================
   2 — strategic imperative
   ========================================================================== */
.s-talent-acquisition-risk {
  background: var(--ta-beige);
  padding-block: 37px 60px;
}

.s-talent-acquisition-risk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 475px;
  gap: 32px;
  align-items: start;
}

.s-talent-acquisition-risk__eyebrow { margin-bottom: 20px; }

/* The frame sets the second line of the heading in italic. The whole sentence
   is one row of the client's sheet, so it has to stay in one text node: the
   heading is italic and ::first-line puts the top line back upright. */
.s-talent-acquisition-risk__title {
  font-size: 38.5px;
  line-height: 1.3;
  font-style: italic;
  max-width: 440px;
  margin-bottom: 26px;
}
.s-talent-acquisition-risk__title::first-line { font-style: normal; }

.s-talent-acquisition-risk__card { padding: 31px 33px 33px; }

.s-talent-acquisition-risk__body {
  /* the frame's body line runs 601px over 66 characters where the build's ran
     495px over the same 66, and sets five lines to the build's four */
  font-size: 20.5px;
  line-height: 1.512;
  color: var(--ink-600);
}

.s-talent-acquisition-risk__source {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  background: var(--ta-inset);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-400);
}
.s-talent-acquisition-risk__source-icon {
  flex: none;
  margin-top: 2px;
  color: var(--ta-teal);
}

/* ---- the dark metric card ---------------------------------------------- */
.s-talent-acquisition-risk__metric {
  position: relative;
  padding: 42px 32px 26px;
  border-radius: var(--radius-lg);
  /* the glow in the frame reaches about a quarter of the way in and stops
     before the bars — not across the whole card */
  background:
    radial-gradient(52% 46% at 100% 0%, rgba(111, 217, 194, .20), rgba(111, 217, 194, 0) 72%),
    var(--ta-ink);
  color: var(--on-dark);
  overflow: hidden;
}

.s-talent-acquisition-risk__metric-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.s-talent-acquisition-risk__metric-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--on-dark-faint);
}
.s-talent-acquisition-risk__metric-icon {
  flex: none;
  margin-top: -2px;
  color: var(--ta-mint);
}

.s-talent-acquisition-risk__metric-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 39px;
}
.s-talent-acquisition-risk__metric-value {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.01em;
}
.s-talent-acquisition-risk__metric-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--ta-mint);
}

.s-talent-acquisition-risk__bars {
  display: grid;
  gap: 18px;
  margin-top: 27px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
}
.s-talent-acquisition-risk__bar-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 10px;
  letter-spacing: .1em;
}
.s-talent-acquisition-risk__bar-label { color: var(--on-dark-muted); }
.s-talent-acquisition-risk__bar-delta { flex: none; }
.s-talent-acquisition-risk__bar-delta--down { color: #E08A72; }
.s-talent-acquisition-risk__bar-delta--up   { color: var(--ta-mint); }

.s-talent-acquisition-risk__track {
  margin-top: 11px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.s-talent-acquisition-risk__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.s-talent-acquisition-risk__fill--weak   { width: 38%; background: rgba(255, 255, 255, .5); }
.s-talent-acquisition-risk__fill--strong { width: 92%; background: var(--ta-mint); }

.s-talent-acquisition-risk__insight {
  display: flex;
  gap: 10px;
  margin-top: 23px;
  padding: 14px 18px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
  font-size: 14.4px;
  line-height: 1.69;
  color: var(--on-dark-muted);
}
.s-talent-acquisition-risk__insight-icon {
  flex: none;
  margin-top: 2px;
  color: var(--terracotta);
}

/* ==========================================================================
   3 — our core focus areas
   ========================================================================== */
.s-talent-acquisition-focus { padding-block: 39px 49px; }

.s-talent-acquisition-focus__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 448px;
  gap: 40px;
  align-items: end;
  margin-bottom: 35px;
}
.s-talent-acquisition-focus__eyebrow {
  color: var(--ta-teal);
  margin-bottom: 6px;
}
.s-talent-acquisition-focus__title { font-size: 38.5px; }
.s-talent-acquisition-focus__lede {
  font-size: 14.5px;
  line-height: 1.517;
  color: var(--ink-500);
}

.s-talent-acquisition-focus__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.s-talent-acquisition-focus__card {
  display: flex;
  flex-direction: column;
  padding: 28px 32px 28px;
  border-top: 3px solid var(--ta-rule-1);
}
.s-talent-acquisition-focus__card--two   { border-top-color: var(--ta-rule-2); }
.s-talent-acquisition-focus__card--three { border-top-color: var(--ta-rule-3); }

.s-talent-acquisition-focus__tile {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: #F0E7DC;
  color: var(--ta-rule-1);
  margin-bottom: 23px;
}
.s-talent-acquisition-focus__card--two .s-talent-acquisition-focus__tile {
  background: #DEEFE9;
  color: var(--ta-rule-2);
}
.s-talent-acquisition-focus__card--three .s-talent-acquisition-focus__tile {
  color: var(--terracotta);
}

.s-talent-acquisition-focus__phase {
  font-size: 10px;
  color: var(--ta-rule-1);
}
.s-talent-acquisition-focus__card--two .s-talent-acquisition-focus__phase {
  color: var(--ta-rule-2);
}
.s-talent-acquisition-focus__card--three .s-talent-acquisition-focus__phase {
  color: var(--terracotta);
}

.s-talent-acquisition-focus__name {
  /* 28px is what puts "Role Profiling & Scorecards" onto two lines inside the
     frame's 316px card measure, as the frame sets it */
  font-size: 28px;
  line-height: 1.286;
  margin: 18px 0 12px;
}
.s-talent-acquisition-focus__desc {
  font-size: 16.8px;
  line-height: 1.55;
  color: var(--ink-500);
  margin-bottom: 22px;
}

.s-talent-acquisition-focus__deliverables {
  margin-top: auto;
  padding: 16px 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--ta-inset);
}
.s-talent-acquisition-focus__deliverables-title {
  font-size: 9.5px;
  color: var(--ink-900);
  margin-bottom: 14px;
}
.s-talent-acquisition-focus__list { display: grid; gap: 8px; }
.s-talent-acquisition-focus__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  /* at 13px "Structured Behavioral Interview Guides" just fits the 262px
     measure on one line; the frame sets it on two, and every other deliverable
     measures ~1.07x the build's */
  font-size: 14.5px;
  line-height: 1.517;
  color: var(--ink-600);
}
.s-talent-acquisition-focus__check {
  flex: none;
  margin-top: 3px;
  color: var(--terracotta);
}

/* ==========================================================================
   4 — measurable impact & value
   ========================================================================== */
.s-talent-acquisition-impact {
  background: var(--ta-beige);
  padding-block: 45px 51px;
}

.s-talent-acquisition-impact__head { margin-bottom: 34px; }
.s-talent-acquisition-impact__eyebrow {
  color: var(--ta-teal);
  margin-bottom: 12px;
}
.s-talent-acquisition-impact__title {
  font-size: 38.5px;
  margin-bottom: 16px;
}
/* the frame breaks this lede after "integrate"; at 17px the build carried
   "faster into the" up onto the first line as well */
.s-talent-acquisition-impact__lede {
  max-width: 760px;
  font-size: 20.5px;
  line-height: 1.512;
}

.s-talent-acquisition-impact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.s-talent-acquisition-impact__card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  overflow: hidden;
}
.s-talent-acquisition-impact__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.s-talent-acquisition-impact__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.s-talent-acquisition-impact__tile--teal {
  background: #D9F0EA;
  color: var(--ta-teal);
}
.s-talent-acquisition-impact__tile--terracotta {
  background: #F7E6DA;
  color: var(--terracotta);
}
.s-talent-acquisition-impact__badge {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ta-inset);
  font-size: 9.5px;
  color: var(--ta-label);
}

.s-talent-acquisition-impact__name {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.s-talent-acquisition-impact__desc {
  font-size: 14.4px;
  line-height: 1.6;
  color: var(--ink-500);
  margin-bottom: 30px;
}

.s-talent-acquisition-impact__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  /* the frame insets this strip inside the card padding and rounds it — it does
     not bleed to the card edges */
  margin-top: auto;
  padding: 16px 18px 18px;
  border-radius: var(--radius-sm);
  background: var(--ta-inset);
}
.s-talent-acquisition-impact__value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.s-talent-acquisition-impact__value--teal       { color: var(--ta-teal); }
.s-talent-acquisition-impact__value--terracotta { color: var(--terracotta); }
/* the frame keeps the caption on the figure's own row and lets it run to two
   lines there, rather than dropping it below */
.s-talent-acquisition-impact__caption {
  flex: 1 1 0;
  min-width: 0;
  font-size: 9.5px;
  color: var(--ink-400);
}

/* ==========================================================================
   5 — practice quote
   ========================================================================== */
.s-talent-acquisition-quote { padding-block: 44px 48px; }

.s-talent-acquisition-quote__card {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-lg);
}
.s-talent-acquisition-quote__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 341 / 286;
  object-fit: cover;
  border-radius: 10px;
}

.s-talent-acquisition-quote__mark {
  display: block;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.s-talent-acquisition-quote__text p {
  font-family: var(--serif);
  font-style: italic;
  /* three lines in the frame, two here: the measure narrows with the wider
     photo column and the 48px card inset, and the leading runs 46px not 36 */
  font-size: 26px;
  line-height: 1.77;
  letter-spacing: -.005em;
  color: var(--ink-900);
}

.s-talent-acquisition-quote__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}
.s-talent-acquisition-quote__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--ta-teal);
  color: var(--on-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.s-talent-acquisition-quote__who { display: grid; }
.s-talent-acquisition-quote__role {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.s-talent-acquisition-quote__org {
  font-size: 11.5px;
  color: var(--ink-400);
}

/* ==========================================================================
   6 — interconnection with other practices
   ========================================================================== */
.s-talent-acquisition-connect {
  background: var(--ta-beige);
  padding-block: 49px 45px;
}

.s-talent-acquisition-connect__panel {
  padding: 36px 40px 40px;
  border-radius: var(--radius-lg);
}

.s-talent-acquisition-connect__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.s-talent-acquisition-connect__eyebrow {
  color: var(--ta-teal);
  margin-bottom: 10px;
}
.s-talent-acquisition-connect__title { font-size: 27.3px; }
.s-talent-acquisition-connect__pill {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ta-inset);
  font-size: 9.5px;
  color: var(--ta-label);
}

.s-talent-acquisition-connect__lede {
  max-width: 775px;
  margin-top: 24px;
  font-size: 16.9px;
  line-height: 1.538;
  color: var(--ink-500);
}

.s-talent-acquisition-connect__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 33px;
}
.s-talent-acquisition-connect__card {
  padding: 29px 24px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}
.s-talent-acquisition-connect__name {
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.s-talent-acquisition-connect__desc {
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--ink-500);
  margin-bottom: 22px;
}
.s-talent-acquisition-connect__link {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--terracotta);
  transition: color .18s ease;
}
.s-talent-acquisition-connect__link:hover { color: #B46C44; }

/* ==========================================================================
   7 — closing CTA
   ========================================================================== */
.s-talent-acquisition-cta { padding-block: 46px 50px; }

.s-talent-acquisition-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
}

.s-talent-acquisition-cta__eyebrow {
  font-size: 10.6px;
  letter-spacing: .14em;
  margin-bottom: 18px;
}
/* .h-serif-xl is 48px; the frame's ink for this line measures 694px against
   the build's 612, so the closing heading is set a size up */
.s-talent-acquisition-cta__title {
  font-size: 54.4px;
  margin-bottom: 18px;
}
.s-talent-acquisition-cta__lede {
  max-width: 680px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.s-talent-acquisition-cta__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* the frame drops the button to the heading's line, not the eyebrow's */
  margin-top: 39px;
}
/* the sheet keeps this label as "Let's Talk", which is the i18n key — the
   frame sets it in caps, so the caps are done here */
.s-talent-acquisition-cta__btn {
  height: 52px;
  padding: 0 37px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.s-talent-acquisition-cta__notes {
  display: grid;
  gap: 2px;
  text-align: right;
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--on-dark-faint);
}

/* The frame's body sections run on a 48px gutter (content column 1184px),
   not the site's 52px: measured off the panel, card and button edges, which
   land on x=48 and x=1232 in the capture. The header keeps the site gutter. */
@media (min-width: 1025px) {
  .s-talent-acquisition-hero > .container,
  .s-talent-acquisition-risk > .container,
  .s-talent-acquisition-focus > .container,
  .s-talent-acquisition-impact > .container,
  .s-talent-acquisition-quote > .container,
  .s-talent-acquisition-connect > .container,
  .s-talent-acquisition-cta > .container { padding-inline: 48px; }
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1279px) {
  .s-talent-acquisition-hero__grid { gap: 40px; }
  /* these used to step down to 420/380/290; the 1280 capture resolves into
     this range, so they now hold the frame's own tracks. 1025px still fits:
     1025 - 96 - 32 - 475 = 422px for the companion column. */
  .s-talent-acquisition-risk__grid { grid-template-columns: minmax(0, 1fr) 475px; }
  .s-talent-acquisition-focus__head { grid-template-columns: minmax(0, 1fr) 438px; }
  .s-talent-acquisition-quote__card { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .s-talent-acquisition-hero { padding-block: 36px 44px; }

  .s-talent-acquisition-hero__grid,
  .s-talent-acquisition-risk__grid,
  .s-talent-acquisition-focus__head,
  .s-talent-acquisition-quote__card,
  .s-talent-acquisition-cta__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .s-talent-acquisition-hero__title { font-size: 42px; }
  .s-talent-acquisition-hero__panel { max-width: 440px; }

  .s-talent-acquisition-risk__title,
  .s-talent-acquisition-focus__title,
  .s-talent-acquisition-impact__title { font-size: 34px; }

  .s-talent-acquisition-focus__head { align-items: start; }

  .s-talent-acquisition-focus__grid,
  .s-talent-acquisition-impact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-talent-acquisition-quote__card { align-items: start; }
  .s-talent-acquisition-quote__photo { max-width: 440px; }
  .s-talent-acquisition-quote__text p { font-size: 22px; }

  .s-talent-acquisition-connect__panel { padding: 26px 24px 28px; }
  .s-talent-acquisition-connect__grid { grid-template-columns: minmax(0, 1fr); }

  .s-talent-acquisition-cta__side { align-items: flex-start; }
  .s-talent-acquisition-cta__notes { text-align: left; }
}

@media (max-width: 640px) {
  .s-talent-acquisition-hero { padding-block: 28px 36px; }
  .s-talent-acquisition-risk,
  .s-talent-acquisition-impact,
  .s-talent-acquisition-connect { padding-block: 40px 44px; }
  .s-talent-acquisition-focus { padding-block: 40px 44px; }
  .s-talent-acquisition-cta { padding-block: 40px 44px; }

  .s-talent-acquisition-hero__title { font-size: 34px; }
  .s-talent-acquisition-hero__stats { gap: 16px 26px; }

  /* .btn is nowrap, and these two labels are longer than a 320px column — let
     them set in two lines rather than run past the edge of the pill */
  .s-talent-acquisition-hero__actions > * { width: 100%; }
  .s-talent-acquisition-hero__cta,
  .s-talent-acquisition-hero__cta-2 {
    height: auto;
    min-height: 46px;
    padding: 13px 18px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }

  .s-talent-acquisition-risk__title,
  .s-talent-acquisition-focus__title,
  .s-talent-acquisition-impact__title { font-size: 28px; }

  /* the italic second line only works while the heading really breaks in two */
  .s-talent-acquisition-risk__title { font-style: normal; }

  .s-talent-acquisition-risk__card { padding: 20px; }
  .s-talent-acquisition-risk__body { font-size: 15.5px; }
  .s-talent-acquisition-risk__metric { padding: 20px; }
  .s-talent-acquisition-risk__metric-value { font-size: 44px; }

  .s-talent-acquisition-focus__grid,
  .s-talent-acquisition-impact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .s-talent-acquisition-focus__card { padding: 22px 20px 20px; }
  .s-talent-acquisition-focus__name { font-size: 22px; }

  .s-talent-acquisition-impact__card { padding: 20px; }
  .s-talent-acquisition-impact__figure { padding: 14px 16px 16px; }

  .s-talent-acquisition-quote__card { padding: 18px; gap: 24px; }
  .s-talent-acquisition-quote__text p { font-size: 19px; }

  .s-talent-acquisition-connect__head { flex-direction: column; }
  .s-talent-acquisition-connect__title { font-size: 25px; }
  .s-talent-acquisition-connect__card { padding: 20px; }
  .s-talent-acquisition-connect__name { font-size: 18px; }
  .s-talent-acquisition-connect__pill {
    font-size: 9px;
    letter-spacing: .1em;
    padding: 6px 11px;
  }

  .s-talent-acquisition-cta__title { font-size: 34px; }
  .s-talent-acquisition-cta__btn { width: 100%; }
  .s-talent-acquisition-cta__side { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .s-talent-acquisition-hero__cta:hover,
  .s-talent-acquisition-cta__btn:hover { transform: none; }
  .s-talent-acquisition-connect__link { transition: none; }
}