/*
Theme Name:   CANUSA
Theme URI:    https://canusa.yourpreview.net
Description:  CANUSA child theme based on Twenty Twenty-Five.
Author:       CANUSA
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Requires PHP: 7.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  canusa
Tags:         full-site-editing, block-patterns, custom-colors, custom-menu
*/

/*
 * @font-face rules are emitted from inc/fonts.php (theme.json fontFace).
 */

/*
 * Add custom CSS overrides below.
 * Prefer theme.json for design tokens (colors, typography, spacing).
 * Reserve this file for structural or behavioural styles that theme.json cannot express.
 */

:root {
    --canusa-font-family: "Open Sans", sans-serif;
    /* Remap any merged parent/core font presets to Open Sans */
    --wp--preset--font-family--open-sans: var(--canusa-font-family);
    --wp--preset--font-family--instrument-sans: var(--canusa-font-family);
    --wp--preset--font-family--manrope: var(--canusa-font-family);
    --header-height: 80px; /* fallback; JS updates this on load and resize */
    --canusa-header-shadow: 0px 4px 40px 0px
        color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
    --frost-bg: rgba(233, 231, 239, 0.2);
    --frost-border: rgba(233, 231, 239, 0.3);
    --frost-blur: 20px;
    --frost-text: rgba(255, 255, 255, 0.9);
    --frost-letter-spacing: 0.5px;
    --canusa-gradient-viewport-left: calc(50% - 50vw);
    --canusa-gradient-viewport-right: calc(50% - 50vw);
}

/* Site-wide typography */
html {
    font-family: var(--canusa-font-family);
}

button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

body {
    overflow-x: clip;
}

/* Inner pages (everything except the homepage) */
body:not(.home) {
    background-color: #0b0b0b !important;
    color: #fff;
}

/* Closing contact sections used a rotated gradient block. Its transformed edge
   could render as a one-pixel seam through the overlaid form. Draw the same
   gradient upward without transforming the block. */
#request-etsimate {
    transform: none !important;
    background: linear-gradient(0deg in oklab,
        rgba(11, 11, 11, 1) 0%,
        rgba(13, 12, 14, 1) 12.5%,
        rgba(22, 16, 22, 0.985) 18.8%,
        rgba(38, 23, 33, 0.942) 25%,
        rgba(62, 34, 50, 0.875) 31.2%,
        rgba(90, 49, 71, 0.789) 37.5%,
        rgba(116, 67, 94, 0.684) 43.8%,
        rgba(139, 86, 121, 0.543) 50%,
        rgba(151, 104, 150, 0.395) 56.2%,
        rgba(157, 119, 182, 0.263) 62.5%,
        rgba(158, 124, 201, 0.17) 68.8%,
        rgba(146, 117, 205, 0.102) 75%,
        rgba(133, 105, 205, 0.052) 81.2%,
        rgba(122, 91, 202, 0.021) 87.5%,
        rgba(110, 88, 195, 0) 100%
    ) !important;
}

/* Single project pages: white nav on the default dark header bar only */
body.single-project header:not(.submenu-open) .wp-block-navigation-item__content {
    color: #fff !important;
}

body.single-project header:not(.submenu-open) .wp-block-navigation__submenu-icon path {
    stroke: #fff;
}

body.single-project header:not(.submenu-open) .wp-block-navigation__responsive-container-open {
    color: #fff;
}

body.single-project .wp-block-post-content h3 {
    color: var(--wp--preset--color--primary);
}

strong {
    font-weight: 600;
}

a,
a:hover,
a:focus,
a:focus-visible,
a:active,
:root :where(a:where(:not(.wp-element-button))),
:root :where(a:where(:not(.wp-element-button)):hover),
:root :where(a:where(:not(.wp-element-button)):focus),
:root :where(a:where(:not(.wp-element-button)):focus-visible),
:root :where(a:where(:not(.wp-element-button)):active) {
    text-decoration: none !important;
}

button,
button:focus,
button:focus-visible {
    text-decoration: none;
}

/* Suppress the focus ring for pointer interactions only. */
a:focus,
button:focus {
    outline: none;
}

/* Keep a visible focus ring for keyboard users (accessibility). */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Sticky header */
header.wp-block-template-part {
    position: sticky;
    top: 6px;
    z-index: 1000;
    margin: 0 20px;
}

body.admin-bar header.wp-block-template-part {
    top: calc(var(--wp-admin--admin-bar--height, 32px) + 6px);
}

@media screen and (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: calc(46px + 6px);
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar.admin-bar-scrolled-past header.wp-block-template-part {
        top: 6px;
    }
}

header .wp-block-site-logo,
header .wp-block-navigation {
    margin-right: auto;
}

header .wp-block-navigation {
    width: 100%;
}

@media (min-width: 768px) {
    header .wp-block-navigation__container > li:first-child,
    header .wp-block-navigation__container > li:last-child {
        margin-left: auto;
    }
}

/* Mobile: push hamburger to the right */
@media (max-width: 767px) {
    .wp-block-navigation.items-justified-center {
        justify-content: flex-end;
    }
}

/* ---- Shift WordPress nav mobile breakpoint from 600px to 768px ---- */
/* WP core shows the desktop nav and hides the hamburger at 600px.
   We undo that between 600–767px and re-apply it at 768px. */

@media (min-width: 600px) and (max-width: 767px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
            .is-menu-open
        ) {
        display: none;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
}

@media (min-width: 768px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
            .is-menu-open
        ) {
        display: block;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
            .is-menu-open
        )
        .wp-block-navigation__responsive-container-close {
        display: none;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }
}

/* ---- Mobile navigation overlay ---- */
@media (max-width: 767px) {
    header .wp-block-navigation__overlay-container > .wp-block-group {
        padding-top: var(--wp--preset--spacing--30, 1.5rem) !important;
        padding-right: var(--wp--preset--spacing--30, 1.5rem) !important;
        padding-bottom: var(--wp--preset--spacing--50, 2.5rem) !important;
        padding-left: var(--wp--preset--spacing--30, 1.5rem) !important;
    }

    header .wp-block-navigation-overlay-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--wp--preset--color--primary);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    header .wp-block-navigation-overlay-close:hover,
    header .wp-block-navigation-overlay-close:focus-visible {
        background-color: rgba(36, 18, 95, 0.08);
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__container {
        display: flex;
        flex-direction: column;
        gap: 0 !important;
        width: 100%;
        max-width: 36rem;
        margin: 0 auto;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation.is-vertical,
    header .wp-block-navigation__overlay-container .has-child.open-always {
        gap: 0 !important;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
        padding: 1rem 0;
        gap: 0 !important;
        border-bottom: 1px solid rgba(36, 18, 95, 0.1);
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item:first-child {
        padding-top: 0.5rem;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation-item__content {
        box-sizing: border-box;
        width: 100%;
        border-radius: 8px;
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease;
    }

    /* Top-level links and section headings */
    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: block;
        padding: 0.85rem 1rem;
        font-size: clamp(17px, 4.5vw, 20px);
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--wp--preset--color--primary) !important;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
        background-color: rgba(36, 18, 95, 0.05);
    }

    /* Submenu groups */
    header .wp-block-navigation__overlay-container .has-child.open-always .wp-block-navigation__submenu-container {
        position: static;
        visibility: visible;
        opacity: 1;
        height: auto;
        width: 100%;
        min-width: 0;
        margin: 0 0 0.75rem;
        padding: 0.35rem 0 0 1.25rem !important;
        gap: 0 !important;
        border: none;
        background: transparent !important;
        box-shadow: none;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        display: block;
        width: 100%;
        margin: 0;
    }

    header .wp-block-navigation__overlay-container .has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: block;
        width: 100%;
        padding: 0.65rem 0.85rem !important;
        box-shadow: inset 3px 0 0 transparent;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.4;
        color: #0b0b0b !important;
    }

    header .wp-block-navigation__overlay-container .has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    header .wp-block-navigation__overlay-container .has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
        color: var(--wp--preset--color--primary) !important;
        background-color: rgba(36, 18, 95, 0.06);
        box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
    }

    header .wp-block-navigation__overlay-container .current-menu-item > .wp-block-navigation-item__content {
        color: var(--wp--preset--color--primary) !important;
        font-weight: 600;
    }

    header .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
        background-color: rgba(36, 18, 95, 0.05);
        box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
    }

    /* Contact US — gradient-border as inline button, not full width */
    header .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item.gradient-border {
        align-items: flex-start;
    }

    header .wp-block-navigation__overlay-container .gradient-border.padding > .wp-block-navigation-item__content {
        display: inline-flex;
        width: auto;
        padding: 10px 24px !important;
        font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.392), 18px);
        letter-spacing: 0.02em;
        color: var(--wp--preset--color--primary) !important;
        background-color: transparent;
    }

    header .wp-block-navigation__overlay-container .gradient-border.padding > .wp-block-navigation-item__content:hover,
    header .wp-block-navigation__overlay-container .gradient-border.padding > .wp-block-navigation-item__content:focus-visible {
        background-color: transparent;
    }
}

/* ---- Header state: dark by default, white when a submenu is open ---- */
/* JS (mega-menu.js) adds .submenu-open to <header> via MutationObserver
   on aria-expanded changes. */

/* Smooth background transition */
header > div {
    transition: background-color 0.3s ease;
    border-radius: 8px;
    box-shadow: var(--canusa-header-shadow);
}

/* Transparent header on homepage (video bleeds behind it) and contact page */
body.home header:not(.submenu-open):not(.scrolled) > div,
body.page-id-21 header:not(.submenu-open):not(.scrolled) > div {
    background-color: transparent !important;
    box-shadow: none;
}

/* White header when submenu is open */
header.submenu-open > div {
    background-color: #ffffff !important;
}

/* Black header when homepage or contact page has scrolled */
body.home header.scrolled:not(.submenu-open) > div,
body.page-id-21 header.scrolled:not(.submenu-open) > div {
    background-color: #0b0b0b !important;
}

body.home header.submenu-open > div,
body.home header.scrolled > div,
body.page-id-21 header.submenu-open > div,
body.page-id-21 header.scrolled > div {
    box-shadow: var(--canusa-header-shadow);
}

/* Logo and nav: original colours on white header surface (mega menu open) */
header.submenu-open .wp-block-site-logo img {
    filter: none;
}

header.submenu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary) !important;
}

header.submenu-open .wp-block-navigation__submenu-icon path {
    stroke: var(--wp--preset--color--primary);
}

header.submenu-open .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--primary);
}

header .wp-block-navigation__responsive-container-open {
    transition: color 0.3s ease;
}

/* Logo: white-filtered on dark header */
header .wp-block-site-logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* ---- Reusable gradient-border button ---- */
/* Add class="gradient-border" to any wrapper — the inner a or button gets the styled border */

@property --gradient-border-angle {
    syntax: "<angle>";
    initial-value: 90deg;
    inherits: false;
}

.gradient-border a,
.gradient-border button,
.gradient-border .wp-block-button__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}
.gradient-border.padding a,
.gradient-border.padding button,
.gradient-border.padding .wp-block-button__link {
    padding: 10px 24px;
}

.gradient-border a::before,
.gradient-border button::before,
.gradient-border .wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    --gradient-border-angle: 90deg;
    background: linear-gradient(
        var(--gradient-border-angle),
        #e35e5f 35.58%,
        #4b25c5 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    transition: --gradient-border-angle 0.8s ease;
}

.gradient-border a:hover::before,
.gradient-border a:focus::before,
.gradient-border button:hover::before,
.gradient-border button:focus::before,
.gradient-border .wp-block-button__link:hover::before,
.gradient-border .wp-block-button__link:focus::before {
    --gradient-border-angle: 270deg;
}

/* ---- Gradient breadcrumbs ---- */
.gradient-breadcrumbs {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.gradient-breadcrumbs > p {
    margin-left: 0!important;
}

body.page-id-21 .gradient-breadcrumbs > p,
body.page-id-26 .gradient-breadcrumbs > p,
body.page-id-35 .gradient-breadcrumbs > p,
body.page-id-75904 .gradient-breadcrumbs > p {
    margin-left: auto !important;
}

.gradient-breadcrumbs > .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 40px 0 20px;
    margin-left: 0!important;
}

.gradient-breadcrumbs .wp-block-button {
    display: inline-flex;
    align-items: center;
}

.gradient-breadcrumbs .gradient-border a {
    cursor: default;
}

.gradient-breadcrumbs .wp-block-button:not(:last-child)::after {
    content: "›";
    margin: 0px 0px 0 15px;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.gradient-breadcrumbs .wp-block-button .wp-block-button__link.wp-element-button,
.gradient-breadcrumbs .gradient-border .wp-block-button__link.wp-element-button {
    box-sizing: border-box;
    border-radius: 8px;
    padding: 5px 15px;
    border: 1px solid #E9E7EF4D;
    background: transparent;
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.gradient-breadcrumbs .gradient-border .wp-block-button__link.wp-element-button {
    border-width: 0;
    font-weight: 600;
}

.gradient-breadcrumbs .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.gradient-breadcrumbs .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
.gradient-breadcrumbs .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:focus-visible {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(233, 231, 239, 0.65) !important;
}

/* Hero CTA below the title (e.g. Request Estimate) — not breadcrumb pills */
.gradient-breadcrumbs > h1 ~ .wp-block-buttons .gradient-border .wp-block-button__link.wp-element-button,
.gradient-breadcrumbs .gradient-border.is-style-fill .wp-block-button__link.wp-element-button {
    cursor: pointer;
    padding: 14px 32px;
}

.gradient-breadcrumbs > .wp-block-buttons + h1 {
    margin-left: 0!important;
}

/* ---- Project breadcrumbs (single project hero) ---- */
.project-breadcrumbs {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 35px;
}

.project-breadcrumbs .blurry-button {
    font-weight: 400;
    font-style: normal;
    background-color: #e9e7ef4d !important;
}

.project-breadcrumbs > :not(:last-child) {
    position: relative;
}

.project-breadcrumbs > :not(:last-child)::after {
    content: "›";
    position: absolute;
    left: calc(100% + 20px);
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

/* ---- Button tabs ---- */
.button-tabs:not(.button-tabs--ready) > .wp-block-columns ~ .wp-block-columns {
    display: none;
}

.button-tabs__panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.button-tabs__panels > .wp-block-columns {
    grid-area: 1 / 1;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0.4s ease;
    pointer-events: none;
}

.button-tabs__panels > .wp-block-columns.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 849px) {
    .button-tabs > .wp-block-buttons .wp-block-button__link {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 767px) {
    .button-tabs > .wp-block-buttons {
        flex-wrap: wrap;
    }

    .button-tabs > .wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
        width: calc(50% - var(--wp--style--block-gap, 16px) * 0.5);
        flex-basis: calc(50% - var(--wp--style--block-gap, 16px) * 0.5);
    }

    .button-tabs > .wp-block-buttons .wp-block-button__link {
        padding: 8px 12px;
        font-size: 14px !important;
    }
}

@media (max-width: 499px) {
    .button-tabs > .wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
        width: 100%;
        flex-basis: 100%;
    }
}

/* Inline text CTAs inside button-tab panels */
.cta {
    margin-top: var(--wp--preset--spacing--30, 1rem);
    margin-bottom: 0;
}

.cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.45);
    padding-bottom: 2px;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.cta a::after {
    content: "›";
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.cta a:hover,
.cta a:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

.cta a:hover::after,
.cta a:focus-visible::after {
    transform: translateX(3px);
}

/* ---- Decorative page gradients (full-viewport bleed) ---- */
.hp-with-gradients,
.top-right-gradient,
.resources-gradient {
    position: relative;
    overflow: visible;
}

.hp-with-gradients > *,
.top-right-gradient > *,
.resources-gradient > * {
    position: relative;
    z-index: 1;
}

.hp-with-gradients::before,
.hp-with-gradients::after,
.top-right-gradient::before,
.resources-gradient::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Homepage: left + right gradients */
.hp-with-gradients::before {
    background-image: url("./assets/images/page-gradient.webp");
    background-position: top left;
    width: min(614px, 48vw);
    aspect-ratio: 614 / 888;
    left: var(--canusa-gradient-viewport-left);
    top: 18%;
    transform: translateY(-35%);
}

.hp-with-gradients::after {
    background-image: url("./assets/images/page-gradient.webp");
    background-position: top right;
    width: min(614px, 48vw);
    aspect-ratio: 614 / 888;
    right: var(--canusa-gradient-viewport-right);
    top: 48%;
    transform: translateY(-35%) rotate(180deg);
}

@media (max-width: 767px) {
    .hp-with-gradients::before {
        width: min(420px, 72vw);
        left: var(--canusa-gradient-viewport-left);
        top: 16%;
    }

    .hp-with-gradients::after {
        width: min(420px, 72vw);
        right: var(--canusa-gradient-viewport-right);
        top: 50%;
    }
}

/* Inner pages: default top-right gradient (Execution, etc.) */
.top-right-gradient::before {
    background-image: url("./assets/images/page-gradient-2.webp");
    background-position: top right;
    width: min(720px, 54vw);
    aspect-ratio: 606 / 845;
    top: 0;
    right: var(--canusa-gradient-viewport-right);
    transform: translateY(-15%);
}

@media (max-width: 767px) {
    .top-right-gradient::before {
        width: min(490px, 80vw);
        right: var(--canusa-gradient-viewport-right);
        top: 0;
    }
}

/* EPC Expertise section + Execution (18): left gradient */
body.page-id-18 .top-right-gradient::before,
body.page-id-19 .top-right-gradient::before,
body[class*="parent-pageid-19"] .top-right-gradient::before {
    background-image: url("./assets/images/page-gradient.webp");
    background-position: top left;
    width: min(614px, 48vw);
    aspect-ratio: 614 / 888;
    left: var(--canusa-gradient-viewport-left);
    right: auto;
    top: 11%;
    transform: translateY(-41%);
}

@media (max-width: 767px) {
    body.page-id-18 .top-right-gradient::before,
    body.page-id-19 .top-right-gradient::before,
    body[class*="parent-pageid-19"] .top-right-gradient::before {
        width: min(420px, 72vw);
        left: var(--canusa-gradient-viewport-left);
        right: auto;
        top: 9%;
    }
}

/* Contact & privacy pages: decorative body gradients */
body.page-id-21,
body.page-id-75904 {
    position: relative;
}

body.page-id-21 > .wp-site-blocks,
body.page-id-75904 > .wp-site-blocks {
    position: relative;
    z-index: 1;
}

body.page-id-21::before,
body.page-id-21::after,
body.page-id-75904::before,
body.page-id-75904::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    background-repeat: no-repeat;
    background-size: contain;
}

body.page-id-21::before,
body.page-id-75904::before {
    background-image: url("./assets/images/page-gradient-2.webp");
    background-position: top right;
    width: min(520px, 40vw);
    aspect-ratio: 606 / 845;
    top: 6em;
    right: 0;
    transform: translateY(-28%) scaleY(-1);
}

body.page-id-21::after,
body.page-id-75904::after {
    background-image: url("./assets/images/page-gradient-3.webp");
    background-position: top left;
    width: min(980px, 72vw);
    aspect-ratio: 606 / 845;
    left: 0;
    right: auto;
    top: 25em;
    transform: rotate(180deg) scaleY(-1);
}

@media (max-width: 767px) {
    body.page-id-21::before,
    body.page-id-75904::before {
        width: min(340px, 65vw);
        right: 0;
        top: 5em;
        transform: translateY(-22%) scaleY(-1);
    }

    body.page-id-21::after,
    body.page-id-75904::after {
        width: min(680px, 95vw);
        left: 0;
        top: 18em;
    }
}

/* EPC Resources */
.resource-content {
    position: relative;
    z-index: 1;
}

.resources-gradient::before {
    background-image: url("./assets/images/page-gradient.webp");
    background-position: top right;
    width: min(720px, 54vw);
    aspect-ratio: 614 / 888;
    top: 0;
    right: var(--canusa-gradient-viewport-right);
    transform: translateY(-15%) scaleY(-1) rotate(180deg);
}

@media (max-width: 767px) {
    .resources-gradient::before {
        width: min(490px, 80vw);
        right: var(--canusa-gradient-viewport-right);
        top: 0;
    }
}

/* ---- Mega menu (desktop only, 768px+) ---- */
/* JS builds the mega menu at >= 768px and restores the default nav below that. */

@media (min-width: 768px) {
    /* Prevent WP from showing the original (now-empty) submenu in-place */
    header
        .is-mega-menu
        .wp-block-navigation-submenu__toggle[aria-expanded="true"]
        ~ .wp-block-navigation__submenu-container {
        display: none !important;
    }

    /* Panel lives inside the header outer div in normal flow.
       JS moves it there; CSS hides/shows via .is-open toggled by JS. */
    .mega-menu__panel {
        display: none !important;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
    }

    .mega-menu__panel.is-open {
        display: flex !important;
        border-radius: 0 0 8px 8px;
    }

    /* Left panel — separated by a partial-height border */
    .mega-menu__left {
        position: relative;
        flex: 0 0 350px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 16px;
        padding: 30px var(--wp--style--root--padding-right) 40px
            var(--wp--style--root--padding-left);
    }

    /* Partial-height divider in brand purple */
    .mega-menu__left::after {
        content: "";
        position: absolute;
        right: 0;
        top: 32px;
        bottom: 32px;
        width: 1px;
        background-color: var(--wp--preset--color--primary);
    }

    .mega-menu__title {
        font-size: clamp(24px, 2.8vw, 38px);
        font-weight: 400;
        color: var(--wp--preset--color--primary);
        line-height: 1.2;
        letter-spacing: -0.05em;
        margin: 0;
    }

    .mega-menu__desc {
        font-size: 16px;
        color: #000;
        line-height: 1.6;
        margin: 15px 0;
    }

    .mega-menu__cta {
        margin-top: 8px;
    }

    /* Button text must be dark — nav context would otherwise inherit white */
    .mega-menu__cta a {
        color: var(--wp--preset--color--contrast) !important;
        font-size: 18px;
        font-weight: 600;
    }

    /* Right panel */
    .mega-menu__right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 30px var(--wp--style--root--padding-right) 40px
            var(--wp--style--root--padding-left);
        gap: 0;
    }

    /* Remove bullet points — items are <li> directly inside the div (no <ul> wrapper) */
    .mega-menu__right li {
        list-style: none;
    }

    .mega-menu__right .wp-block-navigation-item__content {
        display: block;
        padding: 6px 12px !important;
        border-radius: 8px;
        border-left: 3px solid transparent;
        font-size: 20px;
        font-weight: 400;
        color: #000 !important;
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease;
    }

    .mega-menu__right .wp-block-navigation-item__content:hover,
    .mega-menu__right .wp-block-navigation-item__content:focus-visible {
        color: var(--wp--preset--color--primary) !important;
        background-color: rgba(36, 18, 95, 0.06);
        border-left-color: var(--wp--preset--color--primary);
    }
} /* end @media (min-width: 768px) */

/* Footer nav — first item is the column heading */
footer.wp-block-template-part {
    margin-top: 0;
}

footer .wp-block-navigation__container li:first-child {
    margin-bottom: 20px;
}

footer .epc-resources {
    margin-top: 40px;
}

footer .wp-block-separator {
    opacity: 0.6;
}

/* ---- Footer contact & offices icons ---- */
/* Icons are absolutely positioned inside their paragraph or contact link.
   Padding creates the icon gutter; linked icons share the link hit area. */

.contact > p:nth-child(2),
.contact > p:nth-child(4) > a,
.contact > p:nth-child(6) > a,
.offices > p:nth-child(2),
.offices > p:nth-child(4),
.offices > p:nth-child(6) {
    position: relative;
    padding-left: 36px;
}

.contact > p:nth-child(4) > a,
.contact > p:nth-child(6) > a {
    display: inline-block;
}

.contact > p:nth-child(2)::before,
.contact > p:nth-child(4) > a::before,
.contact > p:nth-child(6) > a::before,
.offices > p:nth-child(2)::before,
.offices > p:nth-child(4)::before,
.offices > p:nth-child(6)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.contact > p:nth-child(2)::before {
    background-image: url("./assets/images/phone.png");
    margin-top: 15px;
}
.contact > p:nth-child(4) > a::before {
    background-image: url("./assets/images/mail.png");
    margin-top: 2px;
}
.contact > p:nth-child(6) > a::before {
    background-image: url("./assets/images/in.png");
    margin-top: -2px;
}
.offices > p:nth-child(2)::before {
    background-image: url("./assets/images/ca.png");
}
.offices > p:nth-child(4)::before,
.offices > p:nth-child(6)::before {
    background-image: url("./assets/images/us.png");
}

/* ---- Hero video: bleed behind sticky header ---- */
.hp-video {
    margin-top: calc(-1 * var(--header-height) - 14px) !important;
    position: relative;
    z-index: 0;
    padding: 0;
}
.hp-video::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 11, 11, 0) 64.98%,
        #0b0b0b 100%
    );
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.hp-video::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        179.28deg,
        #0b0b0b 0.61%,
        rgba(11, 11, 11, 0) 20.37%
    );
    pointer-events: none;
    z-index: 2;
}

.hp-video .wp-block-cover__inner-container {
    position: relative;
    z-index: 3;
}

/* Shared frosted-pill surface (hero badge + project taxonomy chips) */
.blurry-button,
.wp-block-query.projects .taxonomy-expertise span,
.wp-block-query.resources .resources-cover__pill {
    border-radius: 50px;
    background: var(--frost-bg);
    backdrop-filter: blur(var(--frost-blur));
    -webkit-backdrop-filter: blur(var(--frost-blur));
    color: var(--frost-text);
    letter-spacing: var(--frost-letter-spacing);
    font-family: inherit;
}

.blurry-button {
    display: inline-block;
    padding: 4px 16px;
    font-size: 14px;
    border: 1px solid var(--frost-border);
    /* WP button styles set background-color; keep backdrop-filter visible */
    background-color: transparent;
}

.calculate-emissions {
    position: absolute;
    bottom: 10px;
    right: 40px;
    padding-right: 48px !important;
    padding-left: 16px !important;

    /* Frosted glass variant — stronger blur, lighter fill */
    background: #ffffff1a !important;
    border: 1px solid #ffffff1a;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    color: var(--frost-text);
    font-family: inherit;
}

.calculate-emissions::before {
    content: "›";
    position: absolute;
    right: 16px;
    top: 46%;
    transform: translateY(-50%);
    font-size: 40px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.calculate-emissions h4 a {
    color: inherit;
    text-decoration: none;
}

.calculate-emissions h4 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

/* ---- Scroll animations ---- */
/* JS adds .canusa-animate automatically to main/footer content.
   Add classes manually elsewhere for opt-in animation.              */

/* Hero: hidden on first paint (before JS), then revealed on load */
.hp-video:not(.canusa-hero-ready),
.top-right-gradient:not(.canusa-hero-ready),
.wp-block-cover:has(.gradient-breadcrumbs):not(.canusa-hero-ready),
body.page-id-21 .entry-content:not(.canusa-hero-ready),
.resources-gradient:not(.canusa-hero-ready),
.about-hero:not(.canusa-hero-ready) {
    --hero-hidden-opacity: 0;
    --hero-hidden-shift: 28px;
}

.hp-video:not(.canusa-hero-ready) .wp-block-cover__inner-container .wp-block-heading:not(.is-visible),
.hp-video:not(.canusa-hero-ready)
    .wp-block-cover__inner-container
    > .wp-block-paragraph:not(.is-visible),
.hp-video:not(.canusa-hero-ready)
    .wp-block-cover__inner-container
    .wp-block-group
    .wp-block-paragraph:not(.is-visible),
.hp-video:not(.canusa-hero-ready) .wp-block-cover__inner-container .calculate-emissions:not(.is-visible),
.hp-video:not(.canusa-hero-ready) .wp-block-cover__inner-container figure.wp-block-image:not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

/* Execution / inner pages: intro blocks above the projects filter */
.top-right-gradient:not(.canusa-hero-ready)
    > .wp-block-group:not(.projects-filter)
    .wp-block-heading:not(.is-visible):not(.expertise-grid *),
.top-right-gradient:not(.canusa-hero-ready)
    > .wp-block-group:not(.projects-filter)
    .wp-block-paragraph:not(.is-visible):not(.expertise-grid *) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

/* Execution phase + single project pages: cover hero with breadcrumb tabs */
.wp-block-cover:has(.gradient-breadcrumbs):not(.canusa-hero-ready)
    .gradient-breadcrumbs
    > :is(
        .wp-block-paragraph,
        .wp-block-buttons,
        h1.wp-block-heading,
        .project-breadcrumbs,
        h1.wp-block-post-title,
        .taxonomy-location
    ):not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

.wp-block-cover:has(.project-breadcrumbs):not(.canusa-hero-ready)
    figure.wp-block-post-featured-image:not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

.wp-block-cover:has(.gradient-breadcrumbs):not(.canusa-hero-ready)
    .wp-block-cover__inner-container
    figure.wp-block-image:not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

/* Contact page: breadcrumb title + above-the-fold intro content */
body.page-id-21 .entry-content:not(.canusa-hero-ready)
    .gradient-breadcrumbs
    > :is(.wp-block-paragraph, .wp-block-heading):not(.is-visible),
body.page-id-21 .entry-content:not(.canusa-hero-ready)
    > .wp-block-group.alignwide:not(.gradient-breadcrumbs)
    > .wp-block-columns.alignwide
    :is(.wp-block-heading, .wp-block-paragraph, .wp-block-separator):not(.is-visible),
body.page-id-21 .entry-content:not(.canusa-hero-ready)
    > .wp-block-group.alignwide:not(.gradient-breadcrumbs)
    .forminator-guttenberg:not(.is-visible),
body.page-id-21 .entry-content:not(.canusa-hero-ready) .canusa-hero-item:not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

/* EPC Resources: breadcrumb intro + subscribe column above the filter */
.resources-gradient:not(.canusa-hero-ready)
    .gradient-breadcrumbs
    > :is(.wp-block-paragraph, .wp-block-heading):not(.is-visible),
.resources-gradient:not(.canusa-hero-ready)
    > .wp-block-columns.alignwide
    :is(.wp-block-heading, .wp-block-paragraph, [id^="acForm_"]):not(.is-visible),
.resources-gradient:not(.canusa-hero-ready) .canusa-hero-item:not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

/* About Us + ESG: cover hero content */
.about-hero:not(.canusa-hero-ready)
    .wp-block-cover__inner-container
    :is(.wp-block-heading, .wp-block-paragraph, figure.wp-block-image):not(.is-visible),
.about-hero:not(.canusa-hero-ready) .canusa-hero-item:not(.is-visible) {
    opacity: var(--hero-hidden-opacity);
    transform: translateY(var(--hero-hidden-shift));
}

.hp-video .canusa-hero-item,
.top-right-gradient:not(.canusa-hero-ready)
    > .wp-block-group:not(.projects-filter)
    :is(.wp-block-heading, .wp-block-paragraph):not(.expertise-grid *),
.wp-block-cover:has(.gradient-breadcrumbs) .canusa-hero-item,
body.page-id-21 .entry-content:not(.canusa-hero-ready)
    > .wp-block-group.alignwide:not(.gradient-breadcrumbs)
    > .wp-block-columns.alignwide
    :is(.wp-block-heading, .wp-block-paragraph, .wp-block-separator),
body.page-id-21 .entry-content:not(.canusa-hero-ready)
    > .wp-block-group.alignwide:not(.gradient-breadcrumbs)
    .forminator-guttenberg,
body.page-id-21 .entry-content .canusa-hero-item,
.resources-gradient:not(.canusa-hero-ready)
    > .wp-block-columns.alignwide
    :is(.wp-block-heading, .wp-block-paragraph, [id^="acForm_"]),
.resources-gradient .canusa-hero-item,
.about-hero:not(.canusa-hero-ready)
    .wp-block-cover__inner-container
    :is(.wp-block-heading, .wp-block-paragraph, figure.wp-block-image),
.about-hero .canusa-hero-item {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.hp-video .canusa-hero-item.is-visible,
.hp-video:not(.canusa-hero-ready) .canusa-hero-item.is-visible,
.top-right-gradient:not(.canusa-hero-ready)
    > .wp-block-group:not(.projects-filter)
    :is(.wp-block-heading, .wp-block-paragraph).is-visible:not(.expertise-grid *),
.wp-block-cover:has(.gradient-breadcrumbs) .canusa-hero-item.is-visible,
body.page-id-21 .entry-content .canusa-hero-item.is-visible,
.resources-gradient .canusa-hero-item.is-visible,
.resources-gradient.canusa-hero-ready
    > .wp-block-columns.alignwide
    :is(.wp-block-heading, .wp-block-paragraph, [id^="acForm_"]).is-visible,
.about-hero .canusa-hero-item.is-visible,
.about-hero.canusa-hero-ready
    .wp-block-cover__inner-container
    :is(.wp-block-heading, .wp-block-paragraph, figure.wp-block-image).is-visible,
body.page-id-21 .entry-content.canusa-hero-ready
    > .wp-block-group.alignwide:not(.gradient-breadcrumbs)
    > .wp-block-columns.alignwide
    :is(.wp-block-heading, .wp-block-paragraph, .wp-block-separator).is-visible,
body.page-id-21 .entry-content.canusa-hero-ready
    > .wp-block-group.alignwide:not(.gradient-breadcrumbs)
    .forminator-guttenberg.is-visible {
    opacity: 1;
    transform: none;
}

html.canusa-anim-active .canusa-animate {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.canusa-animate.fade-in {
    transform: none;
}

.canusa-animate.fade-left {
    transform: translateX(-24px);
}

.canusa-animate.fade-right {
    transform: translateX(24px);
}

html.canusa-anim-active .canusa-animate.is-visible {
    opacity: 1;
    transform: none;
}

.canusa-animate-delay-1 {
    transition-delay: 0.1s;
}
.canusa-animate-delay-2 {
    transition-delay: 0.2s;
}
.canusa-animate-delay-3 {
    transition-delay: 0.3s;
}
.canusa-animate-delay-4 {
    transition-delay: 0.4s;
}
.canusa-animate-delay-5 {
    transition-delay: 0.5s;
}

/* ---- How can we help: checkmark headings ---- */
.how-can-we-help > .wp-block-columns:not(:last-child) {
    margin-bottom: 60px;
}

.how-can-we-help .wp-block-column:first-child .wp-block-heading {
    position: relative;
    padding-left: 70px;
}

.how-can-we-help .wp-block-column:first-child .wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.15em + 5px);
    width: 36px;
    height: 36px;
    background-image: url("./assets/images/checkmark.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logos-gallery img {
    max-height: 100px;
    width: fit-content !important;
}

.logos-gallery > .wp-block-image {
    flex-direction: row !important;
}
.wp-block-cover:has(.cover-logo) {
    overflow: visible !important;
}

/* ---- About page hero ---- */
.about-hero {
    overflow: visible !important;
}

.about-hero .wp-block-cover__inner-container,
.about-hero .wp-block-cover__inner-container > * {
    position: relative;
    z-index: 1;
}

.cover-logo > img {
    object-fit: contain !important;
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    height: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* ---- Projects expertise filter dropdown ---- */
/* The resources filter reuses the same wrapper + dropdown internals. */

.projects-filter,
.resources-filter {
    position: relative;
    z-index: 20;
    margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.projects-filter > .wp-block-heading,
.resources-filter > .wp-block-heading {
    margin-bottom: 0.5rem;
}

.projects-filter .wp-block-terms-query {
    display: flex;
    justify-content: center;
}

.projects-filter__dropdown {
    position: relative;
    width: min(100%, 20rem);
}

.projects-filter__dropdown.is-open {
    z-index: 30;
}

.projects-filter__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: clamp(13px, 0.8125rem + ((1vw - 3.2px) * 0.294), 16px);
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.projects-filter__trigger:hover,
.projects-filter__trigger:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.projects-filter__label {
    flex: 1 1 auto;
    min-width: 0;
}

.projects-filter__chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}

.projects-filter__chevron::after {
    content: "";
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
}

.projects-filter__dropdown.is-open .projects-filter__chevron {
    transform: translateY(3px);
}

.projects-filter__dropdown.is-open .projects-filter__chevron::after {
    transform: rotate(-135deg);
}

.projects-filter__menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    background: #141414;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.projects-filter__dropdown.is-open .projects-filter__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.projects-filter__menu a {
    display: block;
    padding: 0.5rem 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(13px, 0.8125rem + ((1vw - 3.2px) * 0.294), 16px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.projects-filter__menu a:hover,
.projects-filter__menu a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.projects-filter__menu .is-selected a {
    color: #fff;
}

.wp-block-query.projects,
.wp-block-query.resources {
    position: relative;
    z-index: 1;
}

/* Responsive grid: 3 → 2 → 1 columns (matches homepage carousel breakpoints) */
.wp-block-query.projects .wp-block-post-template,
.wp-block-query.resources .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px;
}

.wp-block-query.projects .wp-block-post,
.wp-block-query.resources .wp-block-post {
    min-width: 0;
}

@media (max-width: 1024px) {
    .wp-block-query.projects .wp-block-post-template,
    .wp-block-query.resources .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .wp-block-query.projects .wp-block-post-template,
    .wp-block-query.resources .wp-block-post-template {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.wp-block-query.projects.projects-query--loading,
.wp-block-query.resources.projects-query--loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.projects-filter__dropdown--loading .projects-filter__trigger {
    opacity: 0.7;
    cursor: wait;
}

/* ---- Cover cards (homepage carousel + project/resource query grids) ---- */

.hp-carousel .slick-slide,
.wp-block-query.projects .wp-block-post > .wp-block-cover,
.wp-block-query.resources .wp-block-post > .wp-block-cover,
.expertise-grid > .wp-block-cover,
.expertise-grid > .wp-block-group > .wp-block-cover {
    border-radius: 12px;
    overflow: hidden;
}

.hp-carousel .slick-slide.wp-block-cover,
.wp-block-query.projects .wp-block-post > .wp-block-cover,
.wp-block-query.resources .wp-block-post > .wp-block-cover,
.expertise-grid > .wp-block-cover,
.expertise-grid > .wp-block-group > .wp-block-cover {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    min-height: 375px;
    position: relative;
    cursor: pointer;
    /* Contain the layers so the scrim's blur never bleeds onto the text. */
    isolation: isolate;
}

/* Keep the cover image at the back so the scrim blurs it (not the text). */
.hp-carousel .slick-slide.wp-block-cover .wp-block-cover__image-background,
.hp-carousel .slick-slide.wp-block-cover .wp-block-cover__background,
.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__image-background,
.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__background,
.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__image-background,
.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__background,
.expertise-grid > .wp-block-cover .wp-block-cover__image-background,
.expertise-grid > .wp-block-cover .wp-block-cover__background,
.expertise-grid > .wp-block-group > .wp-block-cover .wp-block-cover__image-background,
.expertise-grid > .wp-block-group > .wp-block-cover .wp-block-cover__background {
    z-index: 0;
}

.hp-carousel .slick-slide .wp-block-cover__inner-container,
.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__inner-container,
.expertise-grid > .wp-block-cover .wp-block-cover__inner-container,
.expertise-grid > .wp-block-group > .wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 24px 20px 10px;
    box-sizing: border-box;
    pointer-events: none;
}

/* Blurred gradient scrim that lifts/grows on hover.
   Masked to fade out toward the top so the blur blends into the image. */
.hp-carousel .slick-slide.wp-block-cover::after,
.wp-block-query.projects .wp-block-post > .wp-block-cover::after,
.expertise-grid > .wp-block-cover::after,
.expertise-grid > .wp-block-group > .wp-block-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 0;
    pointer-events: none;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(
        to top,
        rgba(11, 11, 11, 0.92) 0%,
        rgba(11, 11, 11, 0.55) 45%,
        rgba(11, 11, 11, 0) 100%
    );
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to top, #000 62%, transparent 100%);
    mask-image: linear-gradient(to top, #000 62%, transparent 100%);
    transition:
        height 0.35s ease,
        -webkit-backdrop-filter 0.35s ease,
        backdrop-filter 0.35s ease;
}

.hp-carousel .slick-slide.wp-block-cover:hover::after,
.hp-carousel .slick-slide.wp-block-cover:focus-within::after,
.wp-block-query.projects .wp-block-post > .wp-block-cover:hover::after,
.wp-block-query.projects .wp-block-post > .wp-block-cover:focus-within::after,
.expertise-grid > .wp-block-cover:hover::after,
.expertise-grid > .wp-block-cover:focus-within::after,
.expertise-grid > .wp-block-group > .wp-block-cover:hover::after,
.expertise-grid > .wp-block-group > .wp-block-cover:focus-within::after {
    height: 78%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.expertise-grid > .wp-block-group .wp-block-cover + .wp-block-group {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0 0 8px 8px;
    margin: 0;
    border-top: 0;
}

.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100% !important;
    max-width: none !important;
}

.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__inner-container > .projects-cover__content,
.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__inner-container > .projects-cover__cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

.wp-block-query.projects .projects-cover__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* Lift via top (not transform) so the text isn't promoted to its own
       composite layer, which backdrop-filter would otherwise blur. */
    top: 18px;
    transition: top 0.35s ease;
}

.wp-block-query.projects .projects-cover__content .hp-carousel__caption,
.wp-block-query.resources .resources-cover__content .hp-carousel__caption {
    padding-top: 0;
    margin-top: 0;
    width: 100%;
}

.wp-block-query.projects .wp-block-post > .wp-block-cover:hover .projects-cover__content,
.wp-block-query.projects .wp-block-post > .wp-block-cover:focus-within .projects-cover__content {
    top: -10px;
}

.wp-block-query.projects .taxonomy-expertise {
    margin: 0 0 8px;
}

.wp-block-query.projects .taxonomy-expertise span {
    display: inline-block;
    padding: 2px 16px;
    font-size: 14px;
    font-weight: 100;
    border: none;
}

.wp-block-query.projects .taxonomy-location,
.wp-block-query.projects .taxonomy-related_to {
    margin: 10px 0 0;
    font-weight: 100;
}

.wp-block-query.projects .taxonomy-location span,
.wp-block-query.projects .taxonomy-related_to span {
    color: inherit;
}

.hp-carousel__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 12px;
    text-decoration: none;
}

.hp-carousel__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.hp-carousel__caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
    padding-top: 12px;
    margin-top: -12px;
}

.hp-carousel .slick-slide .wp-block-heading,
.expertise-grid > .wp-block-cover .wp-block-heading,
.expertise-grid > .wp-block-group > .wp-block-cover .wp-block-heading {
    margin: 0;
    color: inherit;
    font-weight: 400;
    opacity: 1 !important;
    transform: translateY(18px);
    transition: transform 0.35s ease;
}

.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-post-title,
.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-post-title {
    margin: 0;
    color: inherit;
    font-weight: 400;
    opacity: 1 !important;
    transform: none;
}

.hp-carousel__explore {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: inherit;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.hp-carousel__explore-arrow {
    margin-left: 12px;
    font-size: 24px;
    line-height: 1;
}

.hp-carousel .slick-slide:hover .wp-block-heading,
.hp-carousel .slick-slide:focus-within .wp-block-heading,
.expertise-grid > .wp-block-cover:hover .wp-block-heading,
.expertise-grid > .wp-block-cover:focus-within .wp-block-heading,
.expertise-grid > .wp-block-group > .wp-block-cover:hover .wp-block-heading,
.expertise-grid > .wp-block-group > .wp-block-cover:focus-within .wp-block-heading {
    transform: translateY(-10px);
}

.wp-block-query.projects .projects-cover__cta {
    position: relative;
    z-index: 3;
    align-self: flex-start;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    width: auto;
    opacity: 0;
    top: 12px;
    transition:
        opacity 0.35s ease,
        top 0.35s ease;
}

.hp-carousel .slick-slide:hover .hp-carousel__explore,
.hp-carousel .slick-slide:focus-within .hp-carousel__explore,
.expertise-grid > .wp-block-cover:hover .hp-carousel__explore,
.expertise-grid > .wp-block-cover:focus-within .hp-carousel__explore,
.expertise-grid > .wp-block-group > .wp-block-cover:hover .hp-carousel__explore,
.expertise-grid > .wp-block-group > .wp-block-cover:focus-within .hp-carousel__explore {
    opacity: 1;
    transform: translateY(0);
}

.wp-block-query.projects .wp-block-post > .wp-block-cover:hover .projects-cover__cta,
.wp-block-query.projects .wp-block-post > .wp-block-cover:focus-within .projects-cover__cta {
    opacity: 1;
    top: 0;
}

.hp-carousel .slick-slide .wp-block-cover__image-background,
.wp-block-query.projects .wp-block-post > .wp-block-cover .wp-block-cover__image-background,
.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__image-background,
.expertise-grid > .wp-block-cover .wp-block-cover__image-background,
.expertise-grid > .wp-block-group > .wp-block-cover .wp-block-cover__image-background {
    border-radius: 12px;
}

@media (max-width: 767px) {
    .hp-carousel__explore {
        font-size: 14px;
    }

    .hp-carousel__explore-arrow {
        font-size: 16px;
        margin-left: 8px;
    }

    .hp-carousel .slick-slide:hover .wp-block-heading,
    .hp-carousel .slick-slide:focus-within .wp-block-heading,
    .expertise-grid > .wp-block-cover:hover .wp-block-heading,
    .expertise-grid > .wp-block-cover:focus-within .wp-block-heading,
    .expertise-grid > .wp-block-group > .wp-block-cover:hover .wp-block-heading,
    .expertise-grid > .wp-block-group > .wp-block-cover:focus-within .wp-block-heading {
        transform: translateY(-4px);
    }

    .hp-carousel .slick-slide:hover .hp-carousel__explore,
    .hp-carousel .slick-slide:focus-within .hp-carousel__explore,
    .expertise-grid > .wp-block-cover:hover .hp-carousel__explore,
    .expertise-grid > .wp-block-cover:focus-within .hp-carousel__explore,
    .expertise-grid > .wp-block-group > .wp-block-cover:hover .hp-carousel__explore,
    .expertise-grid > .wp-block-group > .wp-block-cover:focus-within .hp-carousel__explore {
        transform: translateY(0);
    }

    .wp-block-query.projects .wp-block-post > .wp-block-cover:hover .projects-cover__content,
    .wp-block-query.projects .wp-block-post > .wp-block-cover:focus-within .projects-cover__content {
        top: -4px;
    }
}

/* =============================================================
 * Resources combined grid + dual filter
 * Reuses the project cover-card visual system and the
 * .projects-filter__* dropdown internals (shared class names).
 * ============================================================= */

/* The two Terms List filters sit in a Row block; each stretches its dropdown. */
.resources-filter .wp-block-terms-query {
    display: flex;
    flex: 0 1 360px;
    min-width: 0;
}

.resources-filter .projects-filter__dropdown {
    width: 360px;
    max-width: 100%;
}

/* Below WP's 782px breakpoint the two filter columns stack and the dropdowns
   go full width instead of squishing side by side. */
@media (max-width: 781px) {
    .resources-filter > .wp-block-group.is-layout-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .resources-filter .wp-block-terms-query {
        flex-basis: auto;
    }

    .resources-filter .projects-filter__dropdown {
        width: 100%;
    }
}

/* ---- Resources cover cards ---- */
/* Grid layout + base cover-card styles are shared with .wp-block-query.projects
   (see the cover cards section above). */
.wp-block-query.resources .wp-block-post > .wp-block-cover {
    /* No cover padding so the frosted panel reaches the card edges + bottom. */
    padding: 0 !important;
}

.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__background {
    border-radius: 12px;
}

/* The inner container IS the frosted strip: it sits at the bottom of the cover
   (align-end) and auto-sizes to its content, so a 2-line title makes it taller
   and the hover "View" reveal grows it — no fixed percentage height. */
.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 3;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 100px;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    border-radius: 0 0 12px 12px;
    /* Abrupt frosted strip: the panel's top edge reads as a line. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__inner-container > .resources-cover__content,
.wp-block-query.resources .wp-block-post > .wp-block-cover .wp-block-cover__inner-container > .resources-cover__cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

.wp-block-query.resources .resources-cover__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.wp-block-query.resources .resources-cover__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.wp-block-query.resources .resources-cover__pill {
    display: inline-block;
    padding: 2px 12px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.wp-block-query.resources .resources-cover__pill--type {
    background: #24125F;
    color: #fff;
}

.wp-block-query.resources .resources-cover__pill--service {
    background: #44318E;
    color: #fff;
}

/* "View" is collapsed by default and expands the panel on hover (the panel is
   anchored to the bottom, so it grows upward to reveal the CTA). */
.wp-block-query.resources .resources-cover__cta {
    z-index: 3;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: auto;
    font-size: 16px;
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition:
        opacity 0.35s ease,
        max-height 0.35s ease,
        margin-top 0.35s ease;
}

.wp-block-query.resources .resources-cover__cta .hp-carousel__explore-arrow {
    margin-left: 8px;
    font-size: 18px;
}

.wp-block-query.resources .wp-block-post > .wp-block-cover:hover .resources-cover__cta,
.wp-block-query.resources .wp-block-post > .wp-block-cover:focus-within .resources-cover__cta {
    opacity: 1;
    max-height: 3rem;
    margin-top: 10px;
}

/* Groups wrapping covers inside expertise-grid: reset horizontal padding so
   the cover spans the full grid cell; the paragraph below still reads fine.
   Flex-column lets the p stretch to equalise box heights across the row. */
.expertise-grid > .wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column;
}

.expertise-grid > .wp-block-group > .wp-block-cover {
    width: 100%;
}

.expertise-grid > .wp-block-group .wp-block-cover + .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.expertise-grid > .wp-block-group .wp-block-cover + .wp-block-group p {
    margin-bottom: 20px;
}

.expertise-grid > .wp-block-group .wp-block-cover + .wp-block-group .cta {
    margin-top: auto;
    margin-bottom: 0;
}

/* Expertise grid cards use cover-card hover motion, not hero reveal */
.top-right-gradient .expertise-grid > .wp-block-cover .wp-block-heading,
.top-right-gradient .expertise-grid > .wp-block-group > .wp-block-cover .wp-block-heading {
    opacity: 1 !important;
    transform: translateY(18px) !important;
    transition: transform 0.35s ease !important;
}

.top-right-gradient .expertise-grid > .wp-block-cover:hover .wp-block-heading,
.top-right-gradient .expertise-grid > .wp-block-cover:focus-within .wp-block-heading,
.top-right-gradient .expertise-grid > .wp-block-group > .wp-block-cover:hover .wp-block-heading,
.top-right-gradient .expertise-grid > .wp-block-group > .wp-block-cover:focus-within .wp-block-heading {
    transform: translateY(-10px) !important;
}

@media (max-width: 767px) {
    .top-right-gradient .expertise-grid > .wp-block-cover:hover .wp-block-heading,
    .top-right-gradient .expertise-grid > .wp-block-cover:focus-within .wp-block-heading,
    .top-right-gradient .expertise-grid > .wp-block-group > .wp-block-cover:hover .wp-block-heading,
    .top-right-gradient .expertise-grid > .wp-block-group > .wp-block-cover:focus-within .wp-block-heading {
        transform: translateY(-4px) !important;
    }
}

/* ---- Query pagination ---- */

.wp-block-query-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
}

.wp-block-query-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #E9E7EF4D;
    background: #FFFFFF33;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.wp-block-query-pagination .page-numbers.current {
    border-color: transparent;
    background: #E9E7EF80;
    cursor: default;
}

.wp-block-query-pagination .page-numbers:not(.current):not(.dots):hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    background: #FFFFFF44;
    border-color: #E9E7EF4D;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    font-size: 0;
}

.wp-block-query-pagination-next::after,
.wp-block-query-pagination-previous::before {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.wp-block-query-pagination-next::after {
    content: "›";
}

.wp-block-query-pagination-previous::before {
    content: "‹";
}

.wp-block-query-pagination .page-numbers.dots {
    min-width: auto;
    height: auto;
    padding: 0 4px;
    border: none;
    background: transparent;
    cursor: default;
}

.wp-block-query-pagination .page-numbers:focus-visible,
.wp-block-query-pagination-next:focus-visible,
.wp-block-query-pagination-previous:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- Map pin sonar pulse ---- */

figure.map-pulse {
    position: relative;
    display: block;
    line-height: 0;
    container-type: inline-size;            /* lets the pulse offsets below use cqw */
}
figure.map-pulse img {
    display: block;
    width: 100%;
    height: auto;
}

/* One pseudo-element pulses all three offices (2026-09-02, Houston added):
   the element itself sits on Calgary; Denver and Houston are box-shadow copies
   offset in container-width units (map image is 738x692, so an offset is
   dx/738 and dy/738 of the image width). The pulse animates width/height
   rather than transform so the shadow copies keep their offsets while every
   dot grows in sync. Dots/labels themselves are baked into the image. */
figure.map-pulse::before {
    content: "";
    position: absolute;
    left: 38.6%;                            /* Calgary */
    top: 54.71%;
    width: 2.2cqw;                          /* same size as the dot */
    height: 2.2cqw;
    border-radius: 50%;
    background: rgba(208, 74, 70, 0.85);    /* filled, original red */
    box-shadow:
        4.85cqw 20.25cqw 0 0 rgba(208, 74, 70, 0.85),   /* Denver  43.45% / 76.31% */
        20.61cqw 34.61cqw 0 0 rgba(208, 74, 70, 0.85);  /* Houston 59.21% / 91.62% */
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: canusa-sonar 2s ease-out infinite;
}

@keyframes canusa-sonar {
    0%   { opacity: 1; width: 2.2cqw; height: 2.2cqw; }
    100% { opacity: 0; width: 5.5cqw; height: 5.5cqw; }
}

/* ---- Contact page headquarters ---- */
body.page-id-21 .wp-block-columns.are-vertically-aligned-center:has(.map-pulse) > .wp-block-column .wp-block-columns {
    width: 100%;
    gap: var(--wp--style--block-gap, 2rem);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

body.page-id-21 .wp-block-columns.are-vertically-aligned-center:has(.map-pulse) > .wp-block-column .wp-block-columns .wp-block-column > .wp-block-paragraph {
    position: relative;
    padding-left: 36px;
    margin: 0;
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.392), 16px);
    line-height: 1.55;
}

body.page-id-21 .wp-block-columns.are-vertically-aligned-center:has(.map-pulse) > .wp-block-column .wp-block-columns .wp-block-column > .wp-block-paragraph::first-line {
    font-weight: 600;
}

body.page-id-21 .wp-block-columns.are-vertically-aligned-center:has(.map-pulse) > .wp-block-column .wp-block-columns .wp-block-column > .wp-block-paragraph::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body.page-id-21 .wp-block-columns.are-vertically-aligned-center:has(.map-pulse) > .wp-block-column .wp-block-columns .wp-block-column:first-child > .wp-block-paragraph::before {
    background-image: url("./assets/images/ca.png");
}

body.page-id-21 .wp-block-columns.are-vertically-aligned-center:has(.map-pulse) > .wp-block-column .wp-block-columns .wp-block-column:not(:first-child) > .wp-block-paragraph::before {
    background-image: url("./assets/images/us.png");
}

/* ---- Execution animation slot (MP4 placeholder) ---- */
.execution-animation-slot {
    min-height: 280px;
}

.execution-animation-slot .wp-block-cover__inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    padding: 32px 24px !important;
}

.execution-animation-slot .wp-block-paragraph {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.execution-animation-slot video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ---- Sidebar related projects ---- */
.sidebar-related {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin-right: 0 !important;
    margin-left: auto;
    padding: 30px 45px 60px !important;
    background: #fff;
    border: 1px solid rgba(36, 18, 95, 0.15);
    border-radius: 8px;
}

.sidebar-related.has-global-padding {
    padding: 30px 45px 60px !important;
}

.sidebar-related.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
    margin-inline: 0 !important;
}

.sidebar-related > .wp-block-heading {
    margin: 0 0 12px;
    color: var(--wp--preset--color--primary);
    font-weight: 400;
    line-height: 1.2;
}

.sidebar-related .wp-block-query {
    margin: 0;
}

.sidebar-related .wp-block-post-template {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-related .wp-block-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.sidebar-related .wp-block-post + .wp-block-post {
    margin-top: 35px;
}

.sidebar-related .wp-block-post::after {
    content: "›";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--wp--preset--color--primary);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s ease;
}

.sidebar-related .wp-block-post-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
    font-weight: 600;
    line-height: 1.25;
}

.sidebar-related .wp-block-post-title a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.sidebar-related .wp-block-post:has(.wp-block-post-title a:hover) .wp-block-post-title a,
.sidebar-related .wp-block-post:has(.wp-block-post-title a:focus-visible) .wp-block-post-title a {
    opacity: 0.75;
}

.sidebar-related .wp-block-post:has(.wp-block-post-title a:hover)::after,
.sidebar-related .wp-block-post:has(.wp-block-post-title a:focus-visible)::after {
    transform: translateX(5px);
}


.sidebar-related .taxonomy-location {
    grid-column: 1;
    grid-row: 2;
    margin: 4px 0 0;
    color: #0b0b0b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

/* ---- Post navigation ---- */
nav[aria-label="Post navigation"] {
    box-sizing: border-box;
    border: 1px solid rgba(36, 18, 95, 0.15) !important;
    border-radius: 8px;
    padding: 28px 36px !important;
    background: #fff;
    gap: 0 !important;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

nav[aria-label="Post navigation"] .post-navigation-link-previous {
    justify-content: space-between;
    gap: 24px;
    padding-right: 36px;
    border-right: 1px solid rgba(36, 18, 95, 0.15);
}

nav[aria-label="Post navigation"] .post-navigation-link-next {
    justify-content: space-between;
    gap: 24px;
    padding-left: 36px;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link a {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

/* Extend the existing link over its full previous/next half, including the
   arrow and the spacing around it, while keeping one semantic link per item. */
nav[aria-label="Post navigation"] .wp-block-post-navigation-link a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

nav[aria-label="Post navigation"] .post-navigation-link-previous a {
    text-align: right;
}

nav[aria-label="Post navigation"] .post-navigation-link-next a {
    text-align: left;
}

nav[aria-label="Post navigation"] .post-navigation-link__label {
    display: block;
    font-size: clamp(16px, 0.875rem + ((1vw - 3.2px) * 0.588), 20px);
    font-weight: 400;
    line-height: 1.3;
}

nav[aria-label="Post navigation"] .post-navigation-link__title {
    display: block;
    margin-top: 4px;
    font-size: clamp(22px, 1.185rem + ((1vw - 3.2px) * 1.082), 30px);
    font-weight: 400;
    line-height: 1.25;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link__arrow-previous,
nav[aria-label="Post navigation"] .wp-block-post-navigation-link__arrow-next {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(36, 18, 95, 0.15);
    border-radius: 8px;
    color: var(--wp--preset--color--primary);
    font-size: 0;
    line-height: 1;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link__arrow-previous::before,
nav[aria-label="Post navigation"] .wp-block-post-navigation-link__arrow-next::before {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    margin-top: -2px;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link__arrow-previous::before {
    content: "‹";
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link__arrow-next::before {
    content: "›";
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link a:hover,
nav[aria-label="Post navigation"] .wp-block-post-navigation-link a:focus-visible {
    opacity: 0.75;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link:has(a:focus-visible) {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

nav[aria-label="Post navigation"] .wp-block-post-navigation-link a:focus-visible {
    outline: none;
}

nav[aria-label="Post navigation"] .post-navigation-link-previous:has(a:hover) .wp-block-post-navigation-link__arrow-previous,
nav[aria-label="Post navigation"] .post-navigation-link-previous:has(a:focus-visible) .wp-block-post-navigation-link__arrow-previous {
    transform: translateX(-4px);
}

nav[aria-label="Post navigation"] .post-navigation-link-next:has(a:hover) .wp-block-post-navigation-link__arrow-next,
nav[aria-label="Post navigation"] .post-navigation-link-next:has(a:focus-visible) .wp-block-post-navigation-link__arrow-next {
    transform: translateX(4px);
}

nav[aria-label="Post navigation"] .post-navigation-link-previous:only-child,
nav[aria-label="Post navigation"] .post-navigation-link-next:only-child {
    border-right: none;
    padding-right: 0;
    padding-left: 0;
}

@media (max-width: 767px) {
    nav[aria-label="Post navigation"] {
        flex-direction: column;
        padding: 20px 24px !important;
    }

    nav[aria-label="Post navigation"] .post-navigation-link-previous {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid rgba(36, 18, 95, 0.15);
    }

    nav[aria-label="Post navigation"] .post-navigation-link-next {
        padding-top: 20px;
        padding-left: 0;
    }

    nav[aria-label="Post navigation"] .post-navigation-link-previous a,
    nav[aria-label="Post navigation"] .post-navigation-link-next a {
        text-align: left;
    }
}


/* ---- Client testimonials ---- */
.client-testimonials > .wp-block-heading {
    margin-bottom: clamp(24px, 1.5rem + ((1vw - 3.2px) * 1.2), 40px);
}

.client-testimonials__viewport {
    overflow: hidden;
    width: 100%;
}

.client-testimonials__track {
    display: flex;
    gap: 24px;
    will-change: transform;
}

.client-testimonials__track > .wp-block-quote {
    flex: 0 0 var(--testimonial-slide-width, 100%);
    min-width: 0;
}

.client-testimonials .wp-block-quote {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 46px 48px minmax(0, 1fr);
    grid-template-areas:
        "quote divider text"
        "quote divider cite";
    column-gap: 0;
    align-items: start;
    margin: 0;
    padding: 60px 45px !important;
    border: 1px solid rgba(36, 18, 95, 0.15) !important;
    border-radius: 8px;
    background: #fff;
}

.client-testimonials .wp-block-quote::before {
    content: "";
    grid-area: quote;
    display: block;
    width: 46px;
    height: 40px;
    background: url("./assets/images/testimonial-quote.png") no-repeat center / contain;
}

.client-testimonials .wp-block-quote p {
    grid-area: text;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.client-testimonials .wp-block-quote cite {
    grid-area: cite;
    display: block;
    margin: 28px 0 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    color: #44318e;
}

.client-testimonials .wp-block-quote cite::before {
    content: "—\00a0";
}

.client-testimonials__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 767px) {
    .client-testimonials .wp-block-quote {
        grid-template-columns: 46px 32px minmax(0, 1fr);
        padding: 28px 32px !important;
    }

    .client-testimonials .wp-block-quote cite {
        margin-top: 24px;
    }
}

.client-testimonials__prev,
.client-testimonials__next {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(36, 18, 95, 0.15);
    border-radius: 8px;
    background: #fff;
    color: var(--wp--preset--color--primary);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.client-testimonials__prev::before,
.client-testimonials__next::before {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    margin-top: -2px;
}

.client-testimonials__prev::before {
    content: "‹";
}

.client-testimonials__next::before {
    content: "›";
}

.client-testimonials__prev:hover:not(:disabled),
.client-testimonials__prev:focus-visible:not(:disabled) {
    transform: translateX(-4px);
}

.client-testimonials__next:hover:not(:disabled),
.client-testimonials__next:focus-visible:not(:disabled) {
    transform: translateX(4px);
}

.client-testimonials__prev:disabled,
.client-testimonials__next:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---- Forminator contact form ---- */
.forminator-edit-module {
    display: none !important;
}

.forminator-guttenberg {
    --Light-Purple: #e9e7ef;
}

.forminator-guttenberg .forminator-custom-form {
    margin: 0;
}

.forminator-guttenberg .forminator-row,
.forminator-guttenberg .forminator-row-inside {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.forminator-guttenberg .forminator-row {
    margin-bottom: 24px !important;
}

.forminator-guttenberg .forminator-row.forminator-no-margin {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.forminator-guttenberg .forminator-row:has(> .forminator-col-6) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.forminator-guttenberg .forminator-row:has(> .forminator-col-12) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.forminator-guttenberg .forminator-field-name {
    width: 100% !important;
    max-width: 100% !important;
}

.forminator-guttenberg .forminator-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

.forminator-guttenberg .forminator-row > .forminator-col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.forminator-guttenberg .forminator-row.forminator-no-margin .forminator-col-md-6,
.forminator-guttenberg .forminator-row > .forminator-col-6 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.forminator-guttenberg .forminator-row-last {
    margin-bottom: 0 !important;
}

.forminator-guttenberg .forminator-field {
    margin-bottom: 0 !important;
}

.forminator-guttenberg .forminator-label {
    display: block;
    margin-bottom: 8px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.3;
}

.forminator-guttenberg .forminator-input,
.forminator-guttenberg .forminator-textarea {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 0 !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.forminator-guttenberg .forminator-textarea {
    height: 105px !important;
    min-height: 105px !important;
    resize: vertical;
}

.forminator-guttenberg .forminator-input::placeholder,
.forminator-guttenberg .forminator-textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

.forminator-guttenberg .forminator-input:focus,
.forminator-guttenberg .forminator-textarea:focus,
.forminator-guttenberg .forminator-input:not(:placeholder-shown),
.forminator-guttenberg .forminator-textarea:not(:placeholder-shown) {
    background: var(--Light-Purple, #e9e7ef) !important;
    color: #0b0b0b !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.forminator-guttenberg .forminator-input:focus::placeholder,
.forminator-guttenberg .forminator-textarea:focus::placeholder {
    color: rgba(11, 11, 11, 0.45) !important;
}

.forminator-guttenberg .forminator-input:-webkit-autofill,
.forminator-guttenberg .forminator-input:-webkit-autofill:hover,
.forminator-guttenberg .forminator-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0b0b0b !important;
    box-shadow: 0 0 0 1000px var(--Light-Purple, #e9e7ef) inset !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.forminator-guttenberg .forminator-row-last .forminator-col {
    display: flex;
    justify-content: flex-end;
}

.forminator-guttenberg .forminator-button-submit {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0 !important;
    padding: 13px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #000 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.forminator-guttenberg .forminator-button-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 2px;
    --gradient-border-angle: 90deg;
    background: linear-gradient(
        var(--gradient-border-angle),
        #e35e5f 35.58%,
        #4b25c5 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    transition: --gradient-border-angle 0.8s ease;
}

.forminator-guttenberg .forminator-button-submit:hover::before,
.forminator-guttenberg .forminator-button-submit:focus::before {
    --gradient-border-angle: 270deg;
}

.forminator-guttenberg .forminator-response-message {
    margin-bottom: 16px !important;
    color: #fff !important;
}

/* ---- ActiveIQ subscribe form (EPC Resources) ---- */

/* The column wrapping the form is the card (title + form + disclaimer). */
.wp-block-column:has(.ac-form) {
    box-sizing: border-box;
    max-width: 480px;
    padding: 40px 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    color: #fff;
}

.wp-block-column:has(.ac-form) > .wp-block-heading {
    margin: 0 0 28px;
    color: #fff;
    font-weight: 400;
    line-height: 1.3;
}

.wp-block-column:has(.ac-form) > .wp-block-paragraph {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

[id^="acForm_"] {
    --Light-Purple: #e9e7ef;
    width: 100%;
}

.ac-form-div {
    box-sizing: border-box;
    width: 100%;
    color: #fff;
}

.ac-form-row {
    margin: 0 0 20px;
}

.ac-form-row:last-child {
    margin-bottom: 0;
}

.ac-form-row br {
    display: none;
}

.ac-form-div .ac-form-label {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.ac-form-div .ac-form-input {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ac-form-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.ac-form-input:focus,
.ac-form-input:not(:placeholder-shown) {
    background: var(--Light-Purple, #e9e7ef);
    color: #0b0b0b;
    border-color: rgba(255, 255, 255, 0.5);
}

.ac-form-input:focus::placeholder {
    color: rgba(11, 11, 11, 0.45);
}

.ac-form-input:-webkit-autofill,
.ac-form-input:-webkit-autofill:hover,
.ac-form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0b0b0b !important;
    box-shadow: 0 0 0 1000px var(--Light-Purple, #e9e7ef) inset !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.ac-form-row:has(.g-recaptcha) {
    margin-top: 4px;
    margin-bottom: 24px;
}

.ac-form-row .g-recaptcha {
    transform-origin: left top;
}

.ac-form-control {
    position: relative;
    width: 100%;
}

.ac-form-div .ac-form-submit {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: #24125f !important;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.2s ease;
}

/* Arrow lives on the wrapper div since <input type="submit"> can't have ::after. */
.ac-form-control::after {
    content: "›";
    position: absolute;
    top: 50%;
    left: calc(50% + 48px);
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
    margin-top: -2px;
}

.ac-form-div .ac-form-submit:hover,
.ac-form-div .ac-form-submit:focus-visible {
    background: #341a85 !important;
}

.g-recaptcha-error:empty {
    display: none;
}

@media (max-width: 767px) {
    .wp-block-column:has(.ac-form) {
        padding: 28px 24px;
    }

    .ac-form-row .g-recaptcha {
        transform: scale(0.92);
    }
}
.sk-ww-indeed-jobs * {
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--open-sans) !important;
    font-size: var(--wp--preset--font-size--body) !important;
}
.sk-header-desc {
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.7 !important;
}
/* Hero/section covers are authored with zero side padding, which leaves their
   content flush against the viewport edge once it's narrower than wideSize.
   Inline padding wins without !important. Cover background media is absolutely
   positioned, so full-bleed image/video bands keep bleeding. */
.wp-block-cover[style*="padding-right:0;padding-left:0"] {
    padding-right: 24px !important;
    padding-left: 24px !important;
}

/* Sections pulled up with big negative top margins (desktop layering) overlap
   their predecessors once columns stack. Inline margins win without !important. */
@media (max-width: 781px) {
    [style*="margin-top:-60px"],
    [style*="margin-top:-80px"],
    [style*="margin-top:-100px"],
    [style*="margin-top:-130px"],
    [style*="margin-top:-150px"],
    [style*="margin-top:-180px"],
    [style*="margin-top:-200px"] {
        margin-top: 30px !important;
    }
}

/* The 200px hero-top spacer exists for the desktop layout, where hero columns
   pull back up into it; once those margins reset on mobile it is dead space. */
@media (max-width: 781px) {
    .wp-block-spacer[style*="height:200px"] {
        height: 0 !important;
    }
}

/* 2026-09-06: Page content is wrapped in a plain flow group and the constrained
   group inside it carries the alignwide/alignfull sections. WordPress zeroes the
   root padding on a constrained group nested in a non-alignfull parent (it assumes
   the parent is already padded), so below 1440px the alignwide columns ran edge to
   edge while headings in alignfull sub-groups kept the gutter (About "Core Values",
   ESG, Leadership, Careers, expertise + execution body sections). Restore the root
   padding on that one nesting level, plus the full-bleed margins WordPress would
   give its alignfull children. At >=1440 nothing moves: alignwide is 1340 either way.
   Replaces the old <=781px 24px gutter on alignwide columns, which also doubled the
   gutter (30 + 24) on rows that already sat in a padded group. */
.entry-content > .wp-block-group.is-layout-flow:not(.alignfull)
    > .wp-block-group.has-global-padding:not(.alignfull) {
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
}

.entry-content > .wp-block-group.is-layout-flow:not(.alignfull)
    > .wp-block-group.has-global-padding:not(.alignfull) > .alignfull {
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
}

@media (max-width: 781px) {
    /* Sidebar cards are sized and right-shifted for the desktop rail. */
    .sidebar-related {
        max-width: none;
        margin-left: 0;
        padding: 30px 24px 40px !important;
    }
}

/* ---- Utility: hide any element ---- */
.hidden {
    display: none !important;
}

/* 2026-08-31: rounded corners on inline video blocks (animation cards) */
.wp-block-video video {
	border-radius: 8px;
}

/* 2026-08-31: homepage tab video panel (.tabs-video; was .our-approach until 2026-09-06) — equal-height cards, video centered in the left card */
.tabs-video .wp-block-column:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 2026-08-31: homepage approach tabs — the video (first panel's left card) stays
   visible and playing across every tab; only the right-hand text cards crossfade.
   Works by pinning the .tabs-video panel (first panel) visible in the stacked grid and letting
   the other panels (whose left cards are empty) paint over it with those left
   cards hidden, so the one continuously-playing video shows through. */
@media (min-width: 782px) {
	.button-tabs__panels > .wp-block-columns.tabs-video {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.button-tabs__panels > .wp-block-columns.tabs-video > .wp-block-column:last-child {
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		transition:
			opacity 0.4s ease,
			transform 0.4s ease,
			visibility 0.4s ease;
	}

	.button-tabs__panels > .wp-block-columns.tabs-video.is-active > .wp-block-column:last-child {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* the first panel keeps its natural card widths (video card narrower, text
	   card wider — a result of its 30/40 vs 50/70 paddings in content-box layout);
	   the other panels mirror those exact widths so nothing shifts between tabs.
	   The ±60px is half the padding difference between the first panel's columns. */
	.button-tabs__panels > .wp-block-columns:not(.tabs-video) > .wp-block-column {
		box-sizing: border-box;
		flex-grow: 0;
		flex-shrink: 0;
	}

	/* 25px = half the 50px column gap; 60px = half the padding difference */
	.button-tabs__panels > .wp-block-columns:not(.tabs-video) > .wp-block-column:first-child {
		flex-basis: calc(50% - 85px);
	}

	.button-tabs__panels > .wp-block-columns:not(.tabs-video) > .wp-block-column:last-child {
		flex-basis: calc(50% + 35px);
	}

	/* other panels keep their empty left card for layout, but invisible so the
	   video underneath shows through */
	.button-tabs__panels > .wp-block-columns:not(.tabs-video) > .wp-block-column:first-child {
		visibility: hidden;
	}
}

/* stacked/mobile layout: panels crossfade whole (video only on the first tab);
   drop the other panels' empty left cards so they don't leave a dark stub */
@media (max-width: 781px) {
	.button-tabs__panels > .wp-block-columns:not(.tabs-video) > .wp-block-column:first-child {
		display: none;
	}
}

/* Estimate landing pages: match the existing ActiveIQ card, with room for project fields. */
.aiq-form-band .estimate-form-card,
.aiq-form-band .wp-block-column.estimate-form-card:has(.ac-form) {
    box-sizing: border-box;
    min-width: 0;
    max-width: none;
    padding: 40px 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px);
    color: #fff;
}

.aiq-form-band .ac-form-control::after {
    content: none;
}

.aiq-form-band select,
.aiq-form-band textarea {
    max-width: 100%;
    font-family: inherit;
}

.aiq-form-band select option {
    background: #fff;
    color: #0b0b0b;
}

@media (max-width: 781px) {
    .aiq-form-band .estimate-form-card,
    .aiq-form-band .wp-block-column.estimate-form-card:has(.ac-form) {
        padding: 28px 24px;
    }
}

.estimate-page .gradient-breadcrumbs {
    align-items: flex-start;
    text-align: left;
}

.estimate-page .gradient-breadcrumbs > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Compact estimate forms. Pair only short related fields when the card has room. */
.aiq-form-band .estimate-form-card {
    container-type: inline-size;
}

.aiq-form-band .ac-form-div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.aiq-form-band .ac-form-div > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.aiq-form-band .ac-form-section-heading {
    margin: 0 0 4px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.aiq-form-band .ac-form-section-heading:not(:first-child) {
    margin-top: 10px;
}

.aiq-form-band .ac-form-row {
    margin: 0;
}

.aiq-form-band .ac-form-div .ac-form-input {
    min-width: 0;
    padding: 10px 14px;
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
    line-height: 1.4;
}

.aiq-form-band .ac-form-div .ac-form-input:focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: #bba8ee;
    box-shadow: 0 0 0 2px rgba(187, 168, 238, 0.2);
}

.aiq-form-band .ac-form-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.aiq-form-band .ac-form-div select.ac-form-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23e9e7ef' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

.aiq-form-band select.ac-form-input:has(option:checked[value=""]) {
    color: rgba(255, 255, 255, 0.55);
}

.aiq-form-band textarea.ac-form-input {
    min-height: 96px;
    resize: vertical;
}

@container (min-width: 480px) {
    .aiq-form-band .ac-form-div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiq-form-band .ac-form-div > .ac-form-row--half {
        grid-column: auto;
    }
}

/* Estimate index: native button blocks form readable, whole-card links. */
.estimate-index .estimate-options {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.estimate-index .estimate-options > .wp-block-button {
    display: flex;
    width: 100%;
}

.estimate-index .estimate-options .wp-block-button__link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 110px;
    height: 100%;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    transition: background-color .2s ease, border-color .2s ease;
}

.estimate-index .estimate-options .wp-block-button__link::after {
    content: "→";
    flex-shrink: 0;
}

.estimate-index .estimate-options .wp-block-button__link:hover,
.estimate-index .estimate-options .wp-block-button__link:focus-visible {
    background: #24125f;
    border-color: #bba8ee;
    color: #fff;
}

@media (max-width: 1100px) {
    .estimate-index .estimate-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 781px) {
    .estimate-index .estimate-options {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .estimate-index .estimate-options .wp-block-button__link {
        min-height: 80px;
        padding: 22px;
    }
}

/* Onsite Power Request: full-width rows balance the longer introduction. */
body.page-id-76177 .aiq-form-band .ac-form-div {
    grid-template-columns: minmax(0, 1fr);
}