/* ============================================================
   CCC TRANSPOSITION LAYER
   Small overrides so Campbell Construction Consultancy imagery
   and content sit correctly in the Geexmo layout. Loaded last.
   ============================================================ */

/* Swapped photography: the CCC placeholders are landscape JPEGs,
   the theme slots expect specific crops — cover-fit them. */
.about-thumb img,
.about-img-3 img,
.skill-img img,
.content-img img,
.promo-img-2 img,
.service-details-img img,
.service-details-img-2 img,
.sidebar-img img,
.post-thumb img,
.step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-img-3 {
    height: 100%;
    min-height: 420px;
}

.skill-img img {
    max-height: 560px;
}

.post-thumb img {
    aspect-ratio: 16 / 10;
}

/* Skills list carries prose instead of progress bars (no invented
   percentages) — give the copy breathing room. */
.skills-item p {
    margin-top: 12px;
    margin-bottom: 0;
}

/* The full email address is longer than the footer column */
.address-list a,
.contact-list a,
.sidebar-cta .content a {
    word-break: break-all;
}

/* Credentials line in the footer */
.ccc-credentials {
    color: var(--cp-color-primary, #ddc25c);
    letter-spacing: 1px;
    font-weight: 600;
}

/* Eighth card on the key-areas grid acts as a CTA */
.ccc-cta-card {
    display: flex;
    align-items: center;
}

/* Offcanvas panel: the theme draws a rule across it at 100px (which
   lands through the logo) and a dark left edge. Both go. */
.sidebar-area {
    border-left: none;
}

.sidebar-area:before {
    display: none;
}

/* Header nav: bolder, slightly smaller than the theme's 16px/500 */
.header .primary-header-inner .header-menu-wrap ul li a {
    font-size: 14px;
    font-weight: 700;
}

/* Hero headline. Two things fight us here: "Construction Assurance" is
   far longer than the theme's demo words, and the animation splits the
   line into per-character inline-blocks with no word wrappers, so the
   browser will happily break mid-word ("C / ONSTRUCTION"). Size it off
   the viewport so the longest word ("CONSTRUCTION", ~8.2ch-widths)
   always fits the container, and stop breaks between characters. */
.hero-content-3 .title {
    font-size: clamp(28px, 10.5vw, 108px);
}

.hero-content-3 .title span {
    font-size: clamp(20px, 6.5vw, 64px);
}

/* Each hero line is its own block span. The animation splits text into
   per-character inline-blocks and drops <br>s, so <br> can't be trusted
   to set the lines; block spans survive the split. Each line is a single
   word, so nowrap here cannot remove a needed break opportunity - it
   just forbids breaking mid-word. */
.hero-content-3 .title span {
    white-space: nowrap;
}

.hero-content-3 .title span.hero-line {
    display: block;
    color: var(--cp-color-common-white);
    font-size: inherit;
}

/* Header logo sizing. Enlarged Sept 2026 at the client's request: at
   64px the tagline under the wordmark was unreadable. 104px stays within
   the supplied file's native 128px height; a higher-resolution logo file
   has been requested. The theme's max-width caps must be lifted too. */
.header-logo img,
.side-menu-head img {
    max-height: 104px;
    width: auto;
}

.header .primary-header-inner .header-logo {
    padding: 12px 0;
}

.header .primary-header-inner .header-logo img {
    max-width: none;
    display: block;
}

@media (max-width: 767px) {
    .header-logo img,
    .side-menu-head img {
        max-height: 80px;
    }
}

.footer-logo img {
    max-height: 72px;
    width: auto;
}

.side-menu-logo img {
    max-height: 80px;
    width: auto;
}

/* ============================================================
   SEVEN KEY AREAS
   The assurance framework — homepage summary grid and the
   5 x 7 coverage matrix on key-areas.html. Added Aug 2026 in
   response to client feedback that the Key Areas were
   referenced but never explained.
   ============================================================ */

.ka-section {
    background-color: #F8F5F3;
}

.ka-intro {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.ka-grid {
    margin-top: 30px;
}

.ka-item {
    height: 100%;
    padding: 32px 28px;
    background-color: var(--cp-color-common-white);
    border-top: 3px solid var(--cp-color-primary, #C8A951);
}

.ka-ref {
    display: inline-block;
    margin-bottom: 10px;
    /* Gold on white measures ~2.1:1 and fails AA even at large
       sizes, so reference labels use the darkened gold. */
    color: #8A6D1F;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
}

.ka-item .ka-title {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--cp-color-heading-primary, #1F3864);
}

.ka-item p {
    margin-bottom: 0;
}

/* KA7 is the one area every service line covers — mark it. */
.ka-item-7 {
    background-color: var(--cp-color-heading-primary, #1F3864);
}

.ka-item-7 .ka-title {
    color: var(--cp-color-common-white);
}

.ka-item-7 p {
    color: #E4E9F2;
}

.ka-item-7 .ka-ref {
    color: var(--cp-color-primary, #C8A951);
}

.ka-note {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 0 0;
}

.ka-note p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.ka-note .cp-primary-btn {
    align-self: flex-start;
}

@media only screen and (max-width: 992px) {
    .ka-intro {
        font-size: 18px;
    }

    .ka-note {
        padding-top: 10px;
    }
}

/* --- Key Areas page: full framework cards --- */

.ka-page-intro {
    font-size: 19px;
    line-height: 1.65;
    margin-bottom: 50px;
}

.ka-detail .ka-strap {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E4E4E4;
    color: #8A6D1F;
    font-size: 15px;
    line-height: 1.5;
}

.ka-item-7 .ka-strap {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    color: var(--cp-color-primary, #C8A951);
}

.ka-cta {
    display: flex;
    flex-direction: column;
    background-color: #F8F5F3;
    border-top-color: var(--cp-color-heading-primary, #1F3864);
}

.ka-cta p {
    margin-bottom: 24px;
}

.ka-cta .cp-primary-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* --- Coverage matrix --- */

.ka-matrix-section {
    background-color: #F8F5F3;
}

/* The table is 8 columns wide; let it scroll inside its own box
   so the page body never scrolls sideways on a phone.
   `position: relative` is load-bearing: the screen-reader labels in
   each cell are absolutely positioned, and without a positioned
   ancestor they resolve against the viewport, escape this box's
   clipping and drag the page into horizontal scroll on mobile. */
.ka-matrix-scroll {
    position: relative;
    overflow-x: auto;
    margin-top: 20px;
    background-color: var(--cp-color-common-white);
}

.ka-matrix {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    text-align: center;
}

.ka-matrix th,
.ka-matrix td {
    padding: 18px 12px;
    border-bottom: 1px solid #E4E4E4;
    vertical-align: middle;
}

.ka-matrix thead th {
    background-color: var(--cp-color-heading-primary, #1F3864);
    color: var(--cp-color-common-white);
    border-bottom: none;
}

.ka-matrix-ref {
    display: block;
    color: var(--cp-color-primary, #C8A951);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ka-matrix-name {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
}

.ka-matrix-product,
.ka-matrix tbody th {
    min-width: 240px;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: var(--cp-color-heading-primary, #1F3864);
}

.ka-matrix tbody tr:last-child th,
.ka-matrix tbody tr:last-child td {
    border-bottom: none;
}

/* KA7 is covered by every service line — tint the whole column
   so that reads at a glance rather than needing the caption. */
.ka-matrix .ka-matrix-ka7 {
    background-color: rgba(200, 169, 81, 0.14);
}

.ka-matrix thead th.ka-matrix-ka7 {
    background-color: #2E5496;
}

.ka-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.is-on .ka-dot,
.ka-dot-on {
    background-color: var(--cp-color-heading-primary, #1F3864);
}

.is-off .ka-dot,
.ka-dot-off {
    background-color: transparent;
    border: 1px solid #B9B9B9;
}

.ka-matrix-key {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.ka-matrix-key li {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Screen-reader text: the dots carry meaning that colour alone
   cannot convey, so each cell states its value in text too. */
.ka-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media only screen and (max-width: 992px) {
    .ka-page-intro {
        font-size: 17px;
        margin-bottom: 36px;
    }
}

/* Closing banner ahead of the footer. The theme set this at 180px, the
   largest type on the site; the client asked for it to be reduced
   (Sept 2026). Now at section-title scale, below the hero headline. */
.footer-text .footer-header {
    font-size: 64px;
    text-transform: none;
}

@media (max-width: 1199px) {
    .footer-text .footer-header {
        font-size: 52px;
    }
}

@media only screen and (max-width: 992px) {
    .footer-text .footer-header {
        font-size: 44px;
    }
}

@media only screen and (max-width: 767px) {
    .footer-text .footer-header {
        font-size: 30px;
    }
}