/*
 * Careers
 *
 * Styles for the Careers parent/child page widgets.
 * Tracked under Jira epic VL-66.
 * Class naming: flat hyphenated (e.g. .vl-card-carousel-front-title) — NOT BEM.
 *
 * Mobile-first. Desktop breakpoint: 1024px.
 *
 * Notes on the foundations below (type system + grid):
 * These start in careers.css since they're set up for the Careers redesign.
 * If we find them being reused outside Careers, promote to varnum.css or a
 * dedicated foundations.css.
 */


/* ===== Design tokens ===== */

:root {
    /* Brand colors (design names in comments) */
    --vl-olive: #223028;         /* Olive */
    --vl-cream: #f4eed2;         /* Cream */
    --vl-sand: #dbd0c8;          /* Sand */
    --vl-sand-brighter: #e4dad3; /* Sand Brighter */
    --vl-brown: #814e1f;         /* Brown — mid-tone; used on hover states */
    --vl-brown-dark: #5b330d;    /* Dark Brown */
    --vl-white: #ffffff;
    --vl-black: #000000;

    /* Careers-specific */
    --vl-careers-tint: #ff7a00;  /* Hero orange */
}


/* ===== Type system =====
 *
 * Note on specificity: type-* classes are prefixed with `:root` to bump their
 * specificity to (0,2,0). Elementor's kit CSS (e.g. .elementor-kit-9 h3) uses
 * (0,1,1) selectors that would otherwise win over a plain (0,1,0) class. The
 * :root prefix is functionally identical to a plain class match — :root is
 * always the html element, so every element on the page is a descendant.
 */

/* type-alpha — large hero headline (e.g. "Careers") */
:root .type-alpha {
    font-family: span, serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.12;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-alpha {
        font-size: 90px;
    }
}

/*
 * type-gamma — hero title, one step down from type-alpha. Introduced for
 * the Content Hub landing page hero (template-hub.php); the archive hero
 * still uses type-alpha at its bigger scale. Tune the mobile / desktop
 * sizes together if the ratio needs adjusting.
 */
:root .type-gamma {
    font-family: span, serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 1024px) {
    :root .type-gamma {
        font-size: 52px;
    }
}

/* type-delta — widget section title (e.g. "Our Commitments") */
:root .type-delta {
    font-family: span, serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-delta {
        font-size: 40px;
    }
}

/* type-epsilon — card front title (e.g. "BE TRUSTED") */
:root .type-epsilon {
    font-family: span, serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-epsilon {
        font-size: 30px;
    }
}

/* type-epsilon-alt — same shape as type-epsilon, locked at the 26px mobile
 * size across all breakpoints (no desktop step-up). Used on the Card Carousel
 * front title since the narrower 262px desktop card can't accommodate the
 * full 30px size. */
:root .type-epsilon-alt {
    font-family: span, serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0;
}

/* type-zeta — serif body / card back title / testimonial quote */
:root .type-zeta {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-zeta {
        font-size: 24px;
    }
}

/* type-zeta-alt — same shape as type-zeta, locked at the 19px mobile size
 * across all breakpoints (no desktop step-up). Used on the Card Carousel
 * back title for the same reason as type-epsilon-alt on the front. */
:root .type-zeta-alt {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: 0;
}

/* type-eta — serif name (e.g. Key Contacts person name) */
:root .type-eta {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.32;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-eta {
        font-size: 20px;
    }
}

/* type-sm-p — small paragraph (e.g. testimonial attribution) */
:root .type-sm-p {
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-sm-p {
        font-size: 16px;
        line-height: 1.32;
    }
}

/* type-xsm-p — extra-small paragraph (e.g. card back description) */
:root .type-xsm-p {
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
}

/* type-xsm-p-alt — same shape as type-xsm-p, locked at the 13px mobile
 * size across all breakpoints (no desktop step-up). Used on the Card
 * Carousel back text for the same reason as type-epsilon-alt / type-zeta-alt. */
:root .type-xsm-p-alt {
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-xsm-p {
        font-size: 14px;
    }
}

/* type-p — body paragraph (e.g. narrow text block body copy) */
:root .type-p {
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-p {
        font-size: 18px;
    }
}

/* type-kappa — extra-small label (e.g. Key Contacts job title) */
:root .type-kappa {
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    :root .type-kappa {
        font-size: 12px;
    }
}

/* type-sm-button — small button label (e.g. "Learn More" on Card CTAs) */
:root .type-sm-button {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: 0.02em;
}

/*
 * type-button-brown — solid dark-brown button used on light sections (e.g. the
 * mega-menu "See all Services" CTA on the cream panel, other brown-accent
 * treatments). Kept in the type-* namespace since editors apply it via Elementor's
 * CSS Classes field on Button widgets. Was previously defined in an Elementor page's
 * Custom CSS (DB-only) and got lost when the DB was refreshed — now lives in the
 * theme so it can't disappear again.
 *
 * Default: solid #5b330d bg + cream text, no border.
 * Hover: slightly darker via opacity dip.
 * Works on both a raw <a> and Elementor's native Button widget (class on wrapper).
 */
:root a.type-button-brown {
    background-color: var(--vl-brown-dark);
    border: 0;
    border-radius: 0;
    color: var(--vl-cream);
    display: inline-block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: 0.02em;
    padding: 12px 24px;
    text-decoration: none;
    transition: opacity 200ms ease;
}

:root a.type-button-brown:hover,
:root a.type-button-brown:focus-visible {
    color: var(--vl-cream);
    opacity: 0.85;
}

.elementor-widget.type-button-brown .elementor-button {
    background-color: var(--vl-brown-dark);
    border: 0;
    border-radius: 0;
    color: var(--vl-cream);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: 0.02em;
    padding: 12px 24px;
    transition: opacity 200ms ease;
}

.elementor-widget.type-button-brown .elementor-button:hover,
.elementor-widget.type-button-brown .elementor-button:focus-visible {
    background-color: var(--vl-brown-dark);
    color: var(--vl-cream);
    opacity: 0.85;
}

/* type-iota — sub-nav links (Career Hero Child) */
:root .type-iota {
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 1024px) {
    :root .type-iota {
        font-size: 14px;
    }
}

/*
 * type-theta — label / counter treatment. Originally desktop-only (Career
 * Hero Child, Insights Hubs counter) — extended to mobile with the same
 * font family/weight/line-height at a smaller size (14 vs 16) once the
 * class started appearing on mobile via the Content Hub hero's pinned
 * panel ("Pinned Guide" heading + "1/3" counter).
 */
:root .type-theta {
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.32;
    letter-spacing: 0;
}

@media (min-width: 1024px) {
    :root .type-theta {
        font-size: 16px;
    }
}


/* ===== Button utilities ===== */

/*
 * .vl-btn-outline-white — transparent bg with a 1px white border and white
 * text; inverts to a solid white bg with olive text on hover. Used on dark
 * sections where the lighter sand outline button doesn't read well enough.
 *
 * Pair with `.type-sm-button` in markup for the button label typography.
 *
 * `a.` tag combo gives (0,2,1) specificity so the rule beats Elementor's
 * `.elementor-kit-9 a` (0,1,1) which would otherwise repaint the link copper.
 */
a.vl-btn-outline-white {
    background-color: transparent;
    border: 1px solid var(--vl-white);
    color: var(--vl-white);
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

a.vl-btn-outline-white:hover,
a.vl-btn-outline-white:focus-visible {
    background-color: var(--vl-white);
    color: var(--vl-olive);
}

/*
 * Native Elementor Button widget support: Elementor's "CSS Classes" field adds
 * the class to the widget WRAPPER (.elementor-element), not the <a>. These
 * selectors style the inner .elementor-button so `vl-btn-outline-white` works on
 * a native Button widget too (specificity 0,3,0 beats Elementor's button + kit).
 * Typography label still benefits from also adding the `type-sm-button` class.
 */
.elementor-widget.vl-btn-outline-white .elementor-button {
    background-color: transparent;
    border: 1px solid var(--vl-white);
    border-radius: 0;
    color: var(--vl-white);
    padding: 12px 24px;
    /* Label typography borrowed from .type-sm-button so the single
       vl-btn-outline-white class fully styles a native Button widget. */
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: 0.02em;
    transition: background-color 200ms ease, color 200ms ease;
}

.elementor-widget.vl-btn-outline-white .elementor-button:hover,
.elementor-widget.vl-btn-outline-white .elementor-button:focus-visible {
    background-color: var(--vl-white);
    color: var(--vl-olive);
}

/*
 * .vl-btn-outline-sand — sand outline button (#DBD0C8) for dark sections where
 * the design calls for the warm sand treatment rather than plain white. Mirrors
 * vl-btn-outline-white: transparent bg + sand border/text, inverts to a solid
 * sand bg with olive text on hover. Works on a custom-widget <a> and on a native
 * Elementor Button widget (class on the wrapper). Square corners; serif label.
 */
a.vl-btn-outline-sand {
    background-color: transparent;
    border: 1px solid var(--vl-sand);
    border-radius: 0;
    color: var(--vl-sand);
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

a.vl-btn-outline-sand:hover,
a.vl-btn-outline-sand:focus-visible {
    background-color: var(--vl-sand);
    color: var(--vl-olive);
}

.elementor-widget.vl-btn-outline-sand .elementor-button {
    background-color: transparent;
    border: 1px solid var(--vl-sand);
    border-radius: 0;
    color: var(--vl-sand);
    padding: 12px 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: 0.02em;
    transition: background-color 200ms ease, color 200ms ease;
}

.elementor-widget.vl-btn-outline-sand .elementor-button:hover,
.elementor-widget.vl-btn-outline-sand .elementor-button:focus-visible {
    background-color: var(--vl-sand);
    color: var(--vl-olive);
}

/*
 * .vl-btn-outline-black — black outline button for light sections (cream / sand
 * backgrounds like the mega-menu panel and other light hero variants). Mirrors
 * vl-btn-outline-white: transparent bg + black border/text, inverts to solid
 * black bg + white text on hover. Works on a custom-widget <a> and on a native
 * Elementor Button widget (class on the wrapper). Square corners; serif label.
 */
a.vl-btn-outline-black {
    background-color: transparent;
    border: 1px solid var(--vl-black);
    border-radius: 0;
    color: var(--vl-black);
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

a.vl-btn-outline-black:hover,
a.vl-btn-outline-black:focus-visible {
    background-color: var(--vl-black);
    color: var(--vl-white);
}

.elementor-widget.vl-btn-outline-black .elementor-button {
    background-color: transparent;
    border: 1px solid var(--vl-black);
    border-radius: 0;
    color: var(--vl-black);
    padding: 12px 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: 0.02em;
    transition: background-color 200ms ease, color 200ms ease;
}

.elementor-widget.vl-btn-outline-black .elementor-button:hover,
.elementor-widget.vl-btn-outline-black .elementor-button:focus-visible {
    background-color: var(--vl-black);
    color: var(--vl-white);
}


/* ===== Grid ===== */

/*
 * Mobile (default): 4 cols, 12px gap, 20px L/R padding
 * ≥1024px: 12 cols, 20px gap, max-width 1109px content + 20px L/R padding, centered
 * ≥1149px: viewport is wide enough for the 1109px content plus natural breathing
 *          room, so the 20px safety padding can drop. max-width returns to 1109px.
 *
 * Assumes box-sizing: border-box (standard in modern themes), so the 1024px-tier
 * max-width is 1149px (1109 content + 40 padding) and the 1149px-tier is 1109.
 */
.vl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 12px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

@media (min-width: 1024px) {
    .vl-grid {
        grid-template-columns: repeat(12, 1fr);
        column-gap: 20px;
        margin-left: auto;
        margin-right: auto;
        max-width: 1149px;
    }
}

@media (min-width: 1149px) {
    .vl-grid {
        max-width: 1109px;
        padding-left: 0;
        padding-right: 0;
    }
}


/* ===== Two Column Image and Text — VL-108 ===== */

/*
 * Flexible image + text block used across Career pages. Supports:
 *   - Title position: above-text (inside content col) or above-module (full-width)
 *   - Image aspect: portrait (5 cols on desktop) or landscape (4 cols on desktop)
 *   - Image side: left or right (controls DOM order + grid placement)
 *   - Top tab notch (extends widget bg up into the section above)
 *   - 0–N CTA sub-blocks (title/description optional, button required to render)
 *   - Style → Background color (Style tab) sets both the section bg AND the tab
 *
 * Grid math at desktop (12-col page grid via .vl-grid):
 *   Portrait (image 5 cols, gap 1 col, text 6 cols):
 *     image-left:  image 1/6,   text 7/13
 *     image-right: image 8/13,  text 1/7
 *   Landscape (image 4 cols, gap 1 col, text 7 cols):
 *     image-left:  image 1/5,   text 6/13
 *     image-right: image 9/13,  text 1/8
 *   Landscape — wide (image 6 cols, gap 1 col, text 5 cols — image takes more
 *   horizontal weight than Portrait/Landscape for wider landscape photos):
 *     image-left:  image 1/7,   text 8/13
 *     image-right: image 7/13,  text 1/6
 */

.vl-tc {
    padding-block: 48px;
    position: relative;
}

@media (min-width: 1024px) {
    .vl-tc {
        padding-block: 100px;
    }
}

/*
 * When this widget directly follows the Card CTAs widget, collapse the top
 * padding so they don't stack two large vertical paddings on top of each other
 * (Card CTAs already provides its own bottom padding).
 */
.elementor-element:has(> .elementor-widget-container > .vl-card-ctas) + .elementor-element:has(> .elementor-widget-container > .vl-tc) .vl-tc {
    padding-top: 20px;
}

/*
 * Top tab — extends UP into the section above. Same dimensions as Card CTAs
 * (184×24 mobile / 815×70 desktop) for visual consistency. Background color
 * comes from the section's Style → Background Color setting (applied to both
 * the section and ::before via the same Elementor selector).
 */
.vl-tc-with-tab::before {
    content: '';
    height: 24px;
    left: 0;
    position: absolute;
    top: -24px;
    width: 184px;
    z-index: 1;
}

/*
 * Desktop: tab notch right-aligns with the IMAGE's inner edge (the edge
 * facing the text). Width is computed via calc using the centered grid's
 * max-width (1109px) and the image's column span:
 *
 *   image-left + portrait / landscape-wide (5 cols + 4 gaps = 450.4px)
 *     tab extends from viewport left to (viewport-right - 50vw - 104.5px)
 *   image-left + landscape (4 cols + 3 gaps = 356.3px)
 *     tab extends to (viewport-right - 50vw - 198.5px)
 *
 *   image-right: mirror the formulas — tab on the top-right, extending from
 *   the image's inner edge to the viewport's right edge.
 *
 * Math assumes the centered max-width grid (≥1149px). Between 1024 and 1148
 * the .vl-grid uses padding-inline instead of margin-auto so the alignment
 * is off by up to ~10px — acceptable given the small viewport window.
 */
@media (min-width: 1024px) {
    /* Portrait (5 cols + 4 gaps = 450.4px image width) */
    .vl-tc-with-tab::before {
        height: 70px;
        left: 0;
        right: calc(50vw + 104.5px);
        top: -70px;
        width: auto;
    }

    /* Landscape (4 cols + 3 gaps = 356.3px image width) */
    .vl-tc-with-tab.vl-tc-landscape::before {
        right: calc(50vw + 198.5px);
    }

    /* Landscape-wide (6 cols + 5 gaps = 544.5px image width) */
    .vl-tc-with-tab.vl-tc-landscape-wide::before {
        right: calc(50vw + 10.5px);
    }

    /* Image-right: tab moves to the top-right side, extending from image's
     * inner edge to the viewport's right edge. */
    .vl-tc-image-right.vl-tc-with-tab::before {
        left: calc(50vw + 104.5px); /* portrait */
        right: 0;
    }

    .vl-tc-image-right.vl-tc-with-tab.vl-tc-landscape::before {
        left: calc(50vw + 198.5px); /* landscape */
        right: 0;
    }

    .vl-tc-image-right.vl-tc-with-tab.vl-tc-landscape-wide::before {
        left: calc(50vw + 10.5px); /* landscape-wide */
        right: 0;
    }
}

/*
 * Title above module — spans the full grid width.
 */
.vl-tc-title-above-module {
    grid-column: 1 / -1;
    margin: 0 0 16px;
}

@media (min-width: 1024px) {
    .vl-tc-title-above-module {
        margin-bottom: 64px;
    }
}

/*
 * Title above text — lives inside .vl-tc-text. Same margin spec.
 */
.vl-tc-title-above-text {
    margin: 0 0 16px;
}

@media (min-width: 1024px) {
    .vl-tc-title-above-text {
        margin-bottom: 24px;
    }
}

/* ===== Image column ===== */

/* Mobile: image and text both span the grid full width and stack vertically */
.vl-tc-image,
.vl-tc-text {
    grid-column: 1 / -1;
}

/*
 * When the title spans the whole module (Title Position = "Above module"),
 * hide the image on mobile — the image becomes redundant under a full-width
 * title in a single-column mobile layout. Desktop keeps the image because the
 * layout is still two columns there.
 */
@media (max-width: 1023px) {
    .vl-tc-title-above-module .vl-tc-image {
        display: none;
    }
}

/*
 * Mobile image margins (32px gap to text). Image-left = margin below image
 * (since image is on top of text on mobile). Image-right = margin above image
 * (since image is below text on mobile).
 */
.vl-tc-image-left .vl-tc-image {
    margin-bottom: 32px;
}

.vl-tc-image-right .vl-tc-image {
    margin-top: 32px;
}

/*
 * Mobile image sizing:
 *   - max-width 545px so the image doesn't get huge on tablet/larger mobile
 *     viewports when it's stacked.
 *   - margin-inline: auto centers it horizontally inside the grid cell.
 *   - Portrait additionally caps width to maintain a 43px L/R safety gap on
 *     smaller viewports (via min() — fills container minus 86px when that's
 *     smaller than 545).
 */
.vl-tc-image {
    margin-inline: auto;
    max-width: 545px;
}

.vl-tc-portrait .vl-tc-image {
    max-width: min(545px, calc(100% - 86px));
}

/* Image fills its container; aspect-ratio set per variant on the img.
 * Specificity (0,2,1) beats .elementor img (0,1,1). */
.vl-tc .vl-tc-image-img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.vl-tc-portrait .vl-tc-image-img {
    aspect-ratio: 249 / 331;
    object-fit: cover;
}

.vl-tc-landscape .vl-tc-image-img {
    aspect-ratio: 335 / 250;
    object-fit: cover;
}

.vl-tc-landscape-wide .vl-tc-image-img {
    aspect-ratio: 425 / 250;
    object-fit: cover;
}

/* Desktop grid placement */
@media (min-width: 1024px) {
    .vl-tc-image,
    .vl-tc-text {
        grid-column: auto; /* reset mobile full-width */
    }

    /* Portrait + left: image cols 1-5, text cols 7-12 (col 6 is the gap) */
    .vl-tc-image-left.vl-tc-portrait .vl-tc-image {
        grid-column: 1 / span 5;
    }
    .vl-tc-image-left.vl-tc-portrait .vl-tc-text {
        grid-column: 7 / span 6;
    }

    /* Portrait + right: text cols 1-6, image cols 8-12 (col 7 is the gap) */
    .vl-tc-image-right.vl-tc-portrait .vl-tc-image {
        grid-column: 8 / span 5;
    }
    .vl-tc-image-right.vl-tc-portrait .vl-tc-text {
        grid-column: 1 / span 6;
    }

    /* Landscape-wide + left: image cols 1-6, text cols 8-12 (col 7 is the gap) */
    .vl-tc-image-left.vl-tc-landscape-wide .vl-tc-image {
        grid-column: 1 / span 6;
    }
    .vl-tc-image-left.vl-tc-landscape-wide .vl-tc-text {
        grid-column: 8 / span 5;
    }

    /* Landscape-wide + right: text cols 1-5, image cols 7-12 (col 6 is the gap) */
    .vl-tc-image-right.vl-tc-landscape-wide .vl-tc-image {
        grid-column: 7 / span 6;
    }
    .vl-tc-image-right.vl-tc-landscape-wide .vl-tc-text {
        grid-column: 1 / span 5;
    }

    /* Title-above-text variant: text column is flush with the image's top edge
     * (no vertical offset). */

    /* Landscape + left: image cols 1-4, text cols 6-12 (col 5 is the gap) */
    .vl-tc-image-left.vl-tc-landscape .vl-tc-image {
        grid-column: 1 / span 4;
    }
    .vl-tc-image-left.vl-tc-landscape .vl-tc-text {
        grid-column: 6 / span 7;
    }

    /* Landscape + right: text cols 1-7, image cols 9-12 (col 8 is the gap) */
    .vl-tc-image-right.vl-tc-landscape .vl-tc-image {
        grid-column: 9 / span 4;
    }
    .vl-tc-image-right.vl-tc-landscape .vl-tc-text {
        grid-column: 1 / span 7;
    }

    /* Desktop: no mobile margins or width caps; image fills its grid column */
    .vl-tc-image-left .vl-tc-image,
    .vl-tc-image-right .vl-tc-image {
        margin-block: 0;
    }

    .vl-tc-image,
    .vl-tc-portrait .vl-tc-image {
        margin-inline: 0;
        max-width: none;
    }
}

/* ===== Intro paragraph (WYSIWYG) =====
 *
 * Intro has no bottom margin by default — the spacing between intro and the
 * first CTA below it lives on the CTA's margin-top via the adjacent sibling
 * selector. That way intro-only (no CTAs) has no orphaned trailing margin.
 */

.vl-tc-intro {
    margin: 0;
}

.vl-tc-intro + .vl-tc-cta {
    margin-top: 24px;
}

@media (min-width: 1024px) {
    .vl-tc-intro + .vl-tc-cta {
        margin-top: 48px;
    }
}

/* WYSIWYG content scoped styling — supports bullets, bold, italic, links */

.vl-tc-intro p {
    margin: 0 0 16px;
}

.vl-tc-intro p:last-child {
    margin-bottom: 0;
}

.vl-tc-intro ul,
.vl-tc-intro ol {
    margin: 0 0 16px;
    padding-left: 1.5em;
}

.vl-tc-intro li {
    margin-bottom: 4px;
}

.vl-tc-intro strong,
.vl-tc-intro b {
    font-weight: 700;
}

.vl-tc-intro em,
.vl-tc-intro i {
    font-style: italic;
}

.vl-tc-intro a {
    color: inherit;
    text-decoration: underline;
}

.vl-tc-intro a:hover,
.vl-tc-intro a:focus-visible {
    text-decoration: none;
}

/* ===== CTA blocks ===== */

/* 32px between CTA blocks on mobile, 48px on desktop */
.vl-tc-cta {
    margin-bottom: 32px;
}

@media (min-width: 1024px) {
    .vl-tc-cta {
        margin-bottom: 48px;
    }
}

.vl-tc-cta:last-child {
    margin-bottom: 0;
}

.vl-tc-cta-title {
    margin: 0 0 8px;
}

@media (min-width: 1024px) {
    .vl-tc-cta-title {
        margin-bottom: 16px;
    }
}

.vl-tc-cta-description {
    margin: 0 0 20px;
}

/* CTA button — dark brown bg, white text, inverts on hover */
/*
 * Parent-class scope + `a.` tag combo gives (0,2,1) so the rule beats
 * Elementor's kit-level `.elementor-kit-9 a` (0,1,1) which otherwise repaints
 * the button text copper.
 */
.vl-tc a.vl-tc-cta-button {
    background-color: var(--vl-brown-dark);
    border: 0.5px solid var(--vl-brown-dark);
    color: var(--vl-white);
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.vl-tc a.vl-tc-cta-button:hover,
.vl-tc a.vl-tc-cta-button:focus-visible {
    background-color: var(--vl-white);
    color: var(--vl-brown-dark);
}


/* ===== Card CTAs — VL-113 ===== */

/*
 * Linked card grid that sits below the parent hero on the Careers landing.
 * On desktop each card aligns to the page's 12-col grid (3 cols per card,
 * 4 cards across with the grid's column-gap between them). On mobile each
 * card is a horizontal item (image left, content right).
 *
 * Uses CSS subgrid so the list inherits .vl-grid's columns instead of
 * creating its own internal 4-col grid that wouldn't align to the page.
 */

.vl-card-ctas {
    padding-block: 24px;
    position: relative;
}

@media (min-width: 1024px) {
    .vl-card-ctas {
        padding-block: 80px;
    }
}

/*
 * Decorative tab at the top-left of the section that extends UP into the
 * module above. White, aligned to the viewport's left edge (not the grid).
 * Mobile: 184×24, Desktop: 815×70.
 */
.vl-card-ctas::before {
    background-color: var(--vl-white);
    content: '';
    height: 24px;
    left: 0;
    position: absolute;
    top: -24px;
    width: 184px;
    z-index: 1;
}

@media (min-width: 1024px) {
    .vl-card-ctas::before {
        height: 70px;
        top: -70px;
        width: 815px;
    }
}

.vl-card-ctas-title {
    grid-column: 1 / -1;
    margin: 0 0 24px;
}

@media (min-width: 1024px) {
    .vl-card-ctas-title {
        margin-bottom: 32px;
    }
}

/*
 * List spans full grid width and uses subgrid so items can be placed in
 * specific parent grid columns (3 cols each at desktop).
 */
.vl-card-ctas-list {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: 4px;
}

@media (min-width: 1024px) {
    .vl-card-ctas-list {
        row-gap: 24px; /* used only if the cards wrap onto a second row (5+) */
    }
}

.vl-card-ctas-item {
    grid-column: 1 / -1; /* mobile: full 4-col width */
    margin: 0;
}

@media (min-width: 1024px) {
    .vl-card-ctas-item {
        grid-column: span 3; /* each card spans 3 of the parent's 12 cols */
    }
}

/*
 * The card itself: grid with named areas. Mobile is image-left/content-right;
 * desktop swaps to content-top/image-bottom (image fills the card bottom).
 *
 * Color rules at (0,2,1) specificity beat .elementor-kit-N a (0,1,1) and
 * .elementor-kit-N h3 (0,1,1). Without these the link + its text inherit
 * Elementor's global copper link color.
 */
.vl-card-ctas .vl-card-ctas-link,
.vl-card-ctas .vl-card-ctas-link h3,
.vl-card-ctas .vl-card-ctas-link p,
.vl-card-ctas .vl-card-ctas-link span {
    color: var(--vl-sand-brighter);
}

.vl-card-ctas-link {
    background-color: var(--vl-olive);
    display: grid;
    grid-template-areas: "image content";
    grid-template-columns: auto 1fr;
    text-decoration: none;
    transition: opacity 200ms ease;
}

@media (min-width: 1024px) {
    .vl-card-ctas-link {
        /*
         * Card aspect ratio 263×407 = card's own height is locked relative to
         * its width. minmax(0, Xfr) forces the rows to actually split the
         * height in the 59.5/40.5 proportion — without the 0 minimum, fr
         * units default to a min-content floor and the content row would
         * grow past 59.5% if the content needed it (squashing the image).
         */
        aspect-ratio: 263 / 407;
        grid-template-areas:
            "content"
            "image";
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 59.5fr) minmax(0, 40.5fr);
    }
}

.vl-card-ctas-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Image — explicit width so the img inside reliably fills the grid cell */
.vl-card-ctas-image {
    grid-area: image;
    width: 100%;
}

/*
 * Image:
 *   Mobile: 78px wide, fills the card row height so the photo covers the
 *   full green panel (no dead space above/below when the description wraps
 *   to multiple lines). 75px min-height floors cards with very short copy.
 *   Desktop: 263×165 — landscape, fills the card width (the card's natural
 *   width at design viewport ≈ 263px, so width: 100% + aspect-ratio gives the
 *   intended 263:165 proportions across viewports)
 *
 * Selector specificity (0,3,1) beats .elementor img (0,1,1).
 */
.vl-card-ctas .vl-card-ctas-image {
    align-self: stretch;
    height: 100%;
}

.vl-card-ctas .vl-card-ctas-image img {
    display: block;
    height: 100%;
    max-width: 78px;
    min-height: 75px;
    object-fit: cover;
    width: 78px;
}

@media (min-width: 1024px) {
    /*
     * Image fills its 40.5% grid cell completely (no aspect-ratio constraint
     * on the img — the row height already enforces the proportion). object-fit
     * cover crops to fill without distortion.
     */
    .vl-card-ctas .vl-card-ctas-image img {
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        width: 100%;
    }
}

/*
 * Content — flex column so the button can be pinned to the bottom
 * (margin-top: auto), which lines buttons up across cards in the same row.
 */
.vl-card-ctas-content {
    display: flex;
    flex-direction: column;
    grid-area: content;
    padding: 16px;
}

@media (min-width: 1024px) {
    .vl-card-ctas-content {
        padding: 40px 16px 20px;
        text-align: center;
    }
}

/*
 * Card title (h3) — uses .type-zeta utility for typography (Georgia 19/24).
 * Component CSS handles layout only (flex for inline arrow + alignment).
 */
.vl-card-ctas-card-title {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
}

@media (min-width: 1024px) {
    .vl-card-ctas-card-title {
        justify-content: center;
    }
}

/* Arrow icon — mobile only, 2x base size */
.vl-card-ctas-arrow {
    flex-shrink: 0;
    height: 14.4px;
    width: 13.26px;
}

@media (min-width: 1024px) {
    .vl-card-ctas-arrow {
        display: none;
    }
}

/*
 * Description — uses .type-xsm-p utility for typography.
 * Bottom margin gives 16px above the button below it (combined with the
 * button's margin-top: auto, which pushes the button to the bottom of the
 * flex column, the gap is 16px + whatever auto fills).
 */
.vl-card-ctas-description {
    margin: 4px 0 16px;
}

@media (min-width: 1024px) {
    .vl-card-ctas-description {
        margin: 8px 0 16px;
    }
}

/*
 * Button — desktop only, outline style.
 * 12×24 padding, 0.5px sand-brighter border + sand-brighter text on transparent
 * bg. Inverts on hover/focus to sand-brighter bg + black text.
 * Typography comes from .type-sm-button utility (Georgia 15px, 132% line-height,
 * 2% letter-spacing).
 */
.vl-card-ctas-button {
    display: none;
}

@media (min-width: 1024px) {
    .vl-card-ctas-button {
        align-self: center; /* horizontal center within the flex column */
        background: transparent;
        border: 0.5px solid var(--vl-sand-brighter);
        color: var(--vl-sand-brighter);
        display: inline-block;
        padding: 12px 24px;
        transition: background-color 200ms ease, color 200ms ease;
    }
}

.vl-card-ctas-link:hover .vl-card-ctas-button,
.vl-card-ctas-link:focus-visible .vl-card-ctas-button {
    background-color: var(--vl-sand-brighter);
    color: var(--vl-black);
}


/* ===== Key Contacts — Row variant (VL-106) ===== */

/*
 * "Row" layout for the Key Contacts widget used on Careers pages.
 * Sidebar layout (default) is unchanged — its styles live in varnum.css /
 * style.css. This selector only applies when the layout select is set to "Row".
 *
 * The container also gets the .vl-grid class from PHP so contacts position
 * according to the page's 12-col grid.
 *
 * Grid positioning (≥1024px):
 *   Title:    cols 1 / -1   (spans the full grid)
 *   Card 1:   cols 1 / 5    (4 cols)
 *   gap:      col 5         (empty)
 *   Card 2:   cols 6 / 10   (4 cols)
 */

/*
 * Self-contained grid (not relying on .vl-grid class addition). Mobile is the
 * 4-col grid; desktop switches to 12-col with cards at cols 1-4 and 6-9 to
 * give a 1-col gap between them.
 */
.vl-key-contact-container-row {
    box-sizing: border-box;
    column-gap: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 20px;
    row-gap: 16px;
    width: 100%;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row {
        column-gap: 20px;
        grid-template-columns: repeat(12, 1fr);
        margin-inline: auto;
        max-width: 1149px;
        /* 64px above; 144px below = original 64px + extra 80px per design QA */
        padding: 64px 20px 144px;
        row-gap: 24px;
    }
}

@media (min-width: 1149px) {
    .vl-key-contact-container-row {
        max-width: 1109px;
        padding-inline: 0;
    }
}

/*
 * Optional section title — spans full row width.
 * margin-bottom: 8px on top of the 16/24 row-gap gives total title-to-cards
 * spacing of 24px mobile / 32px desktop (matches design spec).
 */
.vl-key-contact-container-row .vl-key-contact-title {
    font-family: span, serif;
    font-size: 26px;
    font-weight: 700;
    grid-column: 1 / -1;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 8px;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row .vl-key-contact-title {
        font-size: 30px;
    }
}

/*
 * Each contact: full grid width on mobile (stacks via row-gap); at the tablet
 * tier (768-1023px) each contact fills half the row (6/12 cols, no gap col);
 * at desktop (≥1024px) each contact is 5 cols with col 6 as a 1-col gap and
 * col 12 left empty as trailing space.
 */
.vl-key-contact-container-row .vl-key-contact {
    display: flex;
    gap: 24px;
    grid-column: 1 / -1;
    margin: 0; /* override existing .vl-key-contact:not(:last-of-type) { margin-bottom: 2rem } */
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row .vl-key-contact {
        gap: 20px;
    }
    .vl-key-contact-container-row .vl-key-contact:nth-of-type(odd) {
        grid-column: 1 / span 6;
    }
    .vl-key-contact-container-row .vl-key-contact:nth-of-type(even) {
        grid-column: 7 / span 6;
    }
}

@media (min-width: 1024px) {
    .vl-key-contact-container-row .vl-key-contact:nth-of-type(odd) {
        grid-column: 1 / span 5;
    }
    .vl-key-contact-container-row .vl-key-contact:nth-of-type(even) {
        grid-column: 7 / span 5;
    }
}

/*
 * Photo div: fixed width matching the image. Overrides the existing
 * .vl-key-contact > div:first-of-type { width: calc(40% - 0.5rem) } (0,1,1)
 * with our higher-specificity (0,2,0) rule.
 */
.vl-key-contact-container-row div.vl-key-contact-photo {
    flex-shrink: 0;
    width: 148px;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row div.vl-key-contact-photo {
        width: 125px;
    }
}

@media (min-width: 1024px) {
    .vl-key-contact-container-row div.vl-key-contact-photo {
        width: 167px;
    }
}

/*
 * Image: fixed 148×148 mobile / 167×167 desktop. Selector specificity (0,3,1)
 * beats existing .elementor .vl-key-contact img (0,2,1) — that rule sets
 * width: 100% and max-width: 250px which our specs would lose to otherwise.
 */
.vl-key-contact-container-row .vl-key-contact-photo img {
    border: 1px solid #d5d5d5;
    box-sizing: border-box;
    display: block;
    height: 148px;
    max-width: 148px;
    object-fit: cover;
    width: 148px;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row .vl-key-contact-photo img {
        height: 125px;
        max-width: 125px;
        width: 125px;
    }
}

@media (min-width: 1024px) {
    .vl-key-contact-container-row .vl-key-contact-photo img {
        height: 167px;
        max-width: 167px;
        width: 167px;
    }
}

/*
 * Info column: flex-grows to fill remaining row width. Override existing
 * .vl-key-contact > div:last-of-type { width: calc(60% - 0.5rem) }.
 */
.vl-key-contact-container-row .vl-key-contact-info {
    flex: 1;
    min-width: 0;
    width: auto;
}

/* Name (h3) — type-eta (Georgia 17/20px, line-height 1.32) */
.vl-key-contact-container-row .vl-key-contact-info h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.32;
    margin: 0 0 8px;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row .vl-key-contact-info h3 {
        font-size: 20px;
    }
}

.vl-key-contact-container-row .vl-key-contact-info a {
    color: inherit;
    text-decoration: none;
}

.vl-key-contact-container-row .vl-key-contact-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * Meta list items. The existing .vl-key-contact ul li rule in style.css uses
 * !important on margin-bottom: 0.5rem — to override we have to !important too.
 * AGENTS.md note: this is the rare last-resort exception, since the existing
 * rule can't be removed without affecting the sidebar layout used on practice
 * pages.
 */

/* First meta item is the person's job title — type-kappa */
.vl-key-contact-container-row .vl-key-contact-info ul li:first-child {
    font-family: proxima-nova, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    margin-bottom: 16px !important;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row .vl-key-contact-info ul li:first-child {
        font-size: 12px;
    }
}

/* Remaining meta items (email, phone) — type-xsm-p */
.vl-key-contact-container-row .vl-key-contact-info ul li:not(:first-child) {
    font-family: proxima-nova, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    margin-bottom: 4px !important;
}

@media (min-width: 768px) {
    .vl-key-contact-container-row .vl-key-contact-info ul li:not(:first-child) {
        font-size: 14px;
    }
}

.vl-key-contact-container-row .vl-key-contact-info ul li:last-child {
    margin-bottom: 0 !important;
}

/* Email/phone links — underlined, hover removes underline */
.vl-key-contact-container-row .vl-key-contact-info ul a {
    color: inherit;
    text-decoration: underline;
}

.vl-key-contact-container-row .vl-key-contact-info ul a:hover,
.vl-key-contact-container-row .vl-key-contact-info ul a:focus-visible {
    text-decoration: none;
}


/* ===== Narrow Text Block — VL-109 ===== */

/*
 * Body content sections (e.g. Summer Associates "Who Should Apply?", "How We
 * Invest in Your Growth"). One section = one widget instance. Borders between
 * widgets are toggled via Top Divider / Bottom Divider switchers and live on
 * the content element so they align with the content's column span.
 *
 * Layout uses the .vl-grid utility:
 *   Mobile: full grid width (cols 1 / -1)
 *   Desktop: starts at column 3, spans 7 (cols 3 / 10)
 *
 * Typography is scoped to .vl-narrow-text-block-content using tag selectors
 * (the WYSIWYG output doesn't have classes we can target). Values mirror the
 * type-* utility classes so the rendered output matches the design system.
 */

.vl-narrow-text-block {
    box-sizing: border-box;
    padding: 40px 0;
    width: 100%;
}

@media (min-width: 768px) {
    .vl-narrow-text-block {
        padding: 80px 0;
    }
}

/*
 * Two Narrow Text Blocks stacked directly should have 40/80 between them, not
 * 80/160. Zero out the second one's top padding via :has() on the Elementor
 * wrappers — the first widget's padding-bottom (40/80) provides the spacing.
 * Border-top on the second widget (if set) still works: it sits at the
 * second's top edge, and its content's padding-top provides the "below border"
 * space.
 */
.elementor-element:has(> .elementor-widget-container > .vl-narrow-text-block) + .elementor-element:has(> .elementor-widget-container > .vl-narrow-text-block) .vl-narrow-text-block {
    padding-top: 0;
}

.vl-narrow-text-block-content {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .vl-narrow-text-block-content {
        grid-column: 3 / 10;
    }
}

/*
 * Top/bottom dividers — applied to the content element so they sit inside the
 * content column span (matches the layout the editor sees).
 *
 * Spacing model (top to bottom, when a top border is on):
 *   - 40 / 80 (section padding-top, above the border)
 *   - border
 *   - 40 / 80 (content padding-top, between border and text)
 *   - text
 *
 * Symmetric for bottom border.
 */
.vl-narrow-text-block-with-top .vl-narrow-text-block-content {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 40px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-with-top .vl-narrow-text-block-content {
        padding-top: 80px;
    }
}

.vl-narrow-text-block-with-bottom .vl-narrow-text-block-content {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-bottom: 40px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-with-bottom .vl-narrow-text-block-content {
        padding-bottom: 80px;
    }
}

/* Scoped typography for WYSIWYG output */
.vl-narrow-text-block-content > *:last-child {
    margin-bottom: 0;
}

/* h1 — type-alpha (Span 700, 48 / 90px). Discouraged in body content but supported jic. */
.vl-narrow-text-block-content h1 {
    font-family: span, serif;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.12;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content h1 {
        font-size: 90px;
    }
}

/* h2 — type-delta (Span 700, 30 / 40px) */
.vl-narrow-text-block-content h2 {
    font-family: span, serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content h2 {
        font-size: 40px;
    }
}

/* h3 — type-epsilon (Span 700, 26 / 30px) */
.vl-narrow-text-block-content h3 {
    font-family: span, serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content h3 {
        font-size: 30px;
    }
}

/* h4 — type-zeta (Georgia 400, 19 / 24px) */
.vl-narrow-text-block-content h4,
.vl-narrow-text-block-content h5,
.vl-narrow-text-block-content h6 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content h4,
    .vl-narrow-text-block-content h5,
    .vl-narrow-text-block-content h6 {
        font-size: 24px;
    }
}

/* Extra top space before headings that follow other content (section breaks) */
.vl-narrow-text-block-content > * + h1,
.vl-narrow-text-block-content > * + h2,
.vl-narrow-text-block-content > * + h3,
.vl-narrow-text-block-content > * + h4,
.vl-narrow-text-block-content > * + h5,
.vl-narrow-text-block-content > * + h6 {
    margin-top: 32px;
}

/* p — type-p (Proxima Nova 500, 15 / 18px), 16px bottom margin */
.vl-narrow-text-block-content p {
    font-family: proxima-nova, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content p {
        font-size: 18px;
    }
}

/* Bulleted lists — custom solid dot, 10px gap to text */
.vl-narrow-text-block-content ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

/*
 * List items use absolute-positioned bullets instead of display:flex on the
 * <li>. Flex turns each inline element inside the LI (like a <strong>) into
 * its own flex item, which made labels like "<strong>Locations:</strong>
 * Value text" render as side-by-side columns instead of inline text.
 * Positioning the bullet absolutely keeps it visually consistent without
 * messing with the LI's inline content flow.
 */
.vl-narrow-text-block-content ul li {
    font-family: proxima-nova, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: 16px;
    padding-left: 14px; /* room for the 4px bullet + 10px gap */
    position: relative;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content ul li {
        font-size: 18px;
    }
}

.vl-narrow-text-block-content ul li:last-child {
    margin-bottom: 0;
}

.vl-narrow-text-block-content ul li::before {
    background-color: #63656a;
    border-radius: 50%;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    top: 0.6em; /* roughly vertically centered with first line of text */
    width: 4px;
}

/* Ordered lists — native numbering, type-p typography */
.vl-narrow-text-block-content ol {
    font-family: proxima-nova, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 0 0 16px;
    padding-left: 1.5em;
}

@media (min-width: 768px) {
    .vl-narrow-text-block-content ol {
        font-size: 18px;
    }
}

.vl-narrow-text-block-content ol li {
    margin-bottom: 16px;
}

.vl-narrow-text-block-content ol li:last-child {
    margin-bottom: 0;
}

/* Inline formatting */
.vl-narrow-text-block-content a {
    color: inherit;
    text-decoration: underline;
}

.vl-narrow-text-block-content a:hover,
.vl-narrow-text-block-content a:focus-visible {
    text-decoration: none;
}

.vl-narrow-text-block-content strong,
.vl-narrow-text-block-content b {
    font-weight: 700;
}

.vl-narrow-text-block-content em,
.vl-narrow-text-block-content i {
    font-style: italic;
}


/* ===== Path List — VL-105 ===== */

/*
 * Two-column layout (image left, olive panel right with linked items) on
 * desktop, stacks vertically on mobile (image top, panel below). Goes edge-to-
 * edge on the page.
 *
 * Desktop caps the widget at 712px tall so very wide viewports don't blow up
 * the image / panel proportions.
 */

.vl-path-list {
    background-color: var(--vl-olive);
    color: var(--vl-sand-brighter);
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 1024px) {
    .vl-path-list {
        flex-direction: row;
        max-height: 712px;
    }
}

/* Image side */
.vl-path-list-image {
    aspect-ratio: 375 / 200;
    overflow: hidden;
    width: 100%;
}

@media (min-width: 1024px) {
    .vl-path-list-image {
        aspect-ratio: auto;
        flex: 1 1 50%;
        height: 712px;
    }
}

.vl-path-list img.vl-path-list-image-img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

/* Panel side */
.vl-path-list-panel {
    box-sizing: border-box;
    padding: 48px 24px;
    width: 100%;
}

@media (min-width: 1024px) {
    .vl-path-list-panel {
        align-content: center;
        display: grid;
        flex: 1 1 50%;
        /*
         * 6 equal columns inside the panel. First column is left empty (acts as
         * the "1 col gap" between image and text on the 12-col layout). Content
         * fills the remaining 5 cols.
         */
        grid-template-columns: 1fr 5fr;
        max-height: 712px;
        padding: 48px 64px 48px 0;
    }

    .vl-path-list-panel > * {
        grid-column: 2;
    }
}

/*
 * Title with a 1px sand-brighter border below it.
 * Mobile: 24px from text to border, 40px from border to first item.
 * Desktop: 32px from text to border, 40px from border to first item.
 */
.vl-path-list-title {
    margin: 0 0 40px;
    padding-bottom: 24px;
    position: relative;
}

@media (min-width: 1024px) {
    .vl-path-list-title {
        padding-bottom: 32px;
    }
}

.vl-path-list-title::after {
    background-color: var(--vl-sand-brighter);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

/* Items list */
.vl-path-list-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .vl-path-list-items {
        gap: 32px;
    }
}

.vl-path-list-item {
    margin: 0;
}

/*
 * Parent-scope selector (.vl-path-list a.*) bumps specificity to (0,2,1) to
 * beat .elementor-kit-N a (0,1,1), which would otherwise force the link color
 * to Elementor's global link color (copper).
 */
.vl-path-list a.vl-path-list-item-link {
    align-items: flex-start; /* top-align text with thumbnail */
    color: inherit;
    display: flex;
    gap: 8px;
    text-decoration: none;
    transition: opacity 200ms ease;
}

@media (min-width: 1024px) {
    .vl-path-list a.vl-path-list-item-link {
        gap: 20px;
    }
}

.vl-path-list-item-link:hover,
.vl-path-list-item-link:focus-visible {
    opacity: 0.85;
}

.vl-path-list-item-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Thumbnail */
.vl-path-list-item-thumb {
    flex-shrink: 0;
    overflow: hidden;
}

.vl-path-list img.vl-path-list-item-thumb-img {
    display: block;
    height: 78px;
    object-fit: cover;
    width: 78px;
}

@media (min-width: 1024px) {
    .vl-path-list img.vl-path-list-item-thumb-img {
        height: 74px;
        width: 74px;
    }
}

.vl-path-list-item-content {
    flex: 1;
    margin-top: 2px; /* nudge text down so its baseline lines up with thumbnail top */
    min-width: 0;
}

/*
 * Item title uses .type-zeta (Georgia 19/24px) for typography.
 * Component CSS handles layout (flex row with title text + arrow).
 */
.vl-path-list-item-title {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
}

.vl-path-list-item-arrow {
    flex-shrink: 0;
    /* Bumped from 7.2 × 6.63 (per Figma) — that size matched the design but
     * read as too small in production. ~1.5× preserves proportions. */
    height: 11px;
    transition: transform 200ms ease;
    width: 10px;
}

.vl-path-list-item-link:hover .vl-path-list-item-arrow,
.vl-path-list-item-link:focus-visible .vl-path-list-item-arrow {
    transform: translateX(4px);
}

.vl-path-list-item-description {
    margin: 4px 0 0;
}

@media (min-width: 1024px) {
    .vl-path-list-item-description {
        margin-top: 8px;
    }
}


/* ===== Testimonial Carousel — VL-103 ===== */

/*
 * Single testimonial visible at a time. Cream triangle decoration sits behind
 * the photo + quote + attribution stack via a pseudo-element on the section
 * (shared across all slides — same position regardless of which testimonial
 * is showing).
 *
 * Triangle dimensions:
 *   Mobile: 260w × 250h, top offset 40px (= half mobile photo height)
 *   Desktop: 352w × 338h, top offset 76px (= half desktop photo height)
 *
 * Photo dimensions:
 *   Mobile: 80×80, Desktop: 152×152
 */

/*
 * Section min-height ensures the content area is always tall enough to hold
 * the full triangle (so the triangle never dips into the bottom padding).
 *   Mobile:  64px padding × 2 + 40px (half photo) + 250px (triangle) = 418
 *   Desktop: 120px padding × 2 + 76px (half photo) + 338px (triangle) = 654
 */
.vl-testimonial-carousel {
    min-height: 418px;
    padding-block: 64px;
    position: relative;
}

@media (min-width: 768px) {
    .vl-testimonial-carousel {
        min-height: 654px;
        padding-block: 120px;
    }
}

/* Decorative cream triangle behind the testimonial stack — fixed size */
.vl-testimonial-carousel::before {
    background-color: var(--vl-cream);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    height: 250px;
    left: 50%;
    position: absolute;
    top: calc(64px + 40px); /* padding-top + half photo so photo center sits on triangle top */
    transform: translateX(-50%);
    width: 260px;
    z-index: 0;
}

@media (min-width: 768px) {
    .vl-testimonial-carousel::before {
        height: 338px;
        top: calc(120px + 76px);
        width: 352px;
    }
}

/* When a title is rendered above the carousel, shift the triangle down by
 * the title's vertical space so the photo center still lands on the triangle
 * top and the title itself sits ABOVE the triangle rather than overlapping.
 * type-delta title area = 2 lines × line-height 1.2 + 2rem margin-bottom.
 * Also grow the section min-height by the same amount so the triangle stays
 * fully contained. */
.vl-testimonial-carousel:has(.vl-testimonial-carousel-title) {
    min-height: calc(418px + 104px); /* mobile: base + type-delta 2-line title area */
}

.vl-testimonial-carousel:has(.vl-testimonial-carousel-title)::before {
    top: calc(64px + 104px + 40px);
}

@media (min-width: 768px) {
    .vl-testimonial-carousel:has(.vl-testimonial-carousel-title) {
        min-height: calc(654px + 128px);
    }

    .vl-testimonial-carousel:has(.vl-testimonial-carousel-title)::before {
        top: calc(120px + 128px + 76px);
    }
}

/* Section children sit above the triangle */
.vl-testimonial-carousel > * {
    position: relative;
    z-index: 1;
}

.vl-testimonial-carousel-title {
    grid-column: 1 / -1;
    margin: 0 0 2rem;
    text-align: center;
}

.vl-testimonial-carousel-slide {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer; /* click anywhere on the slide advances the carousel */
    display: flex;
    flex-direction: column;
    gap: 16px; /* 16px between photo / quote / attribution on mobile */
    padding: 0 20px;
    text-align: center;
}

@media (min-width: 768px) {
    .vl-testimonial-carousel-slide {
        gap: 24px;
    }
}

/*
 * Photo container — fixed square. Olive bg only shows when there's no
 * photo (i.e., when the placeholder triangle is rendered); an actual <img>
 * fills the box edge-to-edge.
 */
.vl-testimonial-carousel-photo {
    align-items: center;
    background-color: var(--vl-olive);
    display: flex;
    flex-shrink: 0;
    height: 80px;
    justify-content: center;
    overflow: hidden;
    width: 80px;
}

@media (min-width: 768px) {
    .vl-testimonial-carousel-photo {
        height: 152px;
        width: 152px;
    }
}

.vl-testimonial-carousel img.vl-testimonial-carousel-photo-img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Placeholder triangle (black downward arrow) when no photo is set */
.vl-testimonial-carousel-photo-placeholder {
    align-items: center;
    color: var(--vl-black);
    display: inline-flex;
    height: 60%;
    justify-content: center;
    width: 60%;
}

.vl-testimonial-carousel-photo-placeholder svg {
    display: block;
    height: 100%;
    width: 100%;
}

.vl-testimonial-carousel-quote {
    margin: 0;
    max-width: 540px;
}

.vl-testimonial-carousel-attribution {
    color: inherit;
    font-style: normal;
    margin: 0;
}

/*
 * Pagination dots: override Swiper's absolute positioning so they sit inline
 * below the slide. Specificity (0,2,0) beats Swiper's defaults.
 */
/*
 * Controls row — sits below the swiper, holds [prev] [pagination] [next] on
 * one line. Three-column grid (auto / 1fr / auto) keeps the pagination
 * mathematically centered even when one arrow is wider than the other.
 */
.vl-testimonial-carousel-controls {
    align-items: center;
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 1fr auto;
    margin: 24px auto 0;
    max-width: 734px;
    padding-inline: 20px;
    position: relative;
    z-index: 1; /* sit above the decorative ::before triangle */
}

.vl-testimonial-carousel .vl-testimonial-carousel-pagination {
    bottom: auto;
    display: flex;
    gap: 6px;
    justify-content: center;
    left: auto;
    margin: 0;
    position: relative;
    top: auto;
    width: 100%;
}

/*
 * Dot pagination:
 *   Inactive: 6×6 circle, black 20% opacity
 *   Active: 20×6 pill, black 100% opacity
 * Both rounded corners (3px = half the height = pill shape).
 */
.vl-testimonial-carousel .vl-testimonial-carousel-pagination .swiper-pagination-bullet {
    background-color: var(--vl-black);
    border-radius: 3px;
    height: 6px;
    opacity: 0.2;
    transition: opacity 200ms ease, width 200ms ease;
    width: 6px;
    margin: 0;
}

.vl-testimonial-carousel .vl-testimonial-carousel-pagination .swiper-pagination-bullet:hover,
.vl-testimonial-carousel .vl-testimonial-carousel-pagination .swiper-pagination-bullet:focus-visible {
    opacity: 1;
}

.vl-testimonial-carousel .vl-testimonial-carousel-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 20px;
}

/*
 * Arrow buttons — same icon as Card Carousel (rendered inline in the PHP),
 * but with the testimonial palette: solid black circle, sand stroke.
 *   Default state: opacity 1
 *   Hover, focus, or disabled: opacity 0.5 (whole button dims, not just bg)
 * Loop mode is on so .swiper-button-disabled never fires in practice — the
 * rule is kept for safety if loop is ever turned off.
 * Parent-class scoping bumps specificity to (0,2,0) so these styles win
 * against generic Elementor button rules.
 */
.vl-testimonial-carousel .vl-testimonial-carousel-prev,
.vl-testimonial-carousel .vl-testimonial-carousel-next {
    align-items: center;
    background-color: var(--vl-black);
    border: 0;
    border-radius: 50%;
    color: var(--vl-sand); /* sand — used by the SVG's currentColor stroke */
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    padding: 0;
    transition: opacity 200ms ease;
    width: 20px;
}

.vl-testimonial-carousel .vl-testimonial-carousel-prev:hover,
.vl-testimonial-carousel .vl-testimonial-carousel-next:hover,
.vl-testimonial-carousel .vl-testimonial-carousel-prev:focus-visible,
.vl-testimonial-carousel .vl-testimonial-carousel-next:focus-visible,
.vl-testimonial-carousel .vl-testimonial-carousel-prev.swiper-button-disabled,
.vl-testimonial-carousel .vl-testimonial-carousel-next.swiper-button-disabled {
    opacity: 0.5;
}

.vl-testimonial-carousel .vl-testimonial-carousel-prev:focus-visible,
.vl-testimonial-carousel .vl-testimonial-carousel-next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* SVG fills the button; prev flips the shared icon horizontally */
.vl-testimonial-carousel-prev svg,
.vl-testimonial-carousel-next svg {
    height: 100%;
    width: 100%;
}

.vl-testimonial-carousel-prev svg {
    transform: scaleX(-1);
}


/* ===== Card Carousel — VL-102 ===== */

/*
 * Layout: header (title + nav arrows) lives inside .vl-grid so it aligns to the
 * grid edges. The carousel track is full-width and overflows the grid on the
 * right; padding-left on the swiper matches the grid's content left edge so the
 * first card lines up with the section title.
 *
 * Colors are TODO — waiting for design specs.
 */

.vl-card-carousel {
    overflow: hidden;
    padding-block: 4rem; /* TODO confirm with design */
}

/* Color variants */
.vl-card-carousel-green {
    background-color: var(--vl-olive);
    color: var(--vl-sand-brighter);
}

.vl-card-carousel-yellow {
    background-color: var(--vl-cream);
    color: var(--vl-olive);
}

.vl-card-carousel-white {
    background-color: var(--vl-white);
    color: var(--vl-black);
}

/*
 * Header (title + nav) lives inside .vl-grid.
 * <768: stacked — title above, arrows below, both left-aligned.
 * ≥768: single row — title left, arrows right.
 */
.vl-card-carousel-header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: 1 / -1;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .vl-card-carousel-header {
        align-items: center;
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
    }
}

.vl-card-carousel-title {
    margin: 0;
}

.vl-card-carousel-nav {
    display: flex;
    gap: 8px;
}

/*
 * Nav buttons: 20×20 colored circles. Background + arrow color come from the
 * variant rules below. Parent-class prefix bumps specificity to (0,2,0) so the
 * button styles win against Elementor's generic .elementor button rule.
 */
.vl-card-carousel .vl-card-carousel-prev,
.vl-card-carousel .vl-card-carousel-next {
    align-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    padding: 0;
    transition: opacity 200ms ease;
    width: 20px;
}

.vl-card-carousel .vl-card-carousel-prev:focus-visible,
.vl-card-carousel .vl-card-carousel-next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Disabled (no more slides in that direction) — Swiper toggles this class */
.vl-card-carousel .vl-card-carousel-prev:disabled,
.vl-card-carousel .vl-card-carousel-next:disabled,
.vl-card-carousel .vl-card-carousel-prev.swiper-button-disabled,
.vl-card-carousel .vl-card-carousel-next.swiper-button-disabled {
    cursor: default;
    opacity: 0.5;
}

/*
 * Locked (all slides fit, no scrolling needed) — Swiper toggles .swiper-button-lock
 * via watchOverflow: true. Hide the arrows entirely in this case so the header
 * doesn't show useless controls.
 */
.vl-card-carousel .vl-card-carousel-prev.swiper-button-lock,
.vl-card-carousel .vl-card-carousel-next.swiper-button-lock {
    display: none;
}

/*
 * At the max-grid breakpoint (≥1149px) the 4-up card layout fits exactly in
 * the 1109px content area (4 × 262 + 3 × 20 = 1108). Swiper's watchOverflow
 * doesn't reliably flag the lock state at this margin, so force-hide the
 * arrows here. Editors with >4 cards lose visual nav at desktop but the
 * carousel still scrolls via swipe / drag.
 */
@media (min-width: 1149px) {
    .vl-card-carousel .vl-card-carousel-nav {
        display: none;
    }
}

/* Green section: sand-brighter button bg, olive arrow */
.vl-card-carousel-green .vl-card-carousel-prev,
.vl-card-carousel-green .vl-card-carousel-next {
    background-color: var(--vl-sand-brighter);
    color: var(--vl-olive);
}

/* Yellow + white sections: olive button bg, sand-brighter arrow */
.vl-card-carousel-yellow .vl-card-carousel-prev,
.vl-card-carousel-yellow .vl-card-carousel-next,
.vl-card-carousel-white .vl-card-carousel-prev,
.vl-card-carousel-white .vl-card-carousel-next {
    background-color: var(--vl-olive);
    color: var(--vl-sand-brighter);
}

/* Arrow icon fills the button; prev uses the same icon flipped horizontally */
.vl-card-carousel-prev svg,
.vl-card-carousel-next svg {
    height: 100%;
    width: 100%;
}

.vl-card-carousel-prev svg {
    transform: scaleX(-1);
}

/* Track: full-width, left padding matches grid's content left edge */
.vl-card-carousel-track {
    width: 100%;
}

.vl-card-carousel-swiper {
    overflow: visible; /* allow cards to extend past viewport edges visually */
    /* Symmetric L/R padding so the first card's left edge AND the last
     * card's right edge align with the grid's content edges. Without
     * padding-right, the last card scrolls all the way to the viewport's
     * right edge instead of stopping at the grid edge. */
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1149px) {
    .vl-card-carousel-swiper {
        /* Beyond 1149px viewport, content is centered at max-width 1109px.
         * Match the carousel's padding to the grid's content edges so the
         * first and last cards both align with the centered grid bounds. */
        padding-left: calc((100vw - 1109px) / 2);
        padding-right: calc((100vw - 1109px) / 2);
    }
}

/* Cards */
/*
 * Two fixed sizes, no in-between:
 *   Mobile (<768):   249 × 316
 *   ≥768 onward:     262 × 314 — sized so 4 cards + 3 × 20px gaps fit
 *                    exactly in the 1109px content area at max-grid (no
 *                    carousel scroll needed). Below 1149px the carousel
 *                    still swipes; at ≥1149px the nav arrows hide because
 *                    all 4 fit.
 */
.vl-card-carousel-slide {
    box-sizing: border-box;
    height: auto;
    width: 249px;
}

@media (min-width: 768px) {
    .vl-card-carousel-slide {
        width: 262px;
    }
}

.vl-card-carousel-card {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    height: 316px; /* mobile */
    padding: 0;
    perspective: 1000px;
    transition: transform 200ms ease;
    width: 100%;
}

@media (min-width: 768px) {
    .vl-card-carousel-card {
        height: 314px;
    }
}

.vl-card-carousel-card:hover {
    transform: translateY(-10px);
}

.vl-card-carousel-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.vl-card-carousel-card-inner {
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    width: 100%;
}

.vl-card-carousel-card[aria-pressed="true"] .vl-card-carousel-card-inner {
    transform: rotateY(180deg);
}

/*
 * Hover-flip — pointer devices only. Wrapped in @media (hover: hover) so
 * touch devices don't trigger the flip from a tap (they get the click
 * toggle via aria-pressed instead). On desktop, hovering a card flips it
 * AND lifts it via the outer .vl-card-carousel-card:hover translateY,
 * AND adds the shadow via .vl-card-carousel-card:hover .vl-card-carousel-card-face.
 */
@media (hover: hover) and (pointer: fine) {
    .vl-card-carousel-card:hover .vl-card-carousel-card-inner {
        transform: rotateY(180deg);
    }
}

.vl-card-carousel-card-face {
    align-items: center;
    backface-visibility: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    inset: 0;
    /* Back face uses flex group-centering (justify-content: center). Front
     * face overrides with grid title-centering below. */
    justify-content: center;
    padding: 45px 16px 16px;
    position: absolute;
    text-align: center;
    transition: box-shadow 200ms ease;
}

/* Front face: title in row 2 (centered between rows 1 and 3), icon above
 * it at the bottom of row 1. Cards are mobile-sized at every breakpoint
 * (262 × 314 from ≥768), so the mobile padding treatment applies
 * everywhere — no desktop step-up. */
.vl-card-carousel-card-front {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
}

.vl-card-carousel-card-front .vl-card-carousel-card-icon {
    align-self: end;
    grid-row: 1;
}

.vl-card-carousel-card-front .vl-card-carousel-card-front-title {
    grid-row: 2;
}

/*
 * Hover shadow lives on each face (not the outer button) so the shadow rotates
 * with the flip. If it were on the outer .vl-card-carousel-card, the static
 * shadow would remain visible mid-flip when the inner is edge-on, creating a
 * phantom card outline.
 */
.vl-card-carousel-card:hover .vl-card-carousel-card-face {
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25); /* #00000040 */
}

/*
 * Olive (green-bg) variant needs a darker shadow (#000000E5 ≈ 0.9 alpha) to
 * remain visible against the dark olive section background. Yellow/white
 * variants stay on the default 0.25 shadow above.
 */
.vl-card-carousel-green .vl-card-carousel-card:hover .vl-card-carousel-card-face {
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.9); /* #000000E5 */
}

/* Green bg → white cards with olive text */
.vl-card-carousel-green .vl-card-carousel-card-face {
    background-color: var(--vl-white);
    color: var(--vl-olive);
}

/* Yellow + white bg → olive cards with sand-brighter text */
.vl-card-carousel-yellow .vl-card-carousel-card-face,
.vl-card-carousel-white .vl-card-carousel-card-face {
    background-color: var(--vl-olive);
    color: var(--vl-sand-brighter);
}

/*
 * Front face
 *
 * Icon container is 80×80 at every breakpoint (cards stay mobile-sized
 * past 768, so no desktop step-up).
 */
.vl-card-carousel-card-icon {
    align-items: center;
    display: flex;
    height: 80px;
    justify-content: center;
    margin-bottom: 16px;
    width: 80px;
}

.vl-card-carousel-card-front-title {
    margin: 0;
    text-transform: uppercase;
}

/* Back face */
.vl-card-carousel-card-back {
    transform: rotateY(180deg);
}

.vl-card-carousel-card-back-title {
    display: grid;
    margin: 0;
    /*
     * Min-height locks the divider's vertical position consistent across all
     * visible cards regardless of title length. type-zeta is 24px × 1.2 line-height
     * ≈ 28.8px per line; 3em (~86px) handles up to ~3 lines comfortably.
     * place-items: center vertically and horizontally centers single-line titles
     * within the min-height so they don't look offset against multi-line titles.
     */
    min-height: 3em;
    place-items: center;
}

/*
 * Higher-specificity selector (.vl-card-carousel hr.* = 0,2,1) beats any
 * .elementor hr rule. Explicit width: 100% needed because the parent is a flex
 * column with align-items: center, which would otherwise let the hr collapse to
 * 0 width.
 */
.vl-card-carousel hr.vl-card-carousel-card-divider {
    background: transparent;
    border: 0;
    border-top: 1px solid currentColor;
    height: 0;
    margin: 24px 0;
    width: 100%;
}

.vl-card-carousel-card-back-text {
    margin: 0;
    text-align: left;
}

/*
 * Icon image: mobile max 60×60 inside 80×80 container; desktop max 75×75 inside
 * 100×100 container. Beats .elementor img specificity (0,1,1) with
 * .vl-card-carousel img.* (0,2,1). object-fit: contain preserves icon aspect.
 */
.vl-card-carousel img.vl-card-carousel-card-icon-img {
    height: auto;
    max-height: 60px;
    max-width: 60px;
    object-fit: contain;
    width: auto;
}

@media (min-width: 1024px) {
    .vl-card-carousel img.vl-card-carousel-card-icon-img {
        max-height: 75px;
        max-width: 75px;
    }
}

/*
 * Exception: 3-card layout uses the previous larger card sizing.
 *
 * The base 262 × 314 sizing was picked so 4 cards fit exactly at max-grid.
 * With only 3 cards those small cards leave a visible gap to the right of
 * the row, and the section title above is left-aligned, so centering the
 * small cards would look off. For the 3-card case we revert to the
 * previous 357 × 428 sizing so 3 cards fill the row edge-to-edge with no
 * centering trickery required.
 *
 * At ≥1149 the card width shaves to 356 so 3 × 356 + 2 × 20 = 1108 fits
 * exactly inside the 1109px content area (357 would overflow by 2px, and
 * arrows are hidden at this breakpoint so there's no swipe recovery).
 *
 * Padding, icon dimensions, and type sizes all revert to their previous
 * larger-card values here — matching the treatment before the 4-card
 * shrink landed.
 */
@media (min-width: 768px) {
    .vl-card-carousel[data-card-count="3"] .vl-card-carousel-slide {
        width: 357px;
    }

    .vl-card-carousel[data-card-count="3"] .vl-card-carousel-card {
        height: 428px;
    }

    .vl-card-carousel[data-card-count="3"] .type-epsilon-alt {
        font-size: 30px;
    }

    .vl-card-carousel[data-card-count="3"] .type-zeta-alt {
        font-size: 24px;
    }

    .vl-card-carousel[data-card-count="3"] .type-xsm-p-alt {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    .vl-card-carousel[data-card-count="3"] .vl-card-carousel-card-face {
        padding: 32px;
    }

    .vl-card-carousel[data-card-count="3"] .vl-card-carousel-card-front {
        padding-top: 92px;
    }

    .vl-card-carousel[data-card-count="3"] .vl-card-carousel-card-icon {
        height: 100px;
        margin-bottom: 20px;
        width: 100px;
    }
}

@media (min-width: 1149px) {
    .vl-card-carousel[data-card-count="3"] .vl-card-carousel-slide {
        width: 356px;
    }
}


/* ===== Career Hero (Parent) — VL-101 ===== */

.vl-career-hero-parent {
    aspect-ratio: 4 / 3;
    background-color: var(--vl-careers-tint);
    overflow: hidden;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .vl-career-hero-parent {
        aspect-ratio: 1650 / 480;
        max-height: 480px;
    }
}

.vl-career-hero-parent-image,
.vl-career-hero-parent-tint,
.vl-career-hero-parent-shade,
.vl-career-hero-parent-content {
    inset: 0;
    position: absolute;
}

/* Parent selector + img.* needed to beat .elementor img (0,1,1) */
.vl-career-hero-parent img.vl-career-hero-parent-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
}

.vl-career-hero-parent-tint {
    background-color: var(--vl-careers-tint);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/*
 * Darkening shade layer that sits ABOVE the orange tint to reduce overall
 * brightness of the hero image. Per the Figma spec: rgba black at 55% alpha
 * (#0000008C). Tune the alpha if designers want it brighter / darker.
 */
.vl-career-hero-parent-shade {
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.vl-career-hero-parent-content {
    align-items: center;
    display: flex;
}

/*
 * Visually center the title in the hero accounting for the Card CTAs tab
 * notch that extends UP from the module below (24px mobile / 70px desktop).
 * Without this shift the title appears low because the visible hero area
 * above the tab is shorter than the full hero box. translateY moves the title
 * up by half the tab height so the optical center matches the visible center.
 */
.vl-career-hero-parent-title {
    color: var(--vl-white);
    grid-column: 1 / -1;
    margin: 0;
    transform: translateY(-12px);
}

@media (min-width: 1024px) {
    .vl-career-hero-parent-title {
        transform: translateY(-35px);
    }
}


/* ===== Career Hero (Child) — VL-107 ===== */

/*
 * Hero used on Career Path pages (Lateral Attorneys, etc.) and Career detail
 * pages (Summer Associates, etc.). Three pieces:
 *
 *   1. Sub-nav row across the top
 *   2. Body: title (left) + optional Featured Openings carousel (right)
 *   3. Mobile button below the title (only when carousel is set + button is
 *      configured)
 *
 * Background is a flat olive base with a subtle vertical stripe overlay via
 * repeating-linear-gradient (no asset). Stripe pattern repeats every ~8.33%
 * of the container so it visually echoes the 12-col grid without locking to
 * it. Stripes are very low-contrast — visible but not loud.
 */
/*
 * Two-layer structure:
 *
 *   .vl-career-hero-child         ← outer: 100% viewport width, background
 *                                    paints edge-to-edge. Max height capped at
 *                                    480px so even on ultra-wide viewports the
 *                                    hero doesn't grow taller than designed.
 *     .vl-career-hero-child-inner ← inner: holds all the content. Carries the
 *                                    1650/480 aspect ratio so the content area
 *                                    keeps its designed shape at narrower
 *                                    desktop widths.
 *
 * The bg stripes + olive color stay on the outer so they always span the
 * viewport regardless of inner sizing.
 */
.vl-career-hero-child {
    /* Tab notch height of the widget that overlaps UP into the hero from
     * below (e.g. Card CTAs ::before, Two Column with tab notch).
     * Mirrors .vl-card-ctas::before and .vl-tc-with-tab::before:
     *   24px mobile / 70px desktop
     * Used to offset the body's vertical centering so the title reads as
     * centered between the top of the hero and the TOP of the tab — not
     * the geometric center of the inner. Override on a per-instance basis
     * (e.g. for a hero NOT followed by a tabbed section) by setting the
     * variable in the widget's Custom CSS or via a parent class.
     */
    --vl-hero-tab-offset: 24px;

    /* Mobile floor — guarantees a minimum hero height even on pages with
     * very short titles. Desktop is driven by the inner's aspect-ratio
     * (1650/480) which always exceeds this floor, so no media query needed. */
    min-height: 273px;

    background-color: var(--vl-olive);
    /* SVG pattern: dedicated mobile (375×551, portrait) and desktop
     * (1651×480, landscape) artworks. Desktop pattern is anchored to the
     * right so the visual weight sits under the side carousel; mobile is
     * centered. cover-sized so the pattern fills any viewport. */
    background-image: url('../img/career-hero-child-bg-mobile.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--vl-white);
    /* No overflow: hidden at mobile — it creates a scrolling context that
     * traps the subnav's position: sticky inside the hero. Desktop adds
     * overflow: hidden below since the inner's aspect-ratio + max-height
     * constraint needs to clip content. */
    position: relative;
    width: 100%;
}

@media (min-width: 1024px) {
    .vl-career-hero-child {
        --vl-hero-tab-offset: 70px;
    }
}

@media (min-width: 1024px) {
    .vl-career-hero-child {
        background-image: url('../img/career-hero-child-bg.svg');
        background-position: center right;
        max-height: 480px;
        /* Clip content that would extend beyond the inner's aspect-ratio +
         * max-height constraint. Only at desktop because mobile uses
         * position: sticky on the subnav, which an overflow:hidden ancestor
         * would trap inside the hero's bounds. */
        overflow: hidden;
    }
}

/*
 * Inner uses single-cell grid at desktop so the subnav (position: absolute)
 * and centered wrapper can both anchor to the same area. At mobile the
 * inner stays in normal block flow — subnav (position: sticky) sits at
 * the top in flow and the centered wrapper follows. Grid was tried at
 * mobile too, but the grid cell becomes its own containing block for
 * sticky in some browsers, which prevents the subnav from sticking to
 * the viewport as the page scrolls.
 */
@media (min-width: 1024px) {
    .vl-career-hero-child-inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .vl-career-hero-child-inner > * {
        grid-area: 1 / 1;
    }
}


@media (min-width: 1024px) {
    .vl-career-hero-child-inner {
        /* Fixed 480px height across the whole desktop range instead of the
         * previous 1650/480 aspect-ratio. Aspect-ratio produced a hero that
         * shrank vertically as the viewport narrowed (1024px viewport → ~298px
         * hero), which wasn't enough vertical room for two-line titles like
         * "Lateral Attorneys" and pushed the title into the sub-nav row
         * above. 480px is the designed max height; locking it there keeps
         * the title-vs-subnav spacing consistent from 1024px through 1650px+. */
        height: 480px;
        margin-inline: auto;
        max-width: 1650px;
        /* Anchor for the absolute-positioned subnav below — needed so the
         * body can fill the full inner height and visually center its title
         * between the very top of the hero and the bottom (tab) edge,
         * instead of centering only under the subnav. */
        position: relative;
    }
}

/* ----- Sub-navigation ----- */

.vl-career-hero-child-subnav {
    /* Mobile: subnav sits at the top of the hero in normal flow. Sticky-on-scroll
     * behavior is added via JS (toggles `.is-stuck` below) — pure CSS `position:
     * sticky` was unreliable through Elementor's nested wrappers.
     *
     * The 10% white bottom border separates the subnav from the body content.
     *
     * `position: relative` makes the subnav the containing block for the
     * mobile dropdown (`.subnav-mobile`) that uses `position: absolute;
     * top: 100%`. Without this, the dropdown resolves its containing block
     * to `.vl-career-hero-child` (the outer hero section) and drops below
     * the whole hero instead of right below the toggle. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: 12px;
    position: relative;
}

@media (max-width: 1023px) {
    .vl-career-hero-child-subnav.is-stuck {
        /* JS-toggled: when the page has scrolled past the subnav's natural
         * position, pin it to the top of the viewport. A same-height spacer
         * is inserted by JS to prevent layout shift below. */
        background-color: var(--vl-olive); /* fill behind the transparent original bg so content underneath doesn't show through */
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100;
    }
}

@media (min-width: 1024px) {
    .vl-career-hero-child-subnav {
        /* Pulled out of flow at desktop so the body can fill the full inner
         * height and vertically center its title between the top of the hero
         * and the tab. Subnav stays pinned at the top via inset:0 + position:
         * absolute; z-index keeps it above the body's content. */
        border-bottom: none; /* mobile-only treatment — desktop has no separator */
        left: 0;
        padding-block: 10px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 5;
    }
}

/*
 * Mobile: the "Career Paths ▾" button is the only thing shown by default.
 * Tapping it expands the .vl-career-hero-child-subnav-mobile list below.
 * The desktop horizontal list (.vl-career-hero-child-subnav-list) is hidden
 * via display: none below the desktop breakpoint.
 */
.vl-career-hero-child-subnav-toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--vl-white);
    cursor: pointer;
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
}

.vl-career-hero-child-subnav-current {
    text-align: left;
}

.vl-career-hero-child-subnav-chevron {
    display: inline-flex;
    height: 8px;
    transition: transform 200ms ease;
    width: 12px;
}

.vl-career-hero-child-subnav-chevron svg {
    display: block;
    height: 100%;
    width: 100%;
}

.vl-career-hero-child-subnav-toggle[aria-expanded="true"] .vl-career-hero-child-subnav-chevron {
    transform: rotate(180deg);
}

/*
 * Mobile open state: when the toggle is expanded, the entire subnav (toggle
 * row + dropdown panel) flips to a sand background + olive text. The dropdown
 * panel itself is absolutely positioned below the toggle so it overlays the
 * page content instead of pushing it down. Driven by :has(toggle[aria-expanded
 * ="true"]).
 */
.vl-career-hero-child-subnav:has(.vl-career-hero-child-subnav-toggle[aria-expanded="true"]) {
    background-color: var(--vl-sand-brighter);
    color: var(--vl-olive);
    z-index: 5; /* lifts the open subnav above the body content below it */
}

.vl-career-hero-child-subnav:has(.vl-career-hero-child-subnav-toggle[aria-expanded="true"]) .vl-career-hero-child-subnav-toggle {
    color: var(--vl-olive);
}

/*
 * Dropdown panel (mobile only). Absolutely positioned below the toggle so it
 * overlays content rather than pushing it down. Sand bg matches the toggle
 * row above, making them read as one continuous block.
 */
.vl-career-hero-child-subnav-mobile {
    background-color: var(--vl-sand-brighter);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: black;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0 20px 20px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
}

.vl-career-hero-child-subnav-mobile-item {
    margin-bottom: 12px;
}

.vl-career-hero-child-subnav-mobile-item:last-child {
    margin-bottom: 0;
}

.vl-career-hero-child .vl-career-hero-child-subnav-mobile-link {
    color: inherit;
    display: inline-block;
    font-family: proxima-nova, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.vl-career-hero-child .vl-career-hero-child-subnav-mobile-item-current .vl-career-hero-child-subnav-mobile-link {
    text-decoration: underline;
}

/*
 * Nested children: text is indented (via padding-left on each item) so the
 * relationship reads visually. A small L-shaped corner indicator sits inside
 * the item's left padding, vertically centered with the text.
 */
.vl-career-hero-child-subnav-mobile-children-wrap {
    margin-top: 12px;
    /* Space below the nested child list before the next top-level item.
     * Nested children's last <li> gets margin-bottom: 0 via the
     * :last-child rule, and the wrap <li> itself has no natural margin,
     * so without this the next top-level item butts right up against
     * the last nested child (e.g. "1Elevate" flush against "Legal
     * Support Staff"). */
    margin-bottom: 12px;
}

.vl-career-hero-child-subnav-mobile-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vl-career-hero-child-subnav-mobile-children .vl-career-hero-child-subnav-mobile-item {
    padding-left: 12px;
    position: relative;
}

.vl-career-hero-child-subnav-mobile-children .vl-career-hero-child-subnav-mobile-item::before {
    border-bottom: 1px solid var(--vl-black);
    border-left: 1px solid var(--vl-black);
    content: '';
    height: 6px;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 9px; /* roughly vertically centered with the 13px / 1.2 line text */
    width: 6px;
}

/*
 * Desktop: hide the mobile toggle + dropdown, show the inline horizontal list.
 * The list sits in a wrapper (.vl-career-hero-child-subnav-desktop) alongside
 * an editor-configurable label ("Career Paths" by default) that's separated
 * from the list by a vertical rule.
 */
.vl-career-hero-child-subnav-desktop {
    display: none;
}

.vl-career-hero-child-subnav-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .vl-career-hero-child-subnav-toggle {
        display: none;
    }
    .vl-career-hero-child-subnav-mobile {
        display: none !important; /* override the [hidden] toggle that JS may have flipped */
    }
    .vl-career-hero-child-subnav-desktop {
        align-items: center;
        column-gap: 24px;
        display: flex;
        flex-wrap: wrap;
        grid-column: 1 / -1;
        row-gap: 8px;
    }
    /* Parent-scoped so we beat the elementor-kit-9 anchor color rule when the
     * label renders as an <a> (subnav_label_url on the widget). Same rule
     * applies to the <span> fallback — no visual difference between the two. */
    .vl-career-hero-child .vl-career-hero-child-subnav-label {
        border-right: 1px solid rgba(244, 238, 210, 0.4);
        color: var(--vl-white);
        margin: 0;
        padding-right: 24px;
        text-decoration: none;
    }

    a.vl-career-hero-child-subnav-label:hover,
    a.vl-career-hero-child-subnav-label:focus-visible {
        color: var(--vl-white);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .vl-career-hero-child-subnav-list {
        align-items: center;
        column-gap: 24px;
        display: flex;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

.vl-career-hero-child-subnav-item {
    margin: 0;
}

/*
 * Sub-nav link typography comes from the `.type-iota` utility class assigned
 * in markup. Visual state (opacity, hover underline) lives here.
 *
 * Selectors are parent-scoped to `.vl-career-hero-child` (0,2,0 / 0,3,0)
 * so they beat Elementor's `.elementor-kit-9 a { color: ... }` rule (0,1,1)
 * that would otherwise repaint the link copper.
 */
.vl-career-hero-child .vl-career-hero-child-subnav-link {
    align-items: center;
    color: var(--vl-white);
    display: inline-flex;
    gap: 4px;
    opacity: 0.6;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 200ms ease;
}

.vl-career-hero-child .vl-career-hero-child-subnav-link:hover,
.vl-career-hero-child .vl-career-hero-child-subnav-link:focus-visible,
.vl-career-hero-child .vl-career-hero-child-subnav-item-has-children:hover .vl-career-hero-child-subnav-link,
.vl-career-hero-child .vl-career-hero-child-subnav-item-has-children:focus-within .vl-career-hero-child-subnav-link {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vl-career-hero-child .vl-career-hero-child-subnav-item-current .vl-career-hero-child-subnav-link {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * Chevron next to items with children (desktop only — appears inside the link
 * so it inherits color + opacity). 10×6 down-arrow that flips when the
 * dropdown is open.
 */
.vl-career-hero-child-subnav-link-chevron {
    display: inline-flex;
    height: 6px;
    transition: transform 200ms ease;
    width: 10px;
}

.vl-career-hero-child-subnav-link-chevron svg {
    display: block;
    height: 100%;
    width: 100%;
}

.vl-career-hero-child-subnav-item-has-children:hover .vl-career-hero-child-subnav-link-chevron,
.vl-career-hero-child-subnav-item-has-children:focus-within .vl-career-hero-child-subnav-link-chevron {
    transform: rotate(180deg);
}

/*
 * Desktop dropdown panel for items with children. Positioned absolutely below
 * the parent item. Hidden by default (opacity + visibility for transition;
 * pointer-events: none so it's not clickable). On :hover or :focus-within of
 * the parent <li> the panel becomes visible. Keyboard users get :focus-within
 * for free as soon as a child link is tabbed into.
 */
.vl-career-hero-child-subnav-dropdown {
    background-color: var(--vl-white);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    list-style: none;
    margin: 0;
    min-width: 200px;
    opacity: 0;
    padding: 8px 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: opacity 150ms ease, visibility 0s linear 150ms;
    visibility: hidden;
    z-index: 10;
}

.vl-career-hero-child-subnav-item-has-children {
    position: relative;
}

.vl-career-hero-child-subnav-item-has-children:hover .vl-career-hero-child-subnav-dropdown,
.vl-career-hero-child-subnav-item-has-children:focus-within .vl-career-hero-child-subnav-dropdown {
    opacity: 1;
    transition: opacity 150ms ease, visibility 0s linear 0s;
    visibility: visible;
}

.vl-career-hero-child-subnav-dropdown-item {
    margin: 0;
}

.vl-career-hero-child .vl-career-hero-child-subnav-dropdown-link {
    color: var(--vl-black);
    display: block;
    padding: 8px 20px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 200ms ease, color 200ms ease;
    white-space: nowrap;
}

.vl-career-hero-child .vl-career-hero-child-subnav-dropdown-link:hover,
.vl-career-hero-child .vl-career-hero-child-subnav-dropdown-link:focus-visible {
    background-color: var(--vl-sand-brighter);
    color: var(--vl-brown-dark);
}

/* ----- Body (title + optional side carousel) ----- */

.vl-career-hero-child-body {
    padding-block: 40px 60px;
    position: relative;
}

/*
 * Centering. Two mechanics across breakpoints:
 *
 *   Mobile: padding math on the body. The hero has natural (content-driven)
 *   height. When padding-bottom = padding-top + tab_offset, the title
 *   visually centers between the TOP of the hero and the TOP of the tab.
 *   (Proof: if hero_height = P_t + title + P_b and we want title's center
 *   at (hero_height - tab)/2, P_b - P_t = tab_offset.)
 *
 *   Desktop: the hero has a fixed aspect ratio + max-height, so we can use
 *   a calc-based flex container. .vl-career-hero-child-centered fills
 *   calc(100% - tab_offset) of the inner and flex-centers the body.
 */
.vl-career-hero-child-body {
    /* Mobile padding-block math: 60px top breathing room, bottom = top + tab
     * so the title reads as visually centered between hero top and tab top. */
    padding-block: 60px calc(60px + var(--vl-hero-tab-offset));
    width: 100%;
}

@media (min-width: 1024px) {
    .vl-career-hero-child-centered {
        align-items: center;
        display: flex;
        height: calc(100% - var(--vl-hero-tab-offset));
    }

    .vl-career-hero-child-body {
        padding-block: 0;
    }
}

.vl-career-hero-child-text {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    /*
     * When a carousel is present: text 5 cols, 2-col gap, carousel 5 cols.
     * (text 1/6 + carousel 8/13 — cols 6 + 7 are the inter-column gap.)
     */
    .vl-career-hero-child-has-carousel .vl-career-hero-child-text {
        grid-column: 1 / span 5;
    }
}

.vl-career-hero-child-eyebrow {
    margin: 0 0 8px;
}

@media (min-width: 1024px) {
    .vl-career-hero-child-eyebrow {
        margin-bottom: 12px;
    }
}

.vl-career-hero-child-title {
    color: var(--vl-white);
    line-height: 1.05;
    margin: 0;
}

/*
 * Mobile CTA button. Visual style comes from the `.vl-btn-outline-white`
 * utility class applied alongside this one in markup. This class only
 * handles layout: spacing above the button and hiding on desktop (where the
 * side carousel takes over as the call-to-action).
 *
 * The `a.` tag combo on the hide rule gives (0,1,1) — matches the utility's
 * `a.vl-btn-outline-white { display: inline-block }` (0,1,1) so cascade
 * order can resolve it. This rule comes later in the file, so it wins.
 */
.vl-career-hero-child-mobile-button {
    margin-top: 24px;
}

@media (min-width: 1024px) {
    /* Desktop hides the mobile button — desktop users get the side carousel */
    a.vl-career-hero-child-mobile-button {
        display: none;
    }
}

/* ----- Side carousel (Featured Openings) ----- */

/* Hidden on mobile entirely; the mobile-button (above) is the alternate CTA. */
.vl-career-hero-child-side {
    display: none;
}

@media (min-width: 1024px) {
    .vl-career-hero-child-side {
        display: block;
        grid-column: 8 / -1;
    }
}

.vl-career-hero-child-side-carousel {
    position: relative;
}

/*
 * Header row above the slides — heading on the left, counter + prev/next on
 * the right. Border below the row at 24px above/below.
 */
.vl-career-hero-child-side-header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-bottom: 24px;
}

.vl-career-hero-child-side-heading {
    color: var(--vl-white);
    margin: 0;
}

.vl-career-hero-child-side-nav {
    align-items: center;
    display: flex;
    gap: 7px;
}

.vl-career-hero-child-side-counter {
    color: var(--vl-white);
}

.vl-career-hero-child-side-counter-divider {
    margin: 0 2px;
}

/*
 * 20×20 round buttons, solid white at 50% opacity by default. Hover and
 * focus drop opacity to 100%. The arrow inside is 8×8 olive (uses
 * currentColor so a single rule controls both circles).
 */
.vl-career-hero-child-side-prev,
.vl-career-hero-child-side-next {
    align-items: center;
    background-color: var(--vl-white);
    border: none;
    border-radius: 50%;
    color: var(--vl-olive);
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    opacity: 0.5;
    padding: 0;
    transition: opacity 200ms ease;
    width: 20px;
}

.vl-career-hero-child-side-prev svg,
.vl-career-hero-child-side-next svg {
    display: block;
    width: 10px;
    height: 10px;
}

.vl-career-hero-child-side-prev svg {
    transform: rotate(180deg); /* flip the right-pointing arrow to face left */
}

.vl-career-hero-child-side-prev:hover,
.vl-career-hero-child-side-prev:focus-visible,
.vl-career-hero-child-side-next:hover,
.vl-career-hero-child-side-next:focus-visible {
    opacity: 1;
}

/*
 * Slide stack — 24px above the first slide for the gap below the header
 * border. List uses the same fade-stack pattern as before.
 */
.vl-career-hero-child-side-slides {
    list-style: none;
    margin: 0;
    padding: 24px 0 0;
    position: relative;
}

.vl-career-hero-child-side-slide {
    inset: 0;
    opacity: 0;
    padding-top: 24px; /* must match .vl-career-hero-child-side-slides padding so absolutely-positioned slides line up with the first */
    pointer-events: none;
    position: absolute;
    transition: opacity 250ms ease;
}

.vl-career-hero-child-side-slide:first-child {
    /* First slide stays in normal flow to set the panel's height; siblings
     * absolutely position over it. Opacity/pointer-events come from the
     * `.vl-career-hero-child-side-slide-active` class (toggled by JS) so this
     * rule only handles layout — otherwise slide 1 would stay opaque forever
     * and visually stack on top of subsequent slides as you advance. */
    padding-top: 0;
    position: relative;
}

.vl-career-hero-child-side-slide-active {
    opacity: 1;
    pointer-events: auto;
}

.vl-career-hero-child-side-slide-link {
    color: inherit;
    display: block;
    text-decoration: none;
}

.vl-career-hero-child-side-slide-link:hover,
.vl-career-hero-child-side-slide-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vl-career-hero-child-side-slide-title {
    color: var(--vl-white);
    display: block;
    margin: 0 0 8px;
}

.vl-career-hero-child-side-slide-location {
    align-items: center;
    color: var(--vl-white);
    display: inline-flex;
    gap: 8px;
}

.vl-career-hero-child-side-slide-location-icon {
    display: inline-flex;
    height: 12px;
    width: 10px;
}

.vl-career-hero-child-side-slide-location-icon svg {
    display: block;
    height: 100%;
    width: 100%;
}


/* ===== Testimonial List — VL-104 ===== */

/*
 * Plain vertical stack of testimonials. No carousel, no pagination — all
 * items render at once. Each row: small square photo on the left + quote
 * with attribution on the right. Photo falls back to a placeholder triangle
 * icon when the testimonial has no image set.
 */
.vl-testimonial-list {
    padding: 64px 0 80px;
}

@media (min-width: 1024px) {
    .vl-testimonial-list {
        padding: 80px 0 120px;
    }
}

.vl-testimonial-list-title {
    color: var(--vl-olive);
    grid-column: 1 / -1;
    margin: 0 0 32px;
}

/*
 * At 1024-1099px the 8-col / offset-2 placement makes the title wrap
 * awkwardly. Keep the title full-width and centered in that band, then
 * settle into the constrained position from 1100px up.
 */
@media (min-width: 1024px) {
    .vl-testimonial-list-title {
        margin-bottom: 64px;
        text-align: center;
    }
}

@media (min-width: 1100px) {
    .vl-testimonial-list-title {
        grid-column: 3 / span 8;
        text-align: left;
    }
}

/* Block contents: 8 cols wide on desktop, offset 2 cols from the left */
.vl-testimonial-list-items {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .vl-testimonial-list-items {
        grid-column: 3 / span 8;
    }
}

/*
 * Each item: photo (left) + content (right). Horizontal row at all sizes.
 * 32px between items on mobile, 64px on desktop.
 */
.vl-testimonial-list-item {
    align-items: flex-start;
    display: flex;
    margin-bottom: 32px;
}

.vl-testimonial-list-item:last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .vl-testimonial-list-item {
        margin-bottom: 64px;
    }
}

/*
 * Photo column. Square (not circle) with horizontal margins around it
 * — 16px each side on mobile, 38px each side on desktop. Sand bg is
 * visible only when the placeholder triangle is rendered (no photo set);
 * an actual <img> fills the square edge-to-edge.
 */
.vl-testimonial-list-photo {
    align-items: center;
    /* Olive bg only shows when there's no photo — the actual <img> covers it.
     * When the placeholder triangle renders, the olive square + black triangle
     * combine to form the visual fallback per design. */
    background-color: var(--vl-olive);
    display: flex;
    flex-shrink: 0;
    height: 62px;
    justify-content: center;
    /* Mobile/tablet: only right margin (image is flush to the left edge of
     * the testimonial item). Desktop adds an equal left margin via the
     * media query below. */
    margin-right: 16px;
    overflow: hidden;
    width: 62px;
}

@media (min-width: 1024px) {
    .vl-testimonial-list-photo {
        height: 134px;
        margin-left: 18px;
        margin-right: 38px;
        width: 134px;
    }
}

/* Higher specificity (parent + img.) to beat Elementor's `.elementor img` */
.vl-testimonial-list img.vl-testimonial-list-photo-img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Placeholder triangle (black downward arrow on olive bg) when no photo is set */
.vl-testimonial-list-photo-placeholder {
    align-items: center;
    color: var(--vl-black);
    display: inline-flex;
    height: 60%;
    justify-content: center;
    width: 60%;
}

.vl-testimonial-list-photo-placeholder svg {
    display: block;
    height: 100%;
    width: 100%;
}

.vl-testimonial-list-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
}

.vl-testimonial-list-quote {
    color: var(--vl-olive);
    margin: 0;
    quotes: none;
}

/* Strip default browser quote marks from the blockquote */
.vl-testimonial-list-quote::before,
.vl-testimonial-list-quote::after {
    content: none;
}

.vl-testimonial-list-attribution {
    color: var(--vl-olive);
    font-style: normal; /* cite defaults to italic */
}


/* ===== Careers FAQ — VL-111 ===== */

/*
 * Standalone custom FAQ widget for Careers pages (PHP class
 * `Careers_FAQ_Widget`). Editors pick it directly from the widget panel; no
 * CSS class management needed.
 *
 * Toggle behavior runs in varnum.js — single-open-at-a-time, ARIA expanded
 * + `hidden` attribute on the answer panel.
 *
 * Design notes:
 *   - Section title (optional): type-delta with 32px bottom margin
 *   - Item question: type-zeta (Georgia 400)
 *   - +/− icon toggle painted via CSS pseudo-elements
 *   - 1px black-at-20% divider above each item, plus closing divider on the last
 *   - Item answer: type-sm-p; 16px gap below question when expanded
 *   - Content 8 cols wide, offset 2 cols on desktop (cols 3-10 of the page grid)
 */

.vl-careers-faq {
    padding-block: 48px;
}

@media (min-width: 1024px) {
    .vl-careers-faq {
        padding-block: 100px;
    }
}

/* Section title + items live inside .vl-grid; both span full row at mobile
 * and slide into the 8-col / col-3 placement on desktop. */
.vl-careers-faq-title {
    color: var(--vl-olive);
    grid-column: 1 / -1;
    margin: 0 0 32px;
}

@media (min-width: 1024px) {
    .vl-careers-faq-title {
        grid-column: 3 / span 8;
    }
}

.vl-careers-faq-items {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .vl-careers-faq-items {
        grid-column: 3 / span 8;
    }
}

/*
 * Each item. Inner vertical padding (24px mobile / 32px desktop) covers the
 * full item — question row plus the expanded answer panel.
 */
.vl-careers-faq-item {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-block: 24px;
}

@media (min-width: 1024px) {
    .vl-careers-faq-item {
        padding-block: 32px;
    }
}

.vl-careers-faq-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* The <h3> wrapper has no visual weight — it just provides heading semantics
 * for the question text. */
.vl-careers-faq-question-heading {
    margin: 0;
}

/*
 * Question button. Native <button> for keyboard/AT support. Flex row with
 * the label on the left and +/− icon pushed to the right.
 */
.vl-careers-faq-question {
    /* Top-align the icon with the first line of the question text (instead
     * of centering it vertically). When the question wraps to multiple
     * lines, the icon stays anchored next to the first line. */
    align-items: flex-start;
    background: transparent;
    border: none;
    color: var(--vl-olive);
    cursor: pointer;
    display: flex;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    gap: 16px;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.vl-careers-faq-question-label {
    flex: 1;
}

/*
 * +/− symbol painted with pseudo-elements.
 *   ::before = horizontal bar (always visible — the minus stroke)
 *   ::after  = vertical bar (visible only when closed; combined with ::before forms a plus)
 * When the button has aria-expanded="true", ::after fades + rotates out leaving the minus.
 */
/*
 * Container size = (horizontal-bar-width × vertical-bar-height).
 *   Mobile:  24 × 16
 *   Desktop: 32 × 22
 */
.vl-careers-faq-icon {
    color: currentColor;
    display: inline-block;
    flex-shrink: 0;
    height: 16px;
    margin-top: 2px; /* nudges the icon down to align with the question text's cap height */
    position: relative;
    width: 24px;
}

@media (min-width: 1024px) {
    .vl-careers-faq-icon {
        height: 22px;
        width: 32px;
    }
}

.vl-careers-faq-icon::before,
.vl-careers-faq-icon::after {
    background-color: currentColor;
    content: '';
    left: 50%;
    position: absolute;
    top: 50%;
    transition: transform 200ms ease, opacity 200ms ease;
}

/* ::before = horizontal bar */
.vl-careers-faq-icon::before {
    height: 2px;
    transform: translate(-50%, -50%);
    width: 24px;
}

@media (min-width: 1024px) {
    .vl-careers-faq-icon::before {
        width: 32px;
    }
}

/* ::after = vertical bar (hidden when expanded) */
.vl-careers-faq-icon::after {
    height: 16px;
    transform: translate(-50%, -50%);
    width: 2px;
}

@media (min-width: 1024px) {
    .vl-careers-faq-icon::after {
        height: 22px;
    }
}

.vl-careers-faq-question[aria-expanded="true"] .vl-careers-faq-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

/*
 * Answer panel. JS toggles the `hidden` attribute to show/hide. When shown,
 * the inner body sits 16px below the question.
 */
.vl-careers-faq-answer[hidden] {
    display: none;
}

.vl-careers-faq-answer-body {
    color: var(--vl-olive);
    padding-top: 16px;
}

/*
 * WYSIWYG content scoping. type-sm-p sets the base; these rules cover the
 * various tags an editor can produce from the WYSIWYG control.
 */
.vl-careers-faq-answer-body p {
    margin: 0 0 12px;
}

.vl-careers-faq-answer-body p:last-child {
    margin-bottom: 0;
}

.vl-careers-faq-answer-body ul,
.vl-careers-faq-answer-body ol {
    margin: 0 0 12px;
    padding-left: 1.5em;
}

.vl-careers-faq-answer-body li {
    margin-bottom: 4px;
}

.vl-careers-faq-answer-body a {
    color: inherit;
    text-decoration: underline;
}

.vl-careers-faq-answer-body a:hover,
.vl-careers-faq-answer-body a:focus-visible {
    text-decoration: none;
}

.vl-careers-faq-answer-body strong,
.vl-careers-faq-answer-body b {
    font-weight: 700;
}

.vl-careers-faq-answer-body em,
.vl-careers-faq-answer-body i {
    font-style: italic;
}


/* ===== Featured CTAs — VL-125 ===== */

/*
 * Section-level CTA block on a sand-brighter background. Optional title +
 * description sit above a row of side-by-side CTA cards (title + description
 * + button each).
 *
 * Layout (desktop, 12-col page grid):
 *   - Title and description each span 5 cols (cols 1-5)
 *   - CTA cards span 5 cols each — cards at cols 1-5 + cols 7-11 (col 6 is
 *     the 1-col gap between them; col 12 stays empty)
 *   - Items list uses CSS subgrid so each <li> can place itself in the
 *     parent .vl-grid's columns directly
 *
 * Mobile: title, description, and each card all span the full mobile grid
 * (4 cols on mobile); items stack with a 32px row-gap.
 */
.vl-featured-ctas {
    background-color: var(--vl-sand-brighter);
    padding-block: 48px;
}

@media (min-width: 1024px) {
    .vl-featured-ctas {
        padding-block: 100px;
    }
}

.vl-featured-ctas-title {
    color: var(--vl-olive);
    grid-column: 1 / -1;
    margin: 0 0 16px;
}

.vl-featured-ctas-description {
    color: var(--vl-olive);
    grid-column: 1 / -1;
    margin: 0 0 40px;
}

@media (min-width: 1024px) {
    .vl-featured-ctas-title {
        grid-column: 1 / span 5;
        margin-bottom: 24px;
    }

    /* Description sits at 3/4 of the 12-col grid (9 cols) per client request,
     * wider than the 5-col title so longer copy doesn't pinch. */
    .vl-featured-ctas-description {
        grid-column: 1 / span 9;
    }
}

/*
 * Items list — subgrid lets each <li> place itself in the parent .vl-grid's
 * columns (4 on mobile, 12 at ≥1024px) instead of creating an internal grid.
 */
.vl-featured-ctas-items {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: 32px;
}

.vl-featured-ctas-item {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    /* CTA card 1 at cols 1-5, card 2 at cols 7-11 (col 6 is the gap; col 12 stays empty) */
    .vl-featured-ctas-item:nth-child(odd) {
        grid-column: 1 / span 5;
    }
    .vl-featured-ctas-item:nth-child(even) {
        grid-column: 7 / span 5;
    }
}

/*
 * Item spacing mirrors the Two Column widget's CTA block (.vl-tc-cta-*):
 *   - Title margin-bottom: 8px mobile / 16px desktop
 *   - Description margin-bottom: 20px
 * Keeping these in sync means an editor swapping between the two widgets
 * gets predictable visual rhythm.
 */
.vl-featured-ctas-item-title {
    color: var(--vl-olive);
    margin: 0 0 8px;
}

@media (min-width: 1024px) {
    .vl-featured-ctas-item-title {
        margin-bottom: 16px;
    }
}

.vl-featured-ctas-item-description {
    color: var(--vl-olive);
    margin: 0 0 20px;
}

/*
 * Button — matches the dark-brown treatment used on the Two Column widget.
 * Parent-class scope + `a.` tag combo gives (0,2,1) so the rule beats
 * Elementor's `.elementor-kit-9 a` (0,1,1).
 */
.vl-featured-ctas a.vl-featured-ctas-item-button {
    background-color: var(--vl-brown-dark);
    border: 0.5px solid var(--vl-brown-dark);
    color: var(--vl-white);
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.vl-featured-ctas a.vl-featured-ctas-item-button:hover,
.vl-featured-ctas a.vl-featured-ctas-item-button:focus-visible {
    background-color: var(--vl-white);
    color: var(--vl-brown-dark);
}


/* ===== Careers Image Carousel — VL-110 ===== */

/*
 * Slideshow-style image carousel for Career pages (e.g. the office/team
 * photo carousel on Summer Associates). One image visible at a time;
 * pagination dots match the Testimonial Carousel's styling.
 *
 * Carousel sits inside .vl-grid so it's constrained to the page grid's
 * content area (not full viewport). Each slide enforces a fixed 1110×624
 * aspect ratio so:
 *   - Slide heights stay consistent regardless of source image dimensions
 *   - Swiper doesn't size slides off natural image dimensions (which used
 *     to produce odd-looking gaps and shifts as you advanced slides)
 *   - Images fill the slot via object-fit: cover (any aspect crops cleanly)
 *
 * Driven by Swiper.js (loaded by Elementor Pro). JS init lives in varnum.js.
 */
.vl-careers-image-carousel {
    padding-block: 48px;
}

@media (min-width: 1024px) {
    .vl-careers-image-carousel {
        padding-block: 80px;
    }
}

/*
 * Block-level wrapper that mirrors .vl-grid's max-width + padding behavior
 * without using `display: grid`. Swiper.js doesn't play nicely with grid
 * layout (its internal measurement loops on grid items), so a plain block
 * container keeps the swiper width definite and stable. Matches .vl-grid:
 *   - 20px L/R padding from 0px to 1148px viewport
 *   - max-width 1149px from 1024px up (includes the 20px padding)
 *   - max-width 1109px + no padding from 1149px up
 */
.vl-careers-image-carousel-container {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 1149px;
    padding-inline: 20px;
    width: 100%;
}

@media (min-width: 1149px) {
    .vl-careers-image-carousel-container {
        max-width: 1109px;
        padding-inline: 0;
    }
}

.vl-careers-image-carousel-swiper {
    position: relative;
}

.vl-careers-image-carousel-slide {
    box-sizing: border-box;
    cursor: pointer; /* slide advances on click */
}

/*
 * Image container — fixed 1110/624 aspect ratio. width: 100% means the
 * container fills the swiper-slide (which Swiper sizes to the swiper
 * container = .vl-grid content width). overflow: hidden contains the
 * object-fit: cover crop on images that don't match the aspect.
 */
.vl-careers-image-carousel-image {
    aspect-ratio: 1110 / 624;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

/* Higher specificity (parent + img.) to beat Elementor's `.elementor img` */
.vl-careers-image-carousel img.vl-careers-image-carousel-image-img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.vl-careers-image-carousel-caption {
    color: var(--vl-olive);
    margin: 16px 0 0;
    text-align: center;
}

/*
 * Pagination dots — match the Testimonial Carousel's styling:
 *   Inactive: 6×6, black 20% opacity
 *   Active:   20×6 pill, black 100% opacity
 * Swiper's default absolute positioning is overridden so the dots flow in
 * normal layout below the slide stack.
 */
.vl-careers-image-carousel .vl-careers-image-carousel-pagination {
    bottom: auto;
    display: flex;
    gap: 6px;
    justify-content: center;
    left: auto;
    margin-top: 24px;
    position: relative;
    top: auto;
    width: 100%;
}

.vl-careers-image-carousel .vl-careers-image-carousel-pagination .swiper-pagination-bullet {
    background-color: var(--vl-black);
    border-radius: 3px;
    height: 6px;
    margin: 0; /* Swiper's defaults fight our flex gap */
    opacity: 0.2;
    transition: opacity 200ms ease, width 200ms ease;
    width: 6px;
}

.vl-careers-image-carousel .vl-careers-image-carousel-pagination .swiper-pagination-bullet:hover,
.vl-careers-image-carousel .vl-careers-image-carousel-pagination .swiper-pagination-bullet:focus-visible {
    opacity: 1;
}

.vl-careers-image-carousel .vl-careers-image-carousel-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 20px;
}


/* Insights Hubs widget styles moved to insights-news.css (VL-46 epic scope). */