/* ============================================================
   CAREERS HERO BANNER
   ============================================================ */

/*
 * html — Global smooth scrolling behaviour for the Careers page.
 * scroll-behavior: smooth animates anchor-link jumps (e.g. the "View Openings"
 * CTA scrolling down to the jobs section) instead of jumping instantly.
 */
html {
    scroll-behavior: smooth;
}

/*
 * .hero-careers — Full-width video hero banner for the Careers page.
 * aspect-ratio 16/9 makes the banner height proportional to the viewport width
 * so the proportions stay cinematic at every desktop size.
 * overflow: hidden clips the absolutely-positioned video to the banner bounds.
 * Dark background (#0a1428) is the fallback colour shown while the video loads.
 */
.hero-careers {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: #0a1428;
}

/* Background layer — hidden, dark background colour shows instead */
.hero-careers-bg {
    display: none;
}

/* Real video — covers full banner */
.hero-careers-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/*
 * .hero-careers-overlay — Translucent gradient layer that sits between the
 * video and the text content.
 * The gradient fades from a stronger dark tint at the bottom (where text lives)
 * to near-transparent at the top, ensuring legibility without fully obscuring
 * the video image.
 */
.hero-careers-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: none;
}

/* Inner content sits over the video */
.hero-careers-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 22% 48px 48px;
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * .hero-careers-content — Centred max-width wrapper that constrains the
 * heading, subtext, and CTA to a readable column within the full-width banner.
 * margin: 0 auto horizontally centres it regardless of viewport width.
 */
.hero-careers-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Play button — top-right corner on desktop */
.hero-play-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #1C48AA;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}

/*
 * .hero-play-btn:hover — Hover state for the play button.
 * Darkens the button background and slightly enlarges the button via scale
 * to give tactile feedback that the button is interactive.
 */
.hero-play-btn:hover {
    background: #1C48AA;
    transform: scale(1.06);
}

/*
 * .hero-play-btn svg — Constrains the SVG play icon within the button.
 * Explicit width/height ensure the icon stays centered and doesn't stretch
 * if the browser applies unexpected default SVG sizing.
 */
.hero-play-btn svg {
    width: 20px;
    height: 20px;
}

/*
 * .hero-careers-content (second declaration) — Resets top margin to zero.
 * This override ensures no extra space appears above the content block
 * regardless of inherited margin values from parent or theme styles.
 */
.hero-careers-content {
    margin-top: 0;
}

/*
 * .hero-careers-heading — Large, bold page headline displayed over the video.
 * clamp() scales the font fluidly between 3rem (mobile) and 5.5rem (wide screens).
 * max-width: 700px limits the heading to roughly two lines so it doesn't
 * sprawl across the full banner width on large monitors.
 */
.hero-careers-heading {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.0;
    margin: 0 0 20px;
    max-width: 700px;
    letter-spacing: -0.01em;
}

/*
 * .hero-careers-subtext — Supporting paragraph displayed below the headline.
 * clamp() keeps the font readable on mobile while capping it on desktop.
 * max-width: 580px keeps the line length comfortable and distinct from the
 * wider heading block above it.
 */
.hero-careers-subtext {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
    margin: 0 0 32px;
    max-width: 580px;
}

/*
 * .hero-careers-cta — Primary call-to-action button/link in the hero banner.
 * inline-flex with gap arranges the button label and optional icon side by side.
 * The blue background and bold weight make it stand out against the dark overlay.
 */
.hero-careers-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    transition: background 0.2s;
}

/*
 * .hero-careers-cta:hover — Darkens the CTA button on hover to signal
 * interactivity, using the same darker blue used elsewhere in the design system.
 */
.hero-careers-cta:hover {
    background: #1C48AA;
}

/*
 * @media (max-width: 640px) — Mobile overrides for the hero banner.
 * Removes the fixed 16:9 aspect-ratio so the banner can grow taller to
 * accommodate stacked content on narrow screens. The inner container switches
 * from absolute to relative positioning so the document flow can determine
 * the height naturally. The play button becomes static (in-flow) and moves
 * to the top of the content stack rather than being pinned to a corner.
 * The CTA stretches full-width for an easier tap target.
 */
@media (max-width: 640px) {
    .hero-careers {
        aspect-ratio: unset;
        min-height: 670px;
    }

    .hero-careers-video,
    .hero-careers-poster {
        object-position: bottom center;
    }

    .hero-careers-inner {
        padding: 40px 20px;
        justify-content: center;
    }

    .hero-careers-subtext {
        margin: 0 0 10px;
        padding-right: 50px;
    }

    /* Play button moves to top-left on mobile */
    .hero-play-btn {
        position: static;
        width: 64px;
        height: 64px;
        margin-bottom: 28px;
        border-radius: 6px;
    }

    .hero-play-btn svg {
        width: 24px;
        height: 24px;
    }

    .hero-careers-content {
        margin-top: 0;
    }

    .hero-careers-cta {
        width: fit-content;
        align-self: flex-start;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 1.0625rem;
    }
}


/* ============================================================
   CAREERS VALUES
   ============================================================ */

/*
 * .section-careers-values — Full-width section housing the company values cards.
 * Light blue-grey background (#eef2f8) differentiates this section from the
 * white sections above and below it. Generous padding gives the content room
 * to breathe on all viewport sizes.
 */
.section-careers-values {
    background-color: #eef2f8;
    padding: 80px 24px;
}

/*
 * .values-container — Centred max-width wrapper for the values section content.
 * Constrains the grid and header to 1200px so lines don't become too wide on
 * ultra-wide monitors.
 */
.values-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.values-header {
    margin-bottom: 50px;
}

/*
 * .values-heading — Section headline for the Values block.
 * clamp() scales the font between 2rem and 3rem based on viewport width.
 * Brand blue (#1C48AA) and heavy weight (900) make this the visual anchor
 * of the section.
 */
.values-heading {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #1C48AA;
    margin-bottom: 12px;
    line-height: 1.1;
}

/*
 * .values-subtext — Supporting paragraph below the values section heading.
 * Slightly larger than body text (1.3rem) and in a muted grey to create
 * visual hierarchy beneath the bold blue heading.
 */
.values-subtext {
    font-size: 1.3rem;
    color: #6b7a99;
    line-height: 1.6;
    margin: 0;
}

/* Grid: single column on mobile, 3 columns on desktop */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Card — centered by default (mobile-first), left-aligned on wide desktop */
.value-card {
    background: #ffffff;
    padding: 36px 28px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

/*
 * .value-card:hover — Lift effect for individual value cards on hover.
 * translateY(-4px) gently raises the card and an enhanced box-shadow increases
 * depth, reinforcing that the card is a distinct, interactive element.
 */
.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Icon — rounded square, not circle */
.value-icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dce8ff;
    border-radius: 16px;
    flex-shrink: 0;
}

/*
 * .value-icon — Image-based icon displayed inside the icon wrapper.
 * object-fit: contain ensures the icon scales proportionally within the
 * fixed 36×36 box without cropping or distorting.
 */
.value-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/*
 * .value-icon-wrap .dashicons — Sizes a WordPress Dashicon used as a fallback
 * icon inside the value card icon wrapper. Explicit width, height, and
 * font-size are all needed because Dashicons use a font-based rendering where
 * font-size controls the visual size.
 */
.value-icon-wrap .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #1C48AA;
}

/*
 * .value-icon-svg — Inline SVG icon style for value cards.
 * stroke settings (width 1.75, round caps/joins) give icons a consistent
 * outlined look. fill: none prevents the SVG path from being filled,
 * keeping only the stroke visible.
 */
.value-icon-svg {
    width: 32px;
    height: 32px;
    color: #1C48AA;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Card Typography */
.value-card-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: #1C48AA;
    margin: 0;
    line-height: 1.25;
}

/*
 * .value-card-copy — Descriptive paragraph text inside each value card.
 * Slightly smaller than body text (0.9375rem) and a lighter grey keeps it
 * subordinate to the card title while remaining readable.
 */
.value-card-copy {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #6b7280;
}

.value-card .value-card-copy {
    margin: 4px 0 0 !important;
}

/* Desktop — left-align when 3 columns are showing */
@media (min-width: 960px) {
    .value-card {
        text-align: left;
    }

    .value-icon-wrap {
        margin: 0 0 28px 0;
    }
}

/*
 * @media (max-width: 640px) — Mobile overrides for the Values section.
 * Reduces vertical padding to 60px to tighten spacing on small screens.
 * The auto-fit grid is overridden to a single column so cards always
 * stack rather than creating awkwardly narrow two-column layouts.
 */
@media (max-width: 640px) {
    .section-careers-values {
        padding: 36px 20px;
    }

    .values-header {
        margin-bottom: 28px;
    }

    .value-card {
        padding: 24px 20px;
    }

    .value-card-title {
        margin-bottom: 0;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CAREERS TRACKS — Three Ways to Join Us
   ============================================================ */

/*
 * .section-join-tracks — White-background section presenting the three career
 * tracks (In-Store, Warehouse, Corporate). White contrasts with the adjacent
 * blue-grey sections. Generous padding mirrors the values section rhythm.
 */
.section-join-tracks {
    background-color: #ffffff;
    padding: 80px 24px;
}

/*
 * .tracks-container — Centred max-width wrapper for the career tracks section.
 * Keeps the three-column grid and header text within a 1200px column,
 * consistent with other section containers on the page.
 */
.tracks-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.tracks-header {
    margin-bottom: 48px;
}

/*
 * .tracks-heading — Section headline for the career tracks block.
 * Uses the same clamp() scale and brand blue as other section headings to
 * maintain typographic consistency across the page.
 */
.tracks-heading {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #1C48AA;
    margin-bottom: 12px;
    line-height: 1.1;
}

/*
 * .tracks-subtext — Supporting paragraph below the tracks heading.
 * Mirrors the values-subtext style — same size, colour, and line-height —
 * so all section intros feel visually consistent.
 */
.tracks-subtext {
    font-size: 1.3rem;
    color: #6b7a99;
    line-height: 1.6;
    margin: 0;
}

/* 3-column grid on desktop, single column on mobile */
.tracks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* ---- Image block ---- */
/*
 * .track-image-wrap — Container for each career track's portrait-style photo.
 * aspect-ratio: 3/4 creates a tall portrait crop that accommodates full-body
 * or environment shots well. overflow: hidden clips the image to the
 * rounded-corner boundary.
 */
.track-image-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

/*
 * .track-image — The actual photo inside the track image wrapper.
 * width/height 100% fills the wrapper completely; object-fit: cover
 * ensures the image always covers the area without letterboxing.
 */
.track-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder when no image is uploaded */
.track-image-placeholder {
    width: 100%;
    height: 100%;
}

/*
 * .track-placeholder--in.store / .track-placeholder--in\ store — Gradient
 * placeholder shown for the In-Store track when no image has been uploaded.
 * The blue gradient matches the In-Store brand association.
 */
.track-placeholder--in.store,
.track-placeholder--in\ store {
    background: linear-gradient(135deg, #1a4fa0 0%, #3a7bd5 100%);
}

/*
 * .track-placeholder--warehouse — Gradient placeholder for the Warehouse track.
 * Green gradient visually differentiates this track from In-Store and Corporate.
 */
.track-placeholder--warehouse {
    background: linear-gradient(135deg, #2d6a4f 0%, #52b788 100%);
}

/*
 * .track-placeholder--corporate — Gradient placeholder for the Corporate track.
 * Dark navy-to-indigo gradient aligns with a professional office aesthetic.
 */
.track-placeholder--corporate {
    background: linear-gradient(135deg, #1a1a2e 0%, #4a4a8a 100%);
}

/* Dark gradient + label overlay */
.track-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
}

/*
 * .track-overlay-label — Track name text (e.g. "In-Store") displayed at the
 * bottom of each photo over the dark gradient overlay.
 * font-weight: 800 and a large size ensure legibility on top of the image.
 */
.track-overlay-label {
    color: #ffffff;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
}

/* ---- Content block ---- */
/*
 * .track-content — Text content area beneath each track's image.
 * padding-top: 24px separates the text from the image while keeping the
 * two visually grouped within the same column.
 */
.track-content {
    padding-top: 24px;
}

/*
 * .track-subhead — Bold subheading within the track content block, typically
 * a short descriptive phrase for the track (e.g. "Start on the floor.").
 * Brand blue and heavy weight make it the primary typographic element in
 * the text portion of each track card.
 */
.track-subhead {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1C48AA;
    line-height: 1.35;
    margin-bottom: 12px;
}

/*
 * .track-desc — Descriptive paragraph for each career track.
 * A slightly muted grey (#555) and comfortable line-height keep this
 * secondary text readable without competing with the heading or roles list.
 */
.track-desc {
    font-size: 0.9375rem;
    color: #555;
    line-height: 1.65;
    margin: 0 0 16px;
}

/* Roles list */
/*
 * .track-roles ul / .track-roles-list — Unordered list of example roles for
 * each career track. list-style: none removes default bullets so they can be
 * replaced with custom dot characters via ::before pseudo-elements.
 */
.track-roles ul,
.track-roles-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * .track-roles ul li / .track-roles-list li — Individual role items in the
 * track roles list. padding-left: 14px reserves space for the custom bullet
 * character injected by the ::before pseudo-element.
 */
.track-roles ul li,
.track-roles-list li {
    font-size: 0.9375rem;
    color: #1C48AA;
    padding: 2px 0;
    position: relative;
    padding-left: 14px;
}

/*
 * .track-roles ul li::before / .track-roles-list li::before — Custom bullet
 * character (·) injected before each role list item. Absolutely positioned
 * at left: 0 to align with the padding-left indent on the list item.
 */
.track-roles ul li::before,
.track-roles-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #1C48AA;
    font-weight: 700;
}

/* ---- Responsive ---- */
/*
 * @media (max-width: 900px) — Tablet/medium-screen overrides for the tracks grid.
 * Collapses the three-column grid to a single column so each track gets full
 * width. The image aspect-ratio switches from portrait (3/4) to widescreen
 * (16/9) so the images don't dominate the viewport in a stacked layout.
 */
@media (max-width: 900px) {
    .tracks-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .track-image-wrap {
        aspect-ratio: 16 / 9;
    }
}

/*
 * @media (max-width: 640px) — Mobile overrides for the tracks section.
 * Reduces section padding and switches the image to a 4:3 ratio, which is
 * a better fit for narrow screens than the wider 16:9 used at tablet sizes.
 */
@media (max-width: 640px) {
    .section-join-tracks {
        padding: 10px 20px;
    }

    .track-image-wrap {
        aspect-ratio: 1 / 1;
    }

    .track-content {
        padding-top: 12px;
    }

    .track-subhead {
        margin: 0 0 0.5px;
    }
}


/* ============================================================
   CAREERS JOBS — Current Opportunities
   ============================================================ */

/*
 * .section-careers-jobs — Section containing the filterable job listings.
 * Light blue-grey background matches the Values section, creating an
 * alternating white/tinted rhythm across the page.
 */
.section-careers-jobs {
    background-color: #eef2f8;
    padding: 80px 24px;
}

/*
 * .jobs-container — Centred max-width wrapper for the jobs section.
 * Consistent with other section containers at 1200px max-width.
 */
.jobs-container {
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .jobs-header — Header area above the job tabs and listings.
 * Bottom margin separates the heading/subtext from the tab filter row below.
 */
.jobs-header {
    margin-bottom: 40px;
}

/*
 * .jobs-heading — Section headline for the Current Opportunities block.
 * Follows the same clamp() + brand blue pattern as other section headings
 * for typographic consistency across the page.
 */
.jobs-heading {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #1C48AA;
    margin-bottom: 12px;
    line-height: 1.1;
}

/*
 * .jobs-subtext — Supporting paragraph below the jobs heading.
 * Uses the same muted blue-grey colour and size as other section subtexts
 * to maintain visual consistency.
 */
.jobs-subtext {
    font-size: 1.3rem;
    color: #6b7a99;
    line-height: 1.6;
    margin: 0;
}

/*
 * .careers-module — Full-width wrapper for the entire jobs tab and listing
 * module. Setting width: 100% ensures it expands to fill the jobs container
 * rather than collapsing to content width.
 */
.careers-module {
    width: 100%;
}

/* ---- Tabs ---- */
/*
 * .job-tabs — Horizontal row of category filter tabs above the job listings.
 * flex-wrap: wrap allows tabs to break onto a second line on narrow screens
 * rather than overflowing or shrinking unreadably small.
 */
.job-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

/*
 * .tab-btn — Individual tab filter button (e.g. All, In-Store, Warehouse).
 * Default state uses a muted blue-grey so inactive tabs recede visually
 * while still being clearly clickable.
 */
.tab-btn {
    padding: 10px 28px;
    background: #c4d8ee;
    color: #6a89ad;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/*
 * .tab-btn.active — Active/selected state for a job filter tab.
 * Full brand blue background with white text makes the active tab
 * immediately distinguishable from inactive ones.
 */
.tab-btn.active {
    background: #1C48AA;
    color: #ffffff;
}

/*
 * .tab-btn:hover:not(.active) — Hover state for inactive tab buttons.
 * Slightly darkens the background to signal interactivity without
 * conflicting with the active tab's full-blue appearance.
 */
.tab-btn:hover:not(.active) {
    background: #b0c8e4;
}

/* ---- Job Cards ---- */
/*
 * .job-card — Individual job listing card container.
 * A thin blue-tinted border and rounded corners distinguish each card from
 * the section background. overflow: hidden ensures the expanded content
 * panel respects the card's border-radius.
 */
.job-card {
    background: #ffffff;
    border: 1.5px solid #dce8f5;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

/*
 * .job-header — The always-visible top row of a job card containing the job
 * title, location, and the Apply Now toggle button.
 * justify-content: space-between pushes the title area and button to opposite
 * ends of the row.
 */
.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    gap: 16px;
}

/*
 * .job-title-area — Flex child that holds the job title and location text.
 * flex: 1 lets it grow to fill available space; min-width: 0 prevents long
 * titles from overflowing the flex container.
 */
.job-title-area {
    flex: 1;
    min-width: 0;
}

/*
 * .job-title — Job position name displayed in the card header row.
 * Bold weight and brand blue make it the primary text element in the row,
 * clearly identifying the role at a glance.
 */
.job-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1C48AA;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

/*
 * .job-location — Secondary line below the job title showing where the
 * role is based. Smaller size and muted grey visually subordinates it to
 * the job title above.
 */
.job-location {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
}

/* Apply Now toggle button */
.btn-toggle-apply {
    background: #1C48AA;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.btn-apply-indeed {
    background: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
    width: fit-content;
}

.btn-apply-indeed .arrow {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
}

.btn-apply-indeed:hover {
    background: #1C48AA;
    color: #ffffff;
}

/*
 * .btn-toggle-apply .arrow — The chevron/arrow icon inside the toggle button.
 * transition: transform allows the icon to animate when the card opens,
 * rotating 180° to indicate the panel can be collapsed again.
 */
.btn-toggle-apply .arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.75rem;
}

/*
 * .job-card.is-open .btn-toggle-apply — State change for the Apply button
 * when a job card's detail panel is expanded. The button switches to BBOS
 * yellow (#F8D648) with blue text to signal the open/active state.
 */
.job-card.is-open .btn-toggle-apply {
    background: #F8D648;
    color: #1C48AA;
}

/*
 * .job-card.is-open .arrow — Rotates the chevron icon 180° when a job card
 * is expanded, visually indicating the toggle direction has reversed.
 */
.job-card.is-open .arrow {
    transform: rotate(180deg);
}

/* ---- Expanded content ---- */
/*
 * .job-content — The collapsible detail panel inside a job card, containing
 * the full job description, requirements lists, and application form.
 * A top border subtly separates it from the always-visible card header.
 */
.job-content {
    padding: 0 24px 28px;
    border-top: 1px solid #edf2f8;
}

/* hidden attr support alongside JS is-open class */
.job-content[hidden] { display: none; }
.job-card.is-open .job-content { display: block; }

/*
 * .job-intro — Introductory paragraph at the top of the expanded job content.
 * Lighter grey text and comfortable line-height make it easy to skim before
 * the more structured requirements lists below.
 */
.job-intro {
    font-size: 0.9375rem;
    color: #555;
    line-height: 1.65;
    margin: 20px 0 0;
}

/*
 * .job-lists — Horizontal row containing the Responsibilities and Requirements
 * columns inside an expanded job card. gap: 40px provides clear visual
 * separation between the two columns.
 */
.job-lists {
    display: flex;
    gap: 40px;
    margin: 20px 0 24px;
}

/*
 * .list-col — Individual column within the job-lists flex row (e.g. one column
 * for Responsibilities, one for Requirements). flex: 1 ensures both columns
 * share available width equally.
 */
.list-col {
    flex: 1;
}

/*
 * .list-col h4 — Section label headings within each job details column
 * (e.g. "What you'll do", "What you bring"). Bold weight and brand blue
 * distinguish these from the list items below.
 */
.list-col h4 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #1C48AA;
    margin: 0 0 10px;
}

/*
 * .list-col ul — Bulleted list of responsibilities or requirements within a
 * job card column. padding-left: 18px indents items to align with the list
 * marker; smaller font and generous line-height aid scannability.
 */
.list-col ul {
    padding-left: 18px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #444;
}

/* ---- Application form ---- */
/*
 * .application-form-wrapper — Styled container for the inline job application
 * form that appears when a card is expanded. The light blue background
 * (#d4e3f3) visually separates the form from the job description above it.
 */
.application-form-wrapper {
    background: #d4e3f3;
    padding: 28px 28px 24px;
    border-radius: 10px;
}

/*
 * .form-title — Heading at the top of the application form block.
 * The left yellow border (4px solid #F8D648) is an accent that draws
 * attention to the form heading, consistent with BBOS brand accents.
 */
.form-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1C48AA;
    margin: 0 0 20px;
    padding-left: 12px;
    border-left: 4px solid #F8D648;
    line-height: 1.2;
}

/* ---- Form grid (flat 6-column, responsive) ---- */
/*
 * .form-grid — 6-column CSS grid that controls the layout of all application
 * form fields. A 6-column base gives fine-grained control: fields can span
 * 2 columns (third-width), 3 columns (half-width), 4 columns, or the full
 * 6 columns depending on the field type.
 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    align-items: start;
}

/* Desktop column assignments */
.fg-first    { grid-column: span 2; }
.fg-middle   { grid-column: span 2; }
.fg-last     { grid-column: span 2; }
.fg-email    { grid-column: span 3; }
.fg-phone    { grid-column: span 3; }
.fg-city     { grid-column: span 3; }
.fg-province { grid-column: span 3; }
.fg-linkedin { grid-column: span 4; }
.fg-employment,
.fg-about,
.fg-checks,
.fg-resume,
.fg-docs,
.fg-privacy,
.fg-referral,
.fg-submit,
.fg-note     { grid-column: span 6; }

/* Shared input styles */
/*
 * .application-form .fg[type="text"] etc. — Shared base styles applied to
 * all text, email, tel, url, select, and textarea inputs in the application
 * form. width: 100% and box-sizing: border-box ensure fields fill their grid
 * column without overflowing. appearance: none removes default OS styling
 * so the custom border/radius/background are consistently applied.
 */
.application-form .fg[type="text"],
.application-form .fg[type="email"],
.application-form .fg[type="tel"],
.application-form .fg[type="url"],
.application-form select.fg,
.application-form textarea.fg {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #b8cfe8;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #ffffff;
    color: #333;
    box-sizing: border-box;
    appearance: none;
}

/*
 * .application-form select.fg — Additional overrides for the select dropdown
 * in the application form. A custom SVG chevron injected via background-image
 * replaces the browser's default dropdown arrow, keeping the look consistent
 * across all browsers. padding-right: 36px reserves space for the icon.
 */
.application-form select.fg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230046ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/*
 * .application-form textarea.fg — Textarea-specific overrides for the
 * application form. resize: vertical lets users make the textarea taller
 * if needed while preventing unwanted horizontal stretching that could
 * break the grid layout.
 */
.application-form textarea.fg {
    resize: vertical;
    min-height: 110px;
}

/*
 * .application-form .fg::placeholder — Placeholder text colour for all
 * form inputs and textareas. A light grey (#999) keeps placeholder text
 * clearly distinguishable from real user input.
 */
.application-form .fg::placeholder,
.application-form textarea.fg::placeholder {
    color: #999;
}

/* Employment type pills */
/*
 * .fg-employment — Flex container that wraps the employment-type pill
 * checkboxes (e.g. Full-Time, Part-Time, Seasonal). flex-wrap: wrap ensures
 * pills reflow onto multiple lines on narrow viewports.
 */
.fg-employment {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/*
 * .employment-pill input[type="checkbox"] — Visually hides the native
 * checkbox for employment type pills so the styled <span> sibling acts as
 * the visible toggle. position: absolute with zero width/height keeps it
 * accessible to screen readers and keyboard navigation.
 */
.employment-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/*
 * .employment-pill span — The visible pill label for each employment type
 * option. Styled as a bordered, rounded badge; transitions on background,
 * border-color, and color allow smooth toggling between selected/unselected.
 */
.employment-pill span {
    display: inline-block;
    padding: 9px 16px;
    background: #ffffff;
    border: 1.5px solid #b8cfe8;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a6a8a;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

/*
 * .employment-pill input:checked + span — Selected state for an employment
 * type pill. Fills the pill with brand blue and switches text to white,
 * making checked options visually distinct from unchecked ones.
 */
.employment-pill input:checked + span {
    background: #1C48AA;
    border-color: #1C48AA;
    color: #ffffff;
}

/* Checkboxes */
/*
 * .fg-checks — Flex column wrapper for the form's boolean checkboxes
 * (e.g. "I am eligible to work in Canada"). flex-direction: column stacks
 * each checkbox+label pair vertically with consistent spacing.
 */
.fg-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
 * .form-check — Container for a single checkbox + label pair.
 * align-items: flex-start ensures the checkbox aligns to the top of multi-line
 * label text rather than centering vertically, which can look off on longer
 * labels.
 */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

/*
 * .form-check input[type="checkbox"] — The native checkbox within a form-check
 * pair. accent-color applies the brand blue to the checkbox tick/fill in
 * supporting browsers. flex-shrink: 0 prevents the checkbox from being
 * squeezed by long label text.
 */
.form-check input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #1C48AA;
}

/*
 * .form-check span — Label text for a form checkbox item.
 * Slightly smaller than body text and a medium grey keep checkbox labels
 * readable without drawing too much visual weight.
 */
.form-check span {
    font-size: 0.875rem;
    color: #444;
    line-height: 1.5;
}

/* File upload blocks */
/*
 * .file-upload-block — Styled container for resume and document upload fields.
 * White background with a bordered, rounded box visually groups the upload
 * label and file input, distinguishing them from regular text inputs.
 */
.file-upload-block {
    background: #ffffff;
    border: 1px solid #b8cfe8;
    border-radius: 6px;
    padding: 14px 16px;
}

/*
 * .file-upload-label — Instructional label displayed above the file input
 * within a file upload block (e.g. "Upload your résumé (PDF or Word)").
 * Smaller size and grey colour subordinate it to the form title above.
 */
.file-upload-label {
    font-size: 0.8125rem;
    color: #666;
    margin: 0 0 8px;
}

/*
 * .file-upload-block input[type="file"] — The native file picker input inside
 * a file upload block. Font-size and color are set to keep the chosen filename
 * text readable and consistent with surrounding form elements.
 */
.file-upload-block input[type="file"] {
    font-size: 0.875rem;
    color: #444;
}

/* Required note */
/*
 * .form-required-note — Small footnote at the bottom of the form indicating
 * which fields are required. Very small size and muted grey make it
 * supplementary information that doesn't compete with the submit button.
 */
.form-required-note {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

/* Submit */
/*
 * .btn-submit — Primary form submission button for the job application form.
 * Full brand blue, bold font, and inline-flex layout (to align label and icon)
 * make it the dominant action element at the bottom of the form.
 */
.btn-submit {
    background: #1C48AA;
    color: #ffffff;
    border: none;
    padding: 13px 28px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    justify-content: center;
}

/*
 * .btn-submit:hover — Hover state for the form submit button.
 * Darkens to the same deeper blue used across all hover states on the page
 * for consistency.
 */
.btn-submit:hover {
    background: #1C48AA;
}

/*
 * .no-jobs — Inline message displayed when a filtered tab has no matching
 * job listings. Muted grey text keeps it unobtrusive — it's informational,
 * not a primary content element.
 */
.no-jobs {
    color: #777;
    font-size: 0.9375rem;
}

/*
 * .no-jobs-available — Paragraph shown below the tabs when no jobs at all
 * are currently posted. Slightly larger and darker than .no-jobs to give
 * this page-level message appropriate prominence.
 */
.no-jobs-available {
    color: #222;
    font-size: 1rem;
    margin: 24px 0 0;
}

/* Talent Pool CTA */
/*
 * .talent-pool-section — Container for the "Not seeing a fit? Join our Talent
 * Pool" call-to-action displayed below all job listings. top margin separates
 * it clearly from the last job card.
 */
.talent-pool-section {
    margin-top: 48px;
}

/*
 * .talent-pool-divider — Horizontal rule that separates the job listings from
 * the talent pool CTA below. A light grey, borderless line creates visual
 * separation without adding heavy visual weight.
 */
.talent-pool-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0 0 32px;
}

/*
 * .talent-pool-cta — Flex row containing the talent pool prompt text and
 * the "Join Our Talent Pool" button. flex-wrap: wrap allows them to stack
 * vertically on narrow viewports.
 */
.talent-pool-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/*
 * .talent-pool-prompt — The invitation text alongside the talent pool button
 * (e.g. "Don't see a role that fits? We'd still love to hear from you.").
 * Medium weight and standard body size keep it readable without dominating
 * the adjacent button.
 */
.talent-pool-prompt {
    font-size: 1.05rem;
    color: #444;
    margin: 0;
    font-weight: 500;
}

/*
 * .btn-talent-pool — Button that opens the talent pool application form.
 * Styled identically to other primary CTA buttons (blue, bold, inline-flex)
 * so it fits the page's button design language.
 */
.btn-talent-pool {
    background: #1C48AA;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    white-space: nowrap;
}

/*
 * .btn-talent-pool:hover — Hover state for the talent pool button.
 * Uses the same darker navy (#1C48AA) to signal interactivity.
 */
.btn-talent-pool:hover {
    background: #1C48AA;
}

/*
 * .btn-talent-pool.is-open — Active/open state for the talent pool button
 * when the form panel is expanded. Switches to BBOS yellow with blue text,
 * mirroring the .job-card.is-open pattern for consistency.
 */
.btn-talent-pool.is-open {
    background: #F8D648;
    color: #1C48AA;
}

/*
 * .btn-talent-pool .arrow — The chevron/arrow icon inside the talent pool
 * button. Animated rotation indicates whether the form panel below is
 * open or closed.
 */
.btn-talent-pool .arrow {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s;
    transform: rotate(90deg);
}

.btn-talent-pool.is-open .arrow {
    transform: rotate(90deg) scaleY(-1);
}

/*
 * .talent-pool-form-wrapper — Container for the talent pool application form
 * that expands below the CTA row. Top margin separates it from the button
 * row above when it becomes visible.
 */
.talent-pool-form-wrapper {
    margin-top: 32px;
}

/*
 * .talent-pool-form-wrapper[hidden] — Hides the talent pool form panel when
 * the hidden HTML attribute is present. JavaScript removes this attribute
 * (rather than toggling a class) to show the form.
 */
.talent-pool-form-wrapper[hidden] {
    display: none;
}


/* ============================================================
   CAREERS FEATURE CARDS — Built by People / Community
   ============================================================ */

/*
 * .section-feature-cards — White-background section housing the two large
 * editorial feature cards (e.g. "Built by people like you" and community story).
 * White background contrasts with the adjacent blue-grey sections.
 */
.section-feature-cards {
    background-color: #ffffff;
    padding: 80px 24px;
}

/*
 * .cards-container — CSS grid wrapper for the two feature cards.
 * repeat(2, 1fr) creates an equal two-column layout. The grid is also the
 * max-width container, replacing a separate wrapper div.
 */
.cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/*
 * .feature-card — Individual editorial feature card containing an image
 * and text content. display: flex with flex-direction: column lets the
 * card stretch to full column height so cards in the same row are equal
 * in height. The hover lift effect matches the value cards pattern.
 */
.feature-card {
    border: 1px solid #dce8f5;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*
 * .feature-card:hover — Lift-and-shadow hover effect for feature cards.
 * Consistent with .value-card:hover — translateY(-4px) with an enhanced
 * shadow reinforces the card's interactivity.
 */
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/*
 * .card-image img — The hero image at the top of each feature card.
 * Fixed height of 300px combined with object-fit: cover ensures a consistent
 * image strip regardless of the original image dimensions. object-position:
 * center top biases cropping to show the top of the image (e.g. faces).
 */
.card-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/*
 * .card-content — Text content area within a feature card below the image.
 * flex-grow: 1 lets the content area expand to fill remaining card height,
 * ensuring the button at the bottom aligns across cards of different
 * text lengths.
 */
.card-content {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/*
 * .card-heading — The main heading inside each feature card.
 * clamp() scales fluidly between 1.5rem and 2rem. Brand blue and 900 weight
 * make this the dominant text element within the card content area.
 */
.card-heading {
    color: #1C48AA;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

/*
 * .card-subtext — Descriptive paragraph below the card heading.
 * Standard body font size with a comfortable line-height. Bottom margin
 * creates space between the paragraph and the CTA button below.
 */
.card-subtext {
    color: #555;
    font-size: 1rem;
    margin: 0 0 28px 0;
    line-height: 1.6;
}

/*
 * .card-btn — CTA link/button at the bottom of each feature card.
 * margin-top: auto pushes it to the bottom of the flex card-content column,
 * so buttons align horizontally across cards regardless of how much body
 * text each card has.
 */
.card-btn {
    margin-top: auto;
    display: inline-block;
    background-color: #1C48AA;
    color: #ffffff;
    padding: 13px 24px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

/*
 * .card-btn:hover — Hover state for feature card CTA links.
 * Darkens to the standard hover blue used throughout the page.
 */
.card-btn:hover {
    background-color: #1C48AA;
}

/*
 * @media (max-width: 768px) — Tablet overrides for the feature cards section.
 * Collapses the two-column card grid to a single column and reduces padding.
 * max-width: 540px on the container centres the single-column card
 * comfortably on mid-size tablets. Image height reduces to 240px to
 * conserve vertical space.
 */
@media (max-width: 768px) {
    .section-feature-cards {
        padding: 60px 20px;
    }

    .cards-container {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 540px;
    }

    .card-image img {
        height: 240px;
    }
}


/* ---- Mobile: card header stacks, button full-width ---- */
/*
 * @media (max-width: 640px) — Mobile overrides for the Jobs section and its
 * application form. Job card headers stack vertically so the title and button
 * each get full width. The submit button and apply toggle also go full-width
 * for easy tapping. The application form padding is reduced. The form grid
 * switches from 6 columns to 2 columns with explicit field ordering so fields
 * appear in the correct logical sequence on narrow screens.
 */
@media (max-width: 640px) {
    .section-careers-jobs {
        padding: 10px 20px;
    }

    .job-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-toggle-apply {
        justify-content: center;
        width: 100%;
    }

    .btn-apply-indeed {
        width: fit-content;
        align-self: flex-start;
    }

    .application-form-wrapper {
        padding: 20px 16px;
    }

    .btn-submit {
        width: 100%;
    }

    .job-lists {
        flex-direction: column;
        gap: 20px;
    }

    /* Mobile form: 2-column grid, reorder fields to match design */
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Row 1: First | Middle */
    .fg-first    { grid-column: 1; order: 1; }
    .fg-middle   { grid-column: 2; order: 2; }
    /* Row 2: Last | Phone */
    .fg-last     { grid-column: 1; order: 3; }
    .fg-phone    { grid-column: 2; order: 4; }
    /* Row 3: City | Province */
    .fg-city     { grid-column: 1; order: 5; }
    .fg-province { grid-column: 2; order: 6; }
    /* Full-width fields */
    .fg-email      { grid-column: span 2; order: 7; }
    .fg-linkedin   { grid-column: span 2; order: 8; }
    .fg-employment { grid-column: span 2; order: 9; }
    .fg-about      { grid-column: span 2; order: 10; }
    .fg-checks     { grid-column: span 2; order: 11; }
    .fg-resume     { grid-column: span 2; order: 12; }
    .fg-docs       { grid-column: span 2; order: 13; }
    .fg-privacy    { grid-column: span 2; order: 14; }
    .fg-referral   { grid-column: span 2; order: 15; }
    .fg-submit     { grid-column: span 2; order: 16; }
    .fg-note       { grid-column: span 2; order: 17; }

    .employment-pill span {
        white-space: normal;
    }
}

/*
 * @media (max-width: 400px) — Very narrow screen overrides for the application
 * form grid. Collapses to a single column so all fields (including the
 * half-width ones set above) stack fully, preventing any field from being
 * uncomfortably narrow on small phones.
 */
@media (max-width: 400px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .fg-first, .fg-middle, .fg-last, .fg-phone,
    .fg-city, .fg-province, .fg-email, .fg-linkedin,
    .fg-employment, .fg-about, .fg-checks, .fg-resume,
    .fg-docs, .fg-privacy, .fg-referral, .fg-submit, .fg-note {
        grid-column: 1;
    }
}


/* ============================================================
   CAREERS TESTIMONIALS — From Our People
   ============================================================ */

/*
 * .section-careers-testimonials — Dark blue section containing employee quote
 * cards. The deep navy background (#001f55) with a background image creates
 * an immersive feel distinct from the rest of the page. The ::before overlay
 * darkens the background image for text legibility.
 */
.section-careers-testimonials {
    position: relative;
    padding: 80px 24px;
    background-color: #001f55;
    background-size: cover;
    background-position: center top;
}

/*
 * .section-careers-testimonials::before — Semi-transparent dark overlay
 * applied over the section's background image. pointer-events: none ensures
 * the overlay doesn't intercept clicks intended for content above it.
 */
.section-careers-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 20, 60, 0.55);
    pointer-events: none;
}

/*
 * .testimonials-container — Centred max-width wrapper for testimonial content.
 * position: relative combined with the parent's ::before overlay ensures
 * the content stacks above the dark tint layer via stacking context.
 */
.testimonials-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .testimonials-header — Header area containing the section title and
 * subtitle above the testimonial cards. Bottom margin separates it
 * from the card grid below.
 */
.testimonials-header {
    margin-bottom: 48px;
}

/*
 * .testimonials-title — Large, bold section headline for the testimonials
 * block displayed in white over the dark background.
 * clamp() scales aggressively from 2.5rem to 4.5rem to create visual impact
 * at large viewport sizes.
 */
.testimonials-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.05;
}

/*
 * .testimonials-subtitle — Supporting paragraph below the testimonials heading.
 * Semi-transparent white (0.8 opacity) creates a subtle visual step below
 * the fully opaque title above.
 */
.testimonials-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.6;
}

/* ---- Carousel wrapper (arrow + grid + arrow) ---- */
/*
 * .testimonials-carousel — Wrapper around the arrows and card grid.
 * display: contents on desktop makes it invisible to layout — the grid and
 * arrows flow as if this element doesn't exist, keeping the desktop 3-column
 * grid intact. On mobile this switches to a flex row.
 */
.testimonials-carousel {
    display: contents; /* desktop: arrows hidden, grid flows normally */
}

/* ---- Desktop: 3-column grid ---- */
/*
 * .testimonials-grid — Three-column grid of testimonial cards on desktop.
 * Equal columns and a 24px gap give each card the same width with consistent
 * spacing between them.
 */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* All cards visible on desktop */
/*
 * .testimonial-card — Individual employee testimonial card.
 * Light blue-tinted background (#dce8f5) lifts the card off the dark section
 * background. border-radius and overflow: hidden clip the card's inner content.
 */
.testimonial-card {
    background: #dce8f5;
    border-radius: 14px;
    overflow: hidden;
}

/*
 * .testimonial-card-inner — Inner padding wrapper for testimonial card content.
 * display: flex with flex-direction: column and height: 100% lets the quote
 * flex-grow to fill remaining space, pushing the author attribution to the
 * bottom of each card.
 */
.testimonial-card-inner {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/*
 * .testimonial-card-top — The top row of a testimonial card containing the
 * large quotation mark SVG icon and the track label (e.g. "In-Store").
 * align-items: center and gap vertically centre the icon and label text.
 */
.testimonial-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

/*
 * .testimonial-quote-icon — Large SVG quotation mark icon at the top of each
 * testimonial card. Brand blue fill and a fixed 44×44 size make it a
 * recognisable visual anchor for the quote block.
 */
.testimonial-quote-icon {
    width: 44px;
    height: 44px;
    fill: #1C48AA;
    flex-shrink: 0;
}

/*
 * .testimonial-track-label — Track category label shown beside the quote
 * icon (e.g. "In-Store", "Warehouse", "Corporate"). Bold weight and brand
 * blue identify which career track the testimonial belongs to.
 */
.testimonial-track-label {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1C48AA;
    line-height: 1.2;
}

/*
 * .testimonial-quote — The employee's quote text in the body of the card.
 * flex-grow: 1 causes this paragraph to expand and fill all available vertical
 * space, keeping the author line pinned to the bottom of each card.
 */
.testimonial-quote {
    font-size: 0.9375rem;
    color: #333;
    line-height: 1.75;
    margin: 0 0 20px;
    flex-grow: 1;
}

/*
 * .testimonial-author — The employee's name and role, right-aligned at the
 * bottom of the testimonial card. Right-alignment and bold weight make this
 * feel like a traditional blockquote attribution.
 */
.testimonial-author {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1C48AA;
    margin: 0;
    text-align: right;
}

/* Dots hidden on desktop */
.testimonials-dots {
    display: none;
}

/* Arrow buttons hidden on desktop */
.testimonials-arrow {
    display: none;
}

/* ---- Mobile carousel ---- */
/*
 * @media (max-width: 768px) — Mobile carousel overrides for the testimonials
 * section. The grid collapses to show one card at a time; the carousel wrapper
 * becomes a flex row with side arrows flanking the active card. Navigation
 * dots appear below the carousel. Non-active cards are hidden and the
 * is-active class controls which card is shown.
 */
@media (max-width: 768px) {
    .section-careers-testimonials {
        padding: 44px 0 56px;
    }

    .testimonials-header {
        padding: 0 24px;
        margin-bottom: 28px;
    }

    /* Carousel row: arrow | card | arrow */
    .testimonials-carousel {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 8px;
    }

    .testimonials-grid {
        display: block;
        flex: 1;
        min-width: 0;
    }

    /* Hide non-active cards */
    .testimonial-card {
        display: none;
        border-radius: 16px;
    }

    .testimonial-card.is-active {
        display: block;
    }

    .testimonial-card-inner {
        padding: 28px 24px 24px;
    }

    .testimonial-quote-icon {
        width: 56px;
        height: 56px;
    }

    .testimonial-track-label {
        font-size: 1.25rem;
    }

    .testimonial-quote {
        font-size: 1rem;
    }

    /* Side arrows */
    .testimonials-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.6);
        background: transparent;
        color: #ffffff;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }

    .testimonials-arrow:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: #ffffff;
    }

    /* Dots below carousel */
    .testimonials-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        padding: 0 24px;
    }

    .testimonials-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.35);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.2s;
    }

    .testimonials-dot.is-active {
        background: #ffffff;
    }
}


/* ============================================================
   CAREERS FIND YOUR FIT — CTA Section
   ============================================================ */

/*
 * .section-careers-fit — Centred call-to-action section at the bottom of the
 * Careers page, inviting visitors to find their role or watch a video.
 * Light blue-grey background mirrors the Values and Jobs sections, reinforcing
 * the page's alternating rhythm. text-align: center aligns all content.
 */
.section-careers-fit {
    background-color: #eef2f8;
    padding: 80px 24px;
    text-align: center;
}

/*
 * .fit-container — Narrow centred wrapper that constrains the CTA heading,
 * subtext, and button to a readable column width (780px), preventing the
 * text from spanning the full page width and becoming hard to read.
 */
.fit-container {
    max-width: 780px;
    margin: 0 auto;
}

/*
 * .fit-heading — Main headline for the Find Your Fit CTA section.
 * Larger clamp range (2rem–3.25rem) gives this closing section a strong
 * typographic presence to encourage action before the user leaves the page.
 */
.fit-heading {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    color: #1C48AA;
    line-height: 1.1;
    margin: 0 0 20px;
}

/*
 * .fit-subtext — Supporting paragraph below the Find Your Fit heading.
 * Muted blue-grey and a comfortable line-height keep the copy readable
 * without competing with the bold heading or button below.
 */
.fit-subtext {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #6b7a99;
    line-height: 1.6;
    margin: 0 0 36px;
}

/*
 * .fit-btn — Primary CTA button for the Find Your Fit section (e.g. opens
 * the video or scrolls to jobs). inline-flex with gap arranges the button
 * label and play icon horizontally. Generous padding makes this the most
 * prominent button on the page.
 */
.fit-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #1C48AA;
    color: #ffffff;
    border: none;
    padding: 15px 36px;
    border-radius: 6px;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

/*
 * .fit-btn:hover — Hover state for the Find Your Fit CTA button.
 * Consistent darker blue hover colour used throughout the page.
 */
.fit-btn:hover {
    background: #1C48AA;
}

/*
 * .fit-btn-play — The play icon character/element inside the fit CTA button.
 * Smaller font-size (0.75rem) scales the icon down relative to the button
 * label text so it reads as an icon accent rather than competing text.
 */
.fit-btn-play {
    font-size: 1rem;
    line-height: 1;
}

/*
 * @media (max-width: 600px) — Mobile overrides for the Find Your Fit section.
 * Reduces padding and stretches the CTA button to full width for a more
 * thumb-friendly tap target on small screens.
 */
@media (max-width: 600px) {
    .section-careers-fit {
        padding: 60px 20px;
    }

    .fit-btn {
        width: fit-content;
        padding: 16px 24px;
        font-size: 1.0625rem;
    }
}


/* ============================================================
   SHARED VIDEO MODAL
   ============================================================ */

/*
 * .bbos-video-modal — Full-screen modal overlay container for the video player.
 * position: fixed with inset: 0 stretches it over the entire viewport.
 * z-index: 9999 ensures it sits above all other page content.
 * Flex centering vertically and horizontally positions the video panel.
 */
.bbos-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * .bbos-video-modal[hidden] — Hides the modal when the hidden HTML attribute
 * is present. JavaScript adds/removes the attribute to show/hide the modal
 * without toggling classes.
 */
.bbos-video-modal[hidden] {
    display: none;
}

/*
 * .bbos-video-backdrop — The dark semi-transparent layer behind the video panel.
 * cursor: pointer signals that clicking the backdrop will close the modal,
 * providing an intuitive dismiss interaction without requiring the close button.
 */
.bbos-video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

/*
 * .bbos-video-inner — The video panel that floats above the dark backdrop.
 * 90vw width with a 960px max-width keeps the player large on desktop but
 * contained. overflow: hidden clips the video to the rounded corners.
 * A deep box-shadow reinforces the sense of depth over the backdrop.
 */
.bbos-video-inner {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-width: 960px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/*
 * .bbos-video-player — The <video> or <iframe> element inside the modal panel.
 * aspect-ratio: 16/9 ensures the player maintains cinematic proportions at
 * any modal width. display: block removes the default inline-block gap
 * that would otherwise appear below the element.
 */
.bbos-video-player {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}

/*
 * .bbos-video-close — The circular × close button positioned in the top-right
 * corner of the video panel. Semi-transparent dark background makes it visible
 * over both dark and light video content. z-index: 2 ensures it sits above
 * the video element.
 */
.bbos-video-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

/*
 * .bbos-video-close:hover — Hover state for the modal close button.
 * Increases the background opacity to near-black so the × symbol remains
 * clearly legible when the cursor is over the button.
 */
.bbos-video-close:hover {
    background: rgba(0, 0, 0, 0.8);
}