/* 1) Container keeps 16:9 aspect ratio */
    .vimeo-placeholder {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        /* 16:9 */
        background-size: cover;
        background-position: center;
        cursor: pointer;
        overflow: hidden;
    }

    /* 2) Centered “play” button */
    .vimeo-placeholder .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 200px;
        background: url('/assets/images/playbtn.png') no-repeat center;
        border: none;
    }

/* ============================================================
   CT Manufacturing — new homepage design system
   Brand palette + shared block background-color variants.
   Additive: not used by the current Home/Resources pages.
   ============================================================ */
:root {
    --ct-blue:   #0056FF;
    --ct-navy:   #002253;
    --ct-orange: #FF5D00;
    --ct-purple: #A3499B;
    --ct-green:  #22B24C;
    --ct-violet: #9747FF;
    --ct-white:  #ffffff;
}

/* Block background-color selector (ACF `background_color` -> ctmfg_bg_class()). */
.bg--blue   { background-color: var(--ct-blue); }
.bg--navy   { background-color: var(--ct-navy); }
.bg--orange { background-color: var(--ct-orange); }
.bg--purple { background-color: var(--ct-purple); }
.bg--green  { background-color: var(--ct-green); }
.bg--violet { background-color: var(--ct-violet); }

/* On any colored background, default text + headings to white. */
.bg--blue, .bg--navy, .bg--orange, .bg--purple, .bg--green, .bg--violet { color: var(--ct-white); }
.bg--blue :is(h1,h2,h3,h4,p),
.bg--navy :is(h1,h2,h3,h4,p),
.bg--orange :is(h1,h2,h3,h4,p),
.bg--purple :is(h1,h2,h3,h4,p),
.bg--green :is(h1,h2,h3,h4,p),
.bg--violet :is(h1,h2,h3,h4,p) { color: var(--ct-white); }

/* Blue button variant (career_download blue CTA, news "View all"). */
.btn--blue {
    background-color: var(--ct-blue) !important;
    border-color: var(--ct-blue) !important;
    color: #fff !important;
}
.btn--blue:hover,
.btn--blue:focus {
    background-color: #0048d6 !important;
    border-color: #0048d6 !important;
    color: #fff !important;
}

/* New-homepage-only overrides (scoped via body.ctmfg-new-design so the current
   Home/Resources pages keep their existing look). */
body.ctmfg-new-design {
    background: #fff;
}
/* Figma "Open your mind" = white background + square image (the reused
   career_download block is light-blue + circular on the current Home). */
.ctmfg-new-design .career_sec {
    background: #fff;
    padding: 100px 0;
}
.ctmfg-new-design .career_sec .career_img,
.ctmfg-new-design .career_sec .career_img img {
    border-radius: 0 !important;
}
/* Tighter container side padding on mobile for the new design (bundle = 35px). */
@media screen and (max-width: 991px) {
    body.ctmfg-new-design .container {
        padding: 0 24px;
    }
}

/* ------------------------------------------------------------
   Transparent overlay header (per-page toggle: transparent_header)
   ------------------------------------------------------------ */
.site-header--transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
}
/* Top-down scrim (mirrors the hero scrim, reversed) so the white logo/MENU stay
   legible over any hero image. Sits above the hero, behind the header content. */
.site-header--transparent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 340px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(63, 64, 64, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
.site-header--transparent .site-header__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 50px 0 64px;
}
.site-header__logobox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 348px;
    height: 268px;
    background: var(--ct-blue);
    padding: 0;
}
/* Logged in: clear the WP admin bar (32px on desktop, where this header shows). */
.admin-bar .site-header__logobox {
    margin-top: 32px;
}
.site-header__logobox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 20px 35px 30px;
    box-sizing: border-box;
}
.site-header__menu {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 64px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: 0.5s;
}
button.site-header__menu:hover {
    transform: scale(1.1);
    opacity: 0.7;
}
/* When logged in, the WP admin bar (32px on desktop, where this header shows)
   overlays the top — push the menu down by that height so it stays clear. */
.admin-bar .site-header__menu {
    margin-top: calc(64px + 32px);
    transition: 0.5s;
}
.site-header__menu-label {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 1;
}
.site-header__hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 30px;
}
.site-header__hamburger span {
    display: block;
    width: 100%;
    height: 4px;
    background: #fff;
}
/* ------------------------------------------------------------
   Shared mobile header (<= 991px) — Figma node 467:224.
   Solid blue bar with the vertical logo (left) + hamburger (right),
   identical for transparent and default header pages. The desktop
   headers are hidden and the hero sits below this bar.
   ------------------------------------------------------------ */
.mobile-header { display: none; }

@media (max-width: 991px) {
    .ctmfg-desktop-header { display: none !important; }

    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--ct-blue);
        min-height: 84px;
        padding: 0 16px;
        position: relative;
        z-index: 40;
    }
    .mobile-header__logo {
        display: inline-flex;
        align-items: center;
    }
    .mobile-header__logo img {
        display: block;
        width: auto;
        height: 58px;
    }
    .mobile-header__toggle {
        position: absolute;
        top: 27px;
        right: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 30px;
        cursor: pointer;
    }
    .mobile-header__toggle span {
        display: block;
        width: 32px;
        height: 4px;
        background: #fff;
    }
}

/* ============================================================
   Main Hamburger Menu — full-screen overlay (Figma 380:352 / 467:243).
   Desktop: #002253 panel on the right ~50% + dimmed click-to-close overlay.
   Mobile: full-screen, scrollable. Fixed, so it stays put while the page scrolls.
   ============================================================ */
.main-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.main-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease;
}
.main-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.main-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background: var(--ct-navy);
    box-sizing: border-box;
    padding: 56px clamp(40px, 6vw, 88px) 64px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .3s ease;
}
.main-menu.is-open .main-menu__panel {
    transform: translateX(0);
}
.main-menu__close {
    position: absolute;
    top: 44px;
    right: clamp(24px, 4vw, 64px);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    transition: 0.5s;
}
.main-menu__close:hover {
    transform: scale(1.1);
    opacity: 0.7;
}
.main-menu__close-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2.1px;
    color: #fff;
}
.main-menu__close-x {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
}
.main-menu__close-x::before,
.main-menu__close-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
}
.main-menu__close-x::before { transform: translateY(-50%) rotate(45deg); }
.main-menu__close-x::after  { transform: translateY(-50%) rotate(-45deg); }
.main-menu__nav {
    margin-top: clamp(90px, 16vh, 100px);
}
.main-menu__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5vh, 64px);
}
.main-menu__nav a {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    color: #fff;
    text-decoration: none;
    transition: opacity .15s ease;
}
.main-menu__nav a:hover,
.main-menu__nav a:focus { opacity: 0.8; }

@media (max-width: 991px) {
    .main-menu__panel { width: 100%; padding: 24px 24px 56px; }
    .main-menu__overlay { display: none; }
    .main-menu__close { top: 30px; right: 20px; }
    .main-menu__nav { margin-top: 88px; }
}

/* Lock the background from scrolling while the menu is open. */
body.menu-open { overflow: hidden; }

/* ============================================================
   Rich-text (WYSIWYG) body wrappers (.rte) — normalize the paragraph spacing
   of editor content so a single paragraph sits flush and multiple paragraphs /
   lists get sensible gaps. Applied to the new-design body/description blocks.
   ============================================================ */
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
/* Inherit the wrapper's colour + font so the editor's <p> matches the block's
   intended text format (e.g. two_column's white/bold) instead of the bundle's
   global `p` rule (navy, weight 300, calc font-size). */
.rte p { margin: 0 0 1em; color: inherit; font: inherit; }
.rte ul,
.rte ol { margin: 0 0 1em; padding-left: 1.25em; color: inherit; }
.rte li { margin: 0 0 0.35em; color: inherit; }
.rte a { text-decoration: underline; }
.rte strong, .rte b { font-weight: 700; }
/* ============================================================
   Global body copy weight — the bundle's global `p` rule is 300;
   bump to 400 site-wide.
   ============================================================ */
p {
    font-weight: 400;
}

/* Career section body copy — fluid size, navy, 400. */
.wrapper .career_sec .career_content p {
    font-size: calc(16px + 6 * (100vw - 320px) / 1600);
    color: #00214d;
    font-weight: 400;
    max-width: 637px;
    line-height: 1.7;
    margin: 41px 0;
}

/* ============================================================
   Large-desktop (≥1921px) body copy — the bundle bumps global `p`
   (and career_sec paragraphs, at higher specificity) to 22px at this
   breakpoint; bring both back down to 18px.
   ============================================================ */
@media screen and (min-width: 1921px) {
    p {
        font-size: 18px;
    }
    .wrapper .career_sec .career_content p {
        font-size: 18px;
    }
}