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

.s-culture-hero,
.s-culture-shift,
.s-culture-focus,
.s-culture-impact,
.s-culture-matrix,
.s-culture-cta {
  /* measured off the frame — no token covers these warm panel fills */
  --ce-band:   #F5F1EA;   /* the two full-bleed warm bands                 */
  --ce-card:   #F3EDE2;   /* telemetry card, matrix card, stat tiles       */
  --ce-paper:  #FBFAF6;   /* the focus cards' deliverables band            */
  --ce-plot:   #F8F5EE;   /* the chart plot area                           */
  --ce-row:    #F4F2EE;   /* a readiness-check answer row                  */
  --ce-track:  #E4E2DC;   /* the readiness progress track                  */
  --ce-mint:   #E2EFE8;   /* teal icon tiles                               */
  --ce-sky:    #DFEBEA;   /* the third impact icon tile                    */
  --ce-sand:   #F6EADC;   /* the warm icon tiles                           */
  --ce-mist:   #E3E2E8;   /* the "Intent" bar                              */
  --ce-peach:  #F9B189;   /* the "Diffusion" bar                           */
  --ce-teal:   #0F6453;   /* the deep green this page reads its accents in */
  --ce-rust:   #C9703F;   /* the warm icon glyph                           */
  --ce-orange: #F08A5D;   /* the frame's own CTA orange                    */
}

/* ==========================================================================
   1 — hero
   ========================================================================== */
.s-culture-hero { padding-block: 44px 58px; }

.s-culture-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px;
  align-items: center;
}

.s-culture-hero__eyebrow {
  margin-bottom: 20px;
  letter-spacing: .18em;
}

/* structural wrappers: the grid children the sections hang on. They carry no
   look of their own, but min-width:0 keeps a long word inside its track. */
.s-culture-hero__copy,
.s-culture-shift__copy,
.s-culture-focus__inner,
.s-culture-focus__headline,
.s-culture-impact__inner,
.s-culture-matrix__copy { min-width: 0; }

/* 720px, not the 640 first built: the frame breaks the headline after
   "not a", which needs 707px of the 740px column at this size */
.s-culture-hero__title {
  max-width: 720px;
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: 54px;
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.s-culture-hero__title-tail {
  font-style: italic;
  color: var(--ce-teal);
}

/* the frame sets the lede two lines deep, breaking after "observable daily" */
.s-culture-hero__lede {
  max-width: 620px;
  margin-bottom: 30px;
}

.s-culture-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* the frame's orange CTA — kept here rather than as a .btn modifier so the
   other page stylesheets cannot collide with it */
.s-culture-hero__cta {
  height: 48px;
  padding-inline: 26px;
  background: var(--ce-orange);
  color: var(--green-900);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
}
.s-culture-hero__cta:hover { background: #E67C4D; }

.s-culture-hero__ghost {
  height: 48px;
  padding-inline: 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--ink-700);
}
.s-culture-hero__ghost-arrow { flex: none; }

/* ---- the lived-climate telemetry card ---------------------------------- */
.s-culture-hero__panel {
  padding: 26px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--ce-card);
}

.s-culture-hero__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.s-culture-hero__panel-eyebrow {
  font-size: 10px;
  letter-spacing: .17em;
  color: var(--ce-teal);
}
.s-culture-hero__panel-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid rgba(15, 100, 83, .3);
  border-radius: 7px;
  color: var(--ce-teal);
}

.s-culture-hero__panel-title {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 22px;   /* measured off the frame's telemetry card */
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink-900);
}

.s-culture-hero__panel-body {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ---- the three-bar reality-gap chart ----------------------------------- */
.s-culture-hero__chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: 128px;
  padding: 10px 12px 0;
  border-radius: var(--radius-sm);
  background: var(--ce-plot);
}
.s-culture-hero__series {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.s-culture-hero__series-label {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
  color: var(--ink-400);
}
.s-culture-hero__bar {
  display: block;
  flex: none;
  border-radius: 4px 4px 0 0;
}
.s-culture-hero__bar--intent    { height: 60%; background: var(--ce-mist); }
.s-culture-hero__bar--diffusion { height: 44%; background: var(--ce-peach); }
.s-culture-hero__bar--lived {
  height: 74%;
  background: var(--ce-teal);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

/* ==========================================================================
   2 — from implicit understanding to explicit systems
   ========================================================================== */
.s-culture-shift {
  background: var(--ce-band);
  padding-block: 54px 60px;
}

.s-culture-shift__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 478px);
  gap: 48px;
  align-items: start;
}

/* the frame draws this eyebrow's mark as a short rule rather than a dot */
.s-culture-shift__eyebrow {
  margin-bottom: 16px;
}
.s-culture-shift__eyebrow::before {
  width: 16px; height: 1px;
  border-radius: 0;
}

/* The frame sets every section heading at 38px rather than the 44px the
   global .h-serif-lg carries; measured off the four headings in the frame
   ("Our Focus Areas", "Visible Behavioral Shifts", "The Culture Climate
   Matrix" and this one), which all come out at 38. */
.s-culture-shift__title,
.s-culture-focus__title,
.s-culture-impact__title,
.s-culture-matrix__title { font-size: 38px; }

.s-culture-shift__title {
  max-width: 650px;   /* the frame keeps "…to explicit" on the first line */
  margin-bottom: 22px;
}

.s-culture-shift__lede {
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-600);
}
.s-culture-shift__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-500);
}

/* ---- applied methodology ----------------------------------------------- */
.s-culture-shift__method {
  padding: 26px 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.s-culture-shift__method-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: var(--ce-mint);
  color: var(--ce-teal);
}

.s-culture-shift__method-eyebrow {
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .16em;
}

.s-culture-shift__method-title {
  margin-bottom: 12px;
  font-size: 22px;
  letter-spacing: normal;
}

.s-culture-shift__method-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
}

.s-culture-shift__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.s-culture-shift__stat {
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  background: var(--ce-card);
}
.s-culture-shift__stat-figure {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  color: var(--ce-teal);
}
.s-culture-shift__stat-label {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-500);
}

/* ==========================================================================
   3 — our focus areas
   ========================================================================== */
.s-culture-focus { padding-block: 54px 62px; }

.s-culture-focus__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 40px;
  align-items: end;
  margin-bottom: 30px;
}
.s-culture-focus__eyebrow { margin-bottom: 12px; }
.s-culture-focus__lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
}

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

.s-culture-focus__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
/* 32px of card padding, measured off the frame — it is what puts card 01's
   title onto two lines */
.s-culture-focus__top {
  flex: 1 1 auto;
  padding: 32px 32px 28px;
}

.s-culture-focus__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.s-culture-focus__num {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--ink-300);
}
.s-culture-focus__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--ce-mint);
  color: var(--ce-teal);
}
.s-culture-focus__icon--warm {
  background: var(--ce-sand);
  color: var(--ce-rust);
}

.s-culture-focus__name {
  margin-bottom: 12px;
  font-size: 28px;   /* frame size; also why card 01 runs onto two lines */
}
.s-culture-focus__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
}

.s-culture-focus__deliv {
  padding: 18px 32px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--ce-paper);
}
.s-culture-focus__deliv-title {
  margin-bottom: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-400);
}
.s-culture-focus__items {
  display: grid;
  gap: 9px;
}
.s-culture-focus__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-600);
}
.s-culture-focus__tick { flex: none; color: var(--ce-teal); }
.s-culture-focus__tick--warm { color: var(--ce-rust); }

/* ==========================================================================
   4 — visible behavioral shifts
   ========================================================================== */
.s-culture-impact {
  background: var(--ce-band);
  padding-block: 52px 58px;
}

.s-culture-impact__head { margin-bottom: 28px; }
.s-culture-impact__eyebrow { margin-bottom: 12px; }
.s-culture-impact__title { margin-bottom: 14px; }
.s-culture-impact__lede {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
}

.s-culture-impact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 28px;
}
.s-culture-impact__card {
  padding: 32px 32px 30px;   /* frame card padding */
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.s-culture-impact__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 18px;
  border-radius: 10px;
}
.s-culture-impact__icon--mint { background: var(--ce-mint); color: var(--ce-teal); }
.s-culture-impact__icon--sand { background: var(--ce-sand); color: var(--ce-rust); }
.s-culture-impact__icon--sky  { background: var(--ce-sky);  color: var(--ce-teal); }

.s-culture-impact__name {
  margin-bottom: 10px;
  font-size: 21px;
}
.s-culture-impact__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-500);
}

/* ---- the attributed quote ---------------------------------------------- */
.s-culture-impact__quote {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.s-culture-impact__portrait {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 62% 26%;
}
.s-culture-impact__quote-body { min-width: 0; }
.s-culture-impact__quote-text p {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-900);
}
.s-culture-impact__attrib {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-400);
}

/* ==========================================================================
   5 — the culture climate matrix
   ========================================================================== */
.s-culture-matrix { padding-block: 16px 56px; }

.s-culture-matrix__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 433px);
  gap: 32px;
  align-items: start;
  padding: 44px 48px 48px;
  border-radius: var(--radius-xl);
  background: var(--ce-card);
}

.s-culture-matrix__eyebrow {
  margin-bottom: 14px;
  color: var(--ce-teal);
}
.s-culture-matrix__title { margin-bottom: 16px; }
.s-culture-matrix__lede {
  max-width: 600px;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-600);
}

.s-culture-matrix__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.s-culture-matrix__feature {
  display: flex;
  gap: 10px;
}
.s-culture-matrix__feature-icon {
  flex: none;
  margin-top: 2px;
  color: var(--ce-teal);
}
.s-culture-matrix__feature-text { min-width: 0; }
.s-culture-matrix__feature-name {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
}
.s-culture-matrix__feature-body {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ---- organization readiness check -------------------------------------- */
.s-culture-matrix__check {
  padding: 22px 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.s-culture-matrix__check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.s-culture-matrix__check-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--ink-900);
}
.s-culture-matrix__check-phase {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--terracotta);
}

.s-culture-matrix__progress {
  display: block;
  overflow: hidden;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--ce-track);
}
.s-culture-matrix__progress-bar {
  display: block;
  width: 33.33%;
  height: 100%;
  border-radius: 999px;
  background: var(--ce-teal);
}

.s-culture-matrix__question {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-600);
}

.s-culture-matrix__answers { display: grid; gap: 10px; }
.s-culture-matrix__answer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--ce-row);
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.s-culture-matrix__answer:hover { background: #EFECE6; }
.s-culture-matrix__answer:focus-visible {
  outline: 2px solid var(--ce-teal);
  outline-offset: 2px;
}
.s-culture-matrix__answer-text { flex: 1 1 auto; min-width: 0; }
.s-culture-matrix__chevron { flex: none; color: var(--ink-300); }

.s-culture-matrix__answer.is-selected {
  background: var(--ce-mint);
  border-color: rgba(15, 100, 83, .35);
  color: var(--green-900);
  font-weight: 600;
}
.s-culture-matrix__answer.is-selected .s-culture-matrix__chevron { color: var(--ce-teal); }

/* ==========================================================================
   6 — culture consultation
   ========================================================================== */
.s-culture-cta { padding-block: 48px 52px; }

.s-culture-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 40px;
}
.s-culture-cta__copy { min-width: 0; }

.s-culture-cta__eyebrow { margin-bottom: 16px; }
.s-culture-cta__eyebrow::before {
  width: 16px; height: 1px;
  border-radius: 0;
}

.s-culture-cta__title {
  margin-bottom: 12px;
  font-size: 38px;   /* same 38px as the light-band headings in the frame */
}
.s-culture-cta__lede {
  max-width: 480px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}
.s-culture-cta__note {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--on-dark-faint);
}

.s-culture-cta__btn {
  height: 46px;
  padding-inline: 28px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .s-culture-hero__title { font-size: 46px; }
  .s-culture-hero__inner { gap: 36px; }
  .s-culture-shift__inner { gap: 32px; }
  .s-culture-matrix__card { padding: 36px 32px 38px; gap: 24px; }
}

@media (max-width: 1024px) {
  .s-culture-hero { padding-block: 34px 48px; }
  .s-culture-hero__inner,
  .s-culture-shift__inner,
  .s-culture-focus__head,
  .s-culture-matrix__card {
    grid-template-columns: minmax(0, 1fr);
  }
  .s-culture-hero__panel { max-width: 520px; }
  .s-culture-focus__head { align-items: start; gap: 16px; }
  .s-culture-focus__grid,
  .s-culture-impact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .s-culture-matrix__check { max-width: 560px; }
}

@media (max-width: 760px) {
  .s-culture-impact__quote {
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  .s-culture-impact__quote-text p { font-size: 17px; }
}

@media (max-width: 640px) {
  .s-culture-hero { padding-block: 28px 40px; }
  .s-culture-hero__title { font-size: 34px; }
  .s-culture-hero__lede { font-size: 16px; margin-bottom: 24px; }
  .s-culture-hero__actions { gap: 10px; }
  .s-culture-hero__cta,
  .s-culture-hero__ghost { width: 100%; }
  .s-culture-hero__panel { padding: 20px 18px 20px; }
  .s-culture-hero__panel-title { font-size: 24px; }
  .s-culture-hero__chart { height: 112px; }

  .s-culture-shift { padding-block: 40px 44px; }
  .s-culture-shift__title { font-size: 30px; }
  .s-culture-shift__lede { font-size: 16px; }
  .s-culture-shift__method { padding: 20px 20px 22px; }
  .s-culture-shift__stats { grid-template-columns: minmax(0, 1fr); }

  .s-culture-focus { padding-block: 40px 44px; }
  .s-culture-focus__title { font-size: 30px; }
  .s-culture-focus__grid { grid-template-columns: minmax(0, 1fr); }
  .s-culture-focus__top { padding: 20px 20px 18px; }
  .s-culture-focus__name { font-size: 24px; }
  .s-culture-focus__deliv { padding: 16px 20px 20px; }

  .s-culture-impact { padding-block: 40px 44px; }
  .s-culture-impact__title { font-size: 30px; }
  .s-culture-impact__lede { font-size: 15px; }
  .s-culture-impact__grid { grid-template-columns: minmax(0, 1fr); }
  .s-culture-impact__card { padding: 20px 20px 22px; }
  .s-culture-impact__quote { flex-direction: column; }

  .s-culture-matrix { padding-block: 8px 40px; }
  .s-culture-matrix__card {
    padding: 24px 20px 26px;
    border-radius: var(--radius-lg);
  }
  .s-culture-matrix__title { font-size: 28px; }
  .s-culture-matrix__features { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .s-culture-matrix__check { padding: 18px 16px 20px; }

  .s-culture-cta { padding-block: 38px 42px; }
  .s-culture-cta__title { font-size: 28px; }
  .s-culture-cta__lede { font-size: 15px; }
  .s-culture-cta__actions { width: 100%; }
  .s-culture-cta__btn { width: 100%; }
}

@media (max-width: 380px) {
  .s-culture-hero__title { font-size: 30px; }
  .s-culture-hero__chart { gap: 6px; padding-inline: 8px; }
  .s-culture-hero__series-label { font-size: 9px; }
}

/* every transition above settles instantly for visitors who have asked for
   less motion (base.css zeroes the durations) */
@media (prefers-reduced-motion: reduce) {
  .s-culture-hero__cta:hover,
  .s-culture-hero__ghost:hover,
  .s-culture-cta__btn:hover { transform: none; }
}