/* Careers page (company/careers.html): one page built from the Who We Want and Happy Associates
   Stories components, reusing who-we-want.css (wtw-) and happy-associates-stories.css (has-).
   This file only sets the page's own section rhythm and the layouts that differ. */

/* Hero stats: larger than the shared 26px / 12px so they read at a glance */
body section.has-hero .has-proof-stat { font-size: 34px !important; line-height: 1.1; }
body section.has-hero .has-proof-label { font-size: 15px !important; line-height: 1.45; max-width: 260px; margin-top: 8px; }
/* The larger stats reach the watermark's usual spot, so lift it into the empty space above them */
section.has-hero:before { bottom: 38%; }
@media (max-width: 767px) {
    body section.has-hero .has-proof-stat { font-size: 26px !important; }
    body section.has-hero .has-proof-label { font-size: 13.5px !important; }
}

/* One rhythm for every content section: same padding, alternating white and tinted backgrounds */
.careers-section { padding: 80px 6%; background: #ffffff; }
.careers-section--intro { padding-top: 56px; background: linear-gradient(180deg, #edf5f8 0, #ffffff 45%); }
.careers-section--tint { background: #f4f7fb; }

/* Cards sit white on tinted sections and pale on white ones, as on the rest of the site */
.careers-section--tint .wtw-service-card,
.careers-section--tint .has-story-card { background: #ffffff; border-color: #e1e6ef; }

/* A section intro line sits close under its heading */
.careers-section .wtw-services-heading:has(+ .wtw-services-intro) { margin-bottom: 14px; }
.careers-section .wtw-services-intro { margin-bottom: 36px; }

/* Who we want: four cards as an even 2 x 2 */
.careers-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Highlights: one row of equal cards (icon tile, title, text); when they wrap, the shorter last
   row is centred so it reads as intentional */
.careers-diff-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.careers-diff-row .wtw-diff-item { flex: 0 0 calc((100% - 80px) / 5); flex-direction: column; gap: 16px; padding: 26px 22px; background: #f6f9fc; border: 1px solid #e6eef2; border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease; }
.careers-diff-row .wtw-diff-item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(16, 42, 67, .08); }
.careers-diff-row .wtw-diff-item i { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; margin: 0; border-radius: 12px; font-size: 19px; }
.careers-diff-row .wtw-diff-item h4 { margin: 0 0 8px; font-size: 16px; }
.careers-diff-row .wtw-diff-item p { font-size: 13.5px; line-height: 1.65; }
.careers-diff-row .wtw-diff-item.ic-blue i { background: #e7edfc; }
.careers-diff-row .wtw-diff-item.ic-teal i { background: #e3f5f1; }
.careers-diff-row .wtw-diff-item.ic-purple i { background: #f1e9fc; }
.careers-diff-row .wtw-diff-item.ic-amber i { background: #fdf1dd; }
.careers-diff-row .wtw-diff-item.ic-pink i { background: #fce7f3; }
.careers-diff-row .wtw-diff-item.ic-green i { background: #e8edf5; }

/* Stories: one section, two labelled groups, two wide columns; an odd last card spans the row */
.careers-group-label { max-width: 1140px; margin: 0 auto 18px; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.careers-group-label::after { content: ''; flex: 1; height: 1px; background: #dde5ee; }
.careers-stories .has-story-grid + .careers-group-label { margin-top: 48px; }
.careers-stories .has-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.careers-stories .has-story-grid > .has-story-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 1199px) {
    .careers-diff-row .wtw-diff-item { flex-basis: calc((100% - 40px) / 3); }
}
@media (max-width: 991px) {
    .careers-stories .has-story-grid { grid-template-columns: 1fr; }
    .careers-stories .has-story-grid > .has-story-card:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 767px) {
    .careers-section { padding: 56px 6%; }
    .careers-section--intro { padding-top: 40px; }
    .careers-who-grid { grid-template-columns: 1fr; }
    .careers-diff-row .wtw-diff-item { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 480px) {
    .careers-diff-row .wtw-diff-item { flex-basis: 100%; }
}