:root {
    --Primary: #FD7601;
    /* --Secondary was only defined per demo-theme class and .themes-construction
       never set it, so every var(--Secondary) resolved to nothing (transparent
       bg-3 card, transparent testimonial banner). The theme's vision overlay
       gradient uses rgba(21,64,64,...) = #154040, so that's the intended value.
       2026-08-17. */
    --Secondary: #154040;
    --font-main: "Plus Jakarta Sans", sans-serif;
    --font-main2: 'Rift', sans-serif;
    /* Inner pages came from demo-corporate and use font-3..5 classes; these
       keep those sections on their intended fonts (all ship in fonts.css). */
    --font-main3: "Manrope", sans-serif;
    --font-main4: "Rethink Sans", sans-serif;
    --font-main5: "IBM Plex Sans", sans-serif;
    --font-main6: "Urbanist", sans-serif;
}

.font-4 {
    font-family: var(--font-main4);
}

.font-5 {
    font-family: var(--font-main5);
}

.font-6 {
    font-family: var(--font-main6);
}

/* Inner pages: .header.style-11 is translucent dark with margin-bottom:-141px,
   built to overlay the home hero photo. On pages that open with light content
   that reads as a broken grey band with white links, so inner pages add
   .header-solid to the in-flow header (not the .header-sticky copy) — solid
   bar, normal flow. Same trick as viora's .header.style-19.header-solid. */
.header.style-11.header-solid {
    background-color: var(--Text-primary);
    margin-bottom: 0;
}

/* The heading rule below and the colour utilities are all (0,1,0) on
   class-based headings (.h1 on a div, .h4 on a p, ...), so the utilities
   must stay AFTER it in this file or they lose the tie. */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--font-main2);
    color: var(--Text-primary);
}

/* Same specificity as styles.css text utilities but this file loads last, so
   the heading colour above would silently beat them. Restated so elements
   combining a heading class with a colour utility (h4 + text_white in the
   footer, hero eyebrows, .h1 + text_white hero counters) keep the utility
   colour. Order matters: keep these after the heading rule. */
.text_white {
    color: var(--White);
}

.text_primary {
    color: var(--Text-primary);
}

.text_secondary {
    color: var(--Text-secondary);
}

.font-main {
    font-family: var(--font-main);
}

.navigation li>a {
    color: var(--White);
}


.main-menu .current-menu>a,
.main-menu .current-menu-item>a {
    color: var(--Primary) !important;
}

.navigation li.has-child::after {
    color: var(--White);
}

.navigation .submenu li:hover a {
    color: var(--Primary);
}

.main-menu .current-menu::after,
.main-menu .current-menu-item::after {
    color: var(--Primary) !important;
}

.main-menu .navigation>li:hover::after {
    color: var(--Primary);
}

.btn-hover-animate-2.btn-bg-White-3::after {
    background: var(--Primary);
}

/* Placeholder copy markers — site is mid-redesign; tags mark mock content
   (testimonials, contact info) that gets swapped for real data later. */
.placeholder-note {
    font-size: 12px;
    text-transform: none;
    opacity: 0.55;
    margin-left: 6px;
    font-weight: 400;
}
/* Banner (section-banner-4): reduced height (~2/3 of theme default), copy
   directly over the photo — editorial-left composition with a dark scrim
   behind the text, mirroring the hero. Section was 812px content-driven;
   now fixed height + flex-centered. 2026-08-14 photo-layout pass. */
.section-banner-4 {
    height: 545px;
}
.section-banner-4 .banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(8, 10, 14, 0.72) 0%, rgba(8, 10, 14, 0.32) 45%, rgba(8, 10, 14, 0) 78%);
}
.section-banner-4 .tf-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}
.section-banner-4 .box-content {
    max-width: 640px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}
.section-banner-4 .box-content .heading {
    margin-bottom: 32px;
}
.section-banner-4 .box-content .heading h2 {
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.08;
}

/* Index: tighten the about -> process gap. Theme gives both sections 100px
   (200px total); page rhythm elsewhere is a single 100px spacing, so drop
   the process top padding. 2026-08-14. */
.section-process-4 {
    padding-top: 0;
}

/* About: video section cut 2026-08-17 — section-about and section-why both
   carry tf-spacing-1 (200px total); page rhythm is a single 100px spacing,
   so drop the section-why top padding. */
.section-why.v2 {
    padding-top: 0;
}

/* About overview: compact the stat / quote / mission / vision band. The band
   is as tall as the vision photo (intrinsic 428x630 ratio -> 630px at 1920)
   and the quote panel, which sits in a half-width cell next to the 99% stat —
   the theme's 32px quote at 40-56px line-height wraps to ~10 lines there.
   2026-08-17. */
@media (min-width: 1200px) {
    .section-overview .testimonial {
        padding: 32px 28px;
    }
    .section-overview .testimonial > p {
        font-size: 22px;
        line-height: 30px;
    }
    /* Vision: cap the photo's natural contribution (its ratio would make the
       band ~630px at 1920) but let the column still stretch to the band so
       the photo matches the other cards; the image object-fit-covers. 435px
       matches the mission card's tallest wrap (435px at 1200-1280). */
    .section-overview .col-content.vision {
        max-height: 435px;
    }
    /* Mission: compact spacing so its content stays within 430px at all
       widths (theme padding 40px / gap 17px makes it 468px at 1200-1280,
       which would push the band past the vision cap). */
    .section-overview .col-content.mission {
        padding: 28px;
        gap: 8px;
    }
}
/* Quote card: spread quote (top) / author (bottom) so the panel fills the
   band height instead of leaving a void under the text. */
.section-overview .testimonial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* About overview: the stat + quote grid must fill the column so the two
   cards stretch to the same height as the mission/vision cards (the grid
   row alone is shorter than the band the column stretches to). */
.section-overview .col-content.about .tf-grid-layout {
    height: 100%;
}

/* Contact hero: photo collage cut to a single photo (2026-08-17) — center
   the one remaining image instead of hugging the left edge. */
.team-purpose-showcase .wrap-showcase {
    justify-content: center;
}

/* Footer: after the Services column was cut (2026-08-17), the two remaining
   columns spread to opposite ends (justify-content-between -> ~500px void
   between them). Cluster them together, right-aligned (user preference),
   with the theme's column rhythm. */
@media (min-width: 992px) {
    .footer-style-10 .footer-content {
        justify-content: flex-end;
        gap: 60px;
    }
}

/* Services: partner marquee removed 2026-08-17. Restore a single section
   rhythm between the black CTA block and the footer without bringing back
   the marquee's full 200px band. */
.services-cta-gap {
    margin-bottom: 100px;
}

@media (max-width: 767px) {
    .services-cta-gap {
        margin-bottom: 60px;
    }
}

/* About: partner marquee removed 2026-08-17. Leave the same footer breathing
   room the removed band was providing, but as a simple spacer only. */
.about-footer-gap {
    height: 100px;
}

@media (max-width: 767px) {
    .about-footer-gap {
        height: 60px;
    }
}

/* About overview: the Vision paragraph is black text over the photo
   (user request 2026-08-17; was text_white). */
.section-overview .col-content.vision .content p {
    color: #111;
}

/* Hero text legibility: the white headline sits over client photos that have
   bright/white areas. Left-side dark scrim over the thumb + soft text shadow
   keeps the text readable without darkening the whole photo. 2026-08-14. */
.hero-banner-11 .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0.22) 42%, rgba(8, 10, 14, 0) 72%);
}
.hero-banner-11 .content .text-display-2 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}