/* ============================================================
   Careers landing page (/careers)

   Light theme, matching the teachmint.com homepage. Colours and the type
   scale are taken from the v4 homepage system in
   static/styles/teachmint-v4.0/home.css, so this page cannot drift from it:
     --rv-navy      #14284d  section and hero headings
     --rv-nav-ink   #1f3965  brand navy - buttons, strong text
     --rv-muted     #4c6389  body copy
     --rv-nav-muted #47597a  secondary copy (5.3:1 on white)
     section tint   #f4f8fd
     card border    #c9d6ee   hairline border  #e6ecf5
     accent         #1da1f2
   Hero + search layout takes its cue from enterprise careers portals:
   a full-width statement hero with the job search sitting inside it.
   ============================================================ */

/* Design tokens */
:root {
    --cr-bg:            #ffffff;
    --cr-bg-alt:        #f4f8fd;
    --cr-navy:          #14284d;
    --cr-ink:           #1f3965;
    --cr-ink-hover:     #14284d;
    --cr-muted:         #4c6389;
    --cr-muted-2:       #47597a;
    --cr-border:        #c9d6ee;
    --cr-border-soft:   #e6ecf5;
    --cr-accent:        #1da1f2;
    --cr-radius-card:   18px;
    --cr-radius-media:  12px;
    --cr-radius-btn:    8px;
    --cr-max-w:         1280px;
    --cr-px:            80px;
    --cr-py:            72px;

    /* Type scale, mirroring home.css so headings match the homepage exactly */
    --cr-fs-h2:         clamp(1.9rem, 3.6vw, 2.5rem);
    --cr-fw-h2:         500;
    --cr-fs-lede:       clamp(1rem, 1.35vw, 1.15rem);
    --cr-fs-title:      clamp(1.15rem, 1.75vw, 1.6rem);
    --cr-fw-title:      600;
    --cr-fs-body:       clamp(0.9rem, 1.1vw, 1rem);
}

body.cr-page {
    background-color: var(--cr-bg);
    color: var(--cr-muted);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

.cr-inner {
    max-width: var(--cr-max-w);
    margin: 0 auto;
    padding-left: var(--cr-px);
    padding-right: var(--cr-px);
}

.cr-section {
    padding-top: var(--cr-py);
    padding-bottom: var(--cr-py);
}

/* Alternating tint, the same one the homepage uses between sections */
.cr-section--tint {
    background-color: var(--cr-bg-alt);
}

.cr-section__head {
    max-width: 720px;
    margin-bottom: 40px;
}

.cr-section__title {
    font-size: var(--cr-fs-h2);
    font-weight: var(--cr-fw-h2);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cr-navy);
    margin: 0 0 12px;
}

.cr-section__sub {
    font-size: var(--cr-fs-lede);
    line-height: 1.6;
    color: var(--cr-muted);
    margin: 0;
}

/* ============================================================
   HERO
   ============================================================ */
.cr-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(29, 161, 242, 0.10), transparent 46%),
        var(--cr-bg-alt);
    border-bottom: 1px solid var(--cr-border-soft);
}

/* The v4 glass nav is position:fixed and overlaps this section instead of
   pushing it down, so the hero reserves the room itself - exactly as the
   homepage hero does. --rv-nav-space comes from teachmint-v4.0/home.css
   (80px desktop, 70px under 1194px); the fallback covers it not being loaded. */
.cr-hero__inner {
    max-width: var(--cr-max-w);
    margin: 0 auto;
    padding: calc(var(--rv-nav-space, 80px) + 40px) var(--cr-px) 64px;
}

/* Copy left, product image right. The image column is narrower than the copy
   so the heading keeps a comfortable measure. */
.cr-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    margin-bottom: 44px;
}

.cr-hero__copy {
    min-width: 0;
}

.cr-hero__media {
    min-width: 0;
}

/* A photograph, so it gets a frame: the card radius, and a soft shadow in the
   brand navy. aspect-ratio holds the 4:3 crop whatever the file's own ratio,
   and object-fit:cover fills it without distortion. */
.cr-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cr-radius-card);
    box-shadow: 0 18px 38px rgba(20, 40, 77, 0.14);
}

/* Applied by the macro's onerror handler. The fallback is the transparent
   Teachmint X panel, which must not be cropped or framed like a photo. */
.cr-hero__img--contain {
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 18px 38px rgba(20, 40, 77, 0.16));
}

/* The homepage H1 is 56px / 600 / -0.01em, and does not use the h2 token */
.cr-hero__heading {
    font-size: clamp(2.25rem, 4.6vw, 3.5rem);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cr-navy);
    margin: 0 0 24px;
}

/* Smaller than a typical intro line on purpose: the rotator has to carry
   full department names now (e.g. "Sales - Middle East and Africa (MEA)"),
   and at a larger size only short ones fit next to "We are hiring for"
   before the ellipsis in .cr-rotate__item kicked in. This size is chosen to
   fit most current names on one line down to a ~600px column;
   .cr-rotate__item's ellipsis is still there as a fallback for anything
   longer or a narrower column, not the primary fit strategy - that fallback
   is what makes the single-line guarantee hold even though this is a bit
   more generous than the tightest size that would fit every name. */
.cr-hero__intro {
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.4;
    font-weight: 500;
    color: var(--cr-navy);
    margin: 0;
}

/* "We are hiring for" plus the rotator, kept to one line always. flex (not
   plain inline text) is what makes that possible: the lead text keeps its
   own natural width via flex-shrink: 0, and the rotator - a flex item with
   min-width: 0 - is left free to shrink and ellipsize instead of wrapping
   onto a second line when a department name is long. */
.cr-hero__intro-lead {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    max-width: 100%;
}

.cr-hero__intro-lead-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The second half drops back to body weight, so the rotating line leads */
.cr-hero__intro-sub {
    display: block;
    margin-top: 10px;
    font-size: var(--cr-fs-lede);
    font-weight: 400;
    line-height: 1.6;
    color: var(--cr-muted);
}

/* Rotating department name.
   inline-grid with every item in the same cell means the box is as wide as the
   longest department, so the sentence after it never shifts as the word
   changes. Items are stacked and cross-faded on opacity.

   min-width: 0 overrides a flex item's default (content width as a floor),
   so when the widest label does not fit next to "We are hiring for" on one
   line, this - not the lead text (flex: 0 0 auto in .cr-hero__intro-lead-text)
   - is what shrinks. Each item then ellipsizes rather than wrapping. */
.cr-rotate {
    display: inline-grid;
    vertical-align: top;
    color: var(--cr-accent);
    min-width: 0;
    max-width: 100%;
}

.cr-rotate__item {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.45s ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cr-rotate__item.is-current {
    opacity: 1;
}

/* No JS means no rotation, so the first label simply stays put. Honour a
   reduced-motion preference the same way. */
@media (prefers-reduced-motion: reduce) {
    .cr-rotate__item {
        transition: none;
    }
}


/* ============================================================
   BUTTONS
   ============================================================ */
.cr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--cr-radius-btn);
    border: 1.6px solid transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cr-btn--primary {
    background-color: var(--cr-ink);
    border-color: var(--cr-ink);
    color: #ffffff;
}

.cr-btn--primary:hover {
    background-color: var(--cr-ink-hover);
    border-color: var(--cr-ink-hover);
    color: #ffffff;
}

/* The homepage's secondary button: white fill, navy 1.6px border */
.cr-btn--ghost {
    background-color: #ffffff;
    border-color: var(--cr-ink);
    color: var(--cr-ink);
}

.cr-btn--ghost:hover {
    background-color: var(--cr-bg-alt);
    color: var(--cr-ink-hover);
}

/* ============================================================
   SEARCH BAR (inside the hero)
   ============================================================ */
.cr-search {
    background-color: #ffffff;
    border: 1px solid var(--cr-border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 14px rgba(20, 40, 77, 0.05);
}

.cr-search__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cr-muted-2);
    margin-bottom: 8px;
}

.cr-search__row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr auto;
    gap: 14px;
    align-items: end;
}

.cr-search__field {
    min-width: 0;
}

.cr-search__input,
.cr-search__select {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    background-color: #ffffff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-btn);
    color: var(--cr-navy);
    font-size: 15px;
    font-family: inherit;
    appearance: none;
}

.cr-search__input::placeholder {
    color: var(--cr-muted-2);
}

.cr-search__input:focus,
.cr-search__select:focus {
    outline: none;
    border-color: var(--cr-accent);
    box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.15);
}

/* Native select arrow, drawn in the brand navy */
.cr-search__select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231f3965' d='M1.41 0 6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.cr-search__submit {
    height: 50px;
    white-space: nowrap;
}

/* ============================================================
   STATEMENT + CULTURE VIDEO
   Statement left, YouTube embed right. The figures that used to sit here
   were dropped; the accent rule on the statement is the About page treatment.
   ============================================================ */
.cr-statement {
    background-color: var(--cr-bg);
}

.cr-statement__inner {
    max-width: var(--cr-max-w);
    margin: 0 auto;
    padding: var(--cr-py) var(--cr-px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 48px;
}

.cr-statement__copy {
    min-width: 0;
}

.cr-statement__heading {
    margin: 0;
    padding-left: 22px;
    border-left: 2px solid var(--cr-accent);
    font-size: var(--cr-fs-h2);
    font-weight: var(--cr-fw-h2);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cr-navy);
}

/* Aligned to the heading's text, not to its accent rule */
.cr-statement__body {
    margin: 20px 0 0;
    padding-left: 22px;
    font-size: var(--cr-fs-lede);
    line-height: 1.65;
    color: var(--cr-muted);
}

/* 16:9 frame. The iframe fills it absolutely, so the ratio holds whatever
   the embed reports, and the card radius needs overflow:hidden to clip it. */
.cr-statement__media {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--cr-radius-card);
    overflow: hidden;
    background-color: var(--cr-navy);
    box-shadow: 0 18px 38px rgba(20, 40, 77, 0.14);
}

.cr-statement__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

/* ============================================================
   CERTIFICATIONS
   The shared certifications_foorter_section() macro. Its own styles
   (.certification-row / .cetification-section) come from common-tmx4.css and
   new-landing-tmx5.css, both already linked, so this only sets the band.
   ============================================================ */
.cr-certs {
    background-color: var(--cr-bg-alt);
    border-top: 1px solid var(--cr-border-soft);
    border-bottom: 1px solid var(--cr-border-soft);
}

/* .certification-row's own display: flex (common-tmx4.css) sets no
   justify-content, so on mobile - where each badge takes half the row -
   they pack to the left instead of centering as a group. Scoped to this
   page only; the shared macro is used elsewhere too. */
.cr-certs .certification-row {
    justify-content: center;
}

/* ============================================================
   CARD GRIDS (why join, values)
   ============================================================ */
.cr-grid {
    display: grid;
    gap: 24px;
}

.cr-grid--5 { grid-template-columns: repeat(5, 1fr); }
.cr-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cr-grid--3 { grid-template-columns: repeat(3, 1fr); }

.cr-card {
    background-color: #ffffff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-card);
    padding: 28px;
}

.cr-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
}

.cr-card__title {
    font-size: 19px;
    line-height: 1.35;
    font-weight: var(--cr-fw-title);
    color: var(--cr-navy);
    margin: 0 0 10px;
}

.cr-card__text {
    font-size: var(--cr-fs-body);
    line-height: 1.6;
    color: var(--cr-muted);
    margin: 0;
}

/* ============================================================
   ICON CARD TREE - org-chart connectors above a card grid.
   The About page's "Values that define us" visual (company-values.html),
   redrawn on this page's own tokens - see icon-card-tree.html for why this is
   not that macro reused directly.

   The branch's left/right offsets are the half-width of one grid column, so
   it spans exactly from the first card's centre to the last card's. Each
   drop is centred within its own grid cell (left: 50% of the item, not of the
   row), so it lines up with its card regardless of the branch's own maths.
   Column count and gap are both fixed (--cr-grid + 4 or 3 columns), which is
   why a --4 and --3 variant exist rather than a computed general case.
   ============================================================ */
.cr-tree {
    text-align: center;
}

.cr-tree__node {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border: 3px solid var(--cr-accent);
    border-radius: 50%;
    background-color: transparent;
}

.cr-tree__stem {
    width: 0;
    height: 28px;
    margin: 0 auto;
    border-left: 2px dashed var(--cr-border);
}

.cr-tree__heading {
    font-size: var(--cr-fs-h2);
    font-weight: var(--cr-fw-h2);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cr-navy);
    margin: 0;
}

.cr-tree__subheading {
    max-width: 560px;
    margin: 12px auto 0;
    font-size: var(--cr-fs-lede);
    line-height: 1.6;
    color: var(--cr-muted);
}

.cr-tree__row {
    position: relative;
    margin-top: 8px;
}

.cr-tree__branch {
    position: absolute;
    top: 0;
    height: 0;
    border-top: 2px dashed var(--cr-border);
}

/* half of a 5-column cell: (100% - 4 gaps) / 5, halved */
.cr-tree__branch--5 {
    left: calc(10% - 9.6px);
    right: calc(10% - 9.6px);
}

/* half of a 4-column cell: (100% - 3 gaps) / 4, halved */
.cr-tree__branch--4 {
    left: calc(12.5% - 9px);
    right: calc(12.5% - 9px);
}

/* half of a 3-column cell: (100% - 2 gaps) / 3, halved */
.cr-tree__branch--3 {
    left: calc(16.667% - 8px);
    right: calc(16.667% - 8px);
}

.cr-tree__items {
    padding-top: 32px;
}

/* height: 100% is what makes every card in the row match the tallest one:
   .cr-grid's items (the direct grid children, .cr-tree__item) already
   stretch to the row height by CSS Grid's own default, but .cr-tree__card
   is a plain block grandchild that would otherwise still size to its own
   content regardless of how tall its parent grid cell became - so this
   passes that stretched height down to it. */
.cr-tree__item {
    position: relative;
    height: 100%;
}

.cr-tree__drop {
    position: absolute;
    top: -32px;
    left: 50%;
    width: 0;
    height: 32px;
    border-left: 2px dashed var(--cr-border);
    transform: translateX(-50%);
}

/* Centred content, unlike the left-aligned default .cr-card - matches the
   About page treatment this design is based on. box-sizing: border-box
   makes the 100% height include the card's own padding/border rather than
   adding to it and overflowing its grid cell. */
.cr-tree__card {
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

.cr-tree__card .cr-card__icon {
    margin-left: auto;
    margin-right: auto;
}

/* A dashed tree over a 2-column (tablet) or 1-column (phone) grid reads as
   broken wiring, not structure - drop the connectors and let the cards stand
   as a plain grid, same as every other card section on this page. */
@media (max-width: 1024px) {
    .cr-tree__node,
    .cr-tree__stem,
    .cr-tree__branch,
    .cr-tree__drop {
        display: none;
    }

    .cr-tree__items {
        padding-top: 0;
    }

    .cr-tree__heading {
        font-size: var(--cr-fs-h2);
    }
}

/* ============================================================
   OPEN POSITIONS
   ============================================================ */
/* The second search bar, above the list. The hero copy gets its spacing from
   the hero grid; this one needs its own gap before the results count. */
.cr-jobs .cr-search {
    margin-bottom: 28px;
}

.cr-jobs__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--cr-border-soft);
}

.cr-jobs__count {
    font-size: 15px;
    color: var(--cr-muted);
    margin: 0;
}

.cr-jobs__count strong {
    color: var(--cr-navy);
}

.cr-jobs__reset {
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cr-accent);
    cursor: pointer;
    font-family: inherit;
}

.cr-jobs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.cr-job {
    background-color: #ffffff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-media);
    padding: 24px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cr-job:hover {
    border-color: var(--cr-accent);
    box-shadow: 0 2px 14px rgba(20, 40, 77, 0.07);
}

/* careers.js filters and paginates by toggling the hidden attribute; the
   author-level display:flex above would otherwise beat the browser's
   [hidden] rule. */
.cr-job[hidden] {
    display: none;
}

.cr-job__main {
    min-width: 0;
    flex: 1 1 420px;
}

.cr-job__title {
    font-size: 20px;
    line-height: 1.35;
    font-weight: var(--cr-fw-title);
    margin: 0 0 12px;
}

.cr-job__title a {
    color: var(--cr-navy);
    text-decoration: none;
}

.cr-job__title a:hover {
    color: var(--cr-accent);
}

.cr-job__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cr-job__meta li {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--cr-bg-alt);
    border: 1px solid var(--cr-border);
    font-size: 13px;
    color: var(--cr-muted-2);
}

.cr-job__meta li.cr-job__meta--new {
    background-color: rgba(29, 161, 242, 0.10);
    border-color: rgba(29, 161, 242, 0.45);
    color: #0f7fc0;
    font-weight: 600;
}

.cr-job__action {
    flex: 0 0 auto;
}

/* Shown by careers.js when the filters match nothing */
.cr-jobs__empty {
    display: none;
    padding: 48px 26px;
    text-align: center;
    background-color: var(--cr-bg-alt);
    border: 1px dashed var(--cr-border);
    border-radius: var(--cr-radius-media);
}

.cr-jobs__empty p {
    font-size: 16px;
    color: var(--cr-muted);
    margin: 0 0 18px;
}

/* Fallback when Keka cannot be reached; the embed widget renders in here */
.cr-jobs__fallback {
    background-color: #ffffff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-media);
    padding: 32px 26px;
}

.cr-jobs__fallback-note {
    font-size: 15px;
    color: var(--cr-muted);
    margin: 0 0 20px;
}

.cr-jobs__fallback-note a {
    color: var(--cr-accent);
    font-weight: 600;
}

/* ============================================================
   PAGINATION
   Built by careers.js; hidden entirely when there is only one page.
   ============================================================ */
.cr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.cr-pager[hidden] {
    display: none;
}

.cr-pager__pages {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cr-pager__page,
.cr-pager__step {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-btn);
    color: var(--cr-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.cr-pager__page:hover:not(.is-current),
.cr-pager__step:hover:not(:disabled) {
    border-color: var(--cr-accent);
    color: var(--cr-accent);
}

.cr-pager__page.is-current {
    background-color: var(--cr-ink);
    border-color: var(--cr-ink);
    color: #ffffff;
    cursor: default;
}

.cr-pager__step:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cr-pager__gap {
    padding: 0 4px;
    color: var(--cr-muted-2);
}

/* ============================================================
   LIFE AT TEACHMINT GALLERY
   ============================================================ */
.cr-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cr-gallery__item {
    margin: 0;
    border-radius: var(--cr-radius-media);
    overflow: hidden;
    border: 1px solid var(--cr-border-soft);
    aspect-ratio: 4 / 3;
    background-color: var(--cr-bg-alt);
}

.cr-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   LIFE AT TEACHMINT COLLAGE - "Believe. Achieve. Celebrate."
   The About page's asymmetric photo arrangement (life-at-teachmint.html),
   redrawn on this page's own tokens - see life-collage.html for why. Desktop
   shows the three-row collage; below 1024px it swaps for the plain
   .cr-gallery grid every other photo section on this page already uses.
   ============================================================ */
.cr-collage {
    text-align: center;
}

.cr-collage__heading {
    font-size: var(--cr-fs-h2);
    font-weight: var(--cr-fw-h2);
    letter-spacing: -0.01em;
    color: var(--cr-navy);
    margin: 0 0 32px;
}

.cr-collage__rows {
    display: block;
}

.cr-collage__stack {
    display: none;
}

.cr-collage__row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}

.cr-collage__row:last-child {
    margin-bottom: 0;
}

.cr-collage__photo {
    margin: 0;
    height: 260px;
    border-radius: var(--cr-radius-media);
    overflow: hidden;
    border: 1px solid var(--cr-border-soft);
    background-color: var(--cr-bg-alt);
}

.cr-collage__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ratio matches the source files: 1/3/4/6.png are portrait-ish (388x408),
   2/5.png are wide (831x408) - roughly 1 : 2.1. */
.cr-collage__photo--narrow {
    flex: 1 1 0;
}

.cr-collage__photo--wide {
    flex: 2.1 1 0;
}

.cr-collage__caption {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* :not() rather than styling every <p>, so the hashtag line below keeps its
   own colour and size without fighting this rule's specificity. */
.cr-collage__caption p:not(.cr-collage__hashtag) {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cr-navy);
}

.cr-collage__caption-mark {
    height: 44px;
    margin: 6px 0;
}

.cr-collage__hashtag {
    margin: 10px 0 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--cr-accent);
}

.cr-collage__stack .cr-collage__caption {
    margin-top: 24px;
}

@media (max-width: 1024px) {
    .cr-collage__rows {
        display: none;
    }

    .cr-collage__stack {
        display: block;
    }
}

@media (max-width: 640px) {
    .cr-collage__caption p:not(.cr-collage__hashtag) {
        font-size: 21px;
    }

    .cr-collage__caption-mark {
        height: 36px;
    }
}

/* ============================================================
   GROWTH MOSAIC - "Grow your career. Shape the classroom of tomorrow."
   Walmart's five-tile mosaic pattern, adapted. Row 1 is three equal tiles;
   row 2 is one wide tile (2x a row-1 tile) plus one regular tile. No
   carousel controls - see growth-mosaic.html for why.
   ============================================================ */
.cr-mosaic {
    display: flex;
    align-items: center;
    gap: 48px;
}

.cr-mosaic__tiles {
    flex: 1 1 68%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cr-mosaic__row {
    display: flex;
    /* flex-start rather than the default stretch: when one accordion tile
       opens and grows taller, its row siblings (a fixed-height photo or the
       brand tile) must not be stretched to match it. */
    align-items: flex-start;
    gap: 16px;
}

.cr-mosaic-tile {
    position: relative;
    height: 220px;
    box-sizing: border-box;
    border-radius: var(--cr-radius-card);
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
}

/* The wide tile in row 2 takes twice a regular tile's share of the row. */
.cr-mosaic-tile--wide {
    flex: 2 1 0;
}

/* The two text tiles are <details> accordions (see growth-mosaic.html for
   why), so unlike every other tile here their height is not fixed - they
   start at the same 220px via min-height, then grow to fit the revealed
   paragraph once opened. overflow is visible, not hidden like the base
   .cr-mosaic-tile rule, so the grown content is never clipped. */
.cr-mosaic-tile--light,
.cr-mosaic-tile--dark {
    height: auto;
    min-height: 220px;
    overflow: visible;
    padding: 20px;
    cursor: pointer;
}

.cr-mosaic-tile--light {
    background-color: var(--cr-bg-alt);
    border: 1px solid var(--cr-border-soft);
}

.cr-mosaic-tile--dark {
    background-color: var(--cr-navy);
}

/* Reset the browser's own disclosure triangle - the chevron in the summary
   is the only expand/collapse indicator. */
.cr-accordion-tile {
    list-style: none;
}

.cr-accordion-tile__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.cr-accordion-tile__summary::-webkit-details-marker {
    display: none;
}

.cr-mosaic-tile--light .cr-accordion-tile__summary {
    color: var(--cr-navy);
}

.cr-mosaic-tile--dark .cr-accordion-tile__summary {
    color: #ffffff;
}

.cr-accordion-tile__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid currentColor;
}

/* Matches the real timing on Walmart's own page (verified by driving it, not
   guessed): the icon rotates 180 degrees over 0.5s on toggle. */
.cr-accordion-tile__chevron svg {
    display: block;
    transition: transform 0.5s ease-in-out;
}

.cr-accordion-tile[open] .cr-accordion-tile__chevron svg {
    transform: rotate(180deg);
}

.cr-accordion-tile__body {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.cr-mosaic-tile--light .cr-accordion-tile__body {
    color: var(--cr-muted);
}

.cr-mosaic-tile--dark .cr-accordion-tile__body {
    color: rgba(255, 255, 255, 0.82);
}

.cr-mosaic-tile--brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cr-accent);
}

.cr-mosaic-tile--brand video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Shared unmute button for every self-hosted, autoplaying video on this
   page (the growth mosaic's brand tile, the statement video) - each one
   sits inside a `position: relative` media wrapper, so this only needs to
   be positioned once. */
.cr-video-toggle {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(20, 40, 77, 0.55);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cr-video-toggle:hover {
    background-color: rgba(20, 40, 77, 0.8);
}

.cr-video-toggle__icon--unmuted {
    display: none;
}

.cr-video-toggle.is-unmuted .cr-video-toggle__icon--muted {
    display: none;
}

.cr-video-toggle.is-unmuted .cr-video-toggle__icon--unmuted {
    display: flex;
}

.cr-mosaic-tile--photo {
    margin: 0;
    background-color: var(--cr-bg-alt);
    border: 1px solid var(--cr-border-soft);
}

.cr-mosaic-tile--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The regular photo tile's auto-advancing slider: every slide is stacked in
   the same box and crossfaded on opacity, the same mechanism the hero's
   department rotator uses (see cr-rotate) - careers.js only ever toggles
   which slide carries is-current. .cr-mosaic-tile already sets
   position: relative, which is what lets these stack.

   Desktop: the wrapper is invisible plumbing - .cr-photo-slider__slide-fg
   alone fills it with object-fit: cover, same as every other photo tile on
   this page. object-position pulls the crop up from a plain centre crop,
   since most of these slides are portraits of someone standing - centred
   would cut their head off.

   Below 640px this same markup gets a different treatment entirely - see
   the mobile media query further down - because the row layout there makes
   this box proportionally much wider, wide enough that the same cover crop
   was losing far more of each photo than a comfortable trim. */
.cr-photo-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.cr-photo-slider__slide.is-current {
    opacity: 1;
}

.cr-photo-slider__slide-fg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
    display: block;
}

.cr-mosaic__copy {
    flex: 1 1 28%;
    min-width: 0;
}

.cr-mosaic__heading {
    font-size: var(--cr-fs-h2);
    font-weight: var(--cr-fw-h2);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cr-navy);
    margin: 0 0 24px;
}

@media (max-width: 1024px) {
    .cr-mosaic {
        flex-direction: column;
        align-items: stretch;
    }

    .cr-mosaic__tiles {
        flex: 1 1 auto;
    }

    .cr-mosaic__copy {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .cr-mosaic__row {
        flex-direction: column;
        /* .cr-mosaic__row sets align-items: flex-start for the desktop row
           layout, so a tall opened accordion does not stretch its row
           siblings' height. Once flex-direction flips to column here, that
           same property governs width instead of height - left as
           flex-start, every tile would collapse to its own content width
           (an empty img has none) instead of filling the row. stretch
           undoes that for width while leaving each tile's height exactly
           as tall as its own content, same as before. */
        align-items: stretch;
    }

    .cr-mosaic-tile,
    .cr-mosaic-tile--wide {
        flex: 1 1 auto;
        height: 180px;
    }

    /* The two accordion tiles are excluded from the fixed height above -
       height:180px would clip an expanded body paragraph on small screens.
       min-height is shorter than the photo/video tiles' 180px on purpose:
       closed, there is only a heading and a chevron to show, and matching
       180px left a large empty gap under them once every tile became full
       width (see the align-items note above) - it opens back up to fit the
       revealed paragraph regardless of this floor. */
    .cr-mosaic-tile--light,
    .cr-mosaic-tile--dark {
        height: auto;
        min-height: 100px;
    }

    /* Mobile only: the slider tiles are full width here (see align-items
       note above), which makes the box noticeably wider relative to its
       180px height than the desktop row layout - the desktop cover crop
       was losing far more of each photo on this wider box, not just a
       comfortable top/bottom trim, so .cr-photo-slider__slide-fg switches
       to object-fit: contain here to show the whole photo. A flat colour
       behind that letterboxed photo still read as empty space, so the
       wrapper's own background-image (set inline per slide - see
       growth-mosaic.html) fills it instead, blown up and blurred by the
       ::before below, the same "photo behind the photo" treatment apps
       like Instagram use for portrait media in a landscape frame. */
    .cr-photo-slider__slide {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }

    .cr-photo-slider__slide::before {
        content: "";
        position: absolute;
        inset: -20px;
        background: inherit;
        background-size: cover;
        background-position: center;
        filter: blur(24px);
        transform: scale(1.15);
    }

    /* Two classes, not one: .cr-photo-slider__slide-fg's own base rule
       (also one class) sets object-fit: cover for desktop, declared earlier
       in the file - same specificity means source order would decide, and
       relying on staying below it is fragile. .cr-mosaic-tile--photo
       .cr-photo-slider__slide-fg (two classes) outranks it outright. */
    .cr-mosaic-tile--photo .cr-photo-slider__slide-fg {
        position: relative;
        z-index: 1;
        object-fit: contain;
    }
}

/* ============================================================
   SEE TEACHMINT IN ACTION - video card row
   ============================================================ */
.cr-videos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cr-video-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cr-video-card__thumb {
    position: relative;
    display: block;
    border-radius: var(--cr-radius-media);
    overflow: hidden;
    border: 1px solid var(--cr-border-soft);
    background-color: var(--cr-bg-alt);
    /* YouTube's hqdefault thumbnail is always 480x360 (4:3), whatever the
       video's own aspect ratio - matching the crop here keeps it undistorted. */
    aspect-ratio: 4 / 3;
}

.cr-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.cr-video-card:hover .cr-video-card__thumb img {
    transform: scale(1.04);
}

.cr-video-card__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-video-card__play svg {
    color: #ffffff;
}

/* The circle behind the triangle, drawn separately from the SVG so its own
   background can dim/brighten on hover independently of the icon colour.
   Centred with top/left/transform rather than relying on the parent's flex
   centring - an absolutely positioned pseudo-element falls out of flex flow,
   so it is not reliably centred by the container's own align/justify rules. */
.cr-video-card__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(20, 40, 77, 0.55);
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease;
}

.cr-video-card:hover .cr-video-card__play::before {
    background-color: var(--cr-accent);
}

.cr-video-card__title {
    display: block;
    margin-top: 14px;
    font-size: var(--cr-fs-title);
    font-weight: var(--cr-fw-title);
    line-height: 1.35;
    color: var(--cr-navy);
}

.cr-video-card:hover .cr-video-card__title {
    color: var(--cr-accent);
}

/* ============================================================
   HQ + CLOSING CTA
   ============================================================ */
.cr-cta {
    background:
        radial-gradient(circle at 50% 0%, rgba(29, 161, 242, 0.12), transparent 62%),
        var(--cr-bg-alt);
    border-top: 1px solid var(--cr-border-soft);
    text-align: center;
    padding: var(--cr-py) 24px;
}

.cr-cta__heading {
    font-size: var(--cr-fs-h2);
    font-weight: var(--cr-fw-h2);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cr-navy);
    margin: 0 auto 14px;
    max-width: 640px;
}

.cr-cta__text {
    font-size: var(--cr-fs-lede);
    line-height: 1.6;
    color: var(--cr-muted);
    max-width: 620px;
    margin: 0 auto 28px;
}

.cr-cta__hq {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cr-muted-2);
    max-width: 520px;
    margin: 28px auto 0;
}

.cr-cta__hq strong {
    color: var(--cr-navy);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --cr-px: 40px;
        --cr-py: 56px;
    }

    .cr-hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .cr-statement__inner { grid-template-columns: 1fr; gap: 32px; }
    .cr-hero__img { max-width: 560px; margin: 0 auto; }

    .cr-search__row { grid-template-columns: 1fr 1fr; }
    .cr-search__submit { grid-column: 1 / -1; }

    .cr-grid--5 { grid-template-columns: repeat(3, 1fr); }
    .cr-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .cr-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .cr-videos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    :root {
        --cr-px: 20px;
        --cr-py: 44px;
        /* home.css flattens every section heading to 24px on phones */
        --cr-fs-h2: 24px;
    }

    .cr-hero__inner { padding: calc(var(--rv-nav-space, 70px) + 28px) var(--cr-px) 44px; }
    .cr-hero__heading { font-size: 34px; }

    .cr-hero__grid { gap: 24px; margin-bottom: 32px; }
    .cr-hero__img { max-width: 100%; }

    .cr-search__row { grid-template-columns: 1fr; }
    .cr-search { padding: 16px; }

    .cr-grid--5,
    .cr-grid--4,
    .cr-grid--3,
    .cr-gallery,
    .cr-videos { grid-template-columns: 1fr; }

    .cr-job { padding: 20px; }
    .cr-job__title { font-size: 18px; }
    .cr-job__action,
    .cr-job__action .cr-btn { width: 100%; }


    .cr-pager__page,
    .cr-pager__step { min-width: 36px; height: 36px; padding: 0 8px; font-size: 14px; }
}