/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   AboutWorkforceSection — Figma zwjE3DrysH5sY4WacmYDKy, node 6945:7461.
   Spec: AboutWorkforceSection.figma.md.

   Inset cream panel + the 2:1 media/text split. Panel geometry follows
   DataReportQuoteSection (16px white border, 48px radius, border handed
   back to `.container-wide`); values are the redesign language's, the
   tokens global (src/styles/tokens.css).
   ============================================================ */


/* ---- Panel ------------------------------------------------ */

/* The 16px inset is a white BORDER on the section, not a margin — it takes
   part in the radius and cannot collapse (see DataReportQuoteSection.css). */
.about-workforce {
  background:    var(--panel-cream);          /* #FAF6F0 — Figma's --accent, same value */
  border:        16px solid var(--background-white);
  border-radius: 48px;                     /* no 48px radius token */
  box-sizing:    border-box;
  font-family:   var(--font-family-default);
}

/* Block padding 48 + the 16px border = Figma's py-64. Inline: the border has
   already inset the panel, so the wide container gets it back — both the cap
   and the padding shrink by 16, which keeps the content on the page's 1384
   track at every width. Two classes, so `.container-wide`'s `padding`
   shorthand can never win on import order. */
.about-workforce__inner.container-wide {
  max-width:      calc(1384px + 64px);
  padding:        3rem 2rem;               /* 48px / 32px */
}


/* ---- Grid (Figma "3 sections" 6945:7463 → Section 2) ------ */

/* 922.67 | 461.33 — Figma's thirds of 1384, as fr weights. The text column
   never gets narrower than its 1512 width, though: as a plain third it fell
   to 312 at ~1030 and the headline ran six lines (owner, 2026-10-27). So
   under 1480 the globe column gives up the width instead, and the headline
   keeps Figma's three lines and the captions one. `py 8` is Figma's own
   grid inset. Text is first in the DOM; the areas put the globe on the left. */
.about-workforce__grid {
  position:              relative;         /* anchors the badge */
  display:               grid;
  grid-template-columns: minmax(0, 922.67fr) minmax(461.33px, 461.33fr);
  grid-template-areas:   "media text";
  align-items:           center;
  padding-block:         0.5rem;           /* 8px */
}


/* ---- Badge (6945:7511) ------------------------------------ */

/* Figma's 40px tag area sits at the content box's top-left with the 26px
   pill centred in it — 7px down. It overlaps the media column's corner, as in
   Figma, so it is absolute rather than in the flow. The fill stays the stock
   white `.hp-badge`: on a cream panel that IS the design (the redesign's
   cream badge is for white ground). */
.about-workforce__badge {
  position: absolute;
  top:      7px;
  left:     0;
  z-index:  1;
}


/* ---- Img area (6945:7465) --------------------------------- */

/* The export is Figma's 875 x 768 Bg node, which sits 16px in from the
   track, 8px down, leaving 31.67 to its right and 24 below — 800 tall in
   all, the row height. Fixed gutters, fluid image. */
.about-workforce__media {
  grid-area: media;
  padding:   0.5rem 31.67px 1.5rem 1rem;   /* 8 / 31.67 / 24 / 16 */
  min-width: 0;
}

.about-workforce__picture {
  display: block;
}

.about-workforce__img {
  display: block;
  width:   100%;
  height:  auto;
}

.about-workforce__img-placeholder {
  aspect-ratio:  875 / 768;
  border-radius: 50%;
  background:    color-mix(in srgb, var(--info) 30%, var(--panel-cream));
}


/* ---- Text area (6945:7469) -------------------------------- */

/* Centred in the row, as Figma's `justify-center` centres it in the 800px
   frame: intro at +91 there. `pr 32` is the text area's own padding. */
.about-workforce__text {
  grid-area:      text;
  display:        flex;
  flex-direction: column;
  gap:            5rem;                    /* 80px — intro → numbers */
  padding-right:  2rem;                    /* 32px */
  min-width:      0;
}

/* 36/40 Rowan from `.hp-heading--serif`; the blue-700 ink is this panel's
   (the redesign doc's "serif headline inside a cream panel"). The Copy frame
   adds a further 32px on the right, giving Figma's 397.33 measure. */
.about-workforce__heading {
  padding-right: 2rem;                     /* 32px */
  color:         var(--color-brand-blue-700);
}


/* ---- Numbers (6945:7764) ---------------------------------- */

.about-workforce__stats {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);        /* 24px */
  margin:         0;
  padding:        0;
  list-style:     none;
}

/* Figure and caption share a baseline. 66 + 20 + 0.5 = Figma's 86.5 row. */
.about-workforce__stat {
  display:        flex;
  align-items:    baseline;
  gap:            var(--spacing-2);        /* 8px */
  padding-bottom: 1.25rem;                 /* 20px */
  border-bottom:  0.5px solid var(--opacity-neutral-40);
  color:          var(--color-brand-blue-700);
}

/* Sans, not serif — the redesign's stat rule. `line-height: normal` in
   Figma measures 66px for this face at 60px; 1.1 pins it. */
.about-workforce__figure {
  flex-shrink:  0;
  font-size:    3.75rem;                   /* 60px */
  line-height:  1.1;                       /* 66px */
  font-weight:  var(--font-weight-regular);
  white-space:  nowrap;
}

/* Figma's row gap sits between the arrow and the figure. Its box starts 13px
   below the top of the 66px line (y 13–54), so it is pinned to the line top
   and pushed down by exactly that — `middle` sat it ~5px low. In em, so it
   follows the figure's size at every breakpoint (13 / 60). */
.about-workforce__arrow {
  display:        inline-block;
  width:          0.4667em;                /* 28px at 60 */
  height:         auto;
  margin:         0.2167em var(--spacing-2) 0 0;
  vertical-align: top;
}

.about-workforce__caption {
  min-width:   0;                          /* wraps beside the figure when tight */
  font-size:   var(--font-size-base);      /* 16px */
  line-height: var(--line-height-base);    /* 24px */
}


/* ---- CTA (v3 7501:2529) ----------------------------------- */

/* Centred under the split, 64px below its 816 and 64 above the panel's
   bottom edge (the inner's own 48 + the 16 border). */
.about-workforce__actions {
  display:         flex;
  justify-content: center;
  margin-top:      4rem;                   /* 64px */
}


/* ---- Responsive ------------------------------------------- */

/* No tablet frame — panel steps follow DataReportQuoteSection. */
@media (max-width: 991px) {
  .about-workforce {
    border-radius: 32px;
  }

  /* Stacked, the copy belongs on the page's text edge: 44 + the 16px border
     = 60, `.container`'s tablet padding, where every other section's text
     sits (it was on the wide track's 44, 16px left of them). The globe
     shares the edge, as media inside a panel does (ClioCon's mobile frame). */
  .about-workforce__inner.container-wide {
    padding: 3rem 44px;
  }

  /* Stacked, globe first — the phone frame's order, kept on tablets too
     (owner, 2026-10-27). The badge joins the flow above it. */
  .about-workforce__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:   "badge" "media" "text";
    row-gap:               2rem;           /* 32px */
    padding-block:         0;
  }

  .about-workforce__badge {
    position:     static;
    grid-area:    badge;
    justify-self: start;
  }

  .about-workforce__text {
    gap:           3rem;                   /* 48px */
    padding-right: 0;
  }

  .about-workforce__heading {
    padding-right: 0;
  }

  .about-workforce__media {
    justify-self: center;
    width:        100%;
    max-width:    875px;
    padding:      0;
  }

  .about-workforce__actions {
    margin-top: 2rem;                      /* 32px — the stack's row gap */
  }
}

/* Phones — the mobile frame (DqhUvi29K7mfqd8vEonBIz 7543:13161; spec
   AboutWorkforceSection.mobile.figma.md): one 48-gap column, the square art
   from `visualMobileSrc` at full width, smaller stats. */
@media (max-width: 767px) {
  .about-workforce {
    border-width:  12px;
    border-radius: 24px;
  }

  /* Figma's 16 / 48 block padding; inline, the page's 2rem mobile edge —
     20 + the 12px border (owner, 2026-10-27 — the frame draws 16 + 12). */
  .about-workforce__inner.container-wide {
    padding: 1rem 20px 3rem;               /* 16px / 20px / 48px */
  }

  .about-workforce__grid {
    row-gap: 3rem;                         /* 48px */
  }

  /* 36/40 — the arrow follows in em. */
  .about-workforce__figure {
    font-size:   2.25rem;                  /* 36px */
    line-height: 2.5rem;                   /* 40px */
  }

  .about-workforce__caption {
    font-size:   var(--font-size-sm);      /* 14px */
    line-height: var(--line-height-sm);    /* 20px */
  }

  .about-workforce__actions {
    margin-top: 3rem;                      /* 48px */
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}