/*
Theme Name: JSchmid
Theme URI: https://jschmid.com/
Description: Child theme of Twenty Twenty-One for WPBakery-based layouts.
Author: Todd Van Arsdale / SILO
Template: twentytwentyone
Version: 1.0.0
Text Domain: jschmid
*/


/* Google Fonts loaded via wp_enqueue_style in functions.php (not @import). */


:root {
  --global--color-background: #fff;

  --size-font-body: 20px;
  --size-font-heads: 64px;

  --color-brand: #FA0B0B;
  --color-bg: #F2F1EC;
  --color-bg-gray: #F5F5F5;
  --color-text-body: #090909;
  --color-text-head: #231F20;

  --global--font-primary: 'Montserrat', sans-serif;
  --global--font-secondary: 'Oswald', sans-serif;

  /* Layout tokens */
  --container-max: 1920px;
  --container-wide: 1362px;
  --container-content: 1362px;
  --section-pad: 52px;
  --gap-grid: 20px;

  /* Spacing tokens */
  --gap-section: 80px;
  --gap-row: 24px;
  --gap-element: 16px;
}


/* =========================================
   LAYOUT UTILITIES
   ========================================= */

.container-wide {
  max-width: var(--container-wide, 1640px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.container-content {
  max-width: var(--container-content, 1362px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section-pad {
  padding-top: var(--section-pad, 52px);
  padding-bottom: var(--section-pad, 52px);
}

.text-center {
  text-align: center;
}

/* Client 2026-09-09: the services list under a portfolio card drops to 13px.
   Scoped to the portfolio cards only — .caption is shared (person cards carry
   their own 12px override, and other captions keep the 15px default). */
.portfolio-item .caption,
.caption.portfolio-grid__services {
  font-size: 13px;
}

.grid {
  display: grid;
  gap: var(--gap-grid, 20px);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Spacing token reduction — mobile */
@media (max-width: 768px) {
  :root {
    --gap-section: 40px;
    --gap-row: 16px;
  }
}

/* utility: wpbakery edit links */
.edit-link {
    display: block;
    text-align: center;
}

body {
    color: var(--color-text-body, #090909);
}

p, ul, ol, li, blockquote {
    color: var(--color-text-body, #090909);
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* ~22px at 14px */
}

/* ============================================================
   GLOBAL TYPE SCALE (client v3, 2026-08) — single source of truth.
   These !important element rules intentionally win over every
   per-component / page-scoped heading size defined further down, so
   headings render uniform site-wide. To rescale ALL headings, change
   the values here (and the mobile step). The per-component heading sizes that
   used to sit below were removed in the 2026-09 sweep, so these are now the
   only heading sizes in play (h3 excepted — see the note on it below).
   ============================================================ */
h1 {
    font-size: 48px !important;
    letter-spacing: 2.5px !important;
}
h2 {
    font-size: 24px !important;
    letter-spacing: 2.2px !important;
}
/* h3 is a DEFAULT, not an override — deliberately no !important. Every h3 we
   render carries a class that sets its own size (icon-card__title 18px,
   content-columns__heading 32px, text-headline-28 28px, …) and a class beats a
   bare element rule, so those keep their sizes. This only catches h3s nothing
   else styles: editor-typed headings, and a component whose Heading Tag
   dropdown is set to H3 — which would otherwise fall back to Twenty
   Twenty-One's own (much larger) h3. */
h3 {
    font-size: 20px;
    letter-spacing: 2px;
}
@media (max-width: 768px) {
    h1 { font-size: 36px !important; }
    /* h2 stays 24px on mobile; h3 stays 20px */
}

.caption {
    color: var(--color-text-body, #090909);
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 24px */
    letter-spacing: 1.5px;
}

.text-headline-64 {
    color: var(--color-text-head, #231F20);
    text-align: center;
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 64px;
    font-style: normal;
    font-weight: 500;
    line-height: 1em;
    text-transform: uppercase;
}

.text-headline-24 {
    color: var(--color-text-head, #231F20);
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 24px;
    letter-spacing: 2.2px;
    font-weight: 500;
    line-height: 1em;
    text-transform: uppercase;
}

.text-headline-28 {
    color: var(--color-text-head, #231F20);
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 33.6px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
}

.text-headline-48 {
    color: var(--color-text-body, #090909);
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 57.6px */
    text-transform: uppercase;
}
/* =========================================
   HEADER — Figma layout + live site functionality
   Parent Theme: Twenty Twenty-One
   TT1 JS toggle: body.primary-navigation-open
   ========================================= */

.site-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
}

/* Offset sticky header below the WP admin bar so it doesn't hide under it on scroll */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Shrink header ~20% after scrolling */
.site-header > .max-liner,
.site-header.is-scrolled > .max-liner {
    transition: height 0.25s ease;
}

.site-header.is-scrolled > .max-liner {
    height: 116px;
}

.site-header.is-scrolled .custom-logo,
.site-header.is-scrolled .site-logo-img {
    width: 114px;
}

.site-header > .max-liner {
    display: flex;
    align-items: center;
    max-width: var(--container-wide, 1640px);
    margin: 0 auto;
    padding: 0 20px;
    height: 145px;
}

/* TT1 full-width resets */
.widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width {
    max-width: inherit;
    width: inherit;
}

.site-main { padding: 0; }
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
    max-width: inherit;
}

/* WPBakery: auto row margins, full-bleed padding reset only on non-contained rows */
.vc_row { margin-left: auto; margin-right: auto; margin-bottom: var(--gap-section, 80px); }
.vc_row:last-child { margin-bottom: 0; }
.vc_row:not(.container-wide) > .vc_column_container.vc_col-sm-12 > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }

/* Full-bleed multi-column rows: strip outer padding on first/last columns, keep internal gutters */
.vc_row.bleed-grid > .vc_column_container:first-child > .vc_column-inner { padding-left: 0 !important; }
.vc_row.bleed-grid > .vc_column_container:last-child > .vc_column-inner { padding-right: 0 !important; }
/* When bleed-grid is inside a constrained container, also strip the container's own side padding */
.vc_row.container-wide.bleed-grid { padding-left: 0 !important; padding-right: 0 !important; }

/* Full-bleed background + constrained content: row bg goes edge-to-edge, columns inset via padding */
.vc_row.contained-grid {
    padding-left: max(20px, calc((100% - var(--container-wide, 1640px)) / 2));
    padding-right: max(20px, calc((100% - var(--container-wide, 1640px)) / 2));
}

/* Row spacing utilities (WPBakery css attr needs unique timestamp ID — use el_class instead) */
.vc_row.row-flush  { margin-bottom: 0 !important; }
.vc_row.row-tight  { margin-bottom: 40px !important; }
.vc_row.row-snug   { margin-bottom: 40px !important; }
.vc_row.pad-tight  { padding-bottom: 20px !important; }
.vc_row.mt-tight   { margin-top: 40px !important; }

/* When tight rows stack on mobile, restore vertical gap between wrapped columns */
@media (max-width: 767px) {
    .vc_row.row-tight > .vc_column_container:not(:last-child) { margin-bottom: 40px; }
}

/* Background utilities */
.vc_row.bg-gray-light { background-color: #F5F5F5 !important; }

/* Section padding utilities */
.vc_row.pt-section  { padding-top: 76px !important; }
.vc_row.pb-section  { padding-bottom: 51px !important; }
.vc_row.pb-0        { padding-bottom: 0 !important; }
.vc_row.ks-note     { margin-top: -60px !important; margin-bottom: 20px !important; }

#contact .vc_column-inner {
    width: 100%;
    max-width: 114rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.widget-area > div.max-liner,
.pagination > div.max-liner,
.comments-pagination > div.max-liner,
.post-navigation > div.max-liner,
.site-footer > div.max-liner,
.site-header > div.max-liner,
.alignwide > div.max-liner,
.wide-max-width {
    max-width: var(--container-wide, 1640px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Logo */
.site-branding {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.site-logo-link {
    display: block;
    text-decoration: none;
}

.site-logo-img,
.custom-logo {
    width: 142px;
    height: auto;
    display: block;
}

.site-title,
.site-description {
    display: none;
}

/* Navigation — shared */
.primary-navigation {
    margin-left: auto;
    padding: 0;
}

.icon-plus,
.icon-minus {
    display: none !important;
}

/* Hamburger hidden by default — mobile query re-shows it below 768px */
.menu-button-container {
    display: none !important;
}


/* =========================================
   DESKTOP NAV (min-width: 768px)
   ========================================= */

@media only screen and (min-width: 768px) {
    .primary-menu-container {
        display: block !important;
        transition: none !important;
        transform: none !important;
    }

    #primary-menu-list {
        display: flex;
        gap: clamp(10px, 6vw - 36px, 80px);
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #primary-menu-list > .menu-item > a {
        font-family: var(--global--font-primary, 'Montserrat', sans-serif);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0;
        color: var(--color-text-body, #090909);
        text-decoration: none;
        transition: color 0.2s ease;
        padding: 8px 0;
        display: block;
    }

    #primary-menu-list > .menu-item > a:hover,
    #primary-menu-list > .menu-item.current-menu-item > a {
        color: var(--color-brand, #FA0B0B);
    }

    /* Hide sub-menu toggle buttons and TT1 +/- icons on desktop */
    .sub-menu-toggle,
    .icon-plus,
    .icon-minus {
        display: none !important;
    }

    /* Dropdown positioning */
    #primary-menu-list > .menu-item {
        position: relative;
    }

    #primary-menu-list .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 200px;
        padding: 8px 0;
        margin: 0;
        list-style: none;
        z-index: 100;
        border: none;
    }

    /* Kill TT1 caret triangle */
    #primary-menu-list .sub-menu::before,
    #primary-menu-list .sub-menu::after {
        display: none !important;
    }

    /* Show on hover or keyboard focus */
    #primary-menu-list > .menu-item:hover > .sub-menu,
    #primary-menu-list > .menu-item:focus-within > .sub-menu {
        display: block;
    }

    /* Client 2026-09-09: the last top-level dropdown (News) is flush with the
       right edge of the nav, so a left-anchored submenu overflows the viewport.
       Anchor it to the item's right edge instead. */
    #primary-menu-list > .menu-item:last-child > .sub-menu {
        left: auto;
        right: 0;
    }

    /* Nested sub-sub-menus (e.g., Blog > Authors) */
    #primary-menu-list .sub-menu .menu-item {
        position: relative;
    }

    #primary-menu-list .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    #primary-menu-list .sub-menu .menu-item:hover > .sub-menu,
    #primary-menu-list .sub-menu .menu-item:focus-within > .sub-menu {
        display: block;
    }

    /* Sub-menu link styling — selector must beat TT1's
       .primary-navigation .sub-menu .menu-item > a */
    .primary-navigation #primary-menu-list .sub-menu .menu-item > a {
        font-family: var(--global--font-primary, 'Montserrat', sans-serif);
        font-size: 13px;
        font-weight: 500;
        color: var(--color-text-body, #090909);
        text-decoration: none;
        padding: 6px 20px;
        display: block;
        text-transform: none;
        letter-spacing: 0.5px;
        white-space: nowrap;
        font-style: normal;
    }

    .primary-navigation #primary-menu-list .sub-menu .menu-item > a:hover {
        color: var(--color-brand, #FA0B0B);
        background-color: #f9f9f9;
    }
}


/* =========================================
   MOBILE NAV (max-width: 767px)
   Drawer, menu items, sub-menus.
   ========================================= */

@media only screen and (max-width: 767px) {

    .site-header > .max-liner {
        height: 60px !important;
        padding: 0 20px !important;
    }

    .custom-logo {
        width: 120px !important;
    }

    .menu-button-container {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    #primary-mobile-menu {
        background: transparent !important;
        color: var(--color-text-body, #090909) !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px !important;
        cursor: pointer;
    }

    #primary-mobile-menu .dropdown-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Prevent TT1's sub-482px styles from collapsing the nav wrapper.
       No z-index here — would create a stacking context that traps
       the fixed-position drawer, letting body::after overlay it. */
    #site-navigation {
        position: relative !important;
        top: 0 !important;
        width: 37px !important;
        height: 37px !important;
    }

    /* Hide "Menu" / "Close" text labels — icon only */
    .dropdown-icon.open,
    .dropdown-icon.close {
        font-size: 0;
    }

    .dropdown-icon.open svg,
    .dropdown-icon.close svg {
        font-size: initial;
    }

    /* Mobile drawer — off-screen by default.
       !important throughout to beat TT1's 482px+ desktop
       rules that kick in before our 768px breakpoint. */
    .primary-menu-container {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 300px !important;
        background-color: #fff !important;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
        padding: 80px 30px 30px !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease;
    }

    /* Slide in when TT1 JS toggles body class */
    body.primary-navigation-open .primary-menu-container {
        transform: translateX(0) !important;
    }

    /* Backdrop overlay when menu is open */
    body.primary-navigation-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: none;
        z-index: 998;
        pointer-events: none;
    }

    /* Menu items */
    #primary-menu-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        flex-direction: unset !important;
        gap: 0 !important;
    }

    #primary-menu-list > .menu-item > a {
        font-family: var(--global--font-primary, 'Montserrat', sans-serif) !important;
        color: var(--color-text-body, #090909) !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 16px !important;
        letter-spacing: 1px !important;
        text-decoration: none !important;
        padding: 12px 0 !important;
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    #primary-menu-list .menu-item > a:hover {
        color: var(--color-brand, #FA0B0B) !important;
    }

    /* Sub-menus — hidden until toggled */
    #primary-menu-list .sub-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 0 0 16px !important;
        display: none !important;
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        min-width: 0 !important;
        border: none !important;
    }

    /* TT1 JS sets aria-expanded on .sub-menu-toggle buttons */
    .sub-menu-toggle[aria-expanded="true"] + .sub-menu {
        display: block !important;
    }

    /* Sub-menu toggle button */
    .menu-item-has-children {
        position: relative;
    }

    .sub-menu-toggle {
        display: block !important;
        background: transparent !important;
        border: none !important;
        color: var(--color-text-body, #090909) !important;
        padding: 8px !important;
        cursor: pointer;
        position: absolute !important;
        right: 0 !important;
        top: 6px !important;
    }

    .sub-menu-toggle svg {
        width: 18px !important;
        height: 18px !important;
        transition: transform 0.2s ease;
    }

    .sub-menu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* Sub-menu link styling */
    #primary-menu-list .sub-menu .menu-item a {
        font-family: var(--global--font-primary, 'Montserrat', sans-serif) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--color-text-body, #090909) !important;
        text-decoration: none !important;
        text-transform: none !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        white-space: normal !important;
    }

    #primary-menu-list .sub-menu .menu-item a:hover {
        color: var(--color-brand, #FA0B0B) !important;
    }
}

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

    .btn-cta-red {
        display: inline-flex;
        font-family: "Oswald", sans-serif;
        color: #fff;
        font-weight: 500;
        background: var(--color-brand, #FA0B0B);
        border-radius: 10px;
        font-size: 20px;
        line-height: 1em;
        padding: .20em .85em .30em;
        text-transform: uppercase;
        text-decoration: none;
        align-items: center;
        justify-content: center;
    }
    /* Keep the button red (white text legible) on hover/focus/active — overrides
       TT1's default button inversion to a white background. */
    .btn-cta-red:hover,
    .btn-cta-red:focus,
    .btn-cta-red:active {
        background-color: var(--color-brand, #FA0B0B) !important;
        color: #fff !important;
    }

/* =========================================
   PRE-FOOTER
   ========================================= */

   .pre-footer-reach-out {
        max-width: 1440px;
        margin: 0 auto;
        text-align: center;
        background-color: #F2F1EC;
    }



/* =========================================
   FOOTER (J.Schmid Style)
   Hardcoded layout — no widget sidebars.
   ========================================= */

.site-footer {
    background-color: rgba(242,241,236,0.55);
    color: var(--color-text-body, #090909);
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    padding: 56px 20px 0;
}

.footer-inner {
    max-width: var(--container-wide, 1640px);
    margin: 0 auto;
}

/* ROW 1: Logo only */
.footer-logo-row {
    margin-bottom: 0;
}

.footer-logo-link {
    display: inline-block;   /* wrap the logo only, not the full column width */
}

.footer-logo-img {
    display: block;
    width: 130px;
    height: auto;
    margin-bottom: 45px;
}

/* ROW 2: 5-column grid */
.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 0.75fr 1.25fr 360px;
    gap: 0 60px;
    align-items: start;
}

@media (max-width: 1100px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 48px 40px;
    }
}

@media (max-width: 680px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 40px 28px;
    }

    .footer-col--signup {
        grid-column: 1 / -1;
        padding-top: 16px;
    }
}

@media (max-width: 420px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Column headings */
.footer-col__heading {
    font-family: var(--global--font-secondary, 'Flama Condensed', 'Montserrat', sans-serif);
    font-size: 23px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin: 0 0 12px;
    display: block;
    text-decoration: none;
}

/* Sub-headings (LOCATION, BOARD ASSOC, CAREERS) within a column */
.footer-col__heading--sub {
    margin-top: 40px;
}

.footer-col__heading--link:hover {
    color: var(--color-brand, #FA0B0B);
}

/* List items */
.footer-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col__list li {
    font-size: 16px;
    line-height: 32px;
    color: var(--color-text-body, #090909);
}

.footer-col__list a {
    color: var(--color-text-body, #090909);
    text-decoration: none;
}

.footer-col__list a:hover {
    color: var(--color-brand, #FA0B0B);
}

.footer-col__text {
    font-size: 16px;
    line-height: 32px;
    margin: 0;
}

/* Social icons — inside REACH OUT column */
.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-bottom: 10px;
}

.footer-social__icon {
    display: flex;
    color: var(--color-text-body, #090909);
    transition: color 0.2s;
}

.footer-social__icon:hover {
    color: var(--color-brand, #FA0B0B);
}

/* Board logos — 2×2 grid inside REACH OUT column */
.footer-board-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    margin-top: 30px;
    align-items: center;
}

.footer-board-logos img {
    display: block;
    height: auto;
    max-height: 56px;
    width: auto;
    max-width: 100%;
    opacity: 0.8;
}

/* Newsletter signup column — no heading, starts with form */
.footer-col--signup .footer-signup-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-col--signup .footer-signup-form input[type="text"],
.footer-col--signup .footer-signup-form input[type="email"] {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #000;
    padding: 6px 0;
    font-size: 16px;
    line-height: 28px;
    font-family: inherit;
    color: var(--color-text-body, #090909);
    outline: none;
    margin-bottom: 2px;
    width: 100%;
}

.footer-col--signup .footer-signup-form input::placeholder {
    color: var(--color-text-body, #090909);
    opacity: 0.65;
}

.footer-signup-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-body, #090909);
    cursor: pointer;
}

.footer-signup-privacy input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.footer-signup-privacy a {
    color: var(--color-text-body, #090909);
    text-decoration: underline;
}

.site-footer .footer-signup-btn {
    align-self: flex-start;
    margin-top: 14px;
    background: var(--color-brand, #FA0B0B) !important;
    color: #fff !important;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 9px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.site-footer .footer-signup-btn:hover {
    background: #d10000 !important;
}

/* Copyright — override TT21's 3px border-top and font-size inheritance */
.site-footer > .site-info,
.site-info {
    max-width: var(--container-wide, 1640px);
    margin: 36px auto 0;
    padding: 0 0 20px;
    text-align: left;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-body, #090909);
    opacity: 0.6;
    border-top: none !important;
}

.site-info p,
.site-footer > .site-info p {
    margin: 0;
    font-size: 12px;
}

.site-name,
.powered-by-wordpress {
    display: none;
}

/*Contact Form *****************************************/
/*spacing **********************/
.wpcf7 textarea {
    height: 3rem !important;
    background-color: #fafafa;
}

.wpcf7 input {
    background-color: #fafafa;
}

.wpcf7 p {
    margin: 0.5rem;
}

.wpcf7 label {
    margin: 0;
    border: 0;
}

.site-footer form.wpcf7-form {
    padding-left: 0;
    padding-right: 0;
}

.site-footer .wpcf7 p {
    margin: 0 !important;
}

.site-footer .wpcf7-form-control-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

/* Text fields. Metrics match the hardcoded fallback form this replaced
   (.footer-signup-form): 6px vertical padding, 16px/28px, 0.5px underline,
   2px apart. :not(.wpcf7-checkbox) matters — CF7 gives the checkbox wrapper
   .wpcf7-form-control too, and without it this (0,5,0) rule pushed 20px
   !important of margin under the consent row. */
.site-footer .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox), .site-footer .wpcf7 input[type="text"], .site-footer .wpcf7 input[type="email"] {
    background: none !important;
    border: none;
    border-bottom: 0.5px solid #000;
    color: var(--color-text-body, #090909);
    font-family: inherit;
    font-size: 16px;
    line-height: 28px;
    padding: 6px 0 !important;
    margin-bottom: 2px !important;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.site-footer input::placeholder { color: #757575; opacity: 1; } /* browser-default grey, as the fallback form showed */

.site-footer .wpcf7 input[type="submit"] {
    background-color: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    padding: 9px 16px;
    border: 1px solid #666;
    border-radius: 3px;
    margin-top: 0;
}

.site-footer input:-internal-autofill-selected {
    background-color: #181818 !important;
}

.site-footer input:-webkit-autofill, .site-footer input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

.site-footer .wpcf7-form-control-wrap+.border {
    bottom: 2rem;
    background-color: #fff;
}

.site-footer .wpcf7-form .wpcf7-form-control.wpcf7-checkbox {
    display: block;
    border: none;
    padding: 0 !important;
    margin: 10px 0 0 !important;   /* 10px above, as .footer-signup-privacy had */
}

.site-footer .wpcf7-list-item {
    display: block;   /* CF7 default inline-block adds a body-height line box under the 11px label */
    margin: 0;
}

.site-footer .wpcf7-list-item-label {
    text-transform: none;
}

.site-footer .wpcf7 form.sent .wpcf7-response-output {
    color: #181818;
    border-color: #46b450;
    background-color: #46b450;
}

.site-footer .wpcf7 form.failed .wpcf7-response-output, .site-footer .wpcf7 form.aborted .wpcf7-response-output {
    color: #181818;
    border-color: #dc3232;
    background-color: #dc3232;
}

.site-footer .wpcf7 form.spam .wpcf7-response-output {
    color: #181818;
    border-color: #f56e28;
    background-color: #f56e28;
}

.site-footer .wpcf7 form.invalid .wpcf7-response-output, .site-footer .wpcf7 form.unaccepted .wpcf7-response-output, .site-footer .wpcf7 form.payment-required .wpcf7-response-output {
    color: #181818;
    border-color: #ffb900;
    background-color: #ffb900;
}

.site-footer .wpcf7 form .wpcf7-response-output {
    margin: 2em 0 1em;
    padding: .5em 1em .5em;
    border: 2px solid #00a0d2;
    line-height: 1.25em;
}

.site-footer .wpcf7 input[type="submit"]:hover {
    background-color: #333;
    border-color: #333;
    border: 1px solid #333;
}

.site-footer .mc4wp-checkbox {
    display: none;
}

/* --- CF7 footer signup: match the design the hardcoded fallback used -------
   The legacy block above (originally scoped to `.footer`, which this theme
   never had) styles the inputs correctly — underline, uppercase, letter-
   spaced. But it was written for a ghost submit button and leaves the
   consent labels at body size. These two overrides finish the job. */
/* TT1 styles this as `input[type=submit]:not(:hover):not(:active):not(.has-background)`
   — three :not() pseudo-classes plus the attribute selector give it (0,4,1),
   which outranks this rule's (0,3,1) no matter where it sits in the file. That
   is why the button rendered in TT1's dark primary rather than brand red.
   !important is the same escape hatch .btn-cta-red already uses against TT1. */
.site-footer .wpcf7 input[type="submit"],
.site-footer .wpcf7 input[type="submit"]:hover {
    background: var(--color-brand, #FA0B0B) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 9px 24px;
    display: block;   /* inline in the <p> it picked up a full line box above it */
    margin-top: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.site-footer .wpcf7 input[type="submit"]:hover { opacity: 0.9; }

/* Consent + newsletter labels sit at 11px, as the fallback's
   .footer-signup-privacy did — not at body size. */
.site-footer .wpcf7-list-item-label {
    font-size: 11px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}
.site-footer .wpcf7-list-item-label a {
    color: inherit;
    text-decoration: underline;
}

/* Privacy / Cookie links under the signup form. CF7 escapes HTML inside a
   [checkbox] label, so the consent line itself cannot carry them — prod
   renders the same pair here, below the form. */
.footer-signup-policies {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-body, #090909);
}
.footer-signup-policies a {
    color: inherit;
    text-decoration: underline;
}
.site-footer .wpcf7-checkbox .wpcf7-list-item label,
.site-footer .wpcf7 .mc4wp-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;   /* the wrapper already carries the 10px above */
}
.site-footer .wpcf7 .mc4wp-checkbox label {
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   COMPONENT: Hero
   ========================================= */

.component-hero {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    overflow: hidden;
}

/* Close the nav -> first-content gap globally: TT1's `.site-main > article > *`
   (and `.entry-content > *`) add a top margin to the content wrapper. Zero it on
   the first element so page content sits flush under the sticky nav. */
.site-main > article > *:first-child,
.entry-content > *:first-child { margin-top: 0 !important; }

.component-hero__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Background video hero — inherits __img sizing/object-fit; dark fill avoids a
   flash before the poster/video paints. */
.component-hero__video {
    background: #111;
}

/* Solid-color hero (no image) — short title band, e.g. bio pages.
   Height comes from the inline min-height; content is flow-centered. */
.component-hero--solid {
    display: flex;
    align-items: center;
}
.component-hero--solid .component-hero__content {
    position: static;
    padding: 20px 40px;
}
.component-hero--solid .component-hero__headline {
    margin: 0;
    text-shadow: none;
}
@media ( max-width: 767px ) {
    .component-hero--solid .component-hero__content   { padding: 16px 20px; }
}

/* Bio Intro — cropped photo + details list (our-people pages). */
.bio-intro__grid {
    display: grid;
    grid-template-columns: minmax(200px, 32%) 1fr;
    gap: 48px;
    align-items: start;
}
.bio-intro__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.bio-intro__details {
    line-height: 1.85;
}
.bio-intro__details p { margin: 0; }
@media ( max-width: 767px ) {
    .bio-intro__grid { grid-template-columns: 1fr; gap: 24px; }
    /* photo runs full-width at narrow viewports */
}

/* ---- our-people bio pages (parent-pageid-2694): spacing to match mockup ----
   Taller solid title band, and a tighter overall vertical rhythm than the site
   default (section rows 80px -> 40px, section padding 52px -> 28px). The
   min-height override needs !important to beat the shortcode's inline value. */
.parent-pageid-2694 .component-hero--solid { min-height: 180px !important; }
.parent-pageid-2694 .vc_row            { margin-bottom: 40px; }
.parent-pageid-2694 .vc_row:last-child { margin-bottom: 0; }
.parent-pageid-2694 .section-pad       { padding-top: 28px; padding-bottom: 28px; }

/* Legacy Conrad utility, lost in migration — hide elements flagged el_class="hide"
   (e.g. the un-opened job postings on /careers/). */
.hide { display: none !important; }

/* ---- Part of Something Bigger — full-bleed corporate-family callout band ----
   Section fills a plain (non-container-wide) row edge-to-edge; content capped at 46em. */
.component-psb {
    width: 100%;
    padding: 3.5em 1.5em;
    text-align: center;
}
.component-psb__inner { max-width: 46em; margin: 0 auto; }
.component-psb__logo { margin: 0 0 1.5em; }
.component-psb__logo img { display: inline-block; width: auto; max-width: 150px; height: auto; }
/* Home PSB (client v3): charcoal band, red logo 20% smaller, button matched to
   the Reach Out / btn-cta-red size. Scoped to home so the About PSB is untouched. */
.page-id-5522 .component-psb__logo img { max-width: 120px; }
.component-psb__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 0.4em;
    color: inherit;
}
.component-psb__body { font-size: 18px; line-height: 1.6; }
.component-psb__body p { margin: 0 0 1em; color: inherit; }
.component-psb__body p:last-child { margin-bottom: 0; }
.component-psb__actions { margin: 1.75em 0 0; }
.component-psb__button {
    /* Client 2026-09-09: match the REACH OUT button (.btn-cta-red) on font,
       size and kerning. Global rather than page-scoped — the PSB band renders
       only on Home today, so this is visually identical now and keeps any
       future placement consistent. */
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
    letter-spacing: normal;
    padding: .20em .85em .30em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px; /* match .btn-cta-red (Reach Out), not the doc's 20px */
    transition: opacity 0.2s ease;
}
.component-psb__button:hover, .component-psb__button:focus { opacity: 0.85; text-decoration: none; }
@media ( max-width: 767px ) {
    .component-psb { padding: 2.5em 1.25em; }
}

/* Restore paragraph/list spacing inside rich-text content. TT1 resets `p`
   margins and only re-adds spacing via flow on direct `.entry-content`
   children, which never reaches WPBakery-nested copy — so it reads flush. */
.wpb_text_column p,
.wpb_text_column ul,
.wpb_text_column ol {
    margin-bottom: 1.25em;
}
.wpb_text_column p:last-child,
.wpb_text_column ul:last-child,
.wpb_text_column ol:last-child {
    margin-bottom: 0;
}

.component-hero--full .component-hero__img    { min-height: 100vh; }
.component-hero--large .component-hero__img   { min-height: 70vh; }
.component-hero--medium .component-hero__img  { min-height: 50vh; }


.component-hero__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
    padding: 80px 40px;
}

.component-hero--center .component-hero__content { text-align: center; }
.component-hero--left .component-hero__content   { text-align: left; }

.component-hero__headline {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
    /* Subtle diffuse halo — lifts white text off light areas of B&W hero
       images; invisible over dark areas. Layered for smooth falloff. */
    text-shadow: 0 0 18px rgba(0,0,0,0.32), 0 0 48px rgba(0,0,0,0.22);
}

.component-hero__subheadline {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 16px rgba(0,0,0,0.30), 0 0 40px rgba(0,0,0,0.20);
}

@media (max-width: 768px) {
    .component-hero__content  { padding: 60px 20px; }
    .component-hero--full .component-hero__img    { min-height: 60vh; }
    .component-hero--large .component-hero__img   { min-height: 50vh; }
}


/* =========================================
   COMPONENT: Two-Column (Image + Text)
   ========================================= */

.component-two-col {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--container-wide, 1640px);
    margin: 0 auto;
}

.component-two-col--image-right { flex-direction: row-reverse; }

.component-two-col__image,
.component-two-col__text {
    flex: 1 1 50%;
}

.component-two-col__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.component-two-col__text {
    padding: var(--section-pad, 52px) 60px;
}

.component-two-col__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0 0 24px;
}

.component-two-col__body {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 215%;
    color: var(--color-text-body, #090909);
    margin-bottom: 32px;
}

/* Client 2026-09-09: paragraph spacing inside a two-col body. 24px matches
   .component-two-col__heading's margin-bottom, so the gap between paragraphs
   equals the gap between the heading and the first paragraph. Global — this
   was previously patched per-page (9425, 6161); only 4434 and 6161 actually
   have multi-paragraph bodies, so nothing else shifts. */
.component-two-col__body p {
    margin: 0 0 24px;
}
.component-two-col__body p:last-child {
    margin-bottom: 0;
}

.component-two-col__text .btn-cta-red {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .component-two-col,
    .component-two-col--image-right {
        flex-direction: column;
    }
    .component-two-col__text {
        padding: 40px 20px;
    }
}

/* Branding "BRANDQUEST" — one full-bleed gray band holding the centered
   heading + two-col, content centered to container width (Figma ref). */
.page-id-9425 .component-section-header,
.page-id-9425 .component-two-col {
    background-color: #F5F5F5;
    max-width: none;
}
.page-id-9425 .component-section-header__heading {
    line-height: 1.075em;
    margin-bottom: 0;  /* prevent margin escaping the band as a white seam */
}
.page-id-9425 .component-section-header {
    /* One continuous gray band. Figma: ~199px air above heading (band Y2192 → heading
       Y2391), ~101px gray gap below heading (heading bottom Y2461 → image Y2562). */
    padding-top: clamp(72px, 14vw, 199px);
    padding-bottom: clamp(48px, 7vw, 101px) !important;
    margin-bottom: 0 !important;  /* no white seam — gray runs flush into two-col */
}
.page-id-9425 .component-two-col {
    margin-top: 0 !important;
    align-items: stretch;         /* equal-height copy + image columns */
    padding-inline: max(20px, calc((100% - var(--container-content, 1362px)) / 2));
    /* Figma: ~137px gray below content (band bottom Y3491 → image bottom Y3354) */
    padding-bottom: clamp(64px, 9vw, 137px);
}
.page-id-9425 .component-two-col__text {
    padding-top: 0;               /* remove gap at top of two-col */
}

/* Direct Marketing "A highly specialized team of experts" two-col:
   stretch so the image fills full-height (no floating) + restore paragraph
   spacing between the two body paragraphs. */
.page-id-6161 .component-two-col {
    align-items: stretch;
}
/* Copy is shorter than the (portrait) image — vertically center it in the stretched column. */
.page-id-6161 .component-two-col__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* About Us "WHAT WE DO" two-col — Figma overrides (scoped to this page) */
.page-id-11110 .component-two-col {
    align-items: stretch; /* equal-height copy + image columns */
}
.page-id-11110 .component-two-col__body {
    /* client v4 follow-up: match the 14px global body copy. Page-scoped —
       js_two_col is used on 6 other pages that keep the 20px default. */
    font-size: 14px;
    line-height: 166%;
}
.page-id-11110 .component-two-col__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Our People "MEET THE TEAM" section spacing — client wants it tight; zero the
   header's own padding (surrounding vc_row margins still provide separation). */
.page-id-2694 .component-section-header {
    padding-top: 0;
    padding-bottom: 0;
}
/* The two empty WPBakery spacer rows that used to bracket MEET THE TEAM were
   removed from the page content (2026-09-09). With the padding zeroed above, the
   header's own Spacing dropdown is now the single control for that gap — no CSS
   override needed. Currently spacing_top="xs" (16px), spacing_bottom="none". */

/* About Us "HOW WE DO IT" section header — Figma overrides (scoped) */
.page-id-11110 .component-section-header__subheading {
    line-height: 166%;
}
/* :has() targets only the header that has a subheading (HOW WE DO IT),
   not the "WHAT WE DO" header above. !important beats the inline md margin.
   20px section padding + 100px = 120px gap (double the prior 60px). */
.page-id-11110 .component-section-header:has(.component-section-header__subheading) {
    margin-bottom: 100px !important;
}


/* =========================================
   COMPONENT: Feature Panel (Full-Bleed Split)
   ========================================= */

.feature-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--container-max, 1920px);
    margin-left: auto;
    margin-right: auto;
    min-height: 560px;
}

.feature-panel--image-right .feature-panel__text { order: -1; }

.feature-panel__image {
    position: relative;
    overflow: hidden;
}

.feature-panel__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-panel__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 100px 120px 120px;
}

.feature-panel--image-left .feature-panel__text {
    padding: 120px 120px 120px 100px;
}

.feature-panel__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0 0 28px;
}

.feature-panel__subheading {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 20px; /* client v4: was 28px */
    font-weight: 700;
    line-height: 1.25em;
    color: var(--color-brand, #FA0B0B);
    margin: 0 0 24px;
}

.feature-panel__body,
.feature-panel__body p {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px; /* client v4: was 18px — match global body copy */
    font-weight: 500;
    line-height: 2;
    color: inherit;
}

.feature-panel__body p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
    .feature-panel { min-height: 460px; }
    .feature-panel__text { padding: 60px 40px 60px 60px; }
    .feature-panel--image-left .feature-panel__text { padding: 60px 60px 60px 40px; }
    .feature-panel__heading { font-size: 40px; }
    /* subheading is 20px site-wide since client v4 — no mobile step (would invert) */
}

@media (max-width: 768px) {
    .feature-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .feature-panel__image { min-height: 500px; order: -1; position: relative; }
    .feature-panel--image-right .feature-panel__text { order: 0; }
    .feature-panel__text,
    .feature-panel--image-left .feature-panel__text {
        padding: 48px 20px;
    }
    .feature-panel__heading { font-size: 32px; }
    /* subheading 20px / body 14px are already the floor since client v4 — no mobile step */
}


/* =========================================
   COMPONENT: Section Header
   ========================================= */

.component-section-header {
    text-align: center;
    padding: clamp(32px, calc(2.8vw + 19px), 52px) 20px 20px;
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
}

/* Deep-link target clears the fixed header when jumped to */
.component-section-header[id] {
    scroll-margin-top: 120px;
}

.component-section-header__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0 0 16px;
}

/* "Compact" size preset — matches the logo-cloud / "Board Associations" headings. */
.component-section-header--accent .component-section-header__heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-brand, #FA0B0B);
    margin: 20px auto 0;
}

.component-section-header__subheading {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px; /* client v4: was 20px — match global body copy */
    font-weight: 500;
    line-height: 200%;
    color: var(--color-text-body, #090909);
    margin: 0;
}

/* Heading + padding now scale fluidly via clamp() above — no breakpoint jump needed */


/* =========================================
   COMPONENT: CTA Section
   ========================================= */

.component-cta-section {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--section-pad, 52px) 20px;
    text-align: center;
    background-color: var(--color-bg, #F2F1EC);
}

.component-cta-section__inner {
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
}

.component-cta-section__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 500;
    line-height: 1.1667; /* Figma spec */
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    max-width: 850px;
    margin: 0 auto 24px; /* ~45px baseline-to-copy after line-height leading */
}

/* Compact size preset — 48px vs the 60px default (editable via the Heading Size dropdown). */
.component-cta-section__description {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 200%;
    color: var(--color-text-body, #090909);
    margin: 0 auto 32px;
    max-width: 850px;
}

/* Home intro copy — a touch wider so it lands on three lines on desktop (client request). */
.page-id-5522 .component-cta-section__description {
    max-width: 890px;
}

/* About intro copy — client 2026-09-09: "widen so there's no awkward short line".
   The copy is 236 chars; at 14px in the default 850px column it spills only a
   couple of characters onto a third line. Widening drops it to two lines, and
   text-wrap: balance evens them so the break looks deliberate rather than left
   over. Page-scoped — every other cta-section keeps the 850px default. */
.page-id-11110 .component-cta-section__description {
    max-width: 960px;
    text-wrap: balance;
}


/* Web Design page (11499) spacing is now handled natively: the content was
   un-wrapped from a stray WPBakery vc_row so it matches every other service
   page, giving TT1's 30px inter-section margins (banner↔CTA, two-col↔two-col)
   and standard hero↔intro spacing. No page-scoped overrides needed. */


/* =========================================
   COMPONENT: Team Grid
   ========================================= */

.component-team-grid {
    max-width: var(--container-wide, 1640px);
    margin: 0 auto;
    padding: 0 20px;
}

.component-team-grid__grid {
    display: grid;
    gap: var(--gap-grid, 20px);
}

.component-team-grid--cols-3 .component-team-grid__grid { grid-template-columns: repeat(3, 1fr); }
.component-team-grid--cols-4 .component-team-grid__grid { grid-template-columns: repeat(4, 1fr); }

.component-team-grid__photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

.component-team-grid__info {
    padding: 12px 0;
}

.component-team-grid__name {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0 0 4px;
}

.component-team-grid__title {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-body, #090909);
    margin: 0;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .component-team-grid--cols-3 .component-team-grid__grid,
    .component-team-grid--cols-4 .component-team-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .component-team-grid--cols-3 .component-team-grid__grid,
    .component-team-grid--cols-4 .component-team-grid__grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   COMPONENT: Image Grid
   ========================================= */

.component-image-grid {
    display: grid;
    max-width: var(--container-wide, 1640px);
    margin: 0 auto;
    padding: 0 20px;
}

.component-image-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.component-image-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.component-image-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.component-image-grid--gap-small  { gap: 10px; }
.component-image-grid--gap-medium { gap: 20px; }
.component-image-grid--gap-large  { gap: 40px; }

.component-image-grid__item {
    margin: 0;
}

.component-image-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.component-image-grid__caption {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-body, #090909);
    padding: 8px 0;
    letter-spacing: 1.5px;
}

@media (max-width: 768px) {
    .component-image-grid--cols-3,
    .component-image-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .component-image-grid--cols-2,
    .component-image-grid--cols-3,
    .component-image-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   COMPONENT: Logo Cloud
   ========================================= */

.component-logo-cloud {
    padding: 100px 20px var(--section-pad, 52px);
    text-align: center;
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
}

.component-logo-cloud__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0 0 40px;
}

.component-logo-cloud__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.component-logo-cloud__item img {
    max-height: 50px;
    width: auto;
    display: block;
    filter: grayscale(100%);
    transition: opacity 0.2s, filter 0.2s;
}

.component-logo-cloud__item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 768px) {
    .component-logo-cloud__row { gap: 24px; }
    .component-logo-cloud__item img { max-height: 36px; }
}

.logo-cloud__heading {
    font-size: 43px;
    line-height: 50px;
}

/* Logo Cloud — Grid mode (static with columns) */
.logo-cloud__grid {
    display: grid;
    grid-template-columns: repeat(var(--logo-cols, 4), 1fr);
    align-items: center;
    justify-items: center;
}
.logo-cloud__grid {
    gap: 40px 50px;  /* row-gap (y) 40px, column-gap (x) 50px */
    padding: 0 20px;
    /* Shrink to the logos and center: sparse rows (2–3 logos) no longer stretch
       full-width, and full rows pack as a centered block instead of edge-to-edge. */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* "Some friends we've helped" logo-cloud sections — 2x vertical breathing room
   (scoped via :has so the shared .section-pad utility isn't affected elsewhere) */
.section-pad:has(> .logo-cloud__heading),
.section-pad:has(> .logo-cloud__grid),
.section-pad:has(.logo-cloud__viewport),
.section-pad:has(.logo-cloud__marquee) {
    padding-top: calc(var(--section-pad, 52px) * 2);
    padding-bottom: calc(var(--section-pad, 52px) * 2);
}

.logo-cloud__grid img,
.logo-cloud__track img,
.logo-cloud__viewport img {
    max-width: 220px;
    max-height: 90px;
    width: auto;
    height: auto;
    display: block;
    filter: grayscale(1);
    opacity: 0.6; /* normalize tone across logos of varying native brightness */
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo-cloud__grid img:hover,
.logo-cloud__track img:hover,
.logo-cloud__viewport img:hover {
    filter: none !important;
    opacity: 1 !important;
}
@media (max-width: 768px) {
    .logo-cloud__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo-cloud__grid img { max-height: 44px; }
}

/* Content Columns — reusable multi-column heading + list/body grid */
.content-columns {
    display: grid;
    padding-bottom: var(--section-pad, 52px);
    text-align: center;
}
.content-columns--cols-2 { grid-template-columns: repeat(2, 1fr); }
.content-columns--cols-3 { grid-template-columns: repeat(3, 1fr); }
.content-columns--cols-4 { grid-template-columns: repeat(4, 1fr); }
.content-columns--dividers .content-columns__col {
    padding: 0 32px;
}
.content-columns__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-head, #231F20);
    margin: 0 0 16px;
}
.content-columns__body {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    color: #767676;
}
.content-columns__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 768px) {
    .content-columns[class*="--cols-"] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .content-columns--dividers .content-columns__col {
        padding: 0;
    }
}

/* Logo Cloud — Marquee mode */
.logo-cloud__marquee {
    overflow: hidden;
    width: 100%;
}
.logo-cloud__track--marquee {
    display: flex;
    width: max-content;
    animation: logoMarquee var(--marquee-speed, 30s) linear infinite;
}
.logo-cloud__track--marquee:hover {
    animation-play-state: paused;
}
.logo-cloud__set img {
    flex-shrink: 0;
}
@keyframes logoMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Logo Cloud — Slider mode */
.logo-cloud__slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-cloud__viewport {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}
.logo-cloud__track--slider {
    display: flex;
    transition: transform 0.4s ease;
}
/* Each slider logo sits in its own slide; the JS sizes THESE, not the images. */
.logo-cloud__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow: hidden;
}

.logo-cloud__track--slider img {
    max-height: 60px;
    max-width: 80%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.logo-cloud__arrow {
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    border: none;
    border-radius: 0;
    background: transparent !important;
    color: var(--color-brand, #FA0B0B);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s;
}
.logo-cloud__arrow:hover {
    opacity: 0.7;
}

/* Section Divider */
.js-section-divider {
    padding: 30px 5%;
}

/* Digital Marketing (11558): extra breathing room below the case-study-row
   divider so the next row is pushed further down. */
.page-id-11558 .js-section-divider {
    padding: 45px 5%;
    margin-bottom: 45px;
}

.js-section-divider__line {
    border: none;
    border-top: 1px solid #D9D9D9;
    margin: 0;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    gap: var(--gap-row, 24px);
}
.blog-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.blog-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.blog-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .blog-grid--cols-2,
    .blog-grid--cols-3,
    .blog-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Person Card */
.person-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.person-card__image {
    position: relative;
    overflow: hidden;
}

.person-card__image img {
    width: 100%;
    aspect-ratio: 402 / 550;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.person-card:hover .person-card__image img {
    filter: grayscale(0);
}

.person-card__arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-card__info {
    margin-top: var(--gap-element, 16px);
}

.person-card__info .text-headline-28 {
    font-size: 18px; /* client v4: bio names, scoped override of the shared 28px utility */
    text-decoration: none;
    line-height: 1.53571429em; /* 43px at 28px — Figma spec */
}

/* Position title — Figma spec (scoped to person cards; .caption is shared) */
.person-card__info .caption {
    font-size: 12px;
    line-height: 144%;
    text-transform: uppercase;
}

/* Blog Card */
/* client v4: blog titles 20px. Scoped, because .text-headline-28 is shared with
   person-card names (which the same round takes to 18px) — never change the utility. */
.blog-card .text-headline-28 {
    font-size: 20px;
}
.blog-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.blog-card__image {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.blog-card__body {
    padding: var(--gap-element, 16px) 0;
}
.blog-card__excerpt {
    margin-top: 8px;
}

/* =========================================
   BLOG ARCHIVE: Layout (home.php)
   ========================================= */

.blog-archive__layout {
    display: block;
}
.blog-archive__layout--has-sidebar {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

.blog-archive__main {
    min-width: 0;
}

/* Sidebar */
.blog-archive__sidebar {
    position: sticky;
    top: 165px;
}

.blog-sidebar__widget {
    margin-bottom: 32px;
}
.blog-sidebar__widget:last-child {
    margin-bottom: 0;
}

.blog-archive__sidebar .widget-title {
    color: #000;
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-brand, #FA0B0B);
    display: inline-block;
}

.blog-archive__sidebar .widget a {
    color: var(--color-text-body, #090909);
    text-decoration: none;
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
}
.blog-archive__sidebar .widget a:hover {
    color: var(--color-brand, #FA0B0B);
}

.blog-archive__sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-archive__sidebar .widget li {
    font-size: 15px;
    line-height: 1.8;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}
.blog-archive__sidebar .widget li:last-child {
    border-bottom: none;
}

.blog-archive__sidebar .widget iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    margin-bottom: 12px;
}
/* Self-hosted (core) Video widget fills the sidebar like embeds do */
.blog-archive__sidebar .wp-video,
.blog-archive__sidebar video {
    width: 100% !important;
    height: auto;
    margin-bottom: 12px;
}

/* =========================================
   Single Blog Post — reuses .blog-archive__layout + __sidebar
   ========================================= */
/* Hero → content top gap: scale down on narrow viewports. TT1 puts a flat 90px
   margin between .site-main > * children (the hero + the content wrapper), which
   collapses to 90px and dominated the gap. Zero both so the .blog-archive
   padding-top alone controls it — responsively. Applies to blog single, the
   /blog/ listing, and category archives. */
.site-main > .component-hero {
    margin-bottom: 0;
}
.blog-archive {
    margin-top: 0;
    padding-top: clamp(20px, 5vw, 52px);
}
/* Category archive intro (the category description, when present) */
.blog-archive__intro {
    max-width: 760px;
    margin: 0 0 40px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-body, #090909);
}
.blog-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 28px;
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-brand, #FA0B0B);
}
.blog-single__meta a { color: inherit; text-decoration: none; }
.blog-single__meta a:hover { text-decoration: underline; }
.blog-single__content {
    max-width: 760px;     /* readable measure within the main column */
    margin-left: 0;       /* left-align (override TT1's .entry-content auto-centering) */
    margin-right: auto;
}
.blog-single__nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.blog-single__nav a { color: var(--color-text-head, #231F20); text-decoration: none; }
.blog-single__nav a:hover { color: var(--color-brand, #FA0B0B); }
.blog-single__nav-next { margin-left: auto; text-align: right; }
@media (max-width: 768px) {
    .blog-single__content { max-width: none; }
    .blog-single__nav { flex-direction: column; gap: 12px; }
    .blog-single__nav-next { margin-left: 0; text-align: left; }
}

/* Quote Rotator — optional per-quote logo (e.g. client/brand logo) */
.js-quote-rotator__logo {
    display: block;
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
    margin: 28px auto 0;
    object-fit: contain;
}

/* =========================================
   Contact page (24) — Figma 'Contact' layout
   ========================================= */
/* Tighten the headline/copy -> form gap (service-intro carries 52px section-pad bottom) */
.page-id-24 .component-service-intro {
    padding-bottom: 16px;
}
.page-id-24 .contact-form-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 20px) 20px clamp(48px, 8vw, 96px);
}
.page-id-24 .contact-form-card {
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: clamp(24px, 4vw, 40px);
    margin-bottom: 56px;   /* larger gap before the address block below */
}
.page-id-24 .contact-info {
    background: #f4f4f4;
    border-radius: 8px;
    padding: clamp(24px, 4vw, 36px);
    text-align: center;
}
.page-id-24 .contact-info > *:last-child { margin-bottom: 0; }
.page-id-24 .contact-info__title {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-head, #231F20);
    margin: 0 0 16px;
}
.page-id-24 .contact-info address,
.page-id-24 .contact-info p {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-style: normal;
    line-height: 1.8;
    color: var(--color-text-body, #090909);
    margin: 0 0 16px;
}
.page-id-24 .contact-info p:last-child { margin-bottom: 0; }
.page-id-24 .contact-info a { color: var(--color-text-head, #231F20); text-decoration: none; }
.page-id-24 .contact-info a:hover { color: var(--color-brand, #FA0B0B); }
.page-id-24 .wpcf7-form p { margin: 0; }
.page-id-24 .wpcf7-form br { display: none; }
.page-id-24 .wpcf7-form label {
    display: block;
    margin-bottom: 22px;
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-head, #231F20);
}
.page-id-24 .wpcf7-form input[type=text],
.page-id-24 .wpcf7-form input[type=email],
.page-id-24 .wpcf7-form input[type=tel],
.page-id-24 .wpcf7-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 16px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-body, #090909);
    background: #fff;
    box-sizing: border-box;
}
.page-id-24 .wpcf7-form textarea { min-height: 150px; resize: vertical; }
.page-id-24 .wpcf7-form input:focus,
.page-id-24 .wpcf7-form textarea:focus { outline: none; border-color: var(--color-brand, #FA0B0B); }
/* Submit — matches the site's .btn-cta-red (red, white, Oswald uppercase, 10px
   radius); !important beats TT1's dark default button background (0,4,1). */
.page-id-24 .wpcf7-form input[type=submit] {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 44px;
    border: none;
    border-radius: 10px;
    background: var(--color-brand, #FA0B0B) !important;
    color: #fff !important;
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.page-id-24 .wpcf7-form input[type=submit]:hover { opacity: 0.9; }
.page-id-24 .wpcf7-form .wpcf7-acceptance label {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}
/* Acceptance checkbox: clean native control (revert TT1's appearance:none custom box) */
.page-id-24 .wpcf7-form input[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 3px;
}
.page-id-24 .wpcf7-form input[type=checkbox]::before { content: none; }

/* Pagination — overrides TT1 parent theme defaults */
.blog-archive .navigation.pagination {
    margin-top: var(--gap-section, 80px);
    margin-bottom: 0;
    border-top: 1px solid #e0e0e0;
    padding-top: 24px;
}
.blog-archive .pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
}
.blog-archive .pagination .nav-links > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    margin: 0;
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-body, #090909);
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.blog-archive .pagination .nav-links > *:hover {
    background-color: var(--color-bg-gray, #F5F5F5);
    border-color: #ccc;
}
.blog-archive .pagination .nav-links > *.current {
    background-color: var(--color-brand, #FA0B0B);
    color: #fff;
    border-color: var(--color-brand, #FA0B0B);
    text-decoration: none;
}
.blog-archive .pagination .nav-links > *.dots {
    border: none;
    pointer-events: none;
}
.blog-archive .pagination .nav-links > *.prev,
.blog-archive .pagination .nav-links > *.next {
    font-size: 20px;
    margin-left: 0;
    margin-right: 0;
}

/* Blog Archive: Responsive */
@media (max-width: 1024px) {
    .blog-archive__layout--has-sidebar {
        grid-template-columns: 1fr 280px;
        gap: 30px;
    }
}
@media (max-width: 768px) {
    .blog-archive__layout--has-sidebar {
        grid-template-columns: 1fr;
    }
    .blog-archive__sidebar {
        position: static;
        border-top: 1px solid #e0e0e0;
        padding-top: 32px;
        margin-top: 16px;
    }
}


/* =========================================
   COMPONENT: Portfolio Grid (filterable)
   ========================================= */

.portfolio-grid-wrap {
    max-width: var(--container-wide, 1640px);
    margin: 0 auto;
    padding: 0 20px;
}

/* Filter nav */
.portfolio-filter {
    text-align: center;
    padding: 40px 0 20px;
    margin-bottom: 25px;
}

.portfolio-filter__label {
    display: block;
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-text-body, #090909);
    margin-bottom: 16px;
}

.portfolio-filter__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.portfolio-filter__link {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-body, #090909);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.portfolio-filter__link:hover {
    border-bottom-color: var(--color-text-body, #090909);
}

.portfolio-filter__link--active {
    font-weight: 700;
    border-bottom-color: var(--color-brand, #FA0B0B);
}

/* Grid */
.portfolio-grid {
    display: grid;
    gap: 50px var(--gap-grid, 20px);
    padding-bottom: var(--gap-section, 80px);
}

.portfolio-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.portfolio-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.portfolio-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .portfolio-grid--cols-2,
    .portfolio-grid--cols-3,
    .portfolio-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Card */
.portfolio-grid__link {
    display: flex;
    flex-direction: column;
    gap: var(--gap-element, 16px);
    text-decoration: none;
    color: inherit;
}

.portfolio-grid__img {
    width: 100%;
    aspect-ratio: 807 / 534;
    object-fit: cover;
    display: block;
}

.portfolio-grid__services {
    margin: 0;
}

.portfolio-grid__title {
    margin: 0;
    letter-spacing: 1.4px;
}

/* Filter show/hide */
.portfolio-grid__item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-grid__item--hidden {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* =========================================
   COMPONENT: Testimonial
   ========================================= */

.component-testimonial {
    padding: 80px 20px;
    text-align: center;
}

.component-testimonial__inner {
    max-width: 900px;
    margin: 0 auto;
}

.component-testimonial__quote {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.8;
    color: #fff;
    margin: 0 0 24px;
    border: none;
    padding: 0;
}

.component-testimonial__attribution {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================================
   DEFAULT PAGE: plain-text content constraint
   Constrains raw block elements (Privacy, Cookie Policy, etc.)
   without touching shortcode-built pages, whose direct article
   children are .vc_row wrappers — never bare <p>/<h*>/<ul>.
   ========================================= */
.type-page > p,
.type-page > h1,
.type-page > h2,
.type-page > h3,
.type-page > h4,
.type-page > h5,
.type-page > h6,
.type-page > ul,
.type-page > ol,
.type-page > blockquote,
.type-page > table,
.type-page > figure,
.type-page > pre,
.type-page > address,
.type-page > dl {
    max-width: var(--container-content, 1362px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Quote Strip testimonials: drop the parent theme's decorative blockquote::before
   (a “ glyph) so the client's own quote punctuation reads cleanly. */
.js-quote-strip__quote::before {
    content: none;
}

/* =========================================
   COMPONENT: Quote Rotator (js_quote_strip)
   Rotating testimonial carousel — one quote at a time.
   ========================================= */
.js-quote-rotator { position: relative; }
.js-quote-rotator__inner { max-width: 900px; margin: 0 auto; }
.js-quote-rotator__stage { display: flex; align-items: center; gap: 16px; }
.js-quote-rotator__viewport { flex: 1 1 auto; overflow: hidden; }
.js-quote-rotator__track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}
.js-quote-rotator__slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
    border: 0;
    color: var(--qr-text, #fff);
    text-align: center;
    /* equal-height slides with content vertically centered, so rotating
       quotes of different lengths stay centered in the band */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.js-quote-rotator__text {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    color: var(--qr-text, #fff);  /* beat the global p color so copy stays white */
}
.js-quote-rotator__cite {
    display: block;
    margin-top: 22px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--qr-text, #fff);
}
.js-quote-rotator__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
}
.js-quote-rotator__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--qr-text, #fff);  /* crisp white ring (no opacity blend) */
    border-radius: 50%;
    /* !important beats TT1's dark default button background
       (button:not(:hover):not(:active):not(.has-background) — specificity 0,3,1) */
    background: transparent !important;
    cursor: pointer;
    transition: background 0.2s;
}
.js-quote-rotator__dot:hover,
.js-quote-rotator__dot[aria-current="true"] {
    background: var(--qr-text, #fff) !important;  /* solid white fill for active/hover */
}
@media (max-width: 768px) {
    .js-quote-rotator__text { font-size: 22px; }
    .js-quote-rotator__arrow { width: 32px; height: 32px; }
}

/* Top spacing below the fixed header (padding, not margin — avoids collapse) */
.jschmid-plain-page {
    padding-top: 60px;
}

/* Inset lists so markers sit inside the content measure, not hanging left */
.type-page > ul,
.type-page > ol {
    padding-left: 56px;
}

/* Deep-link anchor targets clear the fixed header when jumped to */
.type-page [id^="section-"] {
    scroll-margin-top: 120px;
}

.type-page > .page-title {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .type-page > .page-title { font-size: 32px; }
}

/* =========================================
   PAGE TEMPLATE: Full-width layout
   Removes TT1 default content constraints
   ========================================= */

.page-template .entry-content {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.page-template .entry-header {
    display: none;
}

.page-template #primary {
    max-width: 100%;
    padding: 0;
}

.page-template .entry-footer {
    display: none;
}


/* =========================================
   COMPONENT: Challenge
   ========================================= */

.component-challenge {
    padding: var(--section-pad, 52px) 20px;
}

.component-challenge__label {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-text-body, #090909);
    margin: 0 0 24px;
}

.component-challenge__text {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 42px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    color: #6685B3;
    margin: 0;
}

@media (max-width: 768px) {
    .component-challenge__text { font-size: 28px; }
}


/* =========================================
   COMPONENT: Solution / Result
   ========================================= */

.component-sol-result {
    padding-bottom: var(--section-pad, 52px);
}

.component-sol-result__inner {
    display: flex;
    gap: 40px;
}

.component-sol-result__col {
    flex: 1;
}

.component-sol-result__col--result {
    border: 1px solid var(--color-border, #E0E0E0);
    padding: 2rem;
}

.component-sol-result__label {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0 0 16px;
    color: var(--color-text-body, #090909);
}

.component-sol-result__body p {
    margin: 0 0 16px;
}

.component-sol-result__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .component-sol-result__inner {
        flex-direction: column;
    }
}


/* =========================================
   SINGLE PORTFOLIO: Full-bleed case study
   ========================================= */

/* Portfolio card images — natural height by default; lock height only in multi-column rows */
.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
}

[class*="vc_col-sm-"]:not(.vc_col-sm-12) .portfolio-item img {
    height: 534px;
    object-fit: cover;
}

/* When columns stack on mobile, revert to natural image dimensions (no crop) */
@media (max-width: 767px) {
    [class*="vc_col-sm-"]:not(.vc_col-sm-12) .portfolio-item img {
        height: auto;
        object-fit: initial;
    }
}

.portfolio-single {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.portfolio-single .vc_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: clamp(24px, calc(11vw - 20px), 100px) !important;
}

.portfolio-single article {
    max-width: 100%;
}

/* Screen-reader only (visually hidden, accessible to AT + crawlers) */
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    border-width: 0;
}

/* Services tagline between hero and challenge */
.portfolio-services {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-body, #090909);
    padding: 28px 20px;
    margin: 0;
}

/* Remove TT1's entry-content width constraints on portfolio singles */
.single-fwp_portfolio .entry-content {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Hide any TT1 post metadata that leaks through */
.single-fwp_portfolio .entry-header,
.single-fwp_portfolio .entry-footer,
.single-fwp_portfolio .author-bio,
.single-fwp_portfolio .post-navigation,
.single-fwp_portfolio .comments-area {
    display: none;
}

/* Portfolio images: contained width by default */
.portfolio-single .wpb_single_image {
    max-width: var(--container-content, 1362px);
    margin-left: auto;
    margin-right: auto;
}

.portfolio-single .wpb_single_image img {
    width: 100%;
    display: block;
}

/* Full-bleed image rows (override contained default) */
.portfolio-single .row-bleed .wpb_single_image {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* =========================================
   COMPONENT: Hero — Red Underline variant
   ========================================= */

.component-hero__underline {
    display: block;
    width: 240px;
    height: 3px;
    background: var(--color-brand, #FA0B0B);
    margin: 0 auto;
}

.component-hero--left .component-hero__underline {
    margin-left: 0;
}


/* =========================================
   COMPONENT: Service Intro
   ========================================= */

.component-service-intro__icon {
    margin-bottom: 12px;
}

.component-service-intro__icon svg,
.component-service-intro__icon img {
    width: 100px;
    height: 100px;
}

.component-service-intro__headline {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-weight: 500;
    line-height: 109.4%;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0 0 24px;
}

.component-service-intro__headline span {
    color: var(--color-brand, #FA0B0B);
}

/* Accent-word coloring for headings via a BARE <span> (no inline style). Keeps the
   colored word out of shortcode attributes entirely, so it can never break parsing
   the way inline style="..." double-quotes did. Convention across heading components. */
.component-cta-section__heading span,
.component-section-header__heading span,
.logo-cloud__heading span {
    color: var(--color-brand, #FA0B0B);
}

.component-service-intro__headline--sub {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 43px;
    letter-spacing: normal;
    color: #231F20;
}

.component-service-intro__body {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 166%;
    color: var(--color-text-body, #090909);
    max-width: 820px;
    margin: 0 auto 1.25em;
}

/* /services/ intro copy — client 2026-09-10: "the cut" was orphaning on its own
   line. The copy is 245 chars; at 14px in the 820px default the third line is
   only ~18% full. 960px brings it to two lines with margin to spare (900px
   computes to 99% of a line, close enough to tip back to three), and
   text-wrap: balance evens them. Page-scoped — js_service_intro renders on 13
   pages and only this one was flagged. Same treatment as the About intro. */
.page-id-3570 .component-service-intro__body {
    max-width: 960px;
    text-wrap: balance;
}



/* =========================================
   COMPONENT: Icon Card Grid
   ========================================= */

.icon-card__icon {
    margin-bottom: 20px;
}

.icon-card__icon svg,
.icon-card__icon img {
    display: block;
}

.icon-card__title {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 166%;
    color: var(--color-text-head, #231F20);
    margin: 0 0 .25em;
}

.icon-card__desc {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 166%;
    color: var(--color-text-body, #090909);
    margin: 0;
}


/* =========================================
   COMPONENT: Red Banner
   ========================================= */

.component-red-banner {
    background: var(--color-brand, #FA0B0B);
    padding: 40px 20px;
}

.component-red-banner__text {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 107.5%;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    max-width: 1000px;
}

@media (max-width: 768px) {
    .component-red-banner__text { font-size: 24px; }
}


/* =========================================
   SERVICE SUB-PAGES — Shared Styles
   ========================================= */

.page-service {
    background: #fff;
}

/* Placeholder box for missing images */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8E6E1;
    color: #999;
    font: 500 13px/1.4 var(--global--font-primary, 'Montserrat', sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px;
    min-height: 260px;
    width: 100%;
}

.img-placeholder--hero {
    min-height: 500px;
    background: #333;
    color: #777;
    font-size: 16px;
}

.img-placeholder--tall {
    min-height: 400px;
}

.img-placeholder--short {
    min-height: 180px;
}

.page-service .component-hero {
    margin-top: 0 !important;
}

.service-case-studies {
    margin: 0;
    padding: 30px 0 0;
}

.service-case-studies__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-grid, 20px);
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
    padding: 0 20px;
}

.service-case-studies__row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.service-case-study img {
    width: 100%;
    display: block;
}

/* Digital Marketing (11558): force uniform case-study image heights.
   Native ratios cluster ~1.78–1.87, so a fixed 9/5 (1.8) aspect-ratio with
   cover-crop makes every image identical with minimal cropping. Trial scope —
   promote to `.service-case-study img` (or the non-bleed variant) to apply wider. */
.page-id-11558 .service-case-study img {
    aspect-ratio: 9 / 5;
    object-fit: cover;
}

figure.service-case-study { margin: 0; }

figure.service-case-study img { width: 100%; display: block; }

/* Linked case-study image: block wrapper, subtle hover affordance */
.service-case-study__link { display: block; }
.service-case-study__link img { transition: opacity 0.3s ease; }
.service-case-study__link:hover img { opacity: 0.9; }

.service-case-study__figcaption {
    padding: 8px 20px 0;
    text-align: left;
}

.service-case-study__caption {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-body, #090909);
    margin-top: 8px;
}

.service-case-study__client {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Bleed variant — full-width, no gaps, no padding */
.service-case-studies--bleed {
    padding-left: 0;
    padding-right: 0;
}

.service-case-studies--bleed .service-case-studies__row {
    max-width: 100%;
    padding: 0;
    gap: 0;
}

/* Case study card — background-image with text overlay */
.service-case-study--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 320px;
    padding: 45px;
    background-size: cover;
    background-position: center;
    background-color: #555;
    color: #fff;
    text-decoration: none;
    position: relative;
}


.service-case-study--card__logo,
.service-case-study--card__title,
.service-case-study--card__desc,
.service-case-study--card__wordmark {
    position: relative;
    z-index: 1;
}

/* Case Study Cards grid (restored "CASE STUDIES" section) */
.cs-cards {
    width: 100%;
    padding: calc(var(--section-pad, 52px) * 2) 0;
}
.cs-cards__heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.075em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-head, #231F20);
    margin: 0 0 40px;
    padding: 0 20px;
}
.cs-cards__grid {
    display: grid;
    gap: 0;
}
.service-case-study--card__wordmark {
    max-width: 75%;
    max-height: 110px;
    width: auto;
    height: auto;
    margin-bottom: 18px;
    display: block;
}
.service-case-study--card:hover .service-case-study--card__wordmark {
    opacity: 0.92;
}
@media (max-width: 768px) {
    .cs-cards__grid { grid-template-columns: 1fr !important; }
}

.service-case-study--card__logo {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.8);
}

.service-case-study--card__logo img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.service-case-study--card__title {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.service-case-study--card__desc {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    max-width: 280px;
    color: #fff;
}

.service-section-heading {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    text-align: center;
    margin: 0 0 40px;
}

.service-section-heading__icon {
    display: block;
    margin: 0 auto 12px;
    width: 48px;
    height: 48px;
}

.service-two-col-feature {
    display: flex;
    align-items: stretch;
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
    padding: 0 20px;
}

.service-two-col-feature--reverse {
    flex-direction: row-reverse;
}

.service-two-col-feature__image,
.service-two-col-feature__text {
    flex: 1 1 50%;
}

.service-two-col-feature__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-two-col-feature__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 52px;
}

.service-two-col-feature__title {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0 0 .25em;
}

.service-two-col-feature__desc {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    color: var(--color-text-body, #090909);
    margin: 0;
}

.service-testimonial {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
    padding: var(--section-pad) 20px;
}

.service-testimonial__quote::before {
    content: none;
}

.service-testimonial__quote {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 35px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.35em;
    color: var(--color-text-head, #231F20);
    margin: 0;
}

.service-testimonial__cite {
    display: block;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    line-height: 20px;
    text-transform: capitalize;
    color: var(--color-text-body, #090909);
    margin: 1.5em 0 .5em;
}

/* =========================================
   COMPONENT: Color Banner
   Full-width colored band with centered uppercase text
   Used on: Catalog Agency (red), Branding (dark), Web Design (dark)
   ========================================= */

.component-red-banner {
    background-color: var(--color-brand, #FA0B0B);
    padding: 60px 10%;
}

.component-red-banner__text {
    /* Font (Oswald 40px / 1.075em / 600) governed by the canonical block above;
       this block only sets layout so the two definitions no longer fight. */
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 1200px;
}

/* Red color-banner variant — Gotham-equivalent (Montserrat) at 19px with looser
   leading and ~1.5x the container padding. Dark (explicit dark bg) banners keep the
   Oswald default above. Variant class is set by the shortcode from the bg colour. */
.component-red-banner.component-red-banner--red {
    padding: 90px 15%;  /* ~1.5x the 60px 10% default */
}
.component-red-banner--red .component-red-banner__text {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 19px;
    font-weight: 500;
    line-height: 2.26315789em;  /* 43px at 19px */
}

/* =========================================
   COMPONENT: Alternating Two-Col Block
   Full-width 50/50 image + text, alternating sides
   Used on: Content Creation, Customer Experience
   ========================================= */

.service-alt-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 600px;
}

.service-alt-block__image {
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    min-height: 500px;
}

.service-alt-block__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 20%;
    background-color: var(--color-bg-gray, #F5F5F5);
}

.service-alt-block--img-right .service-alt-block__content {
    order: -1;
}

.service-alt-block__icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--color-brand, #FA0B0B);
}

.service-alt-block__icon svg,
.service-alt-block__icon img {
    width: 100px;
    height: 100px;
}

.service-alt-block__icon .icon-placeholder {
    width: 60px;
    height: 60px;
    border: 2px solid var(--color-brand, #FA0B0B);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--color-brand, #FA0B0B);
}

.service-alt-block__title {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-head, #231F20);
    margin: 0 0 .25em;
}

.service-alt-block__desc {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-body, #090909);
    max-width: 500px;
}

.service-alt-block__line {
    width: 100%;
    max-width: 441px;
    height: 6px;
    background-color: var(--color-brand, #FA0B0B);
    margin-top: 1.75em;
}

/* Image strip — full-width row of images */
.service-image-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.service-image-strip__item {
    min-height: 350px;
    background-size: cover;
    background-position: center;
    background-color: #ccc;
}

/* Section header with icon (CX, Strategy pages) */
.service-section-intro {
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.service-section-intro__icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand, #FA0B0B);
}

.service-section-intro__icon .icon-placeholder {
    width: 60px;
    height: 60px;
    border: 2px solid var(--color-brand, #FA0B0B);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--color-brand, #FA0B0B);
}

.service-section-intro__title {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 107.5%;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 32px 0 48px;
}

.service-section-intro__body {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text-body, #090909);
    max-width: 1208px;
    margin: 0 auto;
}

/* BrandQuest two-col: stretch columns, bg-image on right, image wider */
.brandquest-feature {
    align-items: stretch;
}

.brandquest-feature .service-two-col-feature__text {
    flex: 1 1 47%;
    padding: 0 75px;
}

.brandquest-feature__image {
    flex: 1 1 53%;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .service-case-studies__row,
    .service-case-studies__row--3,
    .service-case-studies--bleed .service-case-studies__row {
        grid-template-columns: 1fr !important;
    }
    .service-two-col-feature,
    .service-two-col-feature--reverse {
        flex-direction: column;
    }
    .service-two-col-feature__text {
        padding: 24px 20px;
    }
    .brandquest-feature .service-two-col-feature__text {
        padding: 0;
    }
    .brandquest-feature {
        gap: 24px;
    }
    .service-testimonial {
        flex-direction: column;
    }
    .brandquest-feature__image {
        min-height: 400px;
    }
    .service-alt-block {
        grid-template-columns: 1fr;
    }
    .service-alt-block--img-right .service-alt-block__content {
        order: 1;
    }
    .service-alt-block--img-right .service-alt-block__image {
        order: 0;
    }
    .service-alt-block__content {
        padding: 75px 10%;
    }
    .service-alt-block__image {
        min-height: 300px;
    }
    .service-image-strip {
        grid-template-columns: 1fr;
    }
    .service-card-grid__inner {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   COMPONENT: Service Card Grid (Landing Page)
   2-col grid of linked service cards
   ========================================= */

.service-card-grid {
    max-width: var(--container-content, 1362px);
    margin: 0 auto;
    padding: 0 20px 60px;
}

.service-card-grid__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
}

.service-card {
    display: flex;
    flex-direction: column;
}

.service-card__header {
    border-bottom: 2px solid var(--color-brand, #FA0B0B);
    padding-bottom: 12px;
    margin-bottom: 16px;
    width: 75%;
}

.service-card__title {
    font-family: var(--global--font-secondary, 'Oswald', sans-serif);
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-head, #231F20);
    margin: 0;
}

.service-card__image {
    margin-bottom: 21px;
    overflow: hidden;
}

.service-card__image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 600 / 320;
    object-fit: cover;
}

.service-card__desc {
    font-family: var(--global--font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-body, #090909);
    margin: 0 0 12px;
    flex: 1;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-brand, #FA0B0B);
    font-size: 32px;
    text-decoration: none;
    align-self: flex-end;
    transition: transform 0.2s ease;
}

.service-card__link:hover {
    transform: translateX(4px);
}

.service-card__title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-card__title-link:hover {
    color: var(--color-brand, #FA0B0B);
}

.service-card__image-link {
    display: block;
}

/* ---------------------------------------------------------------------------
   /brand-experience-assessment/ — Conrad port retrofit (scoped to .page-id-11762).
   Utility shim + layout/visual treatment to match the production design.
   --------------------------------------------------------------------------- */
.forceWhite { color: #fff; }
.forceYellow { color: #E3B23C; }

/* Kill the white inter-section gaps */
.page-id-11762 .vc_row,
.page-id-11762 .vc_section { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Constrain content in the full-width sections (bg stays edge-to-edge) */
.page-id-11762 .vc_custom_1598565587111,
.page-id-11762 #contact,
.page-id-11762 .vc_custom_1579900721807 {
    padding-left: max(24px, calc((100% - 1362px) / 2)) !important;
    padding-right: max(24px, calc((100% - 1362px) / 2)) !important;
    box-sizing: border-box;
}

/* H1 red banner — weight up + constrain */
.page-id-11762 .vc_custom_1598565587111 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}
.page-id-11762 .title-xlarge h1 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin: 0;
    font-weight: 700;
    padding-left: 15px;
    padding-right: 15px;
}

/* Two-column section — vertical padding + white copy (stronger than theme) */
.page-id-11762 #contact {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
}
.page-id-11762 #contact h2 { margin-bottom: 0.5em; }

/* Stack the copy/form two-up earlier — at 990px instead of WPBakery's 768 */
@media (max-width: 990px) {
    .page-id-11762 #contact .vc_col-sm-8,
    .page-id-11762 #contact .vc_col-sm-4 { width: 100% !important; float: none; }
}

/* Form: drop the TT1 wildcard label max-width (locally); borderless submit */
.page-id-11762 .wpcf7-form label { max-width: none !important; }
.page-id-11762 .wpcf7 input[type=submit] {
    border: none !important;
    background-color: var(--color-brand, #FA0B0B) !important;
}
.page-id-11762 .wpcf7 input[type=submit]:hover { filter: brightness(0.92); }
.page-id-11762 .wpcf7-form textarea { height: 250px; }
.page-id-11762 .forceWhite,
.page-id-11762 .forceWhite * { color: #fff !important; }
.page-id-11762 .forceYellow,
.page-id-11762 .forceWhite .forceYellow { color: #E3B23C !important; }

/* Quotes — vertical padding, red, centered, constrained */
.page-id-11762 .vc_custom_1573062274804 {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
}
.page-id-11762 .service-testimonial-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px 20px !important;
    text-align: center;
}
.page-id-11762 .service-testimonial__quote,
.page-id-11762 .service-testimonial__cite { color: #DD3333 !important; }

/* Three-column section — vertical padding (no gap to footer) */
.page-id-11762 .vc_custom_1579900721807 {
    padding-top: 74px !important;
    padding-bottom: 74px !important;
}

/* Fix horizontal scroll: WPBakery's negative gutter margins on these sections
   (3-col vc_column-gap-15 = -22.5px; quotes-section rows = -15px) escaped the
   container. Zero the left/right margins and keep the box tight. */
.page-id-11762 .vc_custom_1573062274804,
.page-id-11762 .vc_custom_1573062274804 .vc_row,
.page-id-11762 .vc_custom_1579900721807 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Footer: remove the margin-top gap (this page only) */
.page-id-11762 .site-footer { margin-top: 0 !important; }

/* 3-col: fatten the red accent rule + space out the h4 subheads */
.page-id-11762 .vc_sep_line { border-top-width: 5px !important; }
.page-id-11762 .vc_custom_1579900721807 h4 { margin-bottom: 1em !important; }

/* =========================================
   CLIENT CHANGES 2026-08-19
   ========================================= */

/* Item 1a: branding-agency icon-card-grid — more left/right breathing room.
   Scoped to the branding page so the 4-up icon grids on catalog/CX aren't narrowed. */
.page-id-9425 .component-icon-card-grid .container-content {
    padding-left: clamp(20px, 6vw, 100px);
    padding-right: clamp(20px, 6vw, 100px);
}

/* Item 1b: 3-up icon grids stack (1-2-3) on mobile instead of orphaning as a 2x2 "blank quad".
   Component-scoped so only icon-card grids change; 4-up grids keep the fine 2x2. */
@media (max-width: 768px) {
    .component-icon-card-grid .grid-3 { grid-template-columns: 1fr; }
}

/* Item 2: push the primary nav off the right viewport edge on desktop (>=768px). */
@media (min-width: 768px) {
    .site-header > .max-liner { padding-right: clamp(20px, 4vw, 72px); }
}

/* js_video_embed bleed="true": full-bleed, edge-to-edge 16:9 (no container cap). */
.js-video-embed-bleed { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.js-video-embed-bleed .js-video-embed { max-width: none; }

/* =========================================
   COMPONENT: Edge Diagram (js_edge_diagram)
   3-column corporate family — bordered side nodes + solid red center hub.
   ========================================= */
.component-edge-diagram .edge-diagram__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.component-edge-diagram .edge-node {
    border: 2px solid var(--color-brand, #FA0B0B);
    background: #fff;
    padding: 44px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}
.component-edge-diagram .edge-node--hub {
    border: none;
    color: #fff;
}
.component-edge-diagram .edge-node__logo {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Constrain HEIGHT only (fluid) so aspect is never distorted; the wide Midland
   logo shrinks to fit narrow widths instead of overflowing — no width cap. */
.component-edge-diagram .edge-node__logo img {
    height: clamp(28px, 3.4vw, 42px);
    width: auto;
}
.component-edge-diagram .edge-node--hub .edge-node__logo img {
    height: clamp(30px, 3.6vw, 44px);
}
.component-edge-diagram .edge-node__label {
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1em;
    margin: 0 0 1em;
}
.component-edge-diagram .edge-node--hub .edge-node__label {   /* sits on the red hub */
    color: #fff;
}
.component-edge-diagram .edge-node__text {
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-text-head, #231F20);
    margin: 0;
}
.component-edge-diagram .edge-node--hub .edge-node__text {
    color: #fff;
}
@media (max-width: 768px) {
    .component-edge-diagram .edge-diagram__grid { grid-template-columns: 1fr; }
    /* CohereOne's mark is light/thin — bump it ~25% on mobile so it doesn't read small */
    .component-edge-diagram .edge-node__logo img[src*="logo-cohereone"] { height: 35px; }
}