/**
Theme Name: cultivating-digital-child
Author: Cultivating Digital
Author URI: https://cultivatingdigital.com/
Description: Cultivating Digital – Organic marketing for the Life of your business.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cultivating-digital-child
Template: astra
*/
/* ==========================================================================
   Core 4 — homepage
   Layout lives here rather than in Spectra's generated CSS, per the
   dynamic-CSS trap: CLI-authored container attrs emit no front-end rules.
   !important guards the properties Spectra's defaults contest.
   ========================================================================== */

:root {
    --c4-brand:      var(--ast-global-color-0);
    --c4-brand-dark: var(--ast-global-color-1);
    --c4-ink:        #22303C;
    --c4-ink-deep:   #1A242E;
    --c4-text:       var(--ast-global-color-3);
    --c4-bg:         #F8F5F2;
    --c4-bg2:        #EDF1F5;
    --c4-line:       rgba(34,48,60,.13);
    --c4-muted:      rgba(34,48,60,.66);
    --c4-purple:     #836FAB;
    --c4-blue:       #83B3E1;
    --c4-teal:       #45B6B2;
    --c4-orange:     #F68B33;
}

/* four-part brand rule ---------------------------------------------------- */
.c4-rule { display: flex !important; width: 96px; height: 5px; border-radius: 4px;
           overflow: hidden; margin: 0 0 22px; }
.c4-rule i { flex: 1; }
.c4-rule i:nth-child(1) { background: var(--c4-purple); }
.c4-rule i:nth-child(2) { background: var(--c4-blue); }
.c4-rule i:nth-child(3) { background: var(--c4-teal); }
.c4-rule i:nth-child(4) { background: var(--c4-orange); }

/* shared section rhythm --------------------------------------------------- */
.c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-strip, .c4-cta {
    padding-block: 92px !important;
}
.c4-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .17em;
              text-transform: uppercase; color: var(--c4-brand-dark); margin-bottom: 14px; }

/* 1. hero ----------------------------------------------------------------- */
.c4-hero { background: var(--c4-bg); }
.c4-hero__row { display: flex !important; flex-direction: row !important;
                align-items: center !important; gap: 58px; }
.c4-hero__copy  { flex: 1 1 52% !important; display: block !important; }
.c4-hero__media { flex: 1 1 48% !important; min-height: 460px;
                  border-radius: 6px; background-size: cover !important;
                  background-position: center !important; }
.c4-hero__title { font-size: clamp(38px, 4.7vw, 58px); letter-spacing: -.028em;
                  margin-bottom: 24px; }
.c4-hero__lede  { font-size: 20.5px; color: var(--c4-muted); max-width: 32em; }
.c4-hero__note  { font-size: 15px; color: var(--c4-muted); margin-top: 16px; }

/* 2. qualify -------------------------------------------------------------- */
.c4-qual { background: var(--c4-ink); }
.c4-qual .uagb-heading-text, .c4-qual__title .uagb-heading-text { color: #fff; }
.c4-qual__title { max-width: 18em; }
.c4-qual__sub   { color: rgba(255,255,255,.7); font-size: 19px;
                  max-width: 44em; margin-bottom: 40px; }
.c4-qual__list  { list-style: none !important; margin: 0; padding: 0;
                  display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 46px; }
.c4-qual__list li { display: flex !important; gap: 13px; font-size: 17px;
                    color: rgba(255,255,255,.86); line-height: 1.5; }
.c4-qual__list li::before {
    content: "\2713"; flex: 0 0 22px; height: 22px; border-radius: 50%;
    background: var(--c4-brand); color: #fff; font-size: 12px; font-weight: 700;
    display: grid; place-items: center; margin-top: 3px;
}

/* 3. pathways ------------------------------------------------------------- */
.c4-paths__sub { color: var(--c4-muted); font-size: 19px; margin-bottom: 44px; max-width: 44em; }
.c4-paths__row { display: flex !important; flex-direction: row !important;
                 flex-wrap: nowrap !important; align-items: stretch !important; gap: 24px; }
.c4-path { flex: 1 1 33.333% !important; display: flex !important;
           flex-direction: column !important; border: 1px solid var(--c4-line);
           border-radius: 8px; overflow: hidden !important; padding: 0 !important; }
.c4-path__media { min-height: 190px; background-size: cover !important;
                  background-position: center !important; }
.c4-path__body  { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.c4-path__title { font-size: 23px; margin: 10px 0 6px; }
.c4-path__scope { font-size: 12px; font-weight: 700; letter-spacing: .13em;
                  text-transform: uppercase; margin-bottom: 14px; }
.c4-path__text  { color: var(--c4-muted); font-size: 16.5px; margin-bottom: 22px; line-height: 1.6; }
.c4-path__more  { margin-top: auto; font-weight: 700; font-size: 16px; text-decoration: none; }
.c4-path--p1 { background: rgba(246,139,51,.08); }
.c4-path--p1 .c4-path__scope, .c4-path--p1 .c4-path__more { color: #C4671B; }
.c4-path--p2 { background: rgba(131,179,225,.16); }
.c4-path--p2 .c4-path__scope, .c4-path--p2 .c4-path__more { color: #3C7CB5; }
.c4-path--p3 { background: rgba(69,182,178,.13); }
.c4-path--p3 .c4-path__scope, .c4-path--p3 .c4-path__more { color: #2E8A87; }

/* 4. services ------------------------------------------------------------- */
.c4-svcs { background: var(--c4-bg); }
.c4-svcs__sub { color: var(--c4-muted); font-size: 19px; margin-bottom: 44px; max-width: 44em; }
.c4-svc__grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.c4-svc { display: block !important; background: #fff; border: 1px solid var(--c4-line);
          border-top: 5px solid var(--c4-line); border-radius: 6px; padding: 32px;
          text-decoration: none; color: inherit; transition: box-shadow .16s, transform .16s; }
.c4-svc:hover { box-shadow: 0 14px 34px rgba(34,48,60,.10); transform: translateY(-2px); }
.c4-svc--c1 { border-top-color: var(--c4-purple); }
.c4-svc--c2 { border-top-color: var(--c4-blue); }
.c4-svc--c3 { border-top-color: var(--c4-teal); }
.c4-svc--c4 { border-top-color: var(--c4-orange); }
.c4-svc__title { font-size: 22px; margin-bottom: 11px; }
.c4-svc__text  { color: var(--c4-muted); font-size: 16.5px; margin: 0; }

/* 5. values --------------------------------------------------------------- */
.c4-values__sub { color: var(--c4-muted); font-size: 19px; margin-bottom: 44px; max-width: 44em; }
.c4-val__grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.c4-val { display: block !important; }
.c4-val__bar { height: 4px; border-radius: 3px; margin-bottom: 22px; }
.c4-val--v1 .c4-val__bar { background: var(--c4-purple); }
.c4-val--v2 .c4-val__bar { background: var(--c4-blue); }
.c4-val--v3 .c4-val__bar { background: var(--c4-teal); }
.c4-val--v4 .c4-val__bar { background: var(--c4-orange); }
.c4-val__title { font-size: 23px; margin-bottom: 12px; letter-spacing: -.01em; }
.c4-val__cap   { font-size: 1.85em; line-height: 0; font-weight: 700; letter-spacing: -.03em; }
.c4-val--v1 .c4-val__cap { color: var(--c4-purple); }
.c4-val--v2 .c4-val__cap { color: var(--c4-blue); }
.c4-val--v3 .c4-val__cap { color: var(--c4-teal); }
.c4-val--v4 .c4-val__cap { color: var(--c4-orange); }
.c4-val__text  { font-size: 16.5px; color: var(--c4-muted); margin: 0; }

/* 6. testimonial strip ---------------------------------------------------- */
.c4-strip { background: var(--c4-bg2); padding-block: 70px !important; }
.c4-strip__row { display: flex !important; flex-direction: row !important;
                 align-items: center !important; gap: 38px; max-width: 960px; margin: 0 auto; }
.c4-strip__media { flex: 0 0 150px !important; width: 150px; min-height: 170px;
                   border-radius: 6px; background-size: cover !important;
                   background-position: center !important; }
.c4-strip__body  { flex: 1 1 auto !important; display: block !important; }
.c4-strip__quote { font-family: var(--ast-heading-font-family, inherit);
                   font-size: clamp(20px, 2.2vw, 27px); font-weight: 500;
                   line-height: 1.38; letter-spacing: -.015em; margin: 0 0 18px;
                   border: 0; padding: 0; }
.c4-strip__by b  { display: block; font-size: 17px; }
.c4-strip__by em { font-style: normal; font-size: 15px; color: var(--c4-muted); }
.c4-strip__link  { display: inline-block; margin-top: 16px; font-weight: 700;
                   font-size: 16px; color: var(--c4-brand-dark); text-decoration: none; }

/* 7. cta ------------------------------------------------------------------ */
.c4-cta { background: var(--c4-ink); text-align: center; }
.c4-cta .c4-rule { margin-inline: auto; }
.c4-cta .uagb-heading-text { color: #fff; }
.c4-cta__sub  { color: rgba(255,255,255,.72); font-size: 20px;
                max-width: 34em; margin: 0 auto 34px; }
.c4-cta__note { color: rgba(255,255,255,.55); font-size: 15px; margin-top: 20px; }

/* buttons — dark text on brand fill. White on #F68B33 is 2.43:1 and fails AA;
   ink on the same fill is 6.03:1. Layout only here, colour is deliberate.    */
.c4-btn .uagb-buttons-repeater {
    display: inline-block; background: var(--c4-brand); color: var(--c4-ink) !important;
    padding: 15px 30px; border-radius: 12px; font-size: 17px; font-weight: 700;
    text-decoration: none; line-height: 1.2; transition: .16s;
}
.c4-btn .uagb-buttons-repeater:hover { background: var(--c4-brand-dark); color: #fff !important; }
.c4-btns { display: flex !important; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.c4-cta .c4-btns { justify-content: center !important; }

/* nav — orange fails contrast as link text, so state is carried by the rule  */
.main-header-menu .menu-item > .menu-link:hover,
.ast-builder-menu .menu-item > .menu-link:hover { box-shadow: inset 0 -3px 0 var(--c4-brand-dark); }

/* responsive -------------------------------------------------------------- */
@media (max-width: 980px) {
    .c4-hero__row, .c4-paths__row, .c4-strip__row { flex-direction: column !important; }
    .c4-hero__media { min-height: 300px; width: 100%; }
    .c4-qual__list, .c4-svc__grid { grid-template-columns: 1fr !important; }
    .c4-val__grid { grid-template-columns: 1fr 1fr !important; }
    .c4-strip__media { flex: 0 0 auto !important; width: 100%; }
    .c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-cta { padding-block: 56px !important; }
}
@media (max-width: 620px) {
    .c4-val__grid { grid-template-columns: 1fr !important; }
}

/* Spectra's CLI-authored backgroundImageDesktop attrs emit no front-end CSS
   (dynamic-CSS trap). Own them here, keyed off the semantic classes. */
.c4-hero__media {
    background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-hero-owners-in-workshop-AdobeStock-268917648.jpg") !important;
}
.c4-path--p1 .c4-path__media {
    background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-partnership-AdobeStock-1186318744.jpg") !important;
}
.c4-path--p2 .c4-path__media {
    background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-homeownership-readiness-AdobeStock-139371879.jpg") !important;
}
.c4-path--p3 .c4-path__media {
    background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-real-estate-development-AdobeStock-904760684.jpg") !important;
}
.c4-strip__media {
    background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-testimonial-1-AdobeStock-402646047.jpg") !important;
}
.c4-hero__media, .c4-path__media, .c4-strip__media {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Spectra's boxed inner-content width doesn't emit for CLI-authored roots
   either, so the content box is owned here: full-bleed background, content
   centred at the theme width. */
.c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-strip, .c4-cta {
    padding-inline: max(30px, calc((100% - 1200px) / 2)) !important;
    box-sizing: border-box;
}
.c4-hero > *, .c4-qual > *, .c4-paths > *, .c4-svcs > *,
.c4-values > *, .c4-strip > *, .c4-cta > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
}
/* grid tracks must beat Spectra's emitted child rules */
.c4-svc__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.c4-val__grid  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.c4-qual__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.c4-path       { min-width: 0 !important; }
@media (max-width: 980px) {
    .c4-svc__grid, .c4-qual__list { grid-template-columns: minmax(0,1fr) !important; }
    .c4-val__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 620px) {
    .c4-val__grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* Spectra's generated root-container CSS lands as `flex-flow: row nowrap`,
   which turns each section's heading / paragraph / grid into side-by-side
   columns. Force normal vertical flow on the sections themselves; the inner
   *__row containers keep their own row direction. */
.c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-strip, .c4-cta {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
.c4-hero > *, .c4-qual > *, .c4-paths > *, .c4-svcs > *,
.c4-values > *, .c4-strip > *, .c4-cta > * {
    flex: 0 0 auto !important;
}
/* the rule is a fixed-width flex row, don't let it stretch */
.c4-rule { flex: 0 0 auto !important; align-self: flex-start !important;
           width: 96px !important; }
.c4-cta .c4-rule { align-self: center !important; }
/* buttons wrapper shouldn't stretch full width either */
.c4-btns { align-self: flex-start !important; width: auto !important; }
.c4-cta .c4-btns { align-self: center !important; }

/* Astra's "underline content links" applies to .entry-content a and beats the
   card's own rule. Card links are blocks, not inline text links. */
.entry-content .c4-svc,
.entry-content .c4-svc:hover,
.entry-content .c4-path__more,
.entry-content .c4-strip__link,
.entry-content .c4-btn .uagb-buttons-repeater {
    text-decoration: none !important;
}
.entry-content .c4-path__more:hover,
.entry-content .c4-strip__link:hover { text-decoration: underline !important; }
.c4-svc__title, .c4-svc__text { text-decoration: none !important; }

/* ==========================================================================
   Nav CTA — "Let's Connect"
   Styled from the child theme against a menu-item class, not through the
   menu UI, so a page save or Customizer reset can't wipe it.
   Astra's Header Builder paints a background AND border on the parent <li>,
   which shows as a halo around the pill unless both are zeroed.
   ========================================================================== */
.main-header-menu .menu-item.nav-cta,
.main-header-menu .menu-item.nav-cta.current-menu-item,
.ast-builder-menu .menu-item.nav-cta,
.ast-builder-menu .menu-item.nav-cta.current-menu-item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-left: 8px;
    display: flex;
    align-items: center;
}
.main-header-menu .menu-item.nav-cta > .menu-link,
.main-header-menu .menu-item.nav-cta.current-menu-item > .menu-link,
.ast-builder-menu .menu-item.nav-cta > .menu-link,
.ast-builder-menu .menu-item.nav-cta.current-menu-item > .menu-link {
    background: var(--ast-global-color-0);
    /* ink on orange is 6.03:1; white on orange is 2.43:1 and fails AA */
    color: var(--ast-global-color-2) !important;
    border: 0 !important;
    border-radius: 12px;
    padding: 12px 26px !important;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none !important;
    transition: background .16s, color .16s;
}
.main-header-menu .menu-item.nav-cta > .menu-link:hover,
.ast-builder-menu .menu-item.nav-cta > .menu-link:hover {
    background: var(--ast-global-color-1);
    color: #fff !important;
    box-shadow: none !important;
}
/* the hover underline is for ordinary nav links only, not the pill */
.main-header-menu .menu-item.nav-cta > .menu-link:hover,
.ast-builder-menu .menu-item.nav-cta > .menu-link:hover { text-decoration: none !important; }
/* off-canvas: a full-width pill reads better than a floating one */
.ast-mobile-popup-drawer .menu-item.nav-cta > .menu-link {
    display: block; text-align: center; margin: 10px 0;
}

/* --- fixes ------------------------------------------------------------- */

/* the 18em cap landed on the advanced-heading WRAPPER, not the h2, squeezing
   the qualify headline into a 295px column. Cap the measure on the text. */
.c4-qual__title { max-width: none !important; }
.c4-qual .uagb-heading-text { max-width: 20ch; }
.c4-qual__title,
.c4-paths__title, .c4-svcs__title, .c4-values__title,
.c4-qual__sub, .c4-paths__sub, .c4-svcs__sub, .c4-values__sub {
    align-self: flex-start !important;
    text-align: left !important;
    margin-inline: 0 !important;
}
.c4-qual .uagb-heading-text,
.c4-paths .uagb-heading-text,
.c4-svcs .uagb-heading-text,
.c4-values .uagb-heading-text { text-align: left !important; }
/* the CTA band stays centred */
.c4-cta .uagb-heading-text, .c4-cta__sub { text-align: center !important; }
.c4-cta .c4-cta__sub { margin-inline: auto !important; }

/* pathway card images were cropping heads at 50% 50% */
.c4-path__media { min-height: 240px !important; background-position: center 22% !important; }
.c4-hero__media { background-position: center 30% !important; }
@media (max-width: 980px) {
    .c4-path__media { min-height: 220px !important; }
}

/* ==========================================================================
   Core 4 — interior pages
   These are core blocks inside .entry-content rather than alignfull Spectra
   sections, so the theme content width does the constraining.
   ========================================================================== */
.entry-content > .c4-page__title { font-size: clamp(34px, 4vw, 50px); letter-spacing: -.025em; margin-bottom: 20px; }
.entry-content > .c4-page__lede  { font-size: 20px; color: var(--c4-muted); max-width: 34em; }
.entry-content > h2 { margin-top: 58px; margin-bottom: 14px; font-size: clamp(27px, 3vw, 36px); }
.entry-content > h2 + p { color: var(--c4-muted); margin-bottom: 26px; }
.entry-content > ul { margin: 0 0 26px 0; padding-left: 0; list-style: none; max-width: 48em; }
.entry-content > ul li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--c4-muted); }
.entry-content > ul li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--c4-brand);
}
.entry-content .c4-rule { margin-top: 48px; }
.entry-content > .c4-rule:first-child { margin-top: 0; }

/* three-across card grid */
.c4-svc__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

/* Business360 four-panel */
.c4-step__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; margin-bottom: 8px; }
.c4-step { background: var(--c4-bg); border-radius: 6px; padding: 26px 24px; border-top: 4px solid var(--c4-line); }
.c4-step--s1 { border-top-color: var(--c4-purple); }
.c4-step--s2 { border-top-color: var(--c4-blue); }
.c4-step--s3 { border-top-color: var(--c4-teal); }
.c4-step--s4 { border-top-color: var(--c4-orange); }
.c4-step__n { font-family: var(--ast-heading-font-family, inherit); font-size: 13px; font-weight: 700;
              letter-spacing: .14em; text-transform: uppercase; color: var(--c4-brand-dark); margin-bottom: 10px; }
.c4-step__text { font-size: 16.5px; color: var(--c4-muted); margin: 0; }

/* the boundary statement — present, not shouty */
.c4-notice { background: var(--c4-bg2); border-left: 4px solid var(--c4-line);
             border-radius: 4px; padding: 22px 26px; margin: 46px 0 34px; }
.c4-notice p { font-size: 15px; line-height: 1.6; color: var(--c4-muted); margin: 0; }

/* cards on interior pages sit in normal flow, give them breathing room */
.entry-content .c4-svc__grid { margin-bottom: 8px; }
.entry-content .c4-btns { margin-top: 28px; margin-bottom: 8px; }

@media (max-width: 980px) {
    .c4-step__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .c4-svc__grid--3 { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 620px) {
    .c4-step__grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* Astra centres any .entry-content child that carries a max-width (auto
   inline margins). Every constrained element on the interior pages should
   sit flush left instead. */
.entry-content > .c4-page__lede,
.entry-content > ul,
.entry-content > h2 + p,
.entry-content > p { margin-inline-start: 0 !important; margin-inline-end: 0 !important; }

/* ---- About / bios ---- */
.entry-content > .c4-bio__role { font-size: 15px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--c4-brand-dark); margin-top: -6px; margin-bottom: 16px; }
.c4-team-photo { margin: 34px 0 10px; max-width: 560px; }
.c4-team-photo img { border-radius: 6px; width: 100%; height: auto; display: block; }
.entry-content > .c4-page__tagline { font-family: var(--ast-heading-font-family, inherit);
    font-size: 22px; font-weight: 500; color: var(--c4-brand-dark); margin-bottom: 18px; letter-spacing: -.01em; }
.c4-project-img { margin: 30px 0 8px; }
.c4-project-img img { border-radius: 6px; width: 100%; height: auto; display: block; }
.entry-content > .c4-caption { font-size: 14.5px; color: var(--c4-muted); margin-top: 0; }

/* ---- testimonial grid ---- */
.c4-quote__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin: 8px 0 20px; }
.c4-quote { margin: 0; background: #fff; border: 1px solid var(--c4-line);
            border-left: 4px solid var(--c4-brand); border-radius: 6px; padding: 26px 28px; }
.c4-quote blockquote { margin: 0; padding: 0; border: 0; }
.c4-quote blockquote p { font-size: 17px; line-height: 1.55; margin: 0 0 16px; color: var(--c4-ink); }
.c4-quote figcaption { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c4-quote__theme { font-size: 12px; font-weight: 700; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--c4-muted); }
.c4-quote__pending { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                     color: #8A5A00; background: #FFF4DB; border-radius: 3px; padding: 3px 8px; }

/* ---- warning variant of the notice box ---- */
.c4-notice--warn { background: #FFF6E5; border-left-color: var(--c4-orange); }
.c4-notice--warn p { color: #7A4B06; }

/* ---- three-up step grid (contact page) ---- */
.c4-step__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

/* ---- Gravity Forms ---- */
.entry-content .gform_wrapper { margin: 8px 0 10px; max-width: 760px; }
.entry-content .gform_wrapper .gform_fields { gap: 20px 22px; }
.entry-content .gform_wrapper label.gfield_label { font-family: var(--ast-heading-font-family, inherit);
    font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.entry-content .gform_wrapper input[type=text],
.entry-content .gform_wrapper input[type=email],
.entry-content .gform_wrapper input[type=tel],
.entry-content .gform_wrapper textarea {
    border: 1px solid rgba(34,48,60,.22); border-radius: 8px; padding: 13px 15px;
    font-size: 17px; font-family: inherit; background: #fff; width: 100%;
}
.entry-content .gform_wrapper input:focus,
.entry-content .gform_wrapper textarea:focus {
    outline: none; border-color: var(--c4-brand); box-shadow: 0 0 0 3px rgba(246,139,51,.18);
}
.entry-content .gform_wrapper .gfield_radio label { font-weight: 400; font-size: 17px; }
.entry-content .gform_wrapper .gform_footer input[type=submit] {
    background: var(--ast-global-color-0); color: var(--ast-global-color-2);
    border: 0; border-radius: 12px; padding: 15px 34px; font-size: 17px; font-weight: 700;
    cursor: pointer; transition: .16s;
}
.entry-content .gform_wrapper .gform_footer input[type=submit]:hover {
    background: var(--ast-global-color-1); color: #fff;
}
.entry-content .gform_confirmation_wrapper { background: var(--c4-bg2); border-radius: 6px; padding: 26px 28px; }

@media (max-width: 980px) {
    .c4-quote__grid { grid-template-columns: minmax(0,1fr) !important; }
    .c4-step__grid--3 { grid-template-columns: minmax(0,1fr) !important; }
}

/* Gravity Forms Orbital theme drives its controls from custom properties.
   Set those rather than overriding its selectors, which is fragile across
   plugin updates. Brand colour follows the Astra palette. */
.gform-theme--orbital,
.entry-content .gform_wrapper.gform-theme--orbital {
    --gf-color-primary:                       var(--ast-global-color-0);
    --gf-color-primary-rgb:                   246, 139, 51;
    --gf-color-primary-contrast:              var(--ast-global-color-2);
    --gf-color-primary-darker:                var(--ast-global-color-1);
    --gf-color-primary-lighter:               var(--ast-global-color-0);

    --gf-ctrl-btn-bg-color-primary:           var(--ast-global-color-0);
    --gf-ctrl-btn-color-primary:              var(--ast-global-color-2);
    --gf-ctrl-btn-border-color-primary:       var(--ast-global-color-0);
    --gf-ctrl-btn-bg-color-hover-primary:     var(--ast-global-color-1);
    --gf-ctrl-btn-color-hover-primary:        #fff;
    --gf-ctrl-btn-border-color-hover-primary: var(--ast-global-color-1);
    --gf-ctrl-btn-bg-color-focus-primary:     var(--ast-global-color-1);
    --gf-ctrl-btn-color-focus-primary:        #fff;

    --gf-ctrl-btn-font-size:                  17px;
    --gf-ctrl-btn-padding-x:                  34px;
    --gf-ctrl-btn-padding-y:                  15px;
    --gf-ctrl-btn-radius:                     12px;
    --gf-ctrl-border-color-focus:             var(--ast-global-color-0);
    --gf-ctrl-radius:                         8px;
    --gf-ctrl-label-font-size:                15px;
    --gf-ctrl-font-size:                      17px;
    --gf-field-gap-y:                         22px;
}
/* belt and braces: the submit input specifically */
.entry-content .gform_wrapper .gform_footer input[type=submit].gform_button {
    background-color: var(--ast-global-color-0) !important;
    border-color: var(--ast-global-color-0) !important;
    color: var(--ast-global-color-2) !important;
    border-radius: 12px !important;
    padding: 15px 34px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}
.entry-content .gform_wrapper .gform_footer input[type=submit].gform_button:hover,
.entry-content .gform_wrapper .gform_footer input[type=submit].gform_button:focus {
    background-color: var(--ast-global-color-1) !important;
    border-color: var(--ast-global-color-1) !important;
    color: #fff !important;
}

/* the team shot is portrait (818x1024); uncapped it dominates the page */
.entry-content figure.c4-team-photo {
    max-width: 420px !important;
    width: 100% !important;
    margin: 30px 0 14px 0 !important;
    float: none;
}
.entry-content figure.c4-team-photo img { border-radius: 6px; width: 100%; height: auto; }
.entry-content figure.c4-project-img { max-width: 820px !important; margin: 30px 0 8px 0 !important; }
.entry-content figure.c4-project-img img { border-radius: 6px; width: 100%; height: auto; }
/* bios read better with a little separation */
.entry-content > h2 + .c4-bio__role { margin-top: 2px; }

/* headline clamps bottom out too high on a 375px screen */
@media (max-width: 600px) {
    .c4-hero__title { font-size: 31px !important; line-height: 1.12 !important; }
    .c4-hero .lede, .c4-hero__lede { font-size: 18px !important; }
    .entry-content > .c4-page__title { font-size: 29px !important; line-height: 1.14 !important; }
    .entry-content > .c4-page__lede { font-size: 18px !important; }
    .c4-qual h2, .c4-qual__title .uagb-heading-text { font-size: 25px !important; }
    .c4-paths .uagb-heading-text, .c4-svcs .uagb-heading-text,
    .c4-values .uagb-heading-text, .c4-cta .uagb-heading-text { font-size: 25px !important; }
    .entry-content > h2 { font-size: 24px !important; margin-top: 42px; }
    .c4-strip__quote { font-size: 19px !important; }
}

/* ==========================================================================
   Interior page headers
   Randi: "each of the pages, there's no headers on them, just stark
   white/bland." Strategic Coach answers this with a two-column header,
   a photograph, and a tinted band immediately below. Same idea here,
   tinted per pathway so the three halves of the business read apart.
   ========================================================================== */
.c4-phead {
    display: flex !important; flex-direction: column !important;
    padding-block: 64px !important;
    padding-inline: max(30px, calc((100% - 1200px) / 2)) !important;
    box-sizing: border-box; margin-bottom: 14px;
}
.c4-phead__row {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 52px; width: 100% !important;
}
.c4-phead__copy  { flex: 1 1 56% !important; display: block !important; min-width: 0; }
.c4-phead__media {
    flex: 1 1 44% !important; min-height: 320px; border-radius: 8px;
    background-size: cover !important; background-position: center 30% !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 18px 44px rgba(34,48,60,.14);
}
.c4-phead .c4-rule { margin-bottom: 18px; }
.c4-phead__eyebrow {
    font-size: 12px !important; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; margin: 0 0 12px !important;
}
.c4-phead__title {
    font-size: clamp(32px, 3.9vw, 50px) !important; letter-spacing: -.026em;
    margin: 0 0 18px !important; line-height: 1.12;
}
.c4-phead__lede { font-size: 19.5px !important; color: var(--c4-muted); margin: 0 !important; max-width: 32em; }

/* pathway tints — the three halves of Core 4 read apart at a glance */
.c4-phead--biz  { background: linear-gradient(180deg, rgba(246,139,51,.10), rgba(246,139,51,.03)); }
.c4-phead--biz  .c4-phead__eyebrow { color: #C4671B; }
.c4-phead--home { background: linear-gradient(180deg, rgba(131,179,225,.20), rgba(131,179,225,.06)); }
.c4-phead--home .c4-phead__eyebrow { color: #3C7CB5; }
.c4-phead--dev  { background: linear-gradient(180deg, rgba(69,182,178,.16), rgba(69,182,178,.05)); }
.c4-phead--dev  .c4-phead__eyebrow { color: #2E8A87; }

/* the old in-flow title styles are now only a fallback */
.entry-content > .c4-page__title,
.entry-content > .c4-page__lede { display: block; }

/* ---- alternating section tint on interior pages -------------------------
   Every other h2 group gets a soft band so the page is not white top to
   bottom. Done with a pseudo-band rather than markup so it survives edits. */
.entry-content > h2 {
    position: relative; padding-top: 10px;
}
.entry-content > h2::before {
    content: ""; position: absolute; left: 0; top: -2px;
    width: 58px; height: 4px; border-radius: 3px; background: var(--c4-brand);
}
.c4-phead--home ~ * .entry-content > h2::before { background: var(--c4-blue); }

/* ---- lists become a formatted two-column grid, not plain bullets ------- */
.entry-content > ul {
    display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px 34px; max-width: none; margin-bottom: 30px !important;
}
.entry-content > ul li {
    background: var(--c4-bg); border-radius: 6px; padding: 14px 16px 14px 42px;
    margin: 0; color: var(--c4-ink); font-size: 16.5px; line-height: 1.45;
}
.entry-content > ul li::before {
    content: "\2713"; left: 16px; top: 15px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--c4-brand); color: #fff;
    font-size: 10px; font-weight: 700; display: grid; place-items: center;
}

@media (max-width: 980px) {
    .c4-phead__row { flex-direction: column !important; gap: 30px; align-items: stretch !important; }
    .c4-phead__media { min-height: 230px; }
    .c4-phead { padding-block: 42px !important; }
    .entry-content > ul { grid-template-columns: minmax(0,1fr) !important; }
}
.page-id-89 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-partnership-AdobeStock-1186318744.jpg") !important; }
.page-id-90 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-partnership-AdobeStock-1186318744.jpg") !important; }
.page-id-91 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-partnership-AdobeStock-1186318744.jpg") !important; }
.page-id-92 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-partnership-AdobeStock-1186318744.jpg") !important; }
.page-id-93 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-partnership-AdobeStock-1186318744.jpg") !important; }
.page-id-94 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-homeownership-readiness-AdobeStock-139371879.jpg") !important; }
.page-id-95 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-real-estate-development-AdobeStock-904760684.jpg") !important; }
.page-id-96 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-real-estate-development-AdobeStock-904760684.jpg") !important; }
.page-id-97 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-real-estate-development-AdobeStock-904760684.jpg") !important; }
.page-id-98 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/core-4-development-rendering.png") !important; }
.page-id-99 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/core-4-randi-and-nick-tapio.jpg") !important; }
.page-id-100 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-testimonial-1-AdobeStock-402646047.jpg") !important; }
.page-id-101 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-hero-owners-in-workshop-AdobeStock-268917648.jpg") !important; }
/* tagline and the "led by" line belong in the header band, not floating
   on white underneath it */
.c4-phead__tagline {
    font-family: var(--ast-heading-font-family, inherit);
    font-size: clamp(19px, 1.7vw, 23px) !important; font-weight: 500;
    color: var(--c4-ink); margin: 0 0 16px !important; letter-spacing: -.012em;
}
.c4-phead__led {
    font-size: 14px !important; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--c4-muted);
    margin: 20px 0 0 !important; padding-top: 16px;
    border-top: 1px solid rgba(34,48,60,.14); display: inline-block;
}

/* closing CTA band — the homepage ends on dark ink, interior pages should too */
.c4-pcta {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center;
    background: var(--c4-ink); color: #fff;
    padding-block: 76px !important;
    padding-inline: max(30px, calc((100% - 1200px) / 2)) !important;
    box-sizing: border-box; margin-top: 64px;
}
.c4-pcta .c4-rule { margin: 0 auto 22px !important; align-self: center !important; }
.c4-pcta h2 {
    color: #fff !important; margin: 0 0 16px !important;
    font-size: clamp(28px, 3.2vw, 40px) !important; text-align: center !important;
}
.c4-pcta h2::before { display: none !important; }
.c4-pcta p {
    color: rgba(255,255,255,.72) !important; font-size: 19px !important;
    max-width: 34em; margin: 0 auto 30px !important; text-align: center !important;
}
.c4-pcta .c4-btns { align-self: center !important; justify-content: center !important; margin-top: 0 !important; }

/* per-page header images */
.page-id-90 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-strategy-leadership-AdobeStock-401509003.jpg") !important; }
.page-id-91 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-financial-strategy-AdobeStock-222263319.jpg") !important; }
.page-id-92 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-business-launch-growth-AdobeStock-350250248.jpg") !important; }
.page-id-93 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-brand-marketing-digital-AdobeStock-241545495.jpg") !important; }
.page-id-96 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-community-development-AdobeStock-525195939.jpg") !important; }
.page-id-97 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-apartment-turnover-AdobeStock-431837490.jpg") !important; }
.page-id-101 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-contact-conversation-AdobeStock-561754491.jpg") !important; }

/* ==========================================================================
   Lexi revision round, 2026-09-30
   ========================================================================== */

/* Bar order is now Purple, Green, Orange, Blue (was Purple, Blue, Teal, Orange) */
.c4-rule i:nth-child(1) { background: var(--c4-purple) !important; }
.c4-rule i:nth-child(2) { background: var(--c4-teal)   !important; }
.c4-rule i:nth-child(3) { background: var(--c4-orange) !important; }
.c4-rule i:nth-child(4) { background: var(--c4-blue)   !important; }
.topbar i:nth-child(1) { background: var(--c4-purple) !important; }
.topbar i:nth-child(2) { background: var(--c4-teal)   !important; }
.topbar i:nth-child(3) { background: var(--c4-orange) !important; }
.topbar i:nth-child(4) { background: var(--c4-blue)   !important; }

/* Every single-orange accent dash becomes the four-colour bar */
.entry-content > h2::before {
    width: 76px !important; height: 5px !important; border-radius: 3px !important;
    background: linear-gradient(90deg,
        var(--c4-purple) 0 25%, var(--c4-teal) 25% 50%,
        var(--c4-orange) 50% 75%, var(--c4-blue) 75% 100%) !important;
}
.c4-step__grid .c4-step, .c4-svc, .c4-val__bar { /* keep per-item coding, it is a system not an accent */ }

/* logo gets more room, nav tightens to fit the longer labels */
.nav img.logo { height: 34px !important; }
.menu { gap: 18px !important; }
.menu > li { font-size: 14.5px !important; }
.menu a.btn { padding: 11px 22px !important; font-size: 15.5px !important; }
@media (max-width: 1240px) { .menu { gap: 13px !important; } .menu > li { font-size: 13.5px !important; } }

/* disclaimer boxes: label them and raise contrast (Lexi asked for both) */
.c4-notice { background: #FFF8EE !important; border-left: 5px solid var(--c4-orange) !important; }
.c4-notice p { color: #4A3208 !important; }
.c4-notice::before {
    content: "Disclaimer"; display: block; font-size: 11.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #8A5A00; margin-bottom: 8px;
}
.c4-notice--warn::before { content: "Internal note"; }

/* ---- footer: boxed, consistent, carries description + social + disclaimer ---- */
.c4-footer {
    background: var(--c4-ink-d); color: rgba(255,255,255,.66);
    padding: 54px max(30px, calc((100% - 1200px) / 2)) 0;
}
.c4-footer__box {
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px; padding: 38px 40px;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px;
}
.c4-footer__box h5 { color: #fff; font-size: 15px; margin: 0 0 14px;
    font-family: var(--ast-heading-font-family, inherit); }
.c4-footer__box a { display: block; color: rgba(255,255,255,.66);
    text-decoration: none; padding: 5px 0; font-size: 15px; }
.c4-footer__box a:hover { color: var(--c4-orange); }
.c4-footer__logo { height: 34px; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 14px; }
.c4-footer__desc { font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 30em; }
.c4-footer__social { display: flex; gap: 12px; margin-top: 4px; }
.c4-footer__social a {
    width: 38px; height: 38px; border-radius: 50%; padding: 0;
    background: rgba(255,255,255,.10); display: grid; place-items: center;
    transition: background .16s;
}
.c4-footer__social a:hover { background: var(--c4-orange); }
.c4-footer__social svg { width: 17px; height: 17px; fill: #fff; }
.c4-footer__disc {
    margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.12);
    font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.52);
}
.c4-footer__bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden;
                  width: 96px; margin-bottom: 20px; }
.c4-footer__bar i { flex: 1 }
.c4-footer__bar i:nth-child(1){background:var(--c4-purple)} .c4-footer__bar i:nth-child(2){background:var(--c4-teal)}
.c4-footer__bar i:nth-child(3){background:var(--c4-orange)} .c4-footer__bar i:nth-child(4){background:var(--c4-blue)}
@media (max-width: 860px) { .c4-footer__box { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; } }

/* Astra's own footer rows are replaced by .c4-footer above them */
.site-footer .ast-builder-grid-row-container,
.site-footer .site-primary-footer-wrap,
.site-footer .site-above-footer-wrap { display: none !important; }
.site-footer .site-below-footer-wrap {
    background: var(--c4-ink-d) !important; border-top: 1px solid rgba(255,255,255,.12);
}
.site-footer .site-below-footer-wrap .ast-builder-grid-row { padding-block: 18px !important; }
.site-below-footer-wrap .ast-footer-copyright * { color: rgba(255,255,255,.52) !important; font-size: 13.5px !important; }
.site-below-footer-wrap .ast-footer-copyright a { color: rgba(255,255,255,.72) !important; }
.c4-footer + .site-footer { margin-top: 0; }

/* ==========================================================================
   New pages: Interior Design & Organization, Who We Support, Local Resources
   Added 2026-09-30 per Lexi's revision document.
   ========================================================================== */

/* fourth pathway tint — purple, so interior design reads apart from the
   business (orange), homeownership (blue) and development (teal) bands */

/* header photographs */
.page-id-212 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-interior-design-AdobeStock-606614907.jpg") !important; }
.page-id-213 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-who-we-support-AdobeStock-1775755825.jpg") !important; }
.page-id-214 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-local-resources-AdobeStock-442355087.jpg") !important; }

/* Who We Support: the groups Core 4 sponsors */
.c4-group__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin: 34px 0 10px;
}
.c4-group {
    background: var(--ast-global-color-5, #F0F5FA);
    border-left: 4px solid var(--c4-teal);
    border-radius: 6px; padding: 22px 24px;
}
.c4-group__name { font-size: 19px !important; margin: 0 0 6px !important; line-height: 1.25; }
.c4-group__place { font-size: 15px !important; color: var(--c4-muted); margin: 0 !important; }

/* Local Resources: linked tiles, logos to follow */
.c4-res__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin: 34px 0 10px;
}
.c4-res {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    background: #fff; border: 1px solid var(--ast-global-color-7, #D1D5DB);
    border-radius: 8px; padding: 22px 24px; text-decoration: none !important;
    color: var(--ast-global-color-2) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.c4-res:hover, .c4-res:focus-visible {
    border-color: var(--c4-orange); box-shadow: 0 10px 26px rgba(34,48,60,.10);
    transform: translateY(-2px);
}
.c4-res__logo {
    width: 100%; height: 56px; border-radius: 4px;
    background: var(--ast-global-color-5, #F0F5FA);
}
.c4-res__name { font-weight: 600; font-size: 17px; line-height: 1.3; }

/* inline note for content Core 4 still owes us */
.c4-note-inline {
    font-size: 14.5px !important; color: var(--c4-muted);
    border-left: 3px solid var(--c4-orange); padding-left: 14px; margin-top: 6px !important;
}

@media (max-width: 921px) {
    .c4-group__grid, .c4-res__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .c4-group__grid, .c4-res__grid { grid-template-columns: 1fr; }
}

/* ---- Interior Design page: muted orange banner, other three colours as
   subtle accents further down (Lexi, section 15) ---------------------- */
.c4-phead--interior {
    background: linear-gradient(180deg, rgba(246,139,51,.22), rgba(246,139,51,.06)) !important;
}
.c4-phead--interior .c4-phead__eyebrow { color: #B35F14 !important; }
/* h2 underline marks step through purple, teal, blue as you scroll */
.page-id-212 .entry-content > h2:nth-of-type(1)::before { background: var(--c4-purple) !important; }
.page-id-212 .entry-content > h2:nth-of-type(2)::before { background: var(--c4-teal)   !important; }
.page-id-212 .entry-content > h2:nth-of-type(3)::before { background: var(--c4-blue)   !important; }
/* alternating tinted bands behind the long lists */
.page-id-212 .entry-content > ul {
    background: linear-gradient(180deg, rgba(131,111,171,.07), rgba(131,111,171,0));
    border-radius: 8px; padding: 22px 26px 22px 44px !important;
}

/* ==========================================================================
   Primary navigation after the restructure
   Nine top-level items plus the CTA do not fit the 1240px boxed header at
   the old sizing, so the header runs wider and the links run tighter.
   Lexi asked for the logo to give up room and said the long business label
   may wrap; both happen here rather than shortening her labels.
   ========================================================================== */
@media (min-width: 1200px) {
    .ast-primary-header-bar .site-primary-header-wrap.ast-container {
        max-width: none !important;
        padding-inline: 30px !important;
    }
    .site-logo-img img, .custom-logo { max-width: 148px !important; width: 148px !important; }

    #ast-hf-menu-1 > .menu-item > .menu-link,
    .main-header-menu > .menu-item > .menu-link {
        font-size: 13px !important;
        padding-inline: 7px !important;
        letter-spacing: -.005em;
    }
    /* the one long label wraps inside its own item instead of pushing a
       second nav row */
    #ast-hf-menu-1 > .menu-item > .menu-link .ast-icon,
    .main-header-menu > .menu-item > .menu-link .ast-icon { margin-left: 3px !important; }
    #ast-hf-menu-1 > .menu-item > .menu-link {
        max-width: 155px; white-space: normal; line-height: 1.25;
        display: flex; align-items: center;
    }
    /* keep the CTA on one line and visually separate */
    #ast-hf-menu-1 > .menu-item.nav-cta > .menu-link {
        max-width: none; white-space: nowrap; margin-left: 6px;
    }
    /* dropdown panels stay readable at their own size */
    #ast-hf-menu-1 .sub-menu .menu-link { font-size: 14.5px !important; max-width: none; white-space: nowrap; }
}

/* ==========================================================================
   Revisions from Lexi's document, 2026-09-30
   ========================================================================== */

/* §9 the boundary notice was grey on grey and hard to read */
.c4-notice p { color: var(--ast-global-color-2, #1e293b) !important; }

/* §6 Commercial Development leads the row and gets the wide slot */
.c4-svc__grid--lead {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 22px; margin: 30px 0 10px;
}
.c4-svc__grid--lead .c4-svc--lead { grid-column: 1 / -1; }
.c4-svc__grid--lead .c4-svc--lead .c4-svc__title { font-size: 24px !important; }
.c4-svc__list {
    margin: 10px 0 0 !important; padding-left: 20px !important;
    font-size: 16.5px; line-height: 1.55; color: var(--c4-muted);
}
.c4-svc__list li { margin-bottom: 5px; }
.c4-svc__grid--lead .c4-svc__text + .c4-svc__text { margin-top: 12px; }

@media (max-width: 700px) {
    .c4-svc__grid--lead { grid-template-columns: 1fr; }
}

/* §3 bios fold behind a Learn more disclosure so the page stays scannable */
.c4-bio__more { margin: 0 0 34px; }
.c4-bio__more > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 16px; color: var(--c4-brand, #F68B33);
    padding: 6px 0; margin-top: -6px;
}
.c4-bio__more > summary::-webkit-details-marker { display: none; }
.c4-bio__more > summary::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}
.c4-bio__more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.c4-bio__more > summary:focus-visible { outline: 2px solid var(--c4-brand); outline-offset: 3px; }
.c4-bio__moreinner { padding-top: 8px; }
.c4-bio__moreinner p { margin-bottom: 1.2em; }

/* §4 Success Stories loses its header photograph, so the copy gets the width */
.c4-phead__row--noimg .c4-phead__copy { flex: 1 1 100% !important; }
.c4-phead__row--noimg .c4-phead__lede { max-width: 46em; }

/* ==========================================================================
   Home page revisions, Lexi §2
   ========================================================================== */

/* hero gets a colour block underneath it so the header reads apart from the
   content, the way the About page header does */
.c4-hero {
    background: linear-gradient(180deg, rgba(246,139,51,.10), rgba(246,139,51,.02)) !important;
    border-bottom: 4px solid transparent !important;
    border-image: linear-gradient(90deg,
        var(--c4-purple) 0 25%, var(--c4-teal) 25% 50%,
        var(--c4-orange) 50% 75%, var(--c4-blue) 75% 100%) 1 !important;
}

/* the four service areas: 2x2, same weight as the business service boxes */
.c4-svc__grid--paths {
    display: grid !important; grid-template-columns: repeat(2, 1fr);
    gap: 22px; margin: 34px auto 0; max-width: 1000px;
}
.c4-svc__grid--paths .c4-svc__title { font-size: 20px !important; }
.c4-svc__grid--paths .c4-svc__text { font-size: 16px; }

/* testimonial carousel: one quote at a time, no faces, a quote mark instead */
.c4-tqs { position: relative; max-width: 820px; margin: 0 auto; text-align: center; padding: 8px 20px 0; }
.c4-tqs__mark {
    display: block; font-family: Georgia, serif; font-size: 72px; line-height: .6;
    color: var(--c4-orange); opacity: .5; margin-bottom: 14px;
}
.c4-tqs__track { list-style: none; margin: 0; padding: 0; position: relative; }
.c4-tq {
    margin: 0; opacity: 0; visibility: hidden; position: absolute; inset: 0;
    transition: opacity .32s ease;
}
.c4-tq.is-on { opacity: 1; visibility: visible; position: relative; }
.c4-tq__text {
    margin: 0 0 14px !important; border: 0 !important; padding: 0 !important;
    font-size: 21px; line-height: 1.5; font-weight: 500;
}
.c4-tq__meta { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--c4-muted); }
.c4-tq__pending {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 3px;
    background: rgba(246,139,51,.16); color: #A4530F; letter-spacing: .02em; text-transform: none;
}
.c4-tqs__nav { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.c4-tqs__dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: var(--ast-global-color-7, #D1D5DB); cursor: pointer; transition: background .18s ease;
}
.c4-tqs__dot.is-on { background: var(--c4-orange); }
.c4-tqs__dot:focus-visible { outline: 2px solid var(--c4-orange); outline-offset: 3px; }
.c4-tqs__link { display: inline-block; margin-top: 20px; font-weight: 600; }

@media (max-width: 700px) {
    .c4-svc__grid--paths { grid-template-columns: 1fr; }
    .c4-tq__text { font-size: 18.5px; }
}

/* Spectra root sections collapse to max-content when their flex column has
   no wide child. They are alignfull grid items, so stretch them instead of
   setting a width, which would resolve against the content column. */
.c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-strip, .c4-cta {
    justify-self: stretch !important;
    align-self: stretch !important;
}
.c4-strip > .uagb-container-inner-blocks-wrap,
.c4-cta > .uagb-container-inner-blocks-wrap,
.c4-paths > .uagb-container-inner-blocks-wrap {
    display: flex !important; flex-direction: column !important; width: 100% !important;
}

/* §12 current project entries */
.c4-proj__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px 0 34px; }
.c4-proj {
    background: var(--ast-global-color-5, #F0F5FA); border-radius: 8px; padding: 22px 24px;
    border-left: 4px solid var(--c4-teal);
}
.c4-proj--c3 { border-left-color: var(--c4-purple); }
.c4-proj__title { font-size: 20px !important; margin: 0 0 4px !important; }
.c4-proj__where { font-size: 14.5px !important; color: var(--c4-muted); margin: 0 0 10px !important; }
.c4-proj__text  { font-size: 16px !important; margin: 0 !important; }
@media (max-width: 700px) { .c4-proj__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fixes, October 2
   ========================================================================== */

/* 1. The footer painted its background with var(--c4-ink-d), which was never
      defined. An undefined custom property inside a shorthand invalidates the
      whole declaration at computed-value time, so the background fell back to
      transparent and the footer rendered as white-on-white (contrast 1.0).
      Define it rather than hard-coding the hex at the use site. */
:root {
    --c4-ink-d: #1A242E;
}

/* 2. Full-bleed band padding was percentage-based:
         padding-inline: max(30px, calc((100% - 1200px) / 2))
      Percentage padding resolves against the CONTAINING BLOCK, which here is
      .entry-content at 1200px, not the 1440px viewport the band spans. So the
      expression evaluated to max(30px, 0) and every band sat 30px off the
      window edge instead of lining its content up at the theme width.
      Viewport units measure the thing we actually mean. */
.c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-strip, .c4-cta,
.c4-phead, .c4-pcta {
    padding-inline: max(30px, calc((100vw - 1200px) / 2)) !important;
}

/* 3. Two testimonial elements missed AA by a hair: the meta line at 4.35 and
      the pending badge at 4.28, both against the tinted band. */
.c4-tq__meta { color: rgba(34, 48, 60, .78) !important; }
.c4-tq__pending {
    background: rgba(246, 139, 51, .20) !important;
    color: #8A4409 !important;
}

/* ---- Alignment: every band's content starts on the same vertical line ----
   The hero sat 20px right of the other sections, the qualifier list another
   20px right of its own heading, and the four service cards were capped at
   1000px and centred, which left them floating 100px inside the heading
   above them. All three now line up on the 1200px content column. */
.c4-hero__row,
.c4-hero__copy  { margin-inline-start: 0 !important; padding-inline-start: 0 !important; }
.c4-qual__list  { margin-left: 0 !important; padding-left: 0 !important; }
.c4-qual__list li { padding-left: 34px; }

.c4-svc__grid--paths {
    max-width: none !important;
    margin-inline: 0 !important;
}

/* the primary nav has room to breathe again */
@media (min-width: 1200px) {
    .site-logo-img img, .custom-logo { max-width: 164px !important; width: 164px !important; }
    #ast-hf-menu-1 > .menu-item > .menu-link,
    .main-header-menu > .menu-item > .menu-link {
        font-size: 14.4px !important;
        padding-inline: 8px !important;
        letter-spacing: 0;
    }
    #ast-hf-menu-1 > .menu-item > .menu-link { max-width: none; white-space: nowrap; }
}
@media (max-width: 921px) {
}

/* The primary menu's wrappers are inline-flex, so the <ul> shrink-to-fits to
   less than the grid column it sits in and the CTA wraps to a second row with
   140px of the column still empty. Let the wrappers fill the column and stop
   the list wrapping, rather than shrinking the type any further. */
@media (min-width: 1200px) {
    .ast-main-header-bar-alignment,
    .main-header-bar-navigation,
    .site-header .site-navigation,
    .site-header .main-navigation { width: 100% !important; }
    .ast-builder-menu-1 { flex: 1 1 auto !important; padding-right: 0 !important; }
    #ast-hf-menu-1 {
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end;
        align-items: center;
    }
    #ast-hf-menu-1 > .menu-item.nav-cta { margin-left: 10px; }
    #ast-hf-menu-1 > .menu-item > .menu-link { white-space: nowrap; }
}

/* ---- Primary nav dropdowns ------------------------------------------
   The submenu opened at the parent link's baseline, 28px above the header
   bar's own bottom edge, so it read as bursting out of the header rather
   than hanging below it. Drop it to the header edge and give the panel
   room to breathe.

   The offset is margin, which would normally leave a dead zone that closes
   the menu as the pointer travels from parent to child. The ::before spans
   that gap transparently so the hover stays continuous. It sits on the
   submenu itself, which Astra hides with visibility:hidden, and hidden
   elements do not receive pointer events, so it never blocks the header. */
@media (min-width: 922px) {
    #ast-hf-menu-1 > .menu-item-has-children > .sub-menu,
    .main-header-menu > .menu-item-has-children > .sub-menu {
        margin-top: 28px;
        padding-block: 8px !important;
        border-radius: 6px;
        box-shadow: 0 14px 34px rgba(34, 48, 60, .16) !important;
    }
    #ast-hf-menu-1 > .menu-item-has-children > .sub-menu::before,
    .main-header-menu > .menu-item-has-children > .sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -28px;
        height: 28px;
    }
    /* a little more air inside the panel */
    #ast-hf-menu-1 .sub-menu .menu-link,
    .main-header-menu .sub-menu .menu-link {
        padding-block: 11px !important;
        padding-inline: 20px !important;
        line-height: 1.35;
    }
}

/* ---- Primary nav dropdowns, take two --------------------------------
   The first attempt put the 28px offset on the submenu's margin and
   bridged the gap with an absolutely positioned ::before. Verified with a
   real pointer, that does not work: a generated box placed outside its
   originating element's border box is not hit-tested for :hover, so the
   menu closed as soon as the pointer entered the gap.

   This version makes the gap part of the list item itself. On hover the
   item grows 28px of padding downward and takes an equal negative margin,
   so the header height does not move but the hit area reaches the panel.
   The submenu then sits at top:100%, which is the bottom of that padding
   box, with no margin and therefore no dead zone at all. */
@media (min-width: 922px) {
    #ast-hf-menu-1 > .menu-item-has-children,
    .main-header-menu > .menu-item-has-children {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    #ast-hf-menu-1 > .menu-item-has-children:hover,
    #ast-hf-menu-1 > .menu-item-has-children:focus-within,
    .main-header-menu > .menu-item-has-children:hover,
    .main-header-menu > .menu-item-has-children:focus-within {
        padding-bottom: 28px;
        margin-bottom: -28px;
    }
    #ast-hf-menu-1 > .menu-item-has-children > .sub-menu,
    .main-header-menu > .menu-item-has-children > .sub-menu {
        top: 100% !important;
        margin-top: 0 !important;
    }
    #ast-hf-menu-1 > .menu-item-has-children > .sub-menu::before,
    .main-header-menu > .menu-item-has-children > .sub-menu::before {
        content: none;
    }
}

/* Internal notes, shown only to logged-in editors */
.c4-notice--internal { position: relative; }
.c4-notice__flag {
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A4409 !important;
    margin: 0 0 8px !important;
}

/* §4 Success Stories now carry a first name and an industry */
.c4-quote__name {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--ast-global-color-2, #1e293b);
    margin-bottom: 2px;
}
.c4-quote__theme {
    display: block;
    font-size: 13.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(34, 48, 60, .78);
}
.c4-quote figcaption { margin-top: 14px; }

/* ---- Our Projects: a real featured project ---------------------------- */
.c4-proj__feature {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start;
    margin: 30px 0 14px;
}
.c4-proj__media img {
    width: 100%; height: auto; display: block;
    border-radius: 10px; box-shadow: 0 18px 44px rgba(34,48,60,.16);
}
.c4-proj__where {
    font-size: 13px !important; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: rgba(34,48,60,.72); margin: 0 0 6px !important;
}
.c4-proj__name { font-size: 30px !important; margin: 0 0 14px !important; line-height: 1.15; }
.c4-proj__text { font-size: 17px !important; margin: 0 0 14px !important; }
.c4-proj__facts { list-style: none; margin: 20px 0 22px !important; padding: 0 !important; }
.c4-proj__facts li {
    display: flex; gap: 14px; padding: 9px 0;
    border-top: 1px solid var(--ast-global-color-7, #D1D5DB); font-size: 16px;
}
.c4-proj__facts li:last-child { border-bottom: 1px solid var(--ast-global-color-7, #D1D5DB); }
.c4-proj__facts span {
    flex: 0 0 96px; font-weight: 700; font-size: 13px; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(34,48,60,.72); padding-top: 2px;
}
.c4-proj__link { font-weight: 600; }
.c4-proj--next { border-left-color: var(--c4-blue) !important; }

@media (max-width: 880px) {
    .c4-proj__feature { grid-template-columns: 1fr; gap: 24px; }
    .c4-proj__name { font-size: 26px !important; }
}

/* ---- A purple header variant, so all four brand colours are in rotation --- */
.c4-phead--purple {
    background: linear-gradient(180deg, rgba(131,111,171,.20), rgba(131,111,171,.05)) !important;
}
.c4-phead--purple .c4-phead__eyebrow { color: #5F4E88 !important; }

/* ---- Footer, revised 6 Oct per Randi -----------------------------------
   Full page width, three even columns, link columns dropped as redundant
   with the navigation, disclaimer promoted into the grid at a readable size. */
/* The <footer> already centres its content with
   padding: 54px max(30px, calc((100% - 1200px) / 2)), so adding a second
   viewport-based padding here stacked the two: 342px + 290px a side at
   1900px wide, which squeezed three columns into about 600px. Zero the
   outer padding and cap the box itself instead, which holds at any width. */
.c4-footer { padding-inline: 0 !important; }
.c4-footer__box {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr 1.5fr !important;
    gap: 56px !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding: 48px 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    align-items: start;
}
.c4-footer__contact h5,
.c4-footer__legal h5 {
    font-size: 13px !important; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #fff !important; margin: 0 0 14px !important;
}
.c4-footer__person { font-weight: 600; color: #fff !important; margin: 0 0 6px !important; }
.c4-footer__contact p { margin: 0 0 6px !important; font-size: 16px !important; }
.c4-footer__legal p { font-size: 15px !important; line-height: 1.6; margin: 0 !important; }
.c4-footer__desc { max-width: 34em; }

@media (max-width: 980px) {
    .c4-footer__box { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    .c4-footer__legal { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .c4-footer__box { grid-template-columns: 1fr !important; }
}

/* LinkedIn link on each team bio */
.c4-bio__li {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 16px; font-size: 15px; font-weight: 600;
    text-decoration: none !important; color: var(--c4-brand) !important;
}
.c4-bio__li svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.c4-bio__li:hover, .c4-bio__li:focus-visible { color: var(--ast-global-color-1) !important; }
.c4-bio__li:focus-visible { outline: 2px solid var(--c4-brand); outline-offset: 3px; }

/* ---- Tinted intro box at the top of a page (Randi, 6 Oct) -------------- */
.c4-intro {
    border-radius: 10px;
    padding: 24px 28px;
    margin: 6px 0 30px;
    border-left: 5px solid var(--c4-teal);
    background: linear-gradient(180deg, rgba(69,182,178,.16), rgba(69,182,178,.05));
}
.c4-intro p { margin: 0 !important; font-size: 18px !important; line-height: 1.55; }
.c4-intro p + p { margin-top: 10px !important; }

/* ---- Who We Support: groups with their photos ------------------------- */
.c4-group__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin: 30px 0 10px;
}
.c4-group {
    background: #fff; border: 1px solid var(--ast-global-color-7, #D1D5DB);
    border-radius: 10px; overflow: hidden; border-left: 4px solid var(--c4-teal);
    display: flex; flex-direction: column;
}
.c4-group__media {
    background: var(--ast-global-color-5, #F0F5FA);
    height: 190px; display: flex; align-items: center; justify-content: center; padding: 10px;
}
.c4-group__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.c4-group__meta { padding: 18px 20px 20px; }
.c4-group__name { font-size: 18px !important; margin: 0 0 4px !important; line-height: 1.25; }
.c4-group__place { font-size: 14.5px !important; color: var(--c4-muted); margin: 0 !important; }

@media (max-width: 921px) { .c4-group__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .c4-group__grid { grid-template-columns: 1fr; } }

/* ---- Second featured project, image column on the right --------------- */
.c4-proj__feature--alt { grid-template-columns: 1fr 1.15fr; margin-top: 44px; }
.c4-proj__feature--alt .c4-proj__media { order: 2; }
.c4-proj__feature--alt .c4-proj__body  { order: 1; }
.c4-proj__media--pending {
    display: flex; align-items: center; justify-content: center;
    min-height: 260px; border-radius: 10px;
    background: var(--ast-global-color-5, #F0F5FA);
    border: 2px dashed var(--ast-global-color-7, #D1D5DB);
}
.c4-proj__ph {
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(34,48,60,.55);
}
.c4-proj__tag {
    font-size: 17px !important; font-weight: 600; color: var(--c4-purple);
    margin: 0 0 14px !important;
}
.c4-proj__sub { font-weight: 700; margin: 0 0 8px !important; font-size: 16px !important; }
.c4-proj__services {
    margin: 0 0 16px !important; padding-left: 20px !important;
    font-size: 16.5px; line-height: 1.6; color: var(--c4-muted);
}
.c4-proj__services li { margin-bottom: 4px; }

@media (max-width: 880px) {
    .c4-proj__feature--alt { grid-template-columns: 1fr; }
    .c4-proj__feature--alt .c4-proj__media { order: 1; }
    .c4-proj__feature--alt .c4-proj__body  { order: 2; }
}

/* ---- Logo walls: resources and subcontractors (Randi, 6 Oct) ----------
   Logo only, the logo itself is the link. Partners without a usable logo
   fall back to a name tile built to the same shape, so a part-filled wall
   still reads as deliberate rather than broken. */
.c4-logo__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    margin: 30px 0 14px;
}
.c4-logo__grid--subs { grid-template-columns: repeat(4, 1fr); } /* same tile width as the resources wall, so every logo renders at one size */
.c4-logo {
    display: flex; align-items: center; justify-content: center;
    min-height: 118px; padding: 16px;
    background: #fff; border: 1px solid var(--ast-global-color-7, #D1D5DB);
    border-radius: 8px; text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.c4-logo:hover, .c4-logo:focus-visible {
    border-color: var(--c4-orange); box-shadow: 0 10px 24px rgba(34,48,60,.10);
    transform: translateY(-2px);
}
.c4-logo:focus-visible { outline: 2px solid var(--c4-orange); outline-offset: 3px; }
.c4-logo__img { display: block; width: 100%; }
.c4-logo__img img {
    display: block; margin: 0 auto;
    max-width: 100%; max-height: 82px; width: auto; height: auto; object-fit: contain;
}
.c4-logo__name {
    font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center;
    color: var(--ast-global-color-2, #1e293b);
}
.c4-logo--nolink { cursor: default; }
.c4-logo--nolink:hover { border-color: var(--ast-global-color-7, #D1D5DB); box-shadow: none; transform: none; }

@media (max-width: 880px)  { .c4-logo__grid, .c4-logo__grid--subs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .c4-logo__grid, .c4-logo__grid--subs { grid-template-columns: repeat(2, 1fr); } }

/* ---- Above-header bar, 6 Oct per Randi --------------------------------
   Purple instead of the dark slate, and it stays put when the page scrolls
   so the social links and phone number are always reachable. Astra Pro's
   own sticky setting covers the primary row only; this adds the row above
   it without touching the header-builder options in astra-settings, which
   cannot be written from the CLI without breaking the Customizer. */
.ast-above-header-bar {
    background-color: var(--c4-purple, #836FAB) !important;
}
/* Sticking this row is Astra Pro's own toggle rather than a CSS job:
   Header -> Sticky Header -> Stick, tick Above Header alongside Primary
   Header. That setting lives in astra-settings, which the CLI must not
   write. position:sticky cannot do it here because the bar sits inside
   .site-header and can only stick while that element is in view. */
/* the bar's own links stay legible on purple */
.ast-above-header-bar a { color: rgba(255,255,255,.92) !important; }
.ast-above-header-bar a:hover,
.ast-above-header-bar a:focus-visible { color: #fff !important; }
.ast-above-header-bar .ahfb-svg-iconset svg { fill: rgba(255,255,255,.92); }
.ast-above-header-bar a:hover .ahfb-svg-iconset svg { fill: #fff; }

/* the pending-media tile keeps its shape once the caption is stripped for visitors */
.c4-proj__media--pending { background: linear-gradient(135deg, rgba(131,111,171,.10), rgba(246,139,51,.08)); }

/* ==========================================================================
   Per-page colour system, from the 6 Oct call
   --------------------------------------------------------------------------
   Randi: purple is reserved for the bottom CTA and the footer, so page
   headers rotate teal, blue and orange only. The home hero is teal. Whatever
   colour a page's header uses, its mid-page accents use too, so each page
   reads as one scheme rather than a pile of highlights.
   ========================================================================== */

:root { --c4-accent: var(--c4-orange); --c4-accent-ink: #B35F14; }

body.c4-a-teal   { --c4-accent: #45B6B2; --c4-accent-ink: #1F6F6C; --c4-accent-rgb: 69,182,178; }
body.c4-a-blue   { --c4-accent: #83B3E1; --c4-accent-ink: #2E6698; --c4-accent-rgb: 131,179,225; }
body.c4-a-orange { --c4-accent: #F68B33; --c4-accent-ink: #9A4E0C; --c4-accent-rgb: 246,139,51; }
body.c4-a-purple { --c4-accent: #836FAB; --c4-accent-ink: #5F4E88; --c4-accent-rgb: 131,111,171; }

/* ---- page header band takes the page colour ---------------------------- */
body[class*="c4-a-"] .c4-phead,
body[class*="c4-a-"] .c4-hero {
    background: linear-gradient(180deg,
        rgba(var(--c4-accent-rgb), .22),
        rgba(var(--c4-accent-rgb), .05)) !important;
}
body[class*="c4-a-"] .c4-phead__eyebrow { color: var(--c4-accent-ink) !important; }

/* ---- mid-page accents follow the same colour --------------------------- */
body[class*="c4-a-"] .c4-svc,
body[class*="c4-a-"] .c4-group,
body[class*="c4-a-"] .c4-proj,
body[class*="c4-a-"] .c4-intro {
    border-left-color: var(--c4-accent) !important;
}
body[class*="c4-a-"] .c4-intro {
    background: linear-gradient(180deg,
        rgba(var(--c4-accent-rgb), .16),
        rgba(var(--c4-accent-rgb), .05)) !important;
}
body[class*="c4-a-"] .c4-svc--lead .c4-svc__title,
body[class*="c4-a-"] .c4-proj__tag { color: var(--c4-accent-ink) !important; }
body[class*="c4-a-"] .entry-content > h2::before { background: var(--c4-accent) !important; }
body[class*="c4-a-"] .c4-qual__list li::before,
body[class*="c4-a-"] .c4-qual__list li i { background: var(--c4-accent) !important; }
body[class*="c4-a-"] .c4-logo:hover,
body[class*="c4-a-"] .c4-logo:focus-visible,
body[class*="c4-a-"] .c4-res:hover,
body[class*="c4-a-"] .c4-res:focus-visible { border-color: var(--c4-accent) !important; }
body[class*="c4-a-"] .c4-proj__facts span { color: var(--c4-accent-ink) !important; }
body[class*="c4-a-"] .c4-svc__list li::marker { color: var(--c4-accent); }

/* ---- purple is reserved: the bottom CTA on every page ------------------- */
.c4-pcta, .c4-cta {
    background: linear-gradient(180deg,
        rgba(131,111,171,.20), rgba(131,111,171,.06)) !important;
}
.c4-pcta h2, .c4-cta .c4-cta__title .uagb-heading-text { color: var(--ast-global-color-2) !important; }
.c4-pcta p, .c4-cta__sub, .c4-cta__note { color: rgba(34,48,60,.74) !important; }

/* the four-part rule inside a purple band reads as a muted version */
.c4-pcta .c4-rule i, .c4-cta .c4-rule i { opacity: .55; }

/* The footer itself stays dark. Randi on the call: "it makes sense to me
   that the bottom ribbon with the logo is black. What can we do about the
   section above it?" - the section above it being the Let us explore band,
   which is the faded purple above. */

/* links at .66 white measured 3.95:1; .88 clears AA on the dark footer */
.c4-footer a { color: rgba(255,255,255,.88) !important; }
.c4-footer a:hover, .c4-footer a:focus-visible { color: #fff !important; }
.c4-footer__box a { color: rgba(255,255,255,.88); }

/* ---- Projects: Randi preferred a line of detail to the facts table ----- */
.c4-proj__meta {
    font-size: 15px !important; color: var(--c4-muted);
    margin: 0 0 18px !important; line-height: 1.5;
}

/* ---- Success Stories: all four colours in rotation --------------------- */
.c4-quote { border-left: 4px solid var(--c4-orange); padding-left: 22px; }
.c4-quote--v1 { border-left-color: var(--c4-purple) !important; }
.c4-quote--v2 { border-left-color: var(--c4-teal)   !important; }
.c4-quote--v3 { border-left-color: var(--c4-orange) !important; }
.c4-quote--v4 { border-left-color: var(--c4-blue)   !important; }
.c4-quote--v1 .c4-quote__theme { color: #5F4E88 !important; }
.c4-quote--v2 .c4-quote__theme { color: #1F6F6C !important; }
.c4-quote--v3 .c4-quote__theme { color: #9A4E0C !important; }
.c4-quote--v4 .c4-quote__theme { color: #2E6698 !important; }

/* ---- Checklist bullets follow the page accent -------------------------
   The boxes were a fixed cream and the tick circles a fixed orange, which
   read as leftovers on a teal or blue page. Box takes a faded accent, the
   tick circle takes the full one. */
body[class*="c4-a-"] .entry-content > ul li {
    background: rgba(var(--c4-accent-rgb), .12) !important;
}
body[class*="c4-a-"] .entry-content > ul li::before {
    background: var(--c4-accent) !important;
}

/* the Interior page had a one-off purple wash behind its lists; the accent
   system covers that now */
.page-id-212 .entry-content > ul {
    background: none !important;
    padding: 0 !important;
}

/* ---- Above-header bar grew on scroll instead of shrinking --------------
   Astra Pro's shrink-on-scroll ships:

       .ast-sticky-above-shrink .ast-sticky-shrunk .site-navigation
           { line-height: 3; }

   The 3 is unitless, so it multiplies font-size: 18px x 3 = 54px. On the
   primary header that is the point, because that bar is 80-100px tall and
   54px of nav sits inside it. The same rule is applied to the above-header
   row, which is only 40px, so it pushed the bar from 41px to 55px: the
   shrink feature making it grow.

   Hold the normal line-height for this row only. The primary header keeps
   Astra's behaviour untouched.
   Note the class lands ON the bar, not on an ancestor of it, so the
   override has to be .ast-above-header-bar.ast-sticky-shrunk rather than a
   descendant selector. The body class is there to win on specificity. */
.ast-sticky-above-shrink .ast-above-header-bar.ast-sticky-shrunk .site-navigation,
.ast-sticky-above-shrink .ast-above-header-bar.ast-sticky-shrunk .main-header-menu {
    line-height: 1.65;
}

/* Header images for the two new Real Estate children. CLI-authored Spectra
   background attrs emit no front-end CSS, so the media box renders empty
   until the image is set here, keyed off the page id. */
.page-id-342 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-community-development-AdobeStock-525195939.jpg") !important; }
.page-id-343 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-real-estate-development-AdobeStock-904760684.jpg") !important; }
/* Our Projects: the rendering now has its own band further down the page, so the
   header must not repeat it. Lexi: "we don't need the picture of the building twice." */
.page-id-98 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/09/temp-stock-community-development-AdobeStock-525195939.jpg") !important; }

/* A logo needs a panel, not a photo frame */
.c4-proj__media--logo {
    background: var(--ast-global-color-5, #F0F5FA);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 28px; min-height: 260px;
}
.c4-proj__img--logo {
    box-shadow: none !important;
    max-width: 100%; max-height: 220px; width: auto; height: auto;
    object-fit: contain;
}

/* All logo art is now normalised to a 480x240 canvas with consistent optical
   weight, so the tiles can show it at a fixed size instead of each logo
   setting its own scale. */
.c4-logo__img img {
    max-height: none !important;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.c4-logo { min-height: 132px; padding: 10px; }


/* A project feature with no media column runs full width. */
.c4-proj__feature:not(:has(.c4-proj__media)) { grid-template-columns: 1fr !important; }

/* ---- Our Projects, rebuilt to mirror the production page layout -----------
   Randi: "We liked the look & feel of our current Projects page."
   Production is a stack of full-width bands: dark title band, full-width
   rendering, copy beside the logo, a card wall, then Coming Soon.      */

.c4-pj { margin: 36px 0 0; }

.c4-pj__band {
    background: #1A242E;
    margin-left: calc(-50vw + 50% + var(--c4-sbw, 0px) / 2); width: calc(100vw - var(--c4-sbw, 0px));
    padding: 54px 30px; text-align: center;
}
.c4-pj__band--alt { margin-top: 72px; }
.c4-pj__bandtitle {
    color: #fff !important; margin: 0 !important;
    font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: .01em;
}

.c4-pj__shot {
    margin: 0 calc(-50vw + 50% + var(--c4-sbw, 0px) / 2); width: calc(100vw - var(--c4-sbw, 0px));
    background: #F4F7FA; padding: 48px 30px; text-align: center;
}
.c4-pj__shot img { max-width: 1024px; width: 100%; height: auto; border-radius: 10px; }

.c4-pj__row {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px;
    align-items: center; margin: 56px 0;
}
.c4-pj__name { margin: 0 0 14px !important; }
.c4-pj__where { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--c4-accent-ink, #1F6F6C); margin: 0 0 6px !important; }
.c4-pj__tag { font-weight: 600; margin: 0 0 14px !important; }
.c4-pj__text { margin: 0 0 14px !important; }
.c4-pj__sub { font-weight: 600; margin: 18px 0 8px !important; }
.c4-pj__services { margin: 0 0 14px !important; }
.c4-pj__link { font-weight: 600; }
.c4-pj__art {
    background: var(--ast-global-color-5, #F0F5FA); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 28px; min-height: 260px;
}
.c4-pj__art img { max-width: 100%; max-height: 220px; width: auto; height: auto;
    object-fit: contain; box-shadow: none !important; }

.c4-pj__more {
    margin: 0 calc(-50vw + 50% + var(--c4-sbw, 0px) / 2) 0; width: calc(100vw - var(--c4-sbw, 0px));
    background: #fff; padding: 56px 30px 48px; text-align: center;
}
.c4-pj__moretitle { margin: 0 0 32px !important; }
.c4-pj__cards {
    max-width: 1200px; margin: 0 auto; text-align: left;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.c4-pj__card { border-radius: 12px; padding: 26px 24px; border: 1px solid rgba(0,0,0,.06); }
.c4-pj__card--teal   { background: rgba(69,182,178,.12); }
.c4-pj__card--orange { background: rgba(246,139,51,.12); }
.c4-pj__card--blue   { background: rgba(131,179,225,.14); }
.c4-pj__card--purple { background: rgba(131,111,171,.12); }
.c4-pj__cardtitle { margin: 0 0 12px !important; font-size: 1.08rem; }
.c4-pj__cardtext { margin: 0 !important; font-size: .97rem; }
.c4-pj__cardlist { margin: 0 !important; padding-left: 1.1em; font-size: .97rem; }
.c4-pj__cardlist li { background: none !important; padding: 0 0 6px !important; }
.c4-pj__cardlist li::before { display: none !important; }
.c4-pj__credit { max-width: 1200px; margin: 26px auto 0 !important; font-size: .85rem;
    color: #5A6672; text-align: left; }

.c4-pj__coming {
    margin: 64px calc(-50vw + 50% + var(--c4-sbw, 0px) / 2) 0; width: calc(100vw - var(--c4-sbw, 0px));
    background: #F9F7F6; padding: 56px 30px; text-align: center;
}
.c4-pj__comingtitle { margin: 0 0 12px !important; }
.c4-pj__coming .c4-pj__text { max-width: 720px; margin: 0 auto !important; }

@media (max-width: 980px) {
    .c4-pj__row { grid-template-columns: 1fr; gap: 28px; }
    .c4-pj__art { order: -1; min-height: 200px; }
    .c4-pj__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .c4-pj__cards { grid-template-columns: 1fr; }
    .c4-pj__band { padding: 40px 24px; }
}

/* Our Projects: no header photo. The project imagery lives further down the page,
   and the production page this mirrors has no hero image at all. */
.page-id-98 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-cat-lounge-site-with-sign.jpg") !important; }

/* Video beside the rendering, the way the production page pairs them. */
.c4-pj__shotgrid {
    max-width: 1140px; margin: 0 auto;
    display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center;
}
.c4-pj__clip, .c4-pj__render { margin: 0; }
.c4-pj__clip video { width: 100%; height: auto; border-radius: 10px; display: block; background: #000; }
.c4-pj__clip figcaption { font-size: .85rem; color: #5A6672; margin-top: 10px; }
.c4-pj__render img { width: 100%; height: auto; border-radius: 10px; }

/* The Biz Buzz slides, static rather than a carousel. */
.c4-pj__slide { margin: 0; }
.c4-pj__slide img { width: 100%; height: auto; border-radius: 10px; display: block; }

@media (max-width: 900px) {
    .c4-pj__shotgrid { grid-template-columns: 1fr; gap: 24px; }
    .c4-pj__clip { max-width: 320px; margin: 0 auto; }
}

/* ---- Our Projects, second pass against the production page ---------------- */

/* Banner: title and the Fully Occupied starburst on one line, so the badge
   doesn't push the band taller the way it does on production. */
.c4-pj__band { padding: 30px; }
.c4-pj__bandinner {
    max-width: 1140px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 26px;
}
.c4-pj__badge { width: 86px; height: auto; flex: 0 0 auto; }

/* Video and rendering share a height. The clip column is sized to the video's
   own 9:16 so it fills without cropping; the rendering sits inside contain so
   the Keystone and Core 4 marks along its bottom edge survive. */
.c4-pj { --c4-pj-media-h: 420px; }
.c4-pj__shotgrid {
    grid-template-columns: auto auto; justify-content: center; align-items: start;
}
.c4-pj__clip video { height: var(--c4-pj-media-h); width: auto; object-fit: cover; }
.c4-pj__clip figcaption { max-width: 236px; }
.c4-pj__render img { height: var(--c4-pj-media-h); width: auto; }

/* Give the project logo the room production gives it. */
.c4-pj__art { min-height: 320px; }
.c4-pj__art img { max-height: 280px; }

/* The Facebook link reads as a button on production. */
.c4-pj__btn {
    display: inline-block; margin-top: 6px; padding: 11px 20px; border-radius: 6px;
    background: var(--c4-accent, #45B6B2); color: #0F2B2A !important;
    font-weight: 600; text-decoration: none;
}
.c4-pj__btn:hover, .c4-pj__btn:focus { background: var(--c4-accent-ink, #1F6F6C); color: #fff !important; }

.c4-pj__icons { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 18px; }
.c4-pj__icon { width: 128px; height: auto; }

@media (max-width: 900px) {
    .c4-pj__shotgrid { grid-template-columns: 1fr; justify-content: stretch; }
    .c4-pj__clip video, .c4-pj__render img { height: auto; width: 100%; }
    .c4-pj__clip figcaption { max-width: none; }
    .c4-pj__bandinner { flex-direction: column; gap: 16px; }
    .c4-pj__icon { width: 96px; }
}

/* ---- Our Projects: groundbreaking gallery, status chip, dark logo panel ---- */

.c4-pj__status {
    margin: 10px 0 0 !important; display: inline-block;
    padding: 5px 14px; border-radius: 999px;
    background: rgba(255,255,255,.14); color: #fff;
    font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.c4-pj__bandinner { flex-wrap: wrap; }
.c4-pj__bandinner .c4-pj__bandtitle { flex: 0 1 auto; }

.c4-pj__more--gallery { background: #F4F7FA; padding-bottom: 56px; }
.c4-pj__gallery {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.c4-pj__shotitem { margin: 0; }
.c4-pj__shotitem img {
    width: 100%; height: 100%; aspect-ratio: 3 / 2;
    object-fit: cover; border-radius: 10px; display: block;
    /* Bias the crop upward. A centred crop on the portrait shots cuts through faces. */
    object-position: center 28%;
}

/* The Ritual House logo is artwork on a dark ground, so it needs its own panel. */
.c4-pj__art--dark { background: #0E0C0B; padding: 0; overflow: hidden; }
.c4-pj__art--dark img { max-height: none; width: 100%; height: 100%; object-fit: cover; }

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

/* ---- Real photography from the 28 September groundbreaking, replacing stock ----
   Lexi, 7 Oct: "feel free to go through them and use whichever ones work best".
   Only the pages where a real Core 4 photo genuinely fits are swapped. The business
   service pages keep stock until Core 4 has photography that suits them. */
.c4-hero__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-team-homepage.jpg") !important;
    background-position: center 30% !important; }
.page-id-213 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-support-josh-and-caleb.jpg") !important;
    background-position: center 32% !important; }
.page-id-95  .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-site-excavation-dusk.jpg") !important; }
.page-id-342 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-groundbreaking-sign.jpg") !important; }

/* Bio avatars on About Us. */
.c4-bio__avatar { margin: 26px 0 -4px; }
.c4-bio__avatar img {
    width: 132px; height: 132px; border-radius: 50%;
    object-fit: cover; object-position: center 22%; display: block;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* Bio head: photo beside the name, role and LinkedIn link. */
.c4-bio__head {
    display: grid; grid-template-columns: 132px 1fr; gap: 26px;
    align-items: center; margin: 34px 0 14px;
}
.c4-bio__head .c4-bio__avatar { margin: 0; }
.c4-bio__meta > :first-child { margin-top: 0 !important; }
.c4-bio__meta > :last-child  { margin-bottom: 0 !important; }
.c4-bio__meta h2 { margin: 0 0 4px !important; }
.c4-bio__meta .c4-bio__role { margin: 0 0 8px !important; }
@media (max-width: 600px) {
    .c4-bio__head { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   Core 4 Website updates 3, Randi, 8 October.
   "On all pages we decided to do a cohesive coloring instead of all the
   colors. The top gradient section, the lists, top lines above a section if
   applicable, and the footer should be the muted teal color." The accent map
   in functions.php now returns teal everywhere, so these rules only need to
   handle the pieces that were hard-coded to another colour.
   ========================================================================== */

/* The Let us explore band. Randi calls this "the footer"; the dark ribbon
   below it keeps its slate. Was faded purple, now the same muted teal. */
.c4-pcta, .c4-cta {
    background: linear-gradient(180deg,
        rgba(69,182,178,.20), rgba(69,182,178,.06)) !important;
}

/* "On the top section it does get a little hard to differentiate when that
   section ends." A flat muted teal with a defined bottom edge, rather than a
   gradient that fades into the page. */
body[class*="c4-a-"] .c4-phead,
body[class*="c4-a-"] .c4-hero {
    background: rgba(var(--c4-accent-rgb), .16) !important;
    border-bottom: 1px solid rgba(var(--c4-accent-rgb), .38) !important;
}

/* "We can change all the font to black if easier to read instead of the
   grayish text." Body copy to near-black; 15.3:1 on white. */
:root { --c4-muted: #22303C; }
body, .entry-content p, .entry-content li,
.c4-phead__lede, .c4-hero__sub, .c4-svc__text, .c4-group__text {
    color: #22303C !important;
}
.c4-pcta p, .c4-cta__sub, .c4-cta__note { color: #22303C !important; }

/* "On the tops/bottoms of any section squish them together... Equal but short
   distance in between." Roughly a third out of the vertical rhythm, kept even
   so each section still reads as its own. */
.c4-hero, .c4-qual, .c4-paths, .c4-svcs, .c4-values, .c4-strip, .c4-cta {
    padding-block: 54px !important;
}
.c4-phead { padding-block: 48px !important; }
.c4-pcta  { padding-block: 54px !important; }
.entry-content > h2 { margin-top: 42px !important; margin-bottom: 14px !important; }
.entry-content > h3 { margin-top: 30px !important; margin-bottom: 10px !important; }
.entry-content > p  { margin-bottom: 14px !important; }
.entry-content > ul { margin-top: 10px !important; margin-bottom: 22px !important; }
.c4-svc, .c4-group, .c4-proj, .c4-intro { margin-block: 20px !important; }

/* "Anytime there is a photo next to some verbiage make sure the alignment /
   height is the same on both the photo and verbiage side." */
.c4-phead__row, .c4-hero__row { align-items: stretch !important; }
.c4-phead__media, .c4-hero__media { align-self: stretch !important; }
.c4-phead__copy, .c4-hero__copy {
    display: flex; flex-direction: column; justify-content: center;
}

/* Success Stories quote cards were rotating all four brand colours, which is
   the thing this update replaces. Teal, with the rule above each card. */
.c4-quote, .c4-quote--v1, .c4-quote--v2, .c4-quote--v3, .c4-quote--v4 {
    border-left-color: var(--c4-teal) !important;
}
.c4-quote--v1 .c4-quote__theme, .c4-quote--v2 .c4-quote__theme,
.c4-quote--v3 .c4-quote__theme, .c4-quote--v4 .c4-quote__theme {
    color: #1F6F6C !important;
}

/* Business Launch & Growth: Randi asked for visible separation between the two
   intro paragraphs so they read as two, not one block. */
.c4-phead__lede + .c4-phead__lede { margin-top: 14px !important; }

/* Doc 3 photo swaps. */
.page-id-69 .c4-hero__media,
.c4-hero__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-team-tapios-homepage.jpg") !important;
    background-position: center 28% !important; }
.page-id-342 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-commercial-development-map.jpg") !important; }
.page-id-214 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-resources-keystone-site.jpg") !important; }

/* About Us: Randi asked for a coloured square behind the LinkedIn icon so it
   stands out, in the page's blue. */
.page-id-99 .c4-bio__li svg {
    width: 15px; height: 15px; fill: #fff;
    background: #2E6698; border-radius: 3px;
    padding: 5px; box-sizing: content-box;
}
.page-id-99 .c4-bio__li { color: #2E6698 !important; }
.page-id-99 .c4-bio__li:hover svg, .page-id-99 .c4-bio__li:focus-visible svg { background: #1F4A74; }
.page-id-99 .c4-bio__li:hover, .page-id-99 .c4-bio__li:focus-visible { color: #1F4A74 !important; }

/* Who We Support: centre Josh and Caleb so the background is even either side. */
.page-id-213 .c4-phead__media { background-position: center center !important; }

/* Supported teams link out to their own pages. */
.c4-group--link { text-decoration: none !important; color: inherit !important; display: block; }
.c4-group--link:hover, .c4-group--link:focus-visible { border-color: var(--c4-accent) !important; }
.c4-group--link:focus-visible { outline: 2px solid var(--c4-accent); outline-offset: 3px; }
.c4-group--link .c4-group__name { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Our Projects, Core 4 Website updates 3 ------------------------------ */

/* A banner over each project section. The Ritual House already had one; Randi
   asked for the same over Groundbreaking in the lighter blue and the Cat
   Lounge in teal. */
.c4-pj__band--gb  { background: #83B3E1; }
.c4-pj__band--cat { background: #45B6B2; }
.c4-pj__band--gb .c4-pj__bandtitle,
.c4-pj__band--cat .c4-pj__bandtitle { color: #102A33 !important; }

/* Cat Lounge cards at half size, rotating. "like on live site" */
.c4-car { position: relative; max-width: 740px; margin: 0 auto; padding: 0 44px; }
.c4-car__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3);
    gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
}
.c4-car__track::-webkit-scrollbar { display: none; }
.c4-car__track > * { scroll-snap-align: start; }
.c4-pj__slide { margin: 0; }
.c4-pj__slide img { width: 100%; height: auto; border-radius: 10px; display: block; }

.c4-car__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(26,36,46,.08); color: #1A242E;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.c4-car__arrow:hover, .c4-car__arrow:focus-visible { background: var(--c4-accent, #45B6B2); color: #fff; }
.c4-car__arrow:focus-visible { outline: 2px solid var(--c4-accent-ink, #1F6F6C); outline-offset: 2px; }
.c4-car__arrow--prev { left: 0; }
.c4-car__arrow--next { right: 0; }

.c4-car__nav { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.c4-car__dot {
    width: 9px; height: 9px; border: 0; border-radius: 50%; padding: 0;
    background: rgba(26,36,46,.22); cursor: pointer;
}
.c4-car__dot.is-on { background: var(--c4-accent, #45B6B2); }
.c4-car__dot:focus-visible { outline: 2px solid var(--c4-accent-ink, #1F6F6C); outline-offset: 3px; }

/* Coming Soon: cup on the left, copy on the right, no question mark. */
.c4-pj__coming { padding: 40px 30px; }
.c4-pj__comingrow {
    max-width: 920px; margin: 0 auto;
    display: grid; grid-template-columns: 112px 1fr; gap: 28px; align-items: center;
    text-align: left;
}
.c4-pj__comingrow .c4-pj__icons { margin: 0; }
.c4-pj__comingrow .c4-pj__icon { width: 112px; }
.c4-pj__comingtitle { margin: 0 0 8px !important; }
.c4-pj__comingrow .c4-pj__text { margin: 0 !important; max-width: none; }

@media (max-width: 900px) {
    .c4-car__track { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (max-width: 600px) {
    .c4-car__track { grid-auto-columns: 100%; }
    .c4-car { padding: 0 34px; }
    .c4-pj__comingrow { grid-template-columns: 1fr; text-align: center; gap: 14px; }
    .c4-pj__comingrow .c4-pj__icons { justify-content: center; }
}

/* A name under the logos whose artwork carries no readable company name.
   Randi: "can the 5 that don't have names in their logos somehow have a name
   added in the box so we can see who they are". */
.c4-logo__cap {
    display: block; margin-top: 6px; text-align: center;
    font-size: 13px; line-height: 1.25; font-weight: 600;
    color: #22303C; letter-spacing: .01em;
}
.c4-logo:has(.c4-logo__cap) { flex-direction: column; min-height: 152px; padding-bottom: 12px; }
.c4-logo:has(.c4-logo__cap) .c4-logo__img { width: 100%; }

/* ==========================================================================
   Contrast fix, 19 October. The Doc 3 change that set body copy to near-black
   (#22303C) also hit text sitting on the dark bands, where it matched the
   background exactly and rendered invisible. Lexi caught it on the homepage.

   These selectors are prefixed with .entry-content on purpose: the rule they
   have to beat is ".entry-content p, .entry-content li", so anything less
   specific loses even with !important.
   ========================================================================== */
.entry-content .c4-qual,
.entry-content .c4-qual p,
.entry-content .c4-qual li,
.entry-content .c4-qual h2,
.entry-content .c4-qual .uagb-heading-text,
.entry-content .c4-qual__list li,
.entry-content .c4-qual__sub {
    color: #FFFFFF !important;
}
.entry-content .c4-qual .c4-qual__sub { color: rgba(255,255,255,.82) !important; }

.c4-footer, .c4-footer p, .c4-footer li, .c4-footer span { color: #FFFFFF !important; }
.c4-footer a { color: rgba(255,255,255,.88) !important; }
.c4-footer a:hover, .c4-footer a:focus-visible { color: #fff !important; }

/* Project banners: the dark slate one takes white, the light blue and teal
   ones keep dark type. */
.entry-content .c4-pj__band .c4-pj__bandtitle { color: #FFFFFF !important; }
.entry-content .c4-pj__band--gb .c4-pj__bandtitle,
.entry-content .c4-pj__band--cat .c4-pj__bandtitle { color: #102A33 !important; }

/* Orange on the light grey testimonial strip measured 2.14:1. The darker
   orange ink clears AA at 4.6:1. */
.c4-tqs__link, .entry-content .c4-tqs__link { color: #9A4E0C !important; }
.c4-tqs__link:hover, .c4-tqs__link:focus-visible { color: #7A3E09 !important; }

/* ==========================================================================
   Core4 Website Updates 10.12.2026, Lexi and Randi.
   ========================================================================== */

/* All four project bars carry the same title size. */
.c4-pj__bandtitle { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; font-weight: 600 !important; }

/* The Golden Spike Road bar gets the larger starburst. */
.c4-pj__band--spike .c4-pj__badge { width: 124px; }

/* The Ritual House row leads with the graphic. */
.c4-pj__row--flip .c4-pj__body { order: 2; }
.c4-pj__row--flip .c4-pj__art  { order: 1; }

/* Two buttons side by side under the Cat Lounge copy. */
.c4-pj__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.c4-pj__btn--alt {
    background: transparent !important;
    border: 2px solid var(--c4-accent, #45B6B2);
    color: var(--c4-accent-ink, #1F6F6C) !important;
}
.c4-pj__btn--alt:hover, .c4-pj__btn--alt:focus-visible {
    background: var(--c4-accent, #45B6B2) !important; color: #0F2B2A !important;
}

/* Coming Soon now sits under its own bar, so the section itself is plain. */
.c4-pj__coming { padding: 32px 30px 44px; }
.c4-pj__comingrow .c4-pj__icon {
    width: 220px; height: 150px; object-fit: cover; border-radius: 10px;
}
.c4-pj__comingrow { grid-template-columns: 220px 1fr; }

@media (max-width: 600px) {
    .c4-pj__comingrow { grid-template-columns: 1fr; }
    .c4-pj__comingrow .c4-pj__icon { width: 100%; height: auto; }
    .c4-pj__row--flip .c4-pj__body { order: 2; }
    .c4-pj__row--flip .c4-pj__art  { order: 1; }
}

/* Full-width callout at the foot of a page. Randi asked for it to "pop", so it
   runs edge to edge in solid teal against the white page above it. */
/* The callout is a direct child of .entry-content, which Astra caps at the
   content width, so the full-bleed escape needs to outrank that rule. */
.entry-content > .c4-callout {
    max-width: none !important;
    width: calc(100vw - var(--c4-sbw, 0px)) !important;
    margin: 46px 0 0 !important;
    margin-left: calc(-50vw + 50% + var(--c4-sbw, 0px) / 2) !important;
    margin-right: calc(-50vw + 50% + var(--c4-sbw, 0px) / 2) !important;
    background: linear-gradient(135deg, #45B6B2 0%, #2F9D99 100%);
    padding: 52px 30px;
    box-sizing: border-box;
}
.c4-callout__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.entry-content .c4-callout .c4-callout__title {
    color: #0F2B2A !important; margin: 0 0 16px !important;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.22;
}
.entry-content .c4-callout .c4-callout__text {
    color: #0F2B2A !important; margin: 0 0 26px !important; font-size: 18px; line-height: 1.6;
}
.entry-content .c4-callout .c4-callout__btn {
    display: inline-block; padding: 14px 30px; border-radius: 6px;
    background: var(--c4-orange, #F68B33); color: #2A1403 !important;
    font-weight: 700; text-decoration: none !important; font-size: 17px;
}
.entry-content .c4-callout .c4-callout__btn:hover,
.entry-content .c4-callout .c4-callout__btn:focus-visible {
    background: #D9731F; color: #fff !important;
}
.c4-callout__btn:focus-visible { outline: 3px solid #0F2B2A; outline-offset: 3px; }

/* Photo centring, Lexi's 10.12 notes. */
.c4-hero__media { background-position: center 42% !important; background-size: 150% auto !important; }
.page-id-99 .c4-phead__media  { background-position: center 62% !important; }
.page-id-213 .c4-phead__media { background-position: 42% center !important; background-size: cover !important; }

@media (max-width: 782px) {
    .c4-hero__media { background-size: cover !important; background-position: center 35% !important; }
}

/* Full-bleed bands use 100vw, which counts the scrollbar and so overhangs the
   viewport by its width on every page. overflow-x: clip removes the resulting
   horizontal scroll without creating a scroll container, so the sticky header
   keeps working (overflow-x: hidden would break it). */
/* The overflow-x hack is gone: the bands now subtract the scrollbar width
   themselves, so there is nothing to clip and the sticky header is untouched. */

/* Development Partners is a short wall, so the tiles get more room and
   Keystone's logo reads larger, as Randi asked. */
.c4-logo__grid--partners { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
.c4-logo__grid--partners .c4-logo { min-height: 188px; padding: 18px; }
.c4-logo__grid--partners .c4-logo__img img { aspect-ratio: 2 / 1; }
@media (max-width: 560px) { .c4-logo__grid--partners { grid-template-columns: 1fr; } }

/* Randi: the stock on these three showed a random person's face. These are the
   same licensed images, cropped to the hands and the desk, matching the
   Financial Strategy one she approved. */
.page-id-90 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-strategy-nofaces.jpg") !important; }
.page-id-92 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-launch-nofaces.jpg") !important; }
.page-id-94 .c4-phead__media { background-image: url("https://core4.pro/wp-content/uploads/2026/10/c4-homeown-nofaces.jpg") !important; }

/* Astra's own alignfull escape also uses a bare 100vw, so the page header and
   the Let us explore band overhang by the scrollbar width like the others did.
   Same correction, applied to Astra's selector. */
.ast-plain-container.ast-no-sidebar .entry-content > .alignfull,
.entry-content > .alignfull {
    margin-left: calc(-50vw + 50% + var(--c4-sbw, 0px) / 2) !important;
    margin-right: calc(-50vw + 50% + var(--c4-sbw, 0px) / 2) !important;
    width: calc(100vw - var(--c4-sbw, 0px)) !important;
    max-width: calc(100vw - var(--c4-sbw, 0px)) !important;
}