/*
Theme Name: SpadeAvenueWhite
Theme URI: https://projectstaffing.company/wordpress/themes/spadeavenuewhite
Author: Project Staffing Company
Author URI: https://projectstaffing.company
Description: Main theme for SpadeAvenue.com.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.56
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: spadeavenuewhite
Tags: design, sourcing
*/

.no-flow-spacing > * {
    margin-block-start: 0 !important;
}

main#wp--skip-link--target {
    margin-block-start: 0 !important;
}

a {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25ch;
}
 
a:hover,
a:focus {
    text-decoration-style: dashed;
}
  
a:active {
    text-decoration: none;
}

.wp-block-button-banner {
    background-color: var(--wp--preset--color--transparent);
    color: var(--wp--preset--color--carmine-orange);
}

.wp-block-button-banner__link {
    background-color: var(--wp--preset--color--transparent);
    color: var(--wp--preset--color--carmine-orange);
    border-color: var(--wp--preset--color--carmine-orange);
    border-width: 2px;
    border-style: solid;
    text-transform: lowercase;
    text-decoration: none;
    font-weight: bold;
}

.wp-block-button:hover,
.wp-block-button:focus {
    background-color: var(--wp--preset--color--transparent);
    color: var(--wp--preset--color--carmine-orange);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--wp--preset--color--carmine-orange);
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.wp-block-button-banner__link:hover,
.wp-block-button-banner__link:focus {
    background-color: var(--wp--preset--color--carmine-orange);
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.banner-button {
    background-color: var(--wp--preset--color--transparent);
    color: var(--wp--preset--color--white);
}

.banner-button:hover,
.banner-button:focus {
    background-color: var(--wp--preset--color--transparent);
    color: var(--wp--preset--color--white);
}

.banner-button__link {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--black);
    border-width: 2px;
    border-style: solid;
    text-transform: lowercase;
    text-decoration: none;
    font-weight: bold;
}

.banner-button__link:hover,
.banner-button__link:focus {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    text-decoration: none;
}

/* WPForms submit button — match the site's standard button style
   (outline by default, solid orange fill on hover), not WPForms' own default blue. */
.wpforms-form button[type=submit] {
    background-color: transparent !important;
    border-style: solid !important;
    border-color: var(--wp--preset--color--carmine-orange) !important;
    border-width: 2px !important;
    border-radius: 0 !important;
    color: var(--wp--preset--color--carmine-orange) !important;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:focus {
    background-color: var(--wp--preset--color--carmine-orange) !important;
    color: var(--wp--preset--color--white) !important;
}

/* Navigation Block */
.wp-block-navigation {
    background-color: var(--wp--preset--color--transparent);
    color: var(--wp--preset--color--black);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--typography--line-height--main-menu);
    font-weight: var(--wp--custom--typography--font-weight--medium);
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--carmine-orange);
}

.wp-block-navigation .wp-block-navigation-item a:active,
.wp-block-navigation .wp-block-navigation-item__content:active {
    color: var(--wp--preset--color--carmine-orange) !important;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item > a {
    color: var(--wp--preset--color--carmine-orange) !important;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus {
    color: var(--wp--preset--color--carmine-orange);
}
/**/

.benefit-block-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 24px;
    background: var(--wp--preset--color--white);
    flex: none;
    order: 0;
}

.benefit-block-horizontal__image {
    width: 140px;
    height: 212px;
    flex: none;
    order: 0;
}

.benefit-block-horizontal__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
    text-wrap: wrap;
    padding: 0px;
    gap: 16px;
    flex: none;
    order: 1;
}

.benefit-block-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 232px;
    height: 476px;
    background: var(--wp--preset--color--white);
    flex: none;
    order: 0;
}

.benefit-block-vertical__image {
    width: 232px;
    height: 332px;
    flex: none;
    order: 0;
}

.benefit-block-vertical__text {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    padding: 0px;
    gap: 16px;
    width: 232px;
    height: 156px;
    flex: none;
    order: 1;
}

@media (max-width: 600px) {
    .wp-block-cover.alignfull { min-height: 320px; }
    .banner-gen-cover { min-height: 260px; }
}

/* Front-page hero banner (patterns/banner.php) only — banner-gen/banner-client-projects
   are untouched. aspect-ratio scales the height to match the image's real proportions
   (banner-office.webp, 2560x1440, 16:9) as viewport width changes, but on typical
   desktop/laptop widths that alone lands well under 1280px — min-height:1280px here
   raises the floor so the banner displays larger by default on most screens. max-height
   raised to match (1440px = the image's native pixel height — a clean ceiling since
   anything taller would just upscale the source file past its real resolution; also
   keeps min-height from exceeding max-height, which the CSS spec resolves in min's
   favor and would otherwise make max-height meaningless). object-fit:cover on the
   background image still works the same with a height computed this way. */
.banner-hero-cover {
    aspect-ratio: 2560 / 1440;
    max-height: 1440px;
}

/* The 1280px floor is desktop-only — scoped above 600px so it doesn't fight the
   existing mobile min-height:320px rule below and force an oversized banner on
   phone screens. !important needed either way, to beat the inline min-height:480px
   the block itself renders with. */
@media (min-width: 601px) {
    .banner-hero-cover {
        min-height: 1280px !important;
    }
}

@media (max-width: 600px) {
    .wp-block-cover.alignfull,
    .banner-gen-cover {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .banner-punchline {
        font-size: 1.5rem !important;
    }
}

/* Media & Text blocks (patterns/media-text-split-left.php, media-text-split-right.php):
   WP core always stacks the image first on mobile regardless of desktop left/right
   position (see wp-includes/blocks/media-text/style.css) — overridden here so text
   always leads on small screens instead. !important + matching core's own 600px
   breakpoint, since this needs to win over core's same-specificity rule regardless
   of stylesheet load order. */
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
        grid-row: 1 !important;
    }
    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
        grid-row: 2 !important;
    }
}

/* Site-wide sticky header. --header-height defaults to an approximate value here;
   assets/js/sticky-header.js measures the real rendered height on load/resize and
   overwrites it, so the compensating offsets below stay accurate at every breakpoint
   without hardcoding per-breakpoint numbers. Height itself is intentionally fixed
   (no shrink-on-scroll) — simpler offset math, no layout shift while scrolling. */
:root {
    --header-height: 76px;
}

header.wp-block-group {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* Root padding is 0 (theme.json never sets it) and nothing else provides
       horizontal breathing room here, so logo/nav would otherwise sit flush
       against the viewport edge. Uses the existing responsive spacing token
       (clamps via vw) rather than a fixed px value, so it scales down on its
       own on narrow/mobile viewports instead of needing a separate breakpoint. */
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
    box-sizing: border-box;
    z-index: 100;
}

/* The header is position:fixed (removed from normal flow), so it doesn't get
   automatically pushed down by the margin WordPress adds to <html> for the admin
   bar on normal-flow pages. Without this, the admin bar (z-index 99999) covers the
   top of the header while logged in. Match WP core's own admin-bar height/breakpoint. */
body.admin-bar header.wp-block-group {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar header.wp-block-group {
        top: 46px !important;
    }
}

/* Every page's content needs to be pushed down by the header's height, since the
   header no longer occupies space in normal flow. Applied to .wp-site-blocks (WP
   core's own wrapper around header/main/footer) rather than <main>, because some
   templates render a banner pattern before <main> even starts — this offset needs
   to sit above all of that, not just above <main>. !important because WP core's
   inline global-styles block also sets padding-top on this same selector, and
   cascade order between that and this enqueued stylesheet isn't guaranteed. */
.wp-site-blocks {
    padding-top: var(--header-height) !important;
}

/* Front page only: header sits directly on top of the (taller) banner image with a
   translucent background instead of solid, similar to the original site's treatment.
   No content offset here — the banner is meant to render right up against the top,
   underneath the transparent header. */
body.home .wp-site-blocks {
    padding-top: 0 !important;
}

body.home header.wp-block-group {
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent) !important;
}

/* Swapped to a light frosted-glass treatment once the user scrolls (see
   sticky-header.js — now applied site-wide, not just the home page): background
   stays translucent, but backdrop-filter blurs whatever content is scrolling
   underneath so contrast stays reliable regardless of what that content is. Kept
   light (85% tint, small blur radius) rather than a heavy glass effect. Falls back
   to a near-solid tint (no blur) in browsers that don't support backdrop-filter, so
   legibility doesn't depend on it. Not scoped to body.home — every page's header
   is solid at rest already, this only affects the scrolled state. */
body.is-scrolled header.wp-block-group {
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@supports not (backdrop-filter: blur(1px)) {
    body.is-scrolled header.wp-block-group {
        background-color: color-mix(in srgb, var(--wp--preset--color--base) 95%, transparent) !important;
    }
}

/* Keeps in-page anchor jumps (e.g. the skip link) from landing underneath the
   fixed header. */
html {
    scroll-padding-top: var(--header-height);
}

.page-punchline {
    margin-top: 0;
    padding-top: var(--wp--preset--spacing--30);
}

.search-result {
    align-items: flex-start;
    border-bottom: 1px solid var(--wp--preset--color--alice-blue);
}
.search-result__image {
    flex: 0 0 160px;
}
.search-result__image img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .search-result {
        flex-wrap: wrap;
    }
    .search-result__image {
        flex-basis: 100%;
        max-width: 220px;
    }
    .search-result__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        max-height: 220px;
    }
}

/* marque start  */
.marque {
    width: 100%;
    overflow: hidden;
    padding: 0.9375rem 0;
    background: var(--wp--preset--color--black);
}
.marque__wrap {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 3rem;
}
.marque__wrap__items {
    flex-shrink: 0;
    display: flex;
    gap: 3rem;
    counter-reset: item;
    justify-content: space-around;
    min-width: 100%;
}
.marque__wrap__items .item {
    flex: 0 0 auto;
    counter-increment: item;
    border-radius: 0.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--wp--custom--typography--font-weight--medium);
    font-size: 0.875rem;
    line-height: var(--wp--custom--typography--line-height--even);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: center;
    color: var(--wp--preset--color--white);
    transition: all 0.1s ease-in-out;
    position: relative;
}
.marque__wrap__items .item::after {
    position: absolute;
    content: "\2726";
    transform: rotate(60deg);
    color: var(--wp--preset--color--carmine-orange);
    /* background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.60786 0.213545C3.61749 0.00164161 3.96617 -0.0831173 4.0702 0.101817C4.5595 0.968696 5.39171 2.24204 6.33564 2.82189C7.27958 3.39981 8.79373 3.56548 9.78775 3.60786C9.99965 3.61749 10.0825 3.96617 9.89755 4.0702C9.03067 4.5595 7.75925 5.39171 7.1794 6.33564C6.59956 7.27958 6.43581 8.79373 6.39343 9.78775C6.3838 9.99965 6.0332 10.0825 5.9311 9.89755C5.44179 9.03067 4.60959 7.75925 3.66373 7.17941C2.71979 6.59956 1.20564 6.43581 0.213548 6.39343C0.0016441 6.3838 -0.0831185 6.0332 0.101816 5.9311C0.968695 5.44179 2.24205 4.60959 2.82189 3.66373C3.39981 2.71979 3.56548 1.20564 3.60786 0.213545Z' fill='%23F85528'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%; */
    width: 0.725rem;
    height: 0.725rem;
    right: -1.875rem;
    margin: auto 0;
    top: 0;
    bottom: 0;
}
.marque__wrap__items.marquee {
    animation: scroll 35s linear infinite;
}
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 1.25rem));
    }
}
/* marque end  */

.section-content {
    display: inline;
    align-items: center;
    flex: none;
    order: 0;
}

.section-content-reg {
    color: var(--wp--preset--color--black);
    text-transform: none;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--content-heading);
    font-weight: var(--wp--custom--typography--font-weight--normal);
    line-height: var(--wp--custom--typography--line-height--content-heading);
}

.section-content-bold {
    color: var(--wp--preset--color--black);
    text-transform: none;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--content-heading);
    font-weight: var(--wp--custom--typography--font-weight--semi-bold);
    line-height: var(--wp--custom--typography--line-height--content-heading);
}

.section-content-cap {
    color: var(--wp--preset--color--black);
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--content-heading);
    font-weight: var(--wp--custom--typography--font-weight--normal);
    line-height: var(--wp--custom--typography--line-height--content-heading);
}
.section-content-highlight {
    color: var(--wp--preset--color--carmine-orange);
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--content-heading);
    font-weight: var(--wp--custom--typography--font-weight--normal);
    line-height: var(--wp--custom--typography--line-height--content-heading);
}

.banner-content-cap {
    color: var(--wp--preset--color--black);
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: var(--wp--custom--typography--font-weight--medium);
    line-height: var(--wp--custom--typography--line-height--even);
}

.banner-content-invert {
    color: var(--wp--preset--color--black);
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: var(--wp--custom--typography--font-weight--medium);
    line-height: var(--wp--custom--typography--line-height--even);
}

.banner-content-highlight {
    color: var(--wp--preset--color--carmine-orange);
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: var(--wp--custom--typography--font-weight--medium);
    line-height: var(--wp--custom--typography--line-height--even);
}

.cocktail-columns {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;
    flex: none;
    order: 0;
}

.cocktail-card-image {
    align-items: center;
    vertical-align: top;
    width: 320px;
    height: 320px;
    object-fit: scale-down;
    background-color: var(--wp--preset--color--alice-blue);
}

.cocktail-recipe-image {
    align-items: center;
    vertical-align: top;
    width: 640px;
    height: 640px;
    object-fit: scale-down;
    background-color: var(--wp--preset--color--transparent);
}

/* Force the dark background and text onto the footer container */
footer.site-footer-wrapper,
.wp-block-group.site-footer-wrapper {
    background-color: var(--wp--preset--color--black) !important;
    color: var(--wp--preset--color--white) !important;
    /* Same horizontal gutter as the header (see header.wp-block-group) — root
       padding is 0, so without this the footer content sits flush against the
       viewport edge, same issue the header had. Same responsive spacing token,
       so it scales down the same way on mobile too. */
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
    box-sizing: border-box;
}

/* The header's CSS (header.wp-block-group) forces max-width:100%, ignoring WP
   core's standard 1600px "wide" cap (--wp--style--global--wide-size) entirely, so
   it's always true edge-to-edge with padding as the only gutter. The footer's
   alignwide content (the logo/links row, plus the Privacy Policy/copyright/credit
   rows) was still following that standard 1600px cap+center behavior
   (.is-layout-constrained > .alignwide, no !important there) — fine on most
   screens, but on anything wider than 1600px the footer content gets boxed in
   and centered while the header stays flush to the edge, so the two no longer
   line up. Matches the header's approach so this holds at any width. */
.site-footer-wrapper .alignwide {
    max-width: 100% !important;
}

/* Force all text elements inside your custom pattern to comply */
.site-footer-wrapper p,
.site-footer-wrapper h1,
.site-footer-wrapper h2,
.site-footer-wrapper h3,
.site-footer-wrapper li,
.site-footer-wrapper span {
    color: var(--wp--preset--color--white) !important;
}

/* Force all navigation or text links inside to use your footer accent color */
.site-footer-wrapper a,
.site-footer-wrapper a span {
    color: var(--wp--preset--color--white) !important;
}

/* Optional: Add a nice hover state color for the footer links */
.site-footer-wrapper a:hover {
    color: var(--wp--preset--color--pale-sky) !important;
}

.site-icon-wrap img {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

/* Footer columns (patterns/footer.php): logo stays compact/left (mirrors the
   header's logo treatment); the address/contact/phone items are now each a real
   wp:column nested inside a second wp:columns (.footer-contact-columns), grouped
   under footer-links-column — this restores WP core's native per-column mobile
   stacking (wp-includes/blocks/columns/style.css) for these 3 items, which was
   lost when they were briefly merged into a single flex-wrapped group. */
.footer-logo-column {
    flex-grow: 0 !important;
    flex-basis: auto !important;
    width: auto !important;
}

.footer-links-column {
    flex-grow: 1;
}

/* Desktop only: keeps the 3 contact columns at their natural/intrinsic width
   (icon + text) instead of core's default flex-grow:1-each stretch, so
   justify-content:right + the gap on .footer-contact-columns produces a compact
   cluster hugging the row's right edge, not 3 items stretched to fill all
   available width. Scoped to >=782px specifically so this has zero interaction
   with core's own <=781px stacking rule — each column just gets its native
   flex-basis:100% there, stacking cleanly, exactly as it did before this footer
   was restructured. */
@media (min-width: 782px) {
    .footer-contact-columns > .wp-block-column {
        flex-grow: 0 !important;
        flex-basis: auto !important;
        width: auto !important;
    }
}

/* Split from a single shared gap value (which forced the same size on both axes,
   making the stacked-on-mobile vertical spacing too large) — column-gap only,
   so row-gap goes back to whatever the block's natural default is instead of
   inheriting this value once columns stack vertically on mobile. */
.footer-contact-columns {
    column-gap: var(--wp--preset--spacing--60);
}

/* Lets the icon+text rows (and the column itself) shrink/wrap instead of
   refusing to shrink below their content's natural width and overflowing —
   the default flex min-width:auto is what was causing the clipping. */
.site-footer-wrapper .wp-block-column,
.site-footer-wrapper .site-icon-wrap {
    min-width: 0;
}

/* Icon-to-text gap for each contact row (patterns/footer.php). This used to be
   set via the block's own style.spacing.blockGap attribute, which rendered as an
   inline style="gap:..." on the saved markup — but core/group's actual save()
   output never includes an inline gap for flex layouts (that's meant to come
   from WP's own dynamically-generated per-instance layout class instead), so the
   inline style didn't match what save() expected and WordPress flagged it as
   invalid block content. Setting it here in the stylesheet instead sidesteps
   block validation entirely, since it's plain CSS, not a block attribute. */
.site-footer-wrapper .site-icon-wrap {
    gap: 0.5rem;
}

.site-footer-wrapper .site-icon-wrap {
    flex-wrap: wrap;
}

/* The logo column (patterns/footer.php) had a hard-fixed 216px image width. Once
   min-width:0 above lets the column itself shrink below that (needed so the other
   columns can wrap instead of overflowing), the fixed-width image no longer fits
   its own column and gets visually clipped. Scoped to the footer specifically —
   .site-logo-wrap img is shared with the header logo, which isn't affected by this
   issue and shouldn't change. Native file is 1024x171 (~5.99:1), matching the
   existing 216:36 (6:1) target closely enough that this is a no-op at normal
   widths — it only takes effect once the column is actually narrower than 216px. */
.site-footer-wrapper .site-logo-wrap img {
    width: 216px;
    max-width: 100%;
    height: auto;
}

.site-logo-wrap img {
    width: 216px;
    height: 36px;
    object-fit: cover;
}

.wp-block-site-logo img {
    width: 216px;
    height: 36px;
    object-fit: cover;
}

/* Project gallery */
.project-gallery-masonry .wp-block-gallery {
    column-count: 3;
    column-gap: 1rem;
    display: block;
}
.project-gallery-masonry .wp-block-image {
    break-inside: avoid;
    margin: 0 0 1rem;
}
.project-gallery-masonry img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
@media (max-width: 900px) {
    .project-gallery-masonry .wp-block-gallery { column-count: 2; }
}
@media (max-width: 600px) {
    .project-gallery-masonry .wp-block-gallery { column-count: 1; }
}

.project-gallery-masonry .lightbox-trigger {
    display: block;
    position: relative;
    overflow: hidden; /* clips the zoomed image so it doesn't spill past the grid cell */
}
.project-gallery-masonry .lightbox-trigger img {
    transition: transform 0.4s ease;
    display: block;
}
.project-gallery-masonry .lightbox-trigger:hover img {
    transform: scale(1.08);
}

/* Subtle dark tint overlay on hover, common for project grids */
.project-gallery-masonry .lightbox-trigger::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--wp--preset--color--black) 0%, transparent);
    transition: background 0.3s ease;
    pointer-events: none;
}
.project-gallery-masonry .lightbox-trigger:hover::after {
    background: color-mix(in srgb, var(--wp--preset--color--black) 15%, transparent);
}

/* Lightbox */
.custom-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.custom-lightbox-overlay.is-open {
    display: flex;
}
.custom-lightbox-overlay.is-visible {
    opacity: 1;
}

.custom-lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.15s ease;
}
.custom-lightbox-image.is-fading {
    opacity: 0;
}

.custom-lightbox-close,
.custom-lightbox-prev,
.custom-lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: var(--wp--preset--color--white);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
}
.custom-lightbox-close { top: 1rem; right: 1rem; }
.custom-lightbox-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.custom-lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

.project-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem;
}

.project-tile {
    position: relative;
    overflow: hidden;
}

.project-tile img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.project-tile:hover img {
    transform: scale(1.05);
}

.project-tile__title {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--wp--preset--color--black) 75%, transparent),
        transparent
    );
    color: var(--wp--preset--color--white);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-tile:hover .project-tile__title {
    opacity: 1;
    transform: translateY(0);
}

.project-tile__title a {
    color: inherit;
    text-decoration: none;
}

.client-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;

    --client-logo-max-height: 120px;
}

.client-logo-tile {
    overflow: hidden;
}

.client-logo-tile .wp-block-post-featured-image {
    display: block;
}

.client-logo-tile .wp-block-post-featured-image img,
.client-logo-tile img {
    width: 100%;
    height: auto;
    max-height: var(--client-logo-max-height);
    object-fit: contain !important;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.4s ease;
}

.client-logo-tile:hover .wp-block-post-featured-image img,
.client-logo-tile:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .client-logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .client-logo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Client Logo Marquee — overrides scoped to this instance only, base .marque untouched */
.client-logo-marquee.marque {
    background: transparent;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.client-logo-marquee .marque__wrap__items.marquee {
    animation-duration: 70s;
}

.client-logo-marquee-item img {
    max-height: 120px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.85;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.4s ease;
}

.client-logo-marquee-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

.client-logo-marquee .marque__wrap__items .item::after {
    content: none;
}

.client-project-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wp--preset--color--pale-sky);
    font-style: italic;
}

.bento-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    /* capped to native image width (480px per column) x3 + 2 gaps, so columns never upscale past source resolution */
    max-width: calc(480px * 3 + 12px * 2);
    margin-inline: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bento-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bento-item {
    margin: 0;
    overflow: hidden;
    background: var(--wp--preset--color--white);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

/*
.bento-grid {
    outline: 2px solid red;
}

.bento-col {
    outline: 2px solid blue;
}

.bento-item {
    outline: 2px solid limegreen;
}

.bento-item--text {
    outline: 2px solid magenta;
}
*/

.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bento-item--a,
.bento-item--e {
    aspect-ratio: 4 / 3;
}

.bento-item--b,
.bento-item--f {
    aspect-ratio: 2 / 3;
}

.bento-item--c,
.bento-item--d {
    aspect-ratio: 2 / 1;
}

.bento-item--text {
    flex: 1;
    flex-shrink: 0;
    background: var(--wp--preset--color--white);
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-item--text h2 {
    margin: 0 0 1.25rem;
}

.bento-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bento-checklist li {
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: 1.1rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
}

.bento-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -0.05em;
    font-weight: 900;
    font-size: 1.3rem;
}

@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bento-grid,
    .bento-col {
        gap: 8px !important;
    }
    .bento-checklist li {
        font-size: 0.95rem;
        margin-bottom: 0.85rem;
        padding-left: 1.9rem;
    }
    .bento-checklist li::before {
        font-size: 1.15rem;
    }
}

.single-client__header {
    gap: 1.5rem;
    margin-top: var(--wp--preset--spacing--30);
    margin-bottom: var(--wp--preset--spacing--30);
}

.single-client__header .wp-block-post-featured-image {
    margin: 0;
    flex-shrink: 0;
}

.single-client__header .wp-block-post-featured-image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.single-client__header h2 {
    margin: 0;
}

.three-column-features {
    margin-bottom: 2rem;
    align-items: stretch;
}
.three-column-features:last-of-type {
    margin-bottom: 0;
}
.three-column-features > .wp-block-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}
.three-column-features h3 {
    margin: 0 0 0.5rem;
    font-size: var(--wp--preset--font-size--content-heading);
}
.three-column-features p {
    margin: 0;
}
.three-column-features__icon {
    margin: 0 0 1rem;
}
.three-column-features__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.three-column-features .wp-block-column {
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.three-column-features .wp-block-column:hover {
    transform: translateY(-6px);
}
.three-column-features .wp-block-column:hover .three-column-features__icon img {
    transform: scale(1.1);
}
.three-column-features .wp-block-column:hover h3,
.three-column-features .wp-block-column:hover h3 a {
    color: var(--wp--preset--color--carmine-orange);
    transition: color 0.3s ease;
}
.three-column-features__bordered {
    border: 1px solid var(--wp--preset--color--pale-sky);
    padding: 2rem 1.5rem;
}
.three-column-features__bordered:hover {
    border-color: var(--wp--preset--color--carmine-orange);
}

@media (max-width: 600px) {
    .three-column-features__bordered {
        padding: 1.5rem 1.25rem;
    }
    .three-column-features__icon img {
        width: 48px;
        height: 48px;
    }
}

.featured-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 2072px;
    max-height: 1052px;
    margin-inline: auto;
    overflow: hidden;
}

.featured-project-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.featured-project-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.featured-project-tile:hover img {
    transform: scale(1.05);
}

.featured-project-tile__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: var(--wp--preset--color--alice-blue);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.featured-project-tile:hover .featured-project-tile__overlay {
    opacity: 1;
    transform: translateY(0);
}

.featured-project-tile__overlay a {
    display: block;
    text-decoration: none;
    pointer-events: auto;
}

.featured-project-tile__title {
    display: block;
    color: var(--wp--preset--color--black);
    font-weight: 700;
    font-size: 0.95rem;
}

.featured-project-tile__categories {
    display: block;
    color: var(--wp--preset--color--black);
    font-weight: 400;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .featured-projects-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .featured-projects-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
    }
}

/* Portfolio page: category filter + full project grid */
.category-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.category-intro.is-hidden {
    display: none;
}

.category-intro__heading {
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.category-intro__text {
    color: var(--wp--preset--color--pale-sky);
}

.category-intro__text p:last-child {
    margin-bottom: 0;
}

.category-intro__text ul,
.category-intro__text ol {
    text-align: left;
    list-style-position: outside;
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.category-intro__text ul {
    list-style-type: disc;
}

.category-intro__text ol {
    list-style-type: decimal;
}

.category-intro__text ul:last-child,
.category-intro__text ol:last-child {
    margin-bottom: 0;
}

.project-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.project-filter__button {
    background: none;
    border: 1px solid var(--wp--preset--color--black);
    color: var(--wp--preset--color--black);
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.project-filter__button:hover,
.project-filter__button.is-active {
    background-color: var(--wp--preset--color--carmine-orange);
    border-color: var(--wp--preset--color--carmine-orange);
    color: var(--wp--preset--color--white);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
}

.portfolio-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.portfolio-tile.is-hidden {
    display: none;
}

.portfolio-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-tile:hover img {
    transform: scale(1.05);
}

.portfolio-tile__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: var(--wp--preset--color--alice-blue);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.portfolio-tile:hover .portfolio-tile__overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-tile__title {
    display: block;
    color: var(--wp--preset--color--black);
    font-weight: 700;
    font-size: 0.95rem;
}

.portfolio-tile__categories {
    display: block;
    color: var(--wp--preset--color--black);
    font-weight: 400;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}