/*
 Theme Name:   Metamorph Hello Child
 Theme URI:    https://metamorph.es
 Description:  Child theme for Metamorph website - DO NOT use parent theme directly
 Author:       Metamorph Development Team
 Author URI:   https://metamorph.es
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  metamorph
*/

/* Google Fonts: Space Grotesk (headings) + Manrope (body)
   Loaded via wp_enqueue_style in functions.php */

/* ── Brand variables ────────────────────────────────────────────────────── */
:root {
    /* ── Colors: brand primary ───────────────────────────────────────── */
    --color-primary-light:  #A6CACC;
    --color-primary-mid:    #6DBACC;
    --color-primary:        #34A3D3;
    --color-primary-dark:   #2982A8;

    /* ── Colors: text & background ───────────────────────────────────── */
    --color-text-dark:      #1A1F36;
    --color-text-body:      #333333;
    --color-text-light:     #666666;
    --color-bg-white:       #FFFFFF;
    --color-bg-light:       #F5F7FA;
    --color-bg-dark:        #1A1F36;

    /* ── Colors: functional ──────────────────────────────────────────── */
    --color-success:        #28A745;
    --color-error:          #DC3545;
    --color-warning:        #FFC107;
    --color-border:         #E5E7EB;

    /* ── Neutral scale (50–900) ───────────────────────────────────────── */
    --neutral-50:   #FAFAFA;
    --neutral-100:  #F3F4F6;
    --neutral-200:  #E5E7EB;
    --neutral-300:  #D1D5DB;
    --neutral-400:  #9CA3AF;
    --neutral-500:  #6B7280;
    --neutral-600:  #4B5563;
    --neutral-700:  #374151;
    --neutral-800:  #1F2937;
    --neutral-900:  #111827;

    /* ── Typography: font families ───────────────────────────────────── */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body:    'Manrope', sans-serif;
    --font-stat:    'Ondo', 'Space Grotesk', sans-serif;
    --font-system:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;

    /* ── Typography: heading sizes (desktop) ───────────────────────────── */
    --font-h1-size:   56px;
    --font-h1-weight: 700;
    --font-h1-lh:     1.2;
    --font-h1-ls:     -0.02em;

    --font-h2-size:   36px;
    --font-h2-weight: 700;
    --font-h2-lh:     1.25;
    --font-h2-ls:     -0.01em;

    --font-h3-size:   28px;
    --font-h3-weight: 700;
    --font-h3-lh:     1.3;
    --font-h3-ls:     0;

    --font-h4-size:   22px;
    --font-h4-weight: 600;
    --font-h4-lh:     1.35;
    --font-h4-ls:     0;

    --font-h5-size:   18px;
    --font-h5-weight: 700;
    --font-h5-lh:     1.4;
    --font-h5-ls:     0.02em;

    --font-h6-size:   16px;
    --font-h6-weight: 700;
    --font-h6-lh:     1.4;
    --font-h6-ls:     0.02em;

    /* ── Typography: heading sizes (mobile) ────────────────────────────── */
    --font-h1-size-mobile: 32px;
    --font-h2-size-mobile: 26px;
    --font-h3-size-mobile: 22px;
    --font-h4-size-mobile: 20px;
    --font-h5-size-mobile: 16px;
    --font-h6-size-mobile: 14px;

    /* ── Typography: body & utility ─────────────────────────────────────── */
    --font-body-size:   16px;
    --font-body-weight: 400;
    --font-body-lh:     1.6;

    --font-body-small-size:   14px;
    --font-body-small-weight: 400;
    --font-body-small-lh:     1.5;

    --font-button-size:        15px;
    --font-button-size-mobile: 14px;
    --font-button-weight:      600;
    --font-button-lh:          1;
    --font-button-ls:          0.02em;

    --font-caption-size:   12px;
    --font-caption-weight: 400;
    --font-caption-lh:     1.4;

    --font-stat-size:        48px;
    --font-stat-size-mobile: 36px;
    --font-stat-weight:      500;
    --font-stat-lh:          1.1;
    --font-stat-ls:          -0.02em;

    /* ── Spacing scale ──────────────────────────────────────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-24: 96px;
    --sp-32: 128px;

    /* ── Border radius ──────────────────────────────────────────────────── */
    --radii-sm:   2px;
    --radii-md:   4px;
    --radii-lg:   8px;
    --radii-xl:   12px;
    --radii-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px 0 rgba(0, 0, 0, 0.25);

    /* ── Layout & grid ─────────────────────────────────────────────────── */
    --max-content-width: 1200px;
    --grid-columns: 12;
    --grid-gutter:  20px;
    --grid-margin:  20px;
}

/* Responsive token overrides */
@media (max-width: 991px) {
    :root {
        --grid-gutter: 16px;
        --grid-margin: 16px;
    }
}

@media (max-width: 767px) {
    :root {
        --font-h1-size:   var(--font-h1-size-mobile);
        --font-h2-size:   var(--font-h2-size-mobile);
        --font-h3-size:   var(--font-h3-size-mobile);
        --font-h4-size:   var(--font-h4-size-mobile);
        --font-h5-size:   var(--font-h5-size-mobile);
        --font-h6-size:   var(--font-h6-size-mobile);
        --font-stat-size:   var(--font-stat-size-mobile);
        --font-button-size: var(--font-button-size-mobile);
        --grid-gutter: 12px;
        --grid-margin: 12px;
    }
}

/* ── Brand fonts ────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Ondo';
    src: url('assets/fonts/Ondo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Box model reset ─────────────────────────────────────────────────────── *
 * Hello Elementor's theme.css applies width:100% + padding-inline:10px to
 * .site-main / .entry-title on non-Elementor templates (e.g. blog posts).
 * Without border-box, that padding adds to the 100% width and causes
 * horizontal overflow on mobile. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Global typography ──────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    color: var(--color-text-body);
    line-height: var(--font-body-lh);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
}

h1 { font-size: var(--font-h1-size); font-weight: var(--font-h1-weight); line-height: var(--font-h1-lh); letter-spacing: var(--font-h1-ls); }
h2 { font-size: var(--font-h2-size); font-weight: var(--font-h2-weight); line-height: var(--font-h2-lh); letter-spacing: var(--font-h2-ls); }
h3 { font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-lh); letter-spacing: var(--font-h3-ls); }
h4 { font-size: var(--font-h4-size); font-weight: var(--font-h4-weight); line-height: var(--font-h4-lh); letter-spacing: var(--font-h4-ls); }
h5 { font-family: var(--font-system); font-size: var(--font-h5-size); font-weight: var(--font-h5-weight); line-height: var(--font-h5-lh); letter-spacing: var(--font-h5-ls); }
h6 { font-family: var(--font-system); font-size: var(--font-h6-size); font-weight: var(--font-h6-weight); line-height: var(--font-h6-lh); letter-spacing: var(--font-h6-ls); }

a {
    color: var(--color-primary);
    transition: color 0.3s ease;
}
a:hover { color: var(--color-primary-dark); }

/* ── Utility layout ─────────────────────────────────────────────────────── */
.container {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.section {
    padding: 90px 0;
    overflow: hidden;
}

/* ── Background utilities (from static reference) ───────────────────────── */
.bg-theme     { background-color: var(--color-primary) !important; }
.bg-gray      { background-color: var(--color-bg-light) !important; }
.bg-white     { background-color: var(--color-bg-white) !important; }
.bg-dark      { background-color: var(--color-bg-dark) !important; }
.bg-dark2     { background-color: var(--color-bg-dark) !important; }
.bg-dark3     { background-color: var(--neutral-900) !important; }
.bg-secondary { background-color: var(--color-text-body) !important; }

.bg-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
}
.bg-parallax { background-attachment: fixed; }

.bg-overlay { position: relative; }
.bg-overlay:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.bg-overlay-light:before { background-color: var(--color-bg-white); opacity: 0.8; }
.bg-overlay-dark:before,
.bg-overlay-dark2:before {
    background-image: linear-gradient(to bottom, rgba(27,26,26,0.5) 0%, rgba(27,26,26,0) 31%, rgba(27,26,26,0) 82%);
    background-color: var(--neutral-900);
}
.bg-overlay-dark:before  { opacity: 0.6; }
.bg-overlay-dark2:before { opacity: 0.75; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--font-button-size);
    font-weight: var(--font-button-weight);
    text-transform: capitalize;
    height: 50px;
    min-width: 170px;
    line-height: 50px;
    padding: 0 28px;
    letter-spacing: var(--font-button-ls);
    border-radius: var(--radii-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(2px);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary,
.btn--gradient {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}
.btn--primary:hover,
.btn--gradient:hover,
.btn--primary:focus-visible,
.btn--gradient:focus-visible {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-bg-white);
    box-shadow: var(--shadow-md);
}

.btn--white {
    background: var(--color-bg-white);
    color: var(--color-text-dark);
    border-color: var(--color-bg-white);
}
.btn--white:hover {
    border-color: var(--color-primary);
}

.btn--secondary,
.btn--bordered {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn--secondary:hover,
.btn--bordered:hover {
    background: var(--color-bg-light);
}

.btn--rounded { border-radius: var(--radii-full); }

@media (max-width: 767px) {
    .btn {
        padding: 0 20px;
        min-width: 0;
    }
}

/* ── Elementor header: transparent base, white on scroll ────────────────── */
/* Force transparent on the inner .e-con (the position:sticky element).
   !important is needed because Elementor Pro's sticky JS fires at offset 0
   and can inject inline background-color on page load. The .header-scrolled
   rule below has higher specificity (3 vs 2 class units) so it still wins. */
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-section {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nav link hover underline — 3px blue bar slides in from left */
.elementor-nav-menu .elementor-item {
    position: relative;
}
.elementor-nav-menu .elementor-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-primary);
    transition: width 0.4s ease-out;
}
.elementor-nav-menu .elementor-item:hover::after,
.elementor-nav-menu .elementor-item.elementor-item-active::after {
    width: 100%;
}

/* Mobile menu toggle — rotate hamburger/close icon when menu is open */
.elementor-menu-toggle {
    transition: transform 0.3s ease;
}
.elementor-menu-toggle.elementor-active {
    transform: rotate(90deg);
}

/* ── Homepage section styles ─────────────────────────────────────────────── */
.hero {
    width: 100%;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.45)),
                url('/wp-content/uploads/2026/06/hero-placeholder.jpg') center/cover no-repeat;
    color: var(--color-bg-white);
    padding: 120px 0;
}
.hero .container { display: flex; flex-direction: column; gap: 20px; }
.hero h1 {
    font-size: var(--font-h1-size);
    font-weight: var(--font-h1-weight);
    line-height: var(--font-h1-lh);
    letter-spacing: var(--font-h1-ls);
    margin: 0 0 12px 0;
    color: var(--color-bg-white);
}
.hero .sub {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-bg-light);
}
.hero .ctas { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Stats / trust bar */
.trust-bar {
    background: var(--color-bg-white);
    padding: 28px 0;
    border-top: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.trust-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    padding: 0;
    margin: 0;
    align-items: center;
}
.trust-list > * { text-align: center; padding: 8px 6px; }
.trust-list .count {
    display: block;
    font-family: var(--font-stat);
    font-size: var(--font-stat-size);
    color: var(--color-primary);
    font-weight: var(--font-stat-weight);
    line-height: var(--font-stat-lh);
    letter-spacing: var(--font-stat-ls);
}
.trust-list .label {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    font-family: var(--font-body);
}

/* Section headings */
.section-heading .heading--subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 7px;
}
.section-heading .heading--title {
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    line-height: var(--font-h2-lh);
    letter-spacing: var(--font-h2-ls);
    margin-bottom: 17px;
    color: var(--color-text-dark);
}
.section-heading .heading--desc {
    font-size: var(--font-body-size);
    color: var(--color-text-light);
    line-height: 24px;
}

/* Service cards */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.service-card {
    background: var(--color-bg-white);
    border: 2px solid var(--color-border);
    padding: 24px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.service-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 16px 0 10px;
    color: var(--color-text-dark);
}
.service-card p { font-size: 15px; line-height: 24px; color: var(--color-text-light); }

/* ── Feature cards (homepage highlights) ─────────────────────────────────── */
.feature-card { position: relative; }
.feature-card .feature-card-icon img { max-width: 100%; height: auto; }
.feature-card .feature-card-icon i {
    font-size: 64px;
    color: var(--color-primary);
    font-weight: 400;
}
.feature-card .feature-card-title {
    font-size: 18px;
    line-height: 29px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--color-text-dark);
}
.feature-card .feature-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-light);
}
.featured .feature-card { margin-bottom: 47px; }

/* Featured #1 — circular icon badge */
.featured-1 .feature-card .feature-card-icon {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 19px;
}
.featured-1 .feature-card .feature-card-icon i {
    position: relative;
    z-index: 1;
    line-height: 90px;
    transition: transform 1s ease;
}
.featured-1 .feature-card .feature-card-icon:hover i { transform: scale(1.1); }
.featured-1 .feature-card .feature-card-title { font-size: 20px; }

/* Featured #2/#3/#4 — variants on dark/coloured backgrounds */
.featured-2 .feature-card { margin-bottom: 42px; }
.featured-2 .feature-card:last-of-type { margin-bottom: 0; }
.featured-2 .feature-card .feature-card-title { color: var(--color-bg-white); margin-bottom: 1px; }
.featured-2 .feature-card .feature-card-desc { margin-bottom: 0; }
.featured-2 .feature-card .feature-card-icon i,
.featured-4 .feature-card .feature-card-icon i { font-size: 48px; }
.featured-3 .feature-card .feature-card-icon i { color: var(--color-bg-white); }
.featured-4 .feature-card .feature-card-icon i { color: var(--color-primary); }
.featured-left .feature-card-content { padding-left: 74px; }
.featured-left .feature-card-icon { position: absolute; top: 0; left: 0; }

/* ── Info cards (process / "how we work" steps) ─────────────────────────── */
.info-cards { padding: 80px 0 100px; }
.info-card { position: relative; }
.info-card .info-card-step {
    position: absolute;
    left: 0;
    top: 10px;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--neutral-200);
    font-size: 52px;
}
.info-card .info-card-content { padding-left: 100px; }
.info-card .info-card-subtitle {
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 13px;
}
.info-card .info-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 29px;
    margin-bottom: 17px;
    color: var(--color-text-dark);
}
.info-card .info-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
    margin-bottom: 15px;
    color: var(--color-text-light);
}
.info-card .info-card-links {
    color: var(--color-text-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
}
.info-card .info-card-links i { margin-right: 7px; }
.info-card .info-card-links:hover { color: var(--color-primary); }

/* ── Page title (inner-page headers) ─────────────────────────────────────── */
.page-title { padding: 0; max-height: 600px; }
.page-title .title { padding: 235px 0 149px 0; }
.page-title .title--heading { margin-bottom: 13px; }
.page-title .title--heading h1 {
    color: var(--color-bg-white);
    font-size: var(--font-h1-size);
    font-weight: var(--font-h1-weight);
    line-height: var(--font-h1-lh);
    letter-spacing: var(--font-h1-ls);
    margin-bottom: 0;
    text-transform: capitalize;
}
.page-title .title--desc p {
    color: var(--color-bg-light);
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 0;
}
.page-title .breadcrumb,
.page-title .breadcrumb a {
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    background: transparent;
    color: var(--neutral-400);
}
.page-title .breadcrumb .active { color: var(--color-bg-light); }
.page-title .breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }

/* CTA bar */
.cta-1,
.cta-bar {
    background: var(--color-primary);
    padding: 20px 0;
}
.cta h3,
.cta-bar h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 51px;
    color: var(--color-bg-white);
    margin: 0;
}
.cta p {
    color: var(--color-bg-light);
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 25px;
}

/* Footer */
.site-footer {
    background: var(--color-bg-dark);
    color: var(--neutral-400);
}
.footer-widget { padding: 60px 0; }
.footer-widget .widget-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-bg-white);
    margin-bottom: 30px;
    text-transform: uppercase;
}
.footer-widget a { color: var(--neutral-400); font-size: 14px; line-height: 2; }
.footer-widget a:hover { color: var(--color-primary); }
.footer--bar {
    padding: 30px 0;
    border-top: 2px solid rgba(71,71,71,0.25);
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    color: var(--color-bg-white);
}

/* ── Post content typography (service / single pages) ───────────────────── */
.elementor-widget-theme-post-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 40px 0 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}

.elementor-widget-theme-post-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 30px 0 10px;
}

.elementor-widget-theme-post-content p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-body);
    margin-bottom: 18px;
}

.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
    padding-left: 20px;
    margin-bottom: 18px;
}

.elementor-widget-theme-post-content ul li,
.elementor-widget-theme-post-content ol li {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-body);
    margin-bottom: 6px;
}

.elementor-widget-theme-post-content a { color: var(--color-primary); }
.elementor-widget-theme-post-content strong { color: var(--color-text-dark); font-weight: 600; }

/* Breadcrumb link hover */
.elementor-widget-breadcrumbs a:hover { color: var(--color-primary); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .section { padding: 60px 0; }
    .hero h1 { font-size: 42px; line-height: 50px; }
    /* Home hero heading (Elementor widget) - match .hero h1 sizing above */
    .hero-h1 .elementor-heading-title { font-size: 42px; line-height: 50px; }
}
@media (max-width: 767px) {
    .hero { padding: 80px 0; }
    .hero h1 { font-size: var(--font-h1-size); line-height: var(--font-h1-lh); }
    .hero-h1 .elementor-heading-title { font-size: var(--font-h1-size); line-height: var(--font-h1-lh); }
    .trust-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .service-grid { grid-template-columns: 1fr; }
    .cta-bar h3,
    .cta h3 { font-size: 18px; line-height: 1.4; }
    .page-title .title { padding: 100px 0; }
    .page-title .title--heading h1 { font-size: var(--font-h1-size); }
    .info-card { margin-bottom: 40px; }
    /* Header "Contact Us" button doesn't fit alongside logo + menu toggle
       on mobile; the hamburger menu already includes a Contact link. */
    .header-contact-btn { display: none; }

    /* Mobile nav menu: full-width 44px-minimum tap targets */
    .elementor-nav-menu .elementor-item,
    .elementor-nav-menu .sub-menu .elementor-item,
    .elementor-nav-menu .sub-menu .elementor-sub-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        width: 100%;
    }
}

/* ── Service archive cards ──────────────────────────────────────────────────── */
.service-archive-card {
    border: 2px solid var(--color-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-archive-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.service-archive-card--dark {
    border-color: transparent;
}
.service-archive-card--dark:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}
.service-archive-card .elementor-icon-box-icon {
    margin-bottom: 16px;
}
.service-archive-card .elementor-icon-box-title a {
    color: inherit;
}
.service-archive-card .elementor-icon-box-title a:hover {
    color: var(--color-primary);
}

/* ── Header sticky nav ──────────────────────────────────────────────────── */
/* When sticky fires: switch nav link color from white to dark              */
.elementor-location-header .elementor-sticky--active .elementor-nav-menu .elementor-item,
.elementor-location-header .elementor-sticky--active .elementor-nav-menu .elementor-sub-item {
    color: #282828 !important;
    fill: #282828 !important;
}
.elementor-location-header .elementor-sticky--active .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-sticky--active .elementor-nav-menu .elementor-item.elementor-item-active {
    color: #34a3d3 !important;
    fill: #34a3d3 !important;
}

@keyframes nav-dropdown-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.elementor-nav-menu .sub-menu .elementor-item,
.elementor-nav-menu .sub-menu .elementor-sub-item {
    color: var(--color-text-dark) !important;
    font-family: var(--font-body);
    font-size: 14px !important;
    padding: 9px 22px !important;
    display: block;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

.elementor-nav-menu .sub-menu .elementor-item:hover,
.elementor-nav-menu .sub-menu .elementor-sub-item:hover,
.elementor-nav-menu .sub-menu .elementor-item-active {
    color: var(--color-primary) !important;
    background-color: var(--color-bg-light) !important;
    padding-left: 28px !important;
}

/* 3rd-level flyout (division sub-menus) */
.elementor-nav-menu .sub-menu .sub-menu {
    border-top: none !important;
    border-left: 2px solid var(--color-primary);
    background-color: var(--color-bg-light) !important;
}

/* Division labels (Management Consulting, FLS…) — small uppercase blue eyebrow.
   Selector is prefixed with `.elementor-nav-menu .sub-menu` (specificity 0,4,0)
   so its font-size beats the generic `.elementor-nav-menu .sub-menu
   .elementor-sub-item` rule (0,3,0); without the prefix the labels inherited the
   14px link size and looked oversized. Mirrors the static mega-menu category
   labels (uppercase / bold / brand-blue) at a refined eyebrow size. */
.elementor-nav-menu .sub-menu .nav-division-label > .elementor-item,
.elementor-nav-menu .sub-menu .nav-division-label > .elementor-sub-item {
    font-family: var(--font-heading) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--color-primary) !important;
    padding: 14px 22px 8px !important;
    /* Row layout so the submenu caret sits beside the name (pushed to the right
       edge, static mega-menu style) instead of wrapping to its own line — the
       .sub-arrow span is display:flex/block-level and the anchor was display:block. */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.elementor-nav-menu .sub-menu .nav-division-label > .elementor-item .sub-arrow,
.elementor-nav-menu .sub-menu .nav-division-label > .elementor-sub-item .sub-arrow {
    flex: 0 0 auto;
    margin-left: 10px;
}
.elementor-nav-menu .sub-menu .nav-division-label > .elementor-item:hover,
.elementor-nav-menu .sub-menu .nav-division-label > .elementor-sub-item:hover {
    color: var(--color-primary-dark) !important;
    background-color: transparent !important;
}

/* Contact CTA item — styled as a solid brand button (matches design-system buttons) */
.nav-cta-btn > .elementor-item {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: var(--radii-md) !important;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
.nav-cta-btn > .elementor-item:hover {
    background: var(--color-primary-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(52, 163, 211, 0.30) !important;
}
.nav-cta-btn > .elementor-item::after { display: none; } /* no underline anim */
@media (prefers-reduced-motion: reduce) {
    .nav-cta-btn > .elementor-item:hover { transform: none; }
}

/* ── Case Study Cards (archive-posts widget skin) ───────────────────────── */
.elementor-widget-archive-posts .elementor-post,
.case-study-card {
    background: var(--color-bg-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radii-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.elementor-widget-archive-posts .elementor-post:hover,
.case-study-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.elementor-widget-archive-posts .elementor-post__thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.elementor-widget-archive-posts .elementor-post__text {
    padding: 20px;
}
.elementor-widget-archive-posts .elementor-post__title,
.elementor-widget-archive-posts .elementor-post__title a {
    color: var(--color-text-dark) !important;
    font-family: var(--font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.elementor-widget-archive-posts .elementor-post:hover .elementor-post__title a {
    color: var(--color-primary) !important;
}
.elementor-widget-archive-posts .elementor-post__meta-data {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 8px;
    font-family: var(--font-body);
}
.elementor-widget-archive-posts .elementor-post__excerpt {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-top: 8px;
}
.elementor-widget-archive-posts .elementor-post__read-more {
    display: inline-block;
    margin-top: 16px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.elementor-widget-archive-posts .elementor-post__read-more:hover {
    border-color: var(--color-primary);
}
/* archive pagination */
.elementor-widget-archive-posts .elementor-pagination {
    text-align: center;
    margin-top: 40px;
}
.elementor-widget-archive-posts .elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border: 2px solid var(--color-border);
    border-radius: var(--radii-md);
    color: var(--color-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.elementor-widget-archive-posts .elementor-pagination .page-numbers.current,
.elementor-widget-archive-posts .elementor-pagination .page-numbers:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-bg-white);
}
@media (max-width: 767px) {
    .elementor-widget-archive-posts .elementor-posts-container {
        display: block;
    }
    .elementor-widget-archive-posts .elementor-post {
        margin-bottom: 24px;
    }
}

/* ───────────────────────────────────────────────
   TASK-C3: Team Archive - team cards
─────────────────────────────────────────────── */

/* Team grid card wrapper */
.elementor-widget-archive-posts .team-grid .elementor-post,
.team-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radii-lg);
    overflow: hidden;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.elementor-widget-archive-posts .team-grid .elementor-post:hover,
.team-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Photo */
.elementor-widget-archive-posts .team-grid .elementor-post__thumbnail img,
.team-card .team-member-photo img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

.elementor-widget-archive-posts .team-grid .elementor-post:hover .elementor-post__thumbnail img,
.team-card:hover .team-member-photo img {
    transform: scale(1.05);
}

/* Card text area */
.elementor-widget-archive-posts .team-grid .elementor-post__text {
    padding: 24px;
}

/* Name */
.elementor-widget-archive-posts .team-grid .elementor-post__title a,
.team-card .team-card__name {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.elementor-widget-archive-posts .team-grid .elementor-post__title a:hover {
    color: var(--color-primary);
}

/* Job title (excerpt) */
.elementor-widget-archive-posts .team-grid .elementor-post__excerpt p,
.team-card .team-card__title {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

/* Read More link */
.elementor-widget-archive-posts .team-grid .elementor-post__read-more,
.team-card .team-card__link {
    display: inline-block;
    color: var(--color-text-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.elementor-widget-archive-posts .team-grid .elementor-post__read-more:hover {
    color: var(--color-primary);
}

/* Mobile */
@media (max-width: 767px) {
    .elementor-widget-archive-posts .team-grid .elementor-post__thumbnail img {
        height: 220px;
    }
}

/* ───────────────────────────────────────────────
   TASK-C5: Service Single - layout & sections
─────────────────────────────────────────────── */

/* Team single photo */
.team-single-photo img {
    width: 100%;
    border-radius: var(--radii-lg);
    object-fit: cover;
    object-position: top center;
    max-height: 480px;
}

/* ════════════════════════════════════════════════════════════════════════════
   SERVICE DETAILS — single service post content (dynamic the_content()).
   Styled entirely via CSS since the body is dynamic: a lead intro, section
   headers, and each capability list rendered as a two-column card with brand
   check-mark bullets.
   ════════════════════════════════════════════════════════════════════════════ */

/* Lead intro — the first paragraph of the service body */
.elementor-location-single .elementor-widget-theme-post-content > p:first-child {
    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 500;
    color: var(--color-text-dark);
    border-left: 3px solid var(--color-primary);
    padding: 2px 0 2px 22px;
    margin: 0 0 44px;
}

/* Section header — unnumbered */
.elementor-location-single .elementor-widget-theme-post-content h2,
.elementor-location-single .elementor-widget-theme-post-content h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-dark);
    margin: 40px 0 18px;
    padding: 0;
    border: 0;
}

/* Each capability list becomes a bordered card, two columns, check bullets */
.elementor-location-single .elementor-widget-theme-post-content ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 24px 28px;
    background: #f8fbfc;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-lg);
    box-shadow: 0 6px 22px rgba(26, 31, 54, 0.04);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 30px;
}
.elementor-location-single .elementor-widget-theme-post-content ul li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    font-family: var(--font-body);
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--color-text);
}
.elementor-location-single .elementor-widget-theme-post-content ul li::marker {
    content: "";
}
.elementor-location-single .elementor-widget-theme-post-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background: rgba(52, 163, 211, 0.10);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334A3D3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}
@media (max-width: 600px) {
    .elementor-location-single .elementor-widget-theme-post-content ul {
        grid-template-columns: 1fr;
        padding: 22px;
    }
}

/* Related case studies cards (posts widget on service single) */
.elementor-widget-posts .elementor-post {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radii-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.elementor-widget-posts .elementor-post:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.elementor-widget-posts .elementor-post__thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.elementor-widget-posts .elementor-post__title a {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.elementor-widget-posts .elementor-post__title a:hover {
    color: var(--color-primary);
}

.elementor-widget-posts .elementor-post__read-more {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--color-primary);
}

@media (max-width: 767px) {
    .elementor-location-single .elementor-widget-theme-post-content h2 {
        font-size: 20px;
    }
    .team-single-photo img {
        max-height: 320px;
    }
}

/* ───────────────────────────────────────────────
   TASK-C6: Testimonial carousel
─────────────────────────────────────────────── */

.elementor-widget-testimonial-carousel .swiper-wrapper {
    align-items: center;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__content {
    font-style: italic;
    line-height: 1.8;
    position: relative;
    padding: 0 40px;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__content::before {
    content: '\201C';
    font-size: 72px;
    line-height: 1;
    color: var(--color-primary);
    position: absolute;
    left: 0;
    top: -8px;
    font-family: Georgia, serif;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__name {
    font-weight: 700;
    margin-top: 24px;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Navigation arrows */
.elementor-widget-testimonial-carousel .elementor-swiper-button {
    width: 44px;
    height: 44px;
    background: rgba(255, 75, 20, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button:hover {
    background: var(--color-primary);
}

/* Dots */
.elementor-widget-testimonial-carousel .swiper-pagination-bullet {
    background: #64748B;
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.elementor-widget-testimonial-carousel .swiper-pagination-bullet-active {
    background: var(--color-primary);
    transform: scale(1.3);
}

@media (max-width: 767px) {
    .elementor-widget-testimonial-carousel .elementor-testimonial__content {
        padding: 0 20px;
        font-size: 15px;
    }
    .elementor-widget-testimonial-carousel .elementor-testimonial__content::before {
        font-size: 48px;
    }
}

/* ───────────────────────────────────────────────
   TASK-D2: Branded SVG icon system
─────────────────────────────────────────────── */

/* SVG icon base (when used as <img> or inline <svg>) */
.metamorph-icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    color: var(--color-primary);
}

.metamorph-icon svg,
.metamorph-icon img {
    width: 100%;
    height: 100%;
}

/* Icon within Elementor image widget used as icon */
.service-icon-wrap {
    width: 64px;
    height: 64px;
    background: rgba(255, 75, 20, 0.08);
    border-radius: var(--radii-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.service-icon-wrap img {
    width: 32px;
    height: 32px;
    filter: invert(40%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%) contrast(100%);
}

.elementor-widget:hover .service-icon-wrap {
    background: rgba(255, 75, 20, 0.15);
}

/* Inline SVG icon sizing (when SVG inserted as HTML) */
.elementor-widget-html svg.metamorph-svg-icon,
svg.metamorph-svg-icon {
    width: 48px;
    height: 48px;
    stroke: var(--color-primary);
    fill: none;
    display: block;
}

/* ───────────────────────────────────────────────
   TASK-E1: Scroll reveal animations
─────────────────────────────────────────────── */

.reveal-hidden {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .reveal-hidden {
        transform: translateY(12px);
        transition-duration: 0.35s;
    }
}

/* ───────────────────────────────────────────────
   TASK-E2: Counter font (Ondo) + display
─────────────────────────────────────────────── */

@font-face {
    font-family: 'Ondo';
    src: url('assets/fonts/Ondo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

.font-ondo,
.trust-list .count {
    font-family: 'Ondo', var(--font-heading), sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    line-height: 1;
    display: block;
    color: var(--color-primary);
}

/* ───────────────────────────────────────────────
   TASK-E3: Sticky header scroll behavior
   Background must target the INNER .e-con (the
   position:sticky element), not the outer <header>
   wrapper which has no visual presence once sticky
   fires.
─────────────────────────────────────────────── */

/* Scrolled: solid white on the inner sticky container */
.elementor-location-header.header-scrolled > .e-con,
.elementor-location-header.header-scrolled > .elementor-section {
    background-color: #ffffff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;
}

/* ── Hero-behind-navbar: pull page content up to viewport top ─────────────
   Elementor Pro's jQuery Sticky makes the header position:fixed and inserts
   a same-height spacer inside <header> to hold the flow. On standard WP
   templates this leaves .site-main starting ~100px below the top. On Elementor
   theme-builder pages there is no .site-main — the content sits in
   .elementor-location-single / -archive / -search. Both selectors need the
   same negative margin-top so the hero section extends up behind the
   transparent navbar. Hero sections must have ≥ var(--header-h) top padding
   so text stays below the navbar once pulled up.
────────────────────────────────────────────────────────────────────────── */
:root {
    /* Full header band = sticky container (100px) + the floating bar's 18px top
       margin. Content is pulled up by this so the navy hero fills behind the
       whole header (no white strip above the floating bar). */
    --header-h: 118px;
}

.site-main,
.elementor-location-single,
.elementor-location-archive,
.elementor-location-search {
    margin-top: calc(-1 * var(--header-h));
}

/* ───────────────────────────────────────────────────────────────
   NAVBAR QUALITY & RESPONSIVENESS FIXES
   Root cause: Elementor's global "primary" typography (56px, the
   H1 size) leaks into nav items because per-element CSS from the
   widget's custom settings isn't being generated for post 171.
   All overrides here are scoped to .elementor-location-header to
   avoid touching other nav-menu widgets on the site.
─────────────────────────────────────────────────────────────── */

/* ── 1. Logo: fix size — image is 16:9 canvas, width-based sizing
        gives a predictable rendered width while auto height keeps
        proportions. 160px wide → ~90px canvas tall → logo mark
        ~80px visible. Header min-height:100px accommodates this.  */
.elementor-location-header .elementor-widget-image img {
    width: 160px;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-image img {
        width: 130px;
    }
}

/* ── 2. Desktop nav items: font only — colors handled via wp_head override ── */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

/* ── 4. Hamburger icon color ─────────────────────────────────── */
/* White on transparent header, dark when header turns solid.    */
.elementor-location-header .elementor-menu-toggle svg {
    fill: rgba(255, 255, 255, 0.92);
}
.elementor-location-header.header-scrolled .elementor-menu-toggle svg {
    fill: var(--color-text-dark);
}

/* ── 5. CTA "Contact Us" button: restore vertical padding ─────── */
/* Widget sets padding:0px 24px — zero top/bottom makes it flat. */
.elementor-location-header .header-contact-btn .elementor-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-radius: 4px !important;
}

/* ── 6. Mobile/tablet burger dropdown ───────────────────────── */
/* At ≤1024px Elementor collapses to burger; dropdown items use
   --e-global-typography-accent-font-size (15px) which is fine.
   Ensure clean font sizing and adequate tap targets.            */
/* Tablet only: the nav-menu widget grows wide so Elementor's margin:0 auto
   centres the hamburger — push it to the far right. (On mobile the widget is
   narrow and the default already right-aligns it.) */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-location-header .elementor-nav-menu--toggle .elementor-menu-toggle {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 1024px) {
    .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item,
    .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item {
        font-size: 15px !important;
        font-weight: 500;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        padding: 12px 20px !important;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Top-level items in burger: slightly bolder */
    .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown > li > .elementor-item {
        font-weight: 600;
        font-size: 16px !important;
    }

    /* Sub-items (service children, etc.) */
    .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .sub-menu .elementor-item,
    .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
        font-size: 14px !important;
        padding-left: 32px !important;
    }

    /* Hide the "Contact Us" button widget on tablet — nav already has Contact link */
    .header-contact-btn {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMMAND CENTRE — homepage hero + contained header bar
   Direction: outputs/design-2.html. Palette + fonts locked (Space Grotesk /
   Manrope; brand blue #34A3D3 family + navy #1A1F36 / #11152A; no orange).
   The hero section carries the .hero-command class (set in build-homepage.py);
   its content + decorative fx are an HTML widget. The header container carries
   .site-command-bar (set in build-header.py).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero: full-bleed dark control-room field ──────────────────────────────── */
.hero-command {
    position: relative;
    overflow: hidden;
    isolation: isolate;            /* own stacking context: decorations go to z<0, content stays above */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 120px 24px;
    /* Overlaid photographic field: a subtle teal glow + a near-opaque navy
       gradient sit over the hero photo, keeping the gradient wordmark, sub-slogan
       and buttons fully legible while adding depth (matches the other heroes).
       Root-relative URL so it resolves on any domain. */
    background:
        radial-gradient(120% 90% at 50% 8%, rgba(41, 130, 168, 0.12) 0%, rgba(41, 130, 168, 0) 55%),
        linear-gradient(180deg, rgba(26, 31, 54, 0.82) 0%, rgba(17, 21, 42, 0.90) 100%),
        url(/wp-content/uploads/2026/06/profile-hero-8.jpg) center / cover no-repeat;
    background-color: #1A1F36;
}
/* faint control-room grid, masked to fade at the edges (behind content) */
.hero-command::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(109, 186, 204, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 186, 204, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
}

/* decorative fx (glow + scan) — rendered inside the hero HTML widget; no
   positioned ancestor between it and .hero-command, so inset:0 fills the hero.
   z-index:-1 keeps it behind the in-flow content without confining it. */
.hero-command__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-command__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vw;
    max-width: 900px;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(52, 163, 211, 0.28) 0%,
        rgba(52, 163, 211, 0.12) 32%,
        rgba(26, 31, 54, 0) 68%);
    filter: blur(20px);
    animation: heroGlowDrift 16s ease-in-out infinite alternate;
}
.hero-command__scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(109, 186, 204, 0) 15%,
        rgba(109, 186, 204, 0.55) 50%,
        rgba(109, 186, 204, 0) 85%, transparent 100%);
    box-shadow: 0 0 14px rgba(52, 163, 211, 0.5);
    opacity: 0.7;
    animation: heroScanDown 9s linear infinite;
}

/* ── Hero content ──────────────────────────────────────────────────────────── */
.hero-command__content { text-align: center; max-width: 920px; margin: 0 auto; }

/* Brand lockup — the company logo, wordmark and slogan stacked as the dominant,
   centered focal point of the hero. Logo on top, "METAMORPH" wordmark beneath,
   then the slogan tagline. No glass badge: the lockup stands on its own. */
.hero-command__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}
.hero-command__brand img.hero-command__brand-mark {
    height: 110px;
    width: auto;
    max-width: 100%;
    display: block;
}
/* Slogan presented as the hero wordmark — same display treatment as the
   original brand name, tuned to wrap gracefully across a few words. */
.hero-command__brand-name {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: 0.12em;
    line-height: 1.12;
    text-transform: uppercase;
    /* Wordmark fill varies from white into the brand blue, top → bottom,
       so the two lines read white then dark-bluish. */
    background: linear-gradient(180deg, #FFFFFF 0%, #BFE0EC 38%, #34A3D3 78%, #2982A8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Sub-slogan beneath the wordmark — light, descriptive positioning line. */
.hero-command__subslogan {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: #E8EEF2;
    max-width: 620px;
    margin: 18px auto 4px;
    text-align: center;
}

/* Visually-hidden SEO/accessibility heading (page H1, not displayed) */
.hero-command__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-command__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6DBACC;
    margin-bottom: 26px;
    white-space: nowrap;
}
/* The single-line eyebrow only fits on desktop; below the frozen desktop layout
   let it wrap (centred, dot above) — otherwise its intrinsic width forces the
   whole hero off-centre. These wrapping props are mobile-only so the frozen
   >=992px hero stays byte-identical to before. */
@media (max-width: 991px) {
    .hero-command__eyebrow {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
}
.hero-command__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34A3D3;
    box-shadow: 0 0 0 0 rgba(52, 163, 211, 0.6);
    animation: heroDotPulse 2.4s ease-out infinite;
}
.hero-command__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 22px;
}
.hero-command__title .l1,
.hero-command__title .l2 { display: block; }
.hero-command__title .l2 { color: #6DBACC; }

.hero-command__support {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.6;
    color: #A6CACC;
    max-width: 640px;
    margin: 0 auto 34px;
}
.hero-command__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 40px;
}
.hero-command__btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 2px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
                transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-command__btn--primary {
    background: #34A3D3;
    color: #11152A;
    border: 1px solid #34A3D3;
}
.hero-command__btn--primary:hover {
    background: #6DBACC;
    border-color: #6DBACC;
    color: #11152A;
    transform: translateY(-2px);
    box-shadow: 0 10px 34px rgba(52, 163, 211, 0.4);
}
.hero-command__btn--ghost {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(166, 202, 204, 0.45);
}
.hero-command__btn--ghost:hover {
    border-color: #6DBACC;
    color: #6DBACC;
    transform: translateY(-2px);
}
.hero-command__trust {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #A6CACC;
}
.hero-command__trust .sep { color: #2982A8; font-weight: 700; }

@keyframes heroGlowDrift {
    0%   { transform: translate(-54%, -52%) scale(1);    opacity: 0.85; }
    50%  { transform: translate(-46%, -48%) scale(1.08); opacity: 1; }
    100% { transform: translate(-52%, -54%) scale(1.02); opacity: 0.9; }
}
@keyframes heroScanDown {
    0%   { transform: translateY(0);     opacity: 0; }
    8%   { opacity: 0.7; }
    92%  { opacity: 0.7; }
    100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes heroDotPulse {
    0%   { box-shadow: 0 0 0 0  rgba(52, 163, 211, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 163, 211, 0); }
    100% { box-shadow: 0 0 0 0  rgba(52, 163, 211, 0); }
}

@media (max-width: 767px) {
    .hero-command__eyebrow { letter-spacing: 0.2em; font-size: 11px; }
    .hero-command__actions .hero-command__btn { flex: 1 1 auto; text-align: center; }
    .hero-command__brand { gap: 12px; margin-bottom: 26px; }
    .hero-command__brand img.hero-command__brand-mark { height: 72px; }
    .hero-command__brand-name { font-size: 26px; letter-spacing: 0.1em; }
}

@media (max-width: 600px) {
    .hero-command__brand { gap: 10px; }
    .hero-command__brand img.hero-command__brand-mark { height: 60px; }
    .hero-command__brand-name { font-size: 22px; letter-spacing: 0.08em; }
}

/* ── Contained command-bar header (floats over the hero) ───────────────────────
   Targets the header's top-level flexbox container directly, because Elementor
   does not render `_css_classes` injected via raw _elementor_data in this stack.
   .e-con.e-parent is the single top-level container of the header template. */
/* Keep the header painting above the hero: the hero is pulled up behind the
   header (-100px) and creates its own stacking context, so the header wrapper
   needs an explicit higher z-index or the dark hero covers the floating bar. */
.elementor-location-header {
    position: relative;
    z-index: 1000;
}
.elementor-location-header .e-con.e-parent {
    max-width: 100%;
    width: 100%;                 /* full-width bar, logo & contact button on the edges */
    margin: 0 !important;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(166, 202, 204, 0.4);
    box-shadow: 0 10px 30px rgba(26, 31, 54, 0.18);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* solid, full-width once the page scrolls (header-scrolled added by sticky-header.js) */
.elementor-location-header.header-scrolled .e-con.e-parent {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    border-color: transparent;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 14px rgba(26, 31, 54, 0.10);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Group the logo beside the nav items (instead of pinned to the left edge):
   stop the nav from growing to fill, and right-align the logo+nav cluster. */
.elementor-location-header .e-con.e-parent {
    justify-content: center !important;
    gap: 36px;
}
.elementor-location-header .e-con.e-parent > .elementor-widget-nav-menu {
    flex-grow: 0 !important;
    flex-basis: auto !important;
}
/* burger icon: bar is light in both states, so keep it dark */
.elementor-location-header .e-con.e-parent .elementor-menu-toggle svg {
    fill: var(--color-text-dark);
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-command__glow {
        animation: none !important;
        transform: translate(-50%, -50%) !important;
    }
    .hero-command__scan { display: none !important; }
    .hero-command__dot { animation: none !important; }
    .elementor-location-header .e-con.e-parent { transition: none !important; }
    .two-div__card { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TWO-DIVISION EXPLAINER — homepage "What We Do"
   Both practices are presented as equal: one identical light card style, no
   emphasised vs secondary panel. Self-contained .two-div block inside an HTML
   widget (Elementor drops raw-injected _css_classes — see memory).
   ════════════════════════════════════════════════════════════════════════════ */
.two-div { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.two-div__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.two-div__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.two-div__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0 0 16px;
}
.two-div__lead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
.two-div__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}
/* Both practices render with one identical card style (light). Any lingering
   --lead / --support modifier would resolve to the same look. */
.two-div__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radii-xl);
    padding: 40px;
    background: #FFFFFF;
    color: var(--color-text-body);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 30px rgba(26, 31, 54, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.two-div__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26, 31, 54, 0.14);
}
.two-div__tag {
    align-self: flex-start;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radii-full);
    margin-bottom: 18px;
    background: var(--color-bg-light);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}
.two-div__card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.25;
    margin: 0 0 14px;
    color: var(--color-text-dark);
}
.two-div__card-desc {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0 0 22px;
    color: var(--color-text-light);
}
.two-div__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 26px;
}
.two-div__chips li {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radii-full);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    color: var(--color-text-body);
}
.two-div__link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.2s ease;
    color: var(--color-primary);
}
.two-div__link:hover { color: var(--color-primary-dark); }

@media (max-width: 860px) {
    .two-div__grid { grid-template-columns: 1fr; gap: 20px; }
    .two-div__card { padding: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   WHY-CHOOSE CARDS — homepage "Why Choose Metamorph"
   Rebuilt as a self-contained .why-grid block (inline-SVG icons) because the
   previous icon-box columns relied on a _css_classes hook Elementor drops.
   ════════════════════════════════════════════════════════════════════════════ */
.why-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.why-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-xl);
    padding: 32px;
    box-shadow: 0 8px 30px rgba(26, 31, 54, 0.06);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.why-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-primary);
    transition: width 0.3s ease;
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26, 31, 54, 0.12);
}
.why-card:hover::before { width: 100%; }
.why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radii-lg);
    background: rgba(52, 163, 211, 0.10);
    color: var(--color-primary);
    margin-bottom: 20px;
}
.why-card__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.why-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 10px;
}
.why-card__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
@media (max-width: 980px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-card { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .why-card, .why-card::before { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   INDUSTRIES — homepage "Industries Served" (sector pills)
   Self-contained .industries block (HTML widget) — Elementor drops raw-injected
   _css_classes, so all styling hooks live on markup we control.
   ════════════════════════════════════════════════════════════════════════════ */
.industries {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}
.industries__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.industries__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0 0 16px;
}
.industries__lead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0 auto;
    max-width: 680px;
}
.industries__pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 30px 0 34px;
}
.industries__pills li {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-body);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-full);
    padding: 10px 18px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.industries__pills li:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    background: rgba(52, 163, 211, 0.06);
    transform: translateY(-2px);
}
.industries__cta {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    background: var(--color-primary);
    padding: 14px 30px;
    border-radius: var(--radii-md);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.industries__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(52, 163, 211, 0.3);
}
@media (prefers-reduced-motion: reduce) {
    .industries__pills li, .industries__cta { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   STAT BAND — homepage factual figures (navy band, no fabricated stats)
   Self-contained .statband block (HTML widget). Ondo numerals via --font-stat.
   ════════════════════════════════════════════════════════════════════════════ */
.statband {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}
.statband__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6DBACC;
    margin-bottom: 30px;
}
.statband__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.statband__item { padding: 0 56px; }
.statband__num {
    font-family: var(--font-stat);
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #34A3D3;
}
.statband__label {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 12px;
}
.statband__divider {
    width: 1px;
    height: 64px;
    background: rgba(166, 202, 204, 0.25);
}
@media (max-width: 600px) {
    .statband__row { flex-direction: column; gap: 32px; }
    .statband__item { padding: 0; }
    .statband__divider { width: 64px; height: 1px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ABOUT INTRO — homepage about points (check-list)
   ════════════════════════════════════════════════════════════════════════════ */
.about-intro { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.about-intro__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.about-intro__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.25;
    color: var(--color-text-dark);
    margin: 0 0 28px;
    max-width: 620px;
}
.about-intro__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.about-intro__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--color-text-body);
}
.about-intro__check {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(52, 163, 211, 0.12);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}
.about-intro__check svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL CTA BAND — homepage closing call to action (navy→blue gradient)
   ════════════════════════════════════════════════════════════════════════════ */
.cta-band {
    position: relative;
    overflow: hidden;
    padding: 64px 24px;
    text-align: center;
    background: linear-gradient(120deg, #1A1F36 0%, #2982A8 62%, #34A3D3 100%);
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 52%);
    pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.cta-band__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 12px;
}
.cta-band__note {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 28px;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band__btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 32px;
    border-radius: var(--radii-md);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-band__btn--solid { background: #FFFFFF; color: #1A1F36; border: 1px solid #FFFFFF; }
.cta-band__btn--solid:hover,
.cta-band__btn--solid:focus { color: #1A1F36; background: rgba(255, 255, 255, 0.9); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }
.cta-band__btn--ghost { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); }
.cta-band__btn--ghost:hover,
.cta-band__btn--ghost:focus { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .cta-band__btn { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE HERO — reusable interior-page header (navy, behind the floating nav)
   ════════════════════════════════════════════════════════════════════════════ */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 150px 24px 90px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(41, 130, 168, 0.12) 0%, rgba(41, 130, 168, 0) 55%),
        linear-gradient(180deg, #1A1F36 0%, #11152A 100%);
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(109, 186, 204, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 186, 204, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.page-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6DBACC;
    margin-bottom: 18px;
}
.page-hero__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 18px;
}
.page-hero__lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.7;
    color: #A6CACC;
    max-width: 640px;
    margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   TILE GRID — reusable simple card grid (values / structure / priorities)
   ════════════════════════════════════════════════════════════════════════════ */
.tile-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.tile-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; }
.tile-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-xl);
    padding: 30px;
    box-shadow: 0 8px 30px rgba(26, 31, 54, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26, 31, 54, 0.12);
}
.tile-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 10px;
}
.tile-card__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
/* dark variant for navy sections */
.tile-card--dark { background: rgba(255, 255, 255, 0.04); border-color: rgba(166, 202, 204, 0.15); box-shadow: none; }
.tile-card--dark .tile-card__title { color: #FFFFFF; }
.tile-card--dark .tile-card__desc { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 980px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tile-grid, .tile-grid--2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tile-card { transition: none !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION HEAD — reusable centred eyebrow + title + lead (precedes a grid)
   ════════════════════════════════════════════════════════════════════════════ */
.section-head { max-width: 760px; margin: 0 auto 44px; padding: 0 24px; text-align: center; }
.section-head__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.section-head__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0 0 14px;
}
.section-head__lead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   STEPS — reusable numbered process timeline (Approach lifecycle)
   ════════════════════════════════════════════════════════════════════════════ */
.steps { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.step { position: relative; display: flex; gap: 22px; padding-bottom: 34px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 50px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}
.step__num {
    position: relative;
    z-index: 1;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-stat);
    font-weight: 500;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.step__body { padding-top: 4px; }
.step__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 6px;
}
.step__desc {
    font-family: var(--font-body);
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
@media (max-width: 600px) {
    .step__num { width: 40px; height: 40px; font-size: 17px; }
    .step:not(:last-child)::before { left: 19px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CALLOUT — reusable left-accent note box
   ════════════════════════════════════════════════════════════════════════════ */
.callout {
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 24px;
    background: rgba(52, 163, 211, 0.06);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radii-md);
    font-family: var(--font-body);
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--color-text-body);
}
.callout strong { color: var(--color-text-dark); }

/* ════════════════════════════════════════════════════════════════════════════
   CERT TABLE — governance certifications
   ════════════════════════════════════════════════════════════════════════════ */
.cert-table-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.cert-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-lg);
    overflow: hidden;
}
.cert-table th {
    background: var(--color-bg-dark);
    color: #FFFFFF;
    text-align: left;
    padding: 15px 20px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
}
.cert-table td {
    padding: 15px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-dark);
    border-top: 1px solid var(--color-border);
}
.cert-table .cert-status {
    display: inline-block;
    background: rgba(255, 193, 7, 0.16);
    color: #9a7400;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: var(--radii-full);
}

/* ── Linked card variants (service archive) ──────────────────────────────────── */
.tile-card--link { display: block; text-decoration: none; color: inherit; }
.why-card__title a { color: inherit; text-decoration: none; }
.why-card:hover .why-card__title a { color: var(--color-primary); }

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE-SERVICE HERO — match the interior .page-hero look
   The single template's hero keeps dynamic post-title/excerpt widgets, so the
   navy gradient + control-room grid are applied to the first single section
   (Elementor drops raw-injected _css_classes, so this is targeted structurally).
   ════════════════════════════════════════════════════════════════════════════ */
.elementor-location-single .elementor-top-section:first-of-type {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 60vh;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(41, 130, 168, 0.12) 0%, rgba(41, 130, 168, 0) 55%),
        linear-gradient(180deg, #1A1F36 0%, #11152A 100%) !important;
}
.elementor-location-single .elementor-top-section:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(109, 186, 204, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 186, 204, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
@media (max-width: 767px) {
    .elementor-location-single .elementor-top-section:first-of-type h1 { font-size: 32px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO BACKGROUND IMAGES — darkened professional photos behind interior heroes.
   Each photo sits under a navy overlay gradient so the white hero text and the
   light-blue eyebrow/lead stay legible. Scoped by WordPress body/page classes,
   so no template/pipeline edits are needed. The animated control-room grid
   (::before) and the homepage "Command Centre" hero are left untouched.
   ════════════════════════════════════════════════════════════════════════════ */
.page-id-189 .page-hero,                 /* About */
.page-id-190 .page-hero,                 /* Contact */
.page-id-248 .page-hero,                 /* Approach */
.page-id-249 .page-hero,                 /* Governance */
.page-id-214 .page-hero,                 /* Insights */
.post-type-archive-metamorph_service .page-hero,                                  /* Services archive */
.single-metamorph_service .elementor-location-single .elementor-top-section:first-of-type {  /* Single service */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.page-id-189 .page-hero {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/profile-bg-1.jpg") !important;
}
.page-id-190 .page-hero {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/profile-hero-2.jpg") !important;
}
.page-id-248 .page-hero {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/profile-hero-7.jpg") !important;
}
.page-id-249 .page-hero {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/hero-governance.jpg") !important;
}
.page-id-214 .page-hero {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/hero-insights.jpg") !important;
}
.post-type-archive-metamorph_service .page-hero {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/profile-hero-8.jpg") !important;
}
.single-metamorph_service .elementor-location-single .elementor-top-section:first-of-type {
    background-image:
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/profile-bg-3.jpg") !important;
}

/* Services pages: drop Elementor's default 10px column padding so the full-width
   blocks (.page-hero / .section-head / grids) sit flush. */
.elementor-location-archive .elementor-widget-wrap.elementor-element-populated,
.elementor-location-single .elementor-widget-wrap.elementor-element-populated {
    padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE INSIGHT POST — style the default theme single template to match the
   site (navy image hero + readable content), so clicking an insight no longer
   lands on a bare, off-brand page. Comments are removed in functions.php.
   ════════════════════════════════════════════════════════════════════════════ */
body.single-post .site-main {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
}
body.single-post .page-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    margin: 0;
    padding: 150px 24px 90px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(41, 130, 168, 0.12) 0%, rgba(41, 130, 168, 0) 55%),
        linear-gradient(180deg, rgba(20, 24, 44, 0.86) 0%, rgba(17, 21, 42, 0.93) 100%),
        url("/wp-content/uploads/2026/06/hero-insights.jpg") center center / cover no-repeat;
}
body.single-post .page-header::before {
    content: "Insights";
    display: block;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6DBACC;
    margin-bottom: 18px;
}
body.single-post .page-header .entry-title {
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 820px;
    margin: 0 auto;
}
body.single-post .page-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 24px 96px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-body);
}
body.single-post .page-content h2,
body.single-post .page-content h3 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    line-height: 1.25;
}
body.single-post .page-content h2 { font-size: 1.6rem; margin: 44px 0 16px; }
body.single-post .page-content h3 { font-size: 1.25rem; margin: 32px 0 12px; }
body.single-post .page-content a { color: var(--color-primary); }
body.single-post .page-content a:hover { color: var(--color-primary-dark); }
body.single-post .page-content img { max-width: 100%; height: auto; border-radius: var(--radii-lg); }
/* Belt-and-suspenders: hide any comments markup if a plugin re-opens them */
body.single-post #comments,
body.single-post .comments-area { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — filter pills + posts grid cards
   ════════════════════════════════════════════════════════════════════════════ */
.insight-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto 44px;
    padding: 0 24px;
}
.insight-filters a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--color-text-body);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-full);
    padding: 9px 18px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.insight-filters a:hover,
.insight-filters a.is-active {
    color: #FFFFFF;
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

/* Posts grid — Elementor Posts widget (classic skin) styled as cards */
.elementor-widget-posts .elementor-post {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-xl);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(26, 31, 54, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}
.elementor-widget-posts .elementor-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26, 31, 54, 0.12);
}
.elementor-widget-posts .elementor-post__thumbnail { border-radius: 0; }
.elementor-widget-posts .elementor-post__thumbnail img { width: 100%; height: 200px; object-fit: cover; }
.elementor-widget-posts .elementor-post__text { padding: 24px; }
.elementor-widget-posts .elementor-post__title { margin: 0 0 10px; }
/* !important to beat Elementor's later-loaded global typography rule for
   .elementor-widget-posts .elementor-post__title a (same specificity). */
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    color: var(--color-text-dark) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__title a { color: var(--color-primary) !important; }
.elementor-widget-posts .elementor-post__meta-data {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--color-text-light);
    margin-bottom: 10px;
}
.elementor-widget-posts .elementor-post__excerpt p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
.elementor-widget-posts .elementor-post__read-more {
    margin-top: 16px;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}
.elementor-widget-posts .elementor-post__read-more:hover { color: var(--color-primary-dark); }
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-posts .elementor-post, .insight-filters a { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SEARCH RESULTS (/?s=) — match the Insights grid.
   The search template renders results through Elementor's *archive-posts*
   widget, which the .elementor-widget-posts card rules above never reach. Mirror
   that card design here, drop the noisy "/// No Comments" meta, and give the
   "nothing found" state a proper, centred treatment.
   ════════════════════════════════════════════════════════════════════════════ */
/* The results section is full-width; contain it to the site content width so the
   grid lines up with the hero heading and footer instead of running edge-to-edge. */
.search .elementor-widget-archive-posts {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
.search .elementor-widget-archive-posts .elementor-post {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radii-xl);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(26, 31, 54, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}
.search .elementor-widget-archive-posts .elementor-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26, 31, 54, 0.12);
}
.search .elementor-widget-archive-posts .elementor-post__thumbnail img {
    width: 100%; height: 200px; object-fit: cover;
}
.search .elementor-widget-archive-posts .elementor-post__text { padding: 24px; }
.search .elementor-widget-archive-posts .elementor-post__title { margin: 0 0 10px; }
.search .elementor-widget-archive-posts .elementor-post__title,
.search .elementor-widget-archive-posts .elementor-post__title a {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    color: var(--color-text-dark) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.search .elementor-widget-archive-posts .elementor-post:hover .elementor-post__title a {
    color: var(--color-primary) !important;
}
.search .elementor-widget-archive-posts .elementor-post__meta-data {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--color-text-light);
    margin-bottom: 10px;
}
/* Drop "/// No Comments" — keep just the date, like the Insights cards. */
.search .elementor-widget-archive-posts .elementor-post-avatar { display: none; }
.search .elementor-widget-archive-posts .elementor-post__excerpt p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
.search .elementor-widget-archive-posts .elementor-post__read-more {
    margin-top: 16px;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}
.search .elementor-widget-archive-posts .elementor-post__read-more:hover {
    color: var(--color-primary-dark);
}
/* No-results state — centred, branded, with breathing room (was tiny, flush-left). */
.search .elementor-widget-archive-posts .elementor-posts-nothing-found {
    grid-column: 1 / -1;
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 24px 72px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.4;
    color: var(--color-text-dark) !important;
}
@media (prefers-reduced-motion: reduce) {
    .search .elementor-widget-archive-posts .elementor-post { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY / BLOG ARCHIVE HERO — match .page-hero (general archive template)
   Scoped to non-CPT archives so the service archive (post-type-archive) keeps
   its own .page-hero block untouched.
   ════════════════════════════════════════════════════════════════════════════ */
body.archive:not(.post-type-archive) .elementor-location-archive .elementor-top-section:first-of-type {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 60vh;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(41, 130, 168, 0.12) 0%, rgba(41, 130, 168, 0) 55%),
        linear-gradient(180deg, #1A1F36 0%, #11152A 100%) !important;
}
body.archive:not(.post-type-archive) .elementor-location-archive .elementor-top-section:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(109, 186, 204, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 186, 204, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
/* Archive title in the category hero — white + sized (beat Elementor globals) */
body.archive:not(.post-type-archive) .elementor-location-archive .elementor-top-section:first-of-type .elementor-heading-title {
    color: #FFFFFF !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: clamp(2.2rem, 5vw, 2.9rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
}
@media (max-width: 767px) {
    body.archive:not(.post-type-archive) .elementor-location-archive .elementor-top-section:first-of-type .elementor-heading-title { font-size: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE AUDIT FIXES — mobile & tablet only (desktop >=992px is untouched)
   Every rule below is scoped to max-width <= 991px and is therefore inert at
   desktop widths. See planning/responsive/ for the full audit + rationale.
   ═══════════════════════════════════════════════════════════════════════════ */

/* RSP-001 — Header command-bar overflow on small phones (h-scroll, every page).
   The nav-menu widget keeps an off-canvas dropdown panel (~191px, position:
   absolute) anchored toward the right edge; on a 320px screen it extends ~18px
   past the viewport, creating a page-wide horizontal scroll on EVERY page.
   Clip the header's horizontal overflow only: overflow-y stays visible so the
   dropdown still drops down when opened, and the sticky header is unaffected. */
@media (max-width: 767px) {
    .elementor-location-header {
        overflow-x: clip;
    }
}

/* RSP-004 — Content tables forcing page-wide horizontal scroll (blog/CPT posts).
   Raw <table>s in page/post content are wider than a phone; let them scroll
   inside their own container instead of breaking the whole page. */
@media (max-width: 767px) {
    .page-content table,
    .elementor-widget-text-editor table,
    .elementor-widget-theme-post-content table,
    .entry-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* RSP-002 — Hamburger toggle touch target: 33px -> 44px (WCAG 2.5.5).
   Scoped to <=991px so the frozen 992-1024 band (where the burger also shows)
   is left exactly as approved. */
@media (max-width: 991px) {
    .elementor-location-header .elementor-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* RSP-003 — Dropdown menu items >=48px tap targets on tablet too.
   The existing min-height:44px rule only covered <=767px, leaving the
   768-991px dropdown items at ~40px. */
@media (max-width: 991px) {
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-nav-menu--dropdown .elementor-sub-item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* RSP-005 — Footer link grid: stack the fluid 2-column list on small phones,
   where each 1fr cell shrinks to ~140px (<=428px). Inline style -> !important. */
@media (max-width: 480px) {
    .elementor-location-footer [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* RSP-006 — Footer links: comfortable tap area + readable size on phones.
   Inline links report ~18px tall; give them block padding (>=24px AA target)
   and lift 13px link text to 14px. */
@media (max-width: 767px) {
    .elementor-location-footer a {
        display: inline-block;
        padding-block: 5px;
        font-size: 14px;
    }
}

/* RSP-007 — Menu toggle open-state styling: remove Elementor's default grey
   background box (background-color: rgba(0,0,0,0.05)) that appears behind the
   hamburger/close icon — most noticeable when the menu is open. The icon alone
   is the control. The burger only exists at <=1024px (dropdown-tablet), so this
   never touches the >=1025px desktop horizontal nav. */
@media (max-width: 1024px) {
    .elementor-location-header .elementor-menu-toggle,
    .elementor-location-header .elementor-menu-toggle.elementor-active,
    .elementor-location-header .elementor-menu-toggle:hover,
    .elementor-location-header .elementor-menu-toggle:focus {
        background-color: transparent !important;
    }
}

/* RSP-008 — Enhanced mobile/tablet menu (refined, on-brand polish).
   Mobile menu ONLY (<=1024px burger zone); the desktop horizontal nav (>=1025px)
   is untouched. Turns the narrow right-floating 191px dropdown into a clean
   full-width panel anchored under the fixed header bar, with brand-teal accents,
   row dividers, and a refined active state (teal left-bar instead of a dark
   block). Brand palette: #34A3D3 / #2982A8 / #6DBACC, navy #1A1F36. */
@media (max-width: 1024px) {
    /* Anchor the panel to the full-width fixed header bar, not the narrow widget */
    .elementor-location-header .elementor-widget-nav-menu { position: static !important; }
    .elementor-location-header nav.elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-top: 3px solid var(--color-primary) !important;
        box-shadow: 0 16px 32px rgba(26, 31, 54, 0.18) !important;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    /* Menu rows: comfortable spacing + subtle dividers (exclude the CTA item) */
    .elementor-location-header .elementor-nav-menu--dropdown li:not(.nav-cta-btn) > .elementor-item,
    .elementor-location-header .elementor-nav-menu--dropdown li:not(.nav-cta-btn) > .elementor-sub-item {
        padding: 15px 24px !important;
        border-bottom: 1px solid var(--neutral-100) !important;
        background: #ffffff !important;
        color: var(--color-text-dark) !important;
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
    }
    /* Drop the desktop hover-underline animation inside the panel */
    .elementor-location-header .elementor-nav-menu--dropdown .elementor-item::after { display: none !important; }

    /* Hover / focus: soft brand-teal tint */
    .elementor-location-header .elementor-nav-menu--dropdown li:not(.nav-cta-btn) > .elementor-item:hover,
    .elementor-location-header .elementor-nav-menu--dropdown li:not(.nav-cta-btn) > .elementor-item:focus,
    .elementor-location-header .elementor-nav-menu--dropdown li:not(.nav-cta-btn) > .elementor-sub-item:hover {
        background: var(--color-bg-light) !important;
        color: var(--color-primary-dark) !important;
    }

    /* Active item: teal left-accent bar + soft tint (replaces the heavy dark block) */
    .elementor-location-header .elementor-nav-menu--dropdown li:not(.nav-cta-btn) > .elementor-item.elementor-item-active {
        background: rgba(52, 163, 211, 0.08) !important;
        color: var(--color-primary-dark) !important;
        box-shadow: inset 4px 0 0 var(--color-primary) !important;
        font-weight: 600 !important;
    }

    /* Sub-menu (service children): light inset panel */
    .elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
        background: var(--color-bg-light) !important;
        box-shadow: inset 0 1px 0 var(--neutral-200) !important;
    }
    .elementor-location-header .elementor-nav-menu--dropdown .sub-menu li:not(.nav-cta-btn) > .elementor-sub-item {
        background: transparent !important;
        border-bottom-color: var(--neutral-200) !important;
    }

    /* CONTACT CTA: prominent full-width button with breathing room inside the panel */
    .elementor-location-header .elementor-nav-menu--dropdown .nav-cta-btn {
        padding: 16px 20px !important;
        border-bottom: 0 !important;
    }
    .elementor-location-header .elementor-nav-menu--dropdown .nav-cta-btn > .elementor-item {
        justify-content: center !important;
        border-radius: var(--radii-lg) !important;
        padding: 14px 22px !important;
        box-shadow: 0 6px 16px rgba(52, 163, 211, 0.28) !important;
    }

    /* Toggle: subtle teal affordance on hover/active */
    .elementor-location-header .elementor-menu-toggle:hover svg,
    .elementor-location-header .elementor-menu-toggle:focus svg {
        fill: var(--color-primary) !important;
    }
}

/* RSP-009 — Interior page-hero top clearance on mobile/tablet.
   The fixed 100px header overlaps the dark page-hero, leaving the first hero
   text (eyebrow) only ~33-36px below the navbar on phones — it reads as stuck.
   Add breathing room so the text clears the navbar. Scoped <=991px; the desktop
   hero spacing (>=992px) is the approved layout and stays frozen. */
@media (max-width: 991px) {
    /* .page-hero pages (About, Contact, Approach, Governance, Insights, Services archive) */
    .page-hero__inner { padding-top: 48px; }
    /* Single-service hero uses an Elementor section, not .page-hero__inner */
    .single-metamorph_service .elementor-location-single .elementor-top-section:first-of-type > .elementor-container {
        padding-top: 48px;
    }
}

/* RSP-010 — Legal pages (Privacy, Terms, Cookie) content tucked behind the navbar.
   These use the plain default template (no Elementor hero), so the global
   `.site-main { margin-top: -118px }` pull — which hero pages compensate for with
   >= var(--header-h) top padding — leaves their breadcrumb/title behind the fixed
   header at ALL widths (desktop included). Add the compensating top padding so the
   content clears the navbar. Scoped to the 3 legal page IDs only — no other page is
   affected. NOTE: this is an intentional desktop change (the bug exists on desktop
   too), so it is deliberately NOT media-scoped; the pixel gate confirms only these
   pages change and all others stay 0-diff. */
body.page-id-218 .site-main,
body.page-id-219 .site-main,
body.page-id-220 .site-main {
    padding-top: calc(var(--header-h) + 40px);
}

/* ── Header search ────────────────────────────────────────────────────────────
   Elementor Pro search-form widget (full_screen / icon-toggle skin) added to the
   global header via scripts/add-header-search.py with class .metamorph-header-search.
   The navbar shows only a magnifier; clicking it opens a full-screen search field
   that submits to native WP search (/?s=query). Colour tracks the nav's states:
   dark icon by default AND when scrolled, primary blue on hover. We use the same
   `html body` specificity trick as the wp_head nav override so Elementor's widget
   defaults don't win.
────────────────────────────────────────────────────────────────────────────── */

/* Toggle button: centred, comfortable 44px tap target, sits right of the menu */
.elementor-location-header .metamorph-header-search .elementor-search-form__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}
.elementor-location-header .metamorph-header-search .elementor-search-form__toggle i {
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s ease;
}

/* Default + scrolled states: dark icon (matches nav links in both states) */
html body .elementor-location-header .metamorph-header-search .elementor-search-form__toggle,
html body .elementor-location-header .metamorph-header-search .elementor-search-form__toggle i,
html body .elementor-location-header.header-scrolled .metamorph-header-search .elementor-search-form__toggle,
html body .elementor-location-header.header-scrolled .metamorph-header-search .elementor-search-form__toggle i {
    color: var(--color-text-dark) !important;
    fill:  var(--color-text-dark) !important;
}

/* Hover: primary blue (matches nav link hover) */
html body .elementor-location-header .metamorph-header-search .elementor-search-form__toggle:hover,
html body .elementor-location-header .metamorph-header-search .elementor-search-form__toggle:hover i,
html body .elementor-location-header.header-scrolled .metamorph-header-search .elementor-search-form__toggle:hover,
html body .elementor-location-header.header-scrolled .metamorph-header-search .elementor-search-form__toggle:hover i {
    color: var(--color-primary) !important;
    fill:  var(--color-primary) !important;
}

/* Keep the full-screen search overlay above the fixed/sticky header */
.metamorph-header-search .elementor-search-form__container {
    z-index: 10000 !important;
}

/* RSP-011 — Footer gutters on mobile/tablet. The boxed footer container drops to
   full-width below the desktop layout, so its text sits flush against the screen
   edges. Restore the site's 24px content gutter (matching the rest of the page's
   container) so the footer no longer looks edged. Scoped <=991px to stay below
   the frozen desktop layout. */
@media (max-width: 991px) {
    .elementor-location-footer .elementor-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* RSP-012 — Native-widget sections (headings, paragraphs, accordions, lists) on
   the About, Contact and single-service templates were authored with zero side
   padding, so their text sits flush against the screen edges on mobile. Add the
   site's 24px content gutter at the section-container level, skipping any section
   whose content is a self-padding custom HTML block (.elementor-widget-html, e.g.
   .about-intro / .tile-grid / card grids) so those don't get doubled. Scoped
   <=991px to keep the frozen desktop layout untouched. */
@media (max-width: 991px) {
    body.elementor-page-189 .elementor-top-section > .elementor-container:not(:has(.elementor-widget-html)),
    body.elementor-page-190 .elementor-top-section > .elementor-container:not(:has(.elementor-widget-html)),
    body.single-metamorph_service .elementor-top-section > .elementor-container:not(:has(.elementor-widget-html)) {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* RSP-013 — Mobile/tablet navbar order. The header container centres all three
   items (logo, burger, search). Re-lay them out for the burger zone: logo hard
   left, then the search icon and burger grouped hard right with the burger
   outermost. A 20px edge gutter keeps the logo and burger off the screen edges.
   Scoped <=1024px (the burger zone); the >=1025px horizontal nav is untouched. */
@media (max-width: 1024px) {
    .elementor-location-header .e-con.e-parent {
        justify-content: flex-start !important;
        gap: 10px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /* logo far left; the auto margin pushes search + burger to the far right */
    .elementor-location-header .e-con.e-parent > .elementor-widget-image {
        order: 0;
        margin-right: auto;
    }
    /* search icon sits immediately left of the burger */
    .elementor-location-header .e-con.e-parent > .metamorph-header-search {
        order: 1;
    }
    /* burger outermost (far right) */
    .elementor-location-header .e-con.e-parent > .elementor-widget-nav-menu {
        order: 2;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .elementor-location-header .e-con.e-parent > .elementor-widget-nav-menu .elementor-menu-toggle {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}