/* ------------------------------------------------------------------
   site-additions.css
   Rules extracted verbatim from the inline <style> block that used to
   sit inside footer.php / each page footer. Centralised here so every
   page ships identical styling with one cacheable request.
   ------------------------------------------------------------------ */

/* Footer Map Styling */
.footer-widget iframe {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    border: 0;
}

/* Responsive Fix for Mobile */
@media (max-width: 767px) {
    .footer-widget iframe {
        height: 180px;
    }
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    background-color: #1ebe57;
    color: #fff;
}

.whatsapp-icon {
    font-family: "FontAwesome";
}

/* Keep the back-to-top button clear of the WhatsApp bubble on small screens */
@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
    }
}

/* Prevent oversized images from breaking narrow layouts */
img {
    max-width: 100%;
}

/* Reserve space for lazy images so they do not cause layout shift */
img[loading="lazy"] {
    height: auto;
}

/* Sitewide call-to-action band */
.site-cta {
    padding: 40px 0;
    background: #f7f7f7;
    border-top: 1px solid #e6e6e6;
}
.site-cta-text {
    font-size: 18px;
    margin-bottom: 20px;
}
.site-cta .btn {
    margin: 5px;
}
@media (max-width: 767px) {
    .site-cta .btn {
        display: block;
        width: 100%;
        margin: 8px 0;
    }
}

/* ==================================================================
   PRODUCTS GRID (projects.html)
   The page previously loaded a second Bootstrap 3.3.7 stylesheet and
   a second jQuery from CDN, plus an inline <style> block that fought
   the theme's own rules. Those are gone; these rules restore correct
   gutters, equal-height tiles and a working filter bar.
   ================================================================== */

/* Theme sets .isotope-item{padding:0}, which removed the Bootstrap
   column gutters and made the tiles touch edge to edge. */
#isotope-container .isotope-item {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}

/* Uniform tile height: every thumbnail gets the same 4:3 box, so rows
   line up regardless of the source image's aspect ratio. */
#isotope-container .isotope-img-container {
    position: relative;
    overflow: hidden;
    background: #f2f2f2;
}

#isotope-container .isotope-img-container > .gallery-popup {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 */
    overflow: hidden;
}

#isotope-container .isotope-img-container > .gallery-popup > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Caption chip: theme sets color:#000 on a black background. */
#isotope-container .project-cat {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    padding: 5px 10px;
    margin: 0;
    max-width: 100%;
    white-space: normal;
}

#isotope-container .project-item-info {
    top: auto;
    bottom: 15px;
    margin-top: 0;
    padding: 0 15px;
}

/* Filter bar */
.isotope-nav ul:before,
.isotope-nav ul:after { content: " "; display: table; }
.isotope-nav ul:after { clear: both; }

.isotope-nav ul li a.active,
.isotope-nav ul li a:hover {
    color: #0F7031;
    border-bottom-color: #0F7031;
}

@media (max-width: 767px) {
    .isotope-nav {
        display: block;
        margin: 20px 0 30px;
    }
    .isotope-nav ul li {
        float: none;
        display: inline-block;
        margin: 0 12px 12px 0;
    }
    #isotope-container .isotope-item {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
}

/* ==================================================================
   SITEWIDE LAYOUT CONSISTENCY
   ================================================================== */

/* 16 keyword pages wrap their content in a bare <section class="container">
   with no vertical rhythm, so sections collided with the banner and each
   other. Give them the same spacing as .main-container pages. */
section.container {
    padding-top: 30px;
    padding-bottom: 30px;
}
section.container:first-of-type { padding-top: 50px; }
section.container:last-of-type  { padding-bottom: 50px; }

/* Uniform vertical rhythm for the main content wrapper */
.main-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Breadcrumbs: pages carried inline font-size:30px and an unlinked "Home". */
.banner-heading .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 15px;
}
.banner-heading .breadcrumb > li,
.banner-heading .breadcrumb > li > a { color: #fff; }
.banner-heading .breadcrumb > li > a:hover { color: #FFC000; }
.banner-heading .breadcrumb > .active { color: rgba(255, 255, 255, 0.75); }
.banner-heading .breadcrumb > li + li:before { color: rgba(255, 255, 255, 0.6); }

/* Banner: guarantee the heading never collides with the fixed header */
.banner-area { min-height: 300px; }
.banner-area .banner-text { padding: 60px 0; }

@media (max-width: 767px) {
    .banner-area { min-height: 200px; }
    .banner-area .banner-text { padding: 40px 0; }
    .banner-heading .border-title.border-left { font-size: 26px; }
    .main-container { padding-top: 40px; padding-bottom: 40px; }
    section.container { padding-top: 20px; padding-bottom: 20px; }
}

/* Long product names / emails must not blow out narrow screens */
.footer-widget p,
.project-cat,
.panel-title a { overflow-wrap: break-word; word-wrap: break-word; }

/* Tables and iframes inside content stay inside their column */
.main-container table { width: 100%; max-width: 100%; }
.main-container iframe { max-width: 100%; }

/* Consistent section headings */
.main-container .border-title { margin-top: 0; }

/* Product specification list (ul.project-info on the product pages).
   Label and value were stacked with uneven spacing; now they align as
   a clean two-column row that collapses on very small screens. */
.project-info.unstyled { padding-left: 0; list-style: none; }

.project-info li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 0;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.project-info li:last-child { border-bottom: 0; }

.project-info .project-info-label { flex: 0 0 45%; }
.project-info .project-info-content { flex: 1 1 auto; text-align: right; color: #666; }

@media (max-width: 480px) {
    .project-info li { flex-direction: column; align-items: flex-start; gap: 2px; }
    .project-info .project-info-content { text-align: left; }
}

/* ==================================================================
   RESPONSIVE HARDENING
   Fixes for hard-coded sizes that were baked into page markup.
   ================================================================== */

/* Bare .container wrappers (used by the keyword pages instead of
   .main-container) had no vertical rhythm at all. */
.body-inner > div.container,
.body-inner > section.container {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* index.php hero: a hard 500px height overflowed on phones. */
@media (max-width: 767px) {
    .hero-section {
        height: auto !important;
        min-height: 320px;
        padding: 40px 20px !important;
    }
    .hero-content { max-width: 100% !important; }
}

/* Images carrying inline width:50% shrank to a thumbnail on phones. */
@media (max-width: 767px) {
    .main-container img[style*="width:50%"],
    .body-inner img[style*="width:50%"] {
        width: 100% !important;
    }
    /* Inline object-fit banners (400px / 420px) are too tall on mobile */
    img[style*="height:420px"],
    img[style*="height:400px"] { height: 240px !important; }
    img[style*="max-height: 250px"] { max-height: 180px !important; }
}

/* Content tables scroll instead of blowing out the viewport. */
.main-container table,
.body-inner > .container table,
.body-inner > section.container table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
    .main-container table,
    .body-inner > .container table,
    .body-inner > section.container table { display: table; }
}

/* Any oversized embed stays inside its column */
iframe, embed, object, video { max-width: 100%; }

/* Never let a long word or URL force a horizontal scrollbar */
body { overflow-x: hidden; }
p, li, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Buttons wrap gracefully instead of overflowing on small screens */
@media (max-width: 480px) {
    .btn-lg { padding: 10px 16px; font-size: 15px; white-space: normal; }
}

/* Mobile nav: give the collapsed menu breathing room */
@media (max-width: 767px) {
    .site-navigation .navbar-nav > li > a { padding: 12px 15px; }
    .header-get-a-quote { margin: 10px 15px; }
    .top-info-box { text-align: center; }
    .top-info-box > li { float: none; display: block; margin-bottom: 10px; }
    .logo { text-align: center; }
    .logo img { width: 180px !important; max-width: 60%; }
}

/* Footer columns get spacing when they stack */
@media (max-width: 991px) {
    .footer-widget { margin-bottom: 35px; }
}

/* Accessible focus outlines (removed by the theme's reset) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid #0F7031;
    outline-offset: 2px;
}

/* ==================================================================
   HEADING-LEVEL NORMALISATION FALLBACKS
   Several headings were promoted/demoted to repair the document
   outline. The theme styles some of them by element name, so these
   rules keep the rendering byte-for-byte identical.
   ================================================================== */

/* faq.html accordion titles are <h3 class="panel-title">;
   style.css only styles h4.panel-title. */
.panel-title {
    font-size: 16px;
    background: none;
    border: 0;
    padding: 8px 0;
    line-height: normal;
    border-radius: 0;
    margin: 0;
}
.panel-title a { color: #0F7031; }
.panel-title a.collapsed { color: #333; }
.panel-title span { float: right; }

/* contact.php card titles were <h4>, now <h2 class="h4"> */
.contact-box-content h2,
.contact-box-content h4 {
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

/* index.php slider captions are now <div> instead of <h4> */
.slide-title,
.slide-sub-title { margin: 10px 0; }

/* Testimonial / latest-post titles were <h4>, now <h3> (class-based CSS
   in style.css already covers them; this keeps margins identical). */
.latest-post h3.post-title { font-size: 16px; line-height: 24px; margin: 0 0 10px; }

/* ==================================================================
   ===============  DESIGN SYSTEM  ==================================
   Everything below unifies what were 13 different H2 renderings,
   8 different button styles, 5 card treatments and 809 ad-hoc inline
   style declarations into one consistent visual language.
   Content, text and images are unchanged — only their presentation.
   ================================================================== */

:root {
    --brand:        #0F7031;
    --brand-dark:   #0a5427;
    --brand-tint:   #e9f3ec;
    --whatsapp:     #25D366;
    --whatsapp-dk:  #1ebe57;
    --gold:         #FFC000;

    --ink:          #24292b;
    --body:         #55606a;
    --muted:        #79838c;
    --line:         #e6e9ea;
    --surface:      #ffffff;
    --surface-alt:  #f7f9f8;

    --radius:       8px;
    --radius-sm:    4px;
    --shadow:       0 2px 4px rgba(20, 30, 25, .04), 0 8px 24px rgba(20, 30, 25, .07);
    --shadow-hover: 0 6px 12px rgba(20, 30, 25, .07), 0 16px 40px rgba(20, 30, 25, .11);
    --ease:         cubic-bezier(.4, 0, .2, 1);

    --gap:          30px;
    --section-y:    64px;
    --section-y-sm: 36px;
}

/* ---------------------------------------------------- content scope
   `.ui` matches the editorial region of every page: the theme's
   main-container, the bare .container wrappers used by the keyword
   pages, and the .content-section blocks. */
.main-container,
.body-inner > div.container,
.body-inner > section.container,
.content-section { }

/* ------------------------------------------------------------------
   1. SECTION RHYTHM
   ------------------------------------------------------------------ */
.main-container {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

/* stacked content sections breathe evenly instead of 40/50/30/0 */
.content-section,
.body-inner > section.container,
.body-inner > div.container {
    padding-top: 30px;
    padding-bottom: 30px;
}
.body-inner > section.container:first-of-type,
.body-inner > div.container:first-of-type,
.content-section:first-of-type { padding-top: var(--section-y); }

.body-inner > section.container:last-of-type,
.body-inner > div.container:last-of-type,
.content-section:last-of-type { padding-bottom: var(--section-y); }

/* the CTA band closes every page at the same height */
.site-cta {
    padding: 56px 0;
    background: var(--surface-alt);
    border-top: 1px solid var(--line);
}
.site-cta-text {
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 24px;
}

/* ------------------------------------------------------------------
   2. TYPOGRAPHY
   ------------------------------------------------------------------ */
.main-container,
.content-section,
.body-inner > section.container,
.body-inner > div.container {
    color: var(--body);
    font-size: 16px;
    line-height: 1.75;
}

.main-container h1, .content-section h1,
.body-inner > section.container h1, .body-inner > div.container h1 {
    font-size: 34px; line-height: 1.25; margin: 0 0 22px; color: var(--ink); font-weight: 700;
}
.main-container h2, .content-section h2,
.body-inner > section.container h2, .body-inner > div.container h2 {
    font-size: 28px; line-height: 1.3; margin: 44px 0 18px; color: var(--ink); font-weight: 700;
}
.main-container h3, .content-section h3,
.body-inner > section.container h3, .body-inner > div.container h3 {
    font-size: 21px; line-height: 1.35; margin: 32px 0 14px; color: var(--ink); font-weight: 700;
}
.main-container h4, .content-section h4,
.body-inner > section.container h4, .body-inner > div.container h4 {
    font-size: 17px; line-height: 1.4; margin: 24px 0 10px; color: var(--ink); font-weight: 700;
}
/* first heading in a section shouldn't push a big gap under the banner */
.main-container h1:first-child, .main-container h2:first-child, .main-container h3:first-child,
.content-section h1:first-child, .content-section h2:first-child, .content-section h3:first-child,
.body-inner > section.container > h2:first-child,
.body-inner > section.container > h3:first-child { margin-top: 0; }

/* the theme's underlined section heading */
.border-title { font-size: 28px; line-height: 1.3; margin-top: 0; margin-bottom: 22px; padding-bottom: 18px; }
.banner-heading .border-title.border-left { font-size: 38px; margin-bottom: 16px; padding-bottom: 20px; }

/* body copy */
.main-container p, .content-section p,
.body-inner > section.container p, .body-inner > div.container p {
    margin: 0 0 18px;
    text-align: left;          /* was `justify` on 100+ blocks: rivers of whitespace */
    line-height: 1.75;
}
.main-container p:last-child, .content-section p:last-child { margin-bottom: 0; }

.lead-2 { font-size: 18px; color: var(--muted); margin-bottom: 26px; }
.text-muted-2 { color: var(--muted); }

/* lists */
.main-container ul:not(.nav):not(.list-arrow):not(.breadcrumb):not(.project-info),
.content-section ul:not(.nav):not(.list-arrow),
.body-inner > section.container ul:not(.nav):not(.list-arrow) {
    padding-left: 20px;
    margin: 0 0 20px;
}
.main-container li, .content-section li,
.body-inner > section.container li { margin-bottom: 8px; line-height: 1.7; }

.content-list { list-style: disc; padding-left: 22px; }
.content-list-plain { list-style: none; padding-left: 0; }
.content-list-plain > li { padding-left: 26px; position: relative; }

/* inline emphasis: three different greens (#0e6e32, green, #2a8b3a) became one */
.hl { color: var(--brand); font-weight: 700; }
.link-brand { color: var(--brand); font-weight: 600; text-decoration: none; }
.link-brand:hover, .link-brand:focus { color: var(--brand-dark); text-decoration: underline; }
.link-plain { color: var(--ink); text-decoration: none; }
.link-plain:hover { color: var(--brand); }

/* ------------------------------------------------------------------
   3. BUTTONS — one component, three intents
   ------------------------------------------------------------------ */
.btn,
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 28px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: background-color .25s var(--ease), border-color .25s var(--ease),
                color .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
    white-space: normal;
    vertical-align: middle;
}
.btn:hover, .btn:focus,
.cta-button:hover, .cta-button:focus { transform: translateY(-1px); text-decoration: none; }
.btn:active, .cta-button:active { transform: translateY(0); }

.btn-lg { padding: 16px 34px; font-size: 15px; }
.btn-sm { padding: 9px 18px; font-size: 13px; }

.btn-primary,
.btn-dark,
.cta-button {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;               /* theme shipped black text on dark green */
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-dark:hover,
.cta-button:hover, .cta-button:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    box-shadow: var(--shadow);
}

/* WhatsApp keeps its own brand colour — it's a recognised affordance */
.btn-success {
    background-color: var(--whatsapp);
    border-color: var(--whatsapp);
    color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--whatsapp-dk);
    border-color: var(--whatsapp-dk);
    color: #fff;
    box-shadow: var(--shadow);
}

.btn-default {
    background-color: transparent;
    border-color: var(--brand);
    color: var(--brand);
}
.btn-default:hover, .btn-default:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn + .btn { margin-left: 10px; }
.site-cta .btn { margin: 6px 5px; }

/* ------------------------------------------------------------------
   4. CARDS — one surface treatment
   ------------------------------------------------------------------ */
.contact-box,
.quote-card,
.feat-box,
.ts-service-box,
.panel.panel-default {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-box:hover,
.quote-card:hover,
.feat-box:hover,
.ts-service-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.contact-box { padding: 30px 24px; height: 100%; margin-bottom: var(--gap); text-align: center; }
.feat-box    { padding: 26px 24px; height: 100%; margin-bottom: var(--gap); }
.quote-card  { padding: 26px 28px; margin: 0 0 var(--gap); border-left: 4px solid var(--brand); font-style: normal; font-size: 16px; }

.panel.panel-default { margin-bottom: 14px; overflow: hidden; }
.panel.panel-default > .panel-heading { background: var(--surface); padding: 6px 22px; border: 0; }
.panel.panel-default .panel-body { border-top: 1px solid var(--line); padding: 20px 22px; }

/* feature icon + label rows */
.feat-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.feat-icon { font-size: 30px; color: var(--brand); line-height: 1; }
.feat-icon-lg { font-size: 56px; }
.icon-well { display: flex; align-items: center; justify-content: center; height: 80px; }
.stat-icon { font-size: 46px; color: var(--brand); line-height: 1; display: inline-block; }
.band-brand { background: var(--brand); color: #fff; border-radius: var(--radius); padding: 24px; }
.band-brand a { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------
   5. IMAGES
   ------------------------------------------------------------------ */
.content-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 0 var(--gap);
}
.content-img-right { margin-left: 0; }
@media (min-width: 992px) {
    .content-img-right { float: right; width: 42%; margin: 0 0 24px 30px; }
}

/* every content image now shares one radius (was 0 / 8 / 10 / 15) */
.main-container img:not(.img-circle),
.content-section img,
.body-inner > section.container img,
.body-inner > div.container img { border-radius: var(--radius); }
#isotope-container img,
.gallery img,
.logo img,
.clients-logo img { border-radius: 0; }

/* ------------------------------------------------------------------
   6. GRID BEHAVIOUR — even rows, vertically centred media
   ------------------------------------------------------------------ */
.row-vcenter,
.row-equal {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.row-vcenter:before, .row-vcenter:after,
.row-equal:before,  .row-equal:after { display: none; }   /* Bootstrap 3 clearfix breaks flex */

.row-vcenter { align-items: center; }
.row-equal   { align-items: stretch; }
.row-vcenter > [class*="col-"],
.row-equal   > [class*="col-"] { float: none; display: flex; flex-direction: column; justify-content: center; }
.row-equal   > [class*="col-"] { justify-content: flex-start; }

.row-vcenter .content-img,
.row-equal .content-img { margin-bottom: 0; }

.v-center { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 767px) {
    .row-vcenter > [class*="col-"],
    .row-equal   > [class*="col-"] { width: 100%; }
    .row-vcenter .content-img { margin-bottom: 24px; }
}

/* spacing helpers replacing inline margins */
.mt-md { margin-top: 20px; }
.mt-lg { margin-top: 36px; }
.mb-lg { margin-bottom: 30px; }
.my-lg { margin: 36px 0; }

/* ------------------------------------------------------------------
   7. FAQ TABLES (5 keyword pages use a table-based accordion)
   ------------------------------------------------------------------ */
.faq-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: 10px;
}
.faq-table .faq-row { border-bottom: 1px solid var(--line); }
.faq-table .faq-row:hover { background: var(--surface-alt); }
.faq-table .faq-q {
    padding: 18px 22px;
    font-weight: 700;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
}
.faq-table .faq-toggle {
    padding: 18px 22px;
    text-align: right;
    cursor: pointer;
    color: var(--brand);
    width: 56px;
    user-select: none;
    font-size: 13px;
}
.faq-table .faq-a {
    padding: 0 22px 20px;
    color: var(--body);
    line-height: 1.75;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
}
.faq-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------
   8. PRODUCT SPEC LIST + HOMEPAGE FACTS
   ------------------------------------------------------------------ */
.project-info.unstyled {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 6px 22px;
    box-shadow: var(--shadow);
}
.ts-facts-num.h2 { font-size: 28px; font-weight: 700; color: #fff; margin: 8px 0 4px; }

/* ------------------------------------------------------------------
   9. GALLERY
   ------------------------------------------------------------------ */
.gallery-box { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--gap); }
.gallery-box img { width: 100%; height: 260px; object-fit: cover; display: block; }

/* ------------------------------------------------------------------
   10. RESPONSIVE SCALE
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    :root { --section-y: 48px; }
    .main-container h2, .content-section h2 { font-size: 25px; margin-top: 36px; }
    .main-container h3, .content-section h3 { font-size: 19px; margin-top: 26px; }
}

@media (max-width: 767px) {
    :root { --section-y: 36px; --gap: 20px; }
    .main-container, .content-section,
    .body-inner > section.container, .body-inner > div.container { font-size: 15.5px; }
    .main-container h1, .content-section h1 { font-size: 26px; margin-bottom: 16px; }
    .main-container h2, .content-section h2 { font-size: 22px; margin-top: 30px; }
    .main-container h3, .content-section h3 { font-size: 18px; margin-top: 22px; }
    .border-title { font-size: 22px; padding-bottom: 14px; margin-bottom: 18px; }
    .banner-heading .border-title.border-left { font-size: 26px; }
    .site-cta { padding: 40px 0; }
    .site-cta-text { font-size: 17px; }
    .site-cta .btn,
    .main-container .btn, .main-container .cta-button,
    .content-section .btn, .content-section .cta-button,
    .body-inner > section.container .btn,
    .body-inner > div.container .btn { width: 100%; margin: 6px 0; }
    .btn + .btn { margin-left: 0; }
    #back-to-top .btn { width: auto; }
    .contact-box, .feat-box { padding: 24px 18px; }
    .faq-table .faq-q { padding: 14px 16px; font-size: 15px; }
    .faq-table .faq-a { padding: 0 16px 16px; }
    .faq-table .faq-toggle { padding: 14px 12px; }
    .content-img-right { float: none; width: 100%; margin: 0 0 20px; }
    .gallery-box img { height: 200px; }
}

/* the back-to-top affix button is not a content CTA */
#back-to-top .btn {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    text-transform: none;
    letter-spacing: 0;
}
#back-to-top .btn:hover { transform: none; }

/* ------------------------------------------------------------------
   11. FINAL ALIGNMENT PASS
   ------------------------------------------------------------------ */

/* body copy size (theme ships p{font-size:15px}) */
.main-container p, .main-container li, .main-container td,
.content-section p, .content-section li,
.body-inner > section.container p, .body-inner > section.container li,
.body-inner > div.container p, .body-inner > div.container li { font-size: 16px; }

/* utility heading classes must follow the same scale inside content */
.main-container .h1, .content-section .h1,
.body-inner > section.container .h1 { font-size: 34px; line-height: 1.25; }
.main-container .h2, .content-section .h2,
.body-inner > section.container .h2 { font-size: 28px; line-height: 1.3; }
.main-container .h3, .content-section .h3 { font-size: 21px; }
.main-container .h4, .content-section .h4 { font-size: 17px; }
.main-container .h5, .content-section .h5 { font-size: 15px; }

/* the 404 numeral is a display element, not body copy */
.error-code h1 { font-size: 64px; line-height: 1; margin-bottom: 8px; }

/* sections that shipped with zero vertical padding */
section.content.solid-bg { padding: var(--section-y) 0; }
section#gallery.gallery { padding: var(--section-y) 0; }

/* one underline-heading rhythm */
.border-title { margin-bottom: 22px; }
.border-sub-title { margin-bottom: 34px; }

/* homepage slider buttons join the button system */
.slider.btn { border-radius: var(--radius-sm); padding: 15px 32px; font-size: 15px; }
.slider.btn.border,
.btn-primary.border { background: transparent; border: 1px solid #fff; color: #fff; }
.slider.btn.border:hover { background: #fff; color: var(--brand); }

/* "Can We Help?" phone block */
p.h4 { font-weight: 700; margin: 6px 0 0; }
p.h4 a { color: inherit; }

/* Bootstrap wells/panels inside content keep the card surface */
.main-container .panel-group { margin-bottom: 0; }

/* keep the theme's own centred intro blocks centred, but consistent */
.main-container .text-center p:last-child { margin-bottom: 0; }

/* tables inherit the type scale */
.main-container table th, .main-container table td { font-size: 16px; }

/* card surfaces: one radius everywhere (contact.php shipped 10px inline) */
.contact-box { border-radius: var(--radius); }
.gallery-box {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.gallery-caption { padding: 14px 16px; font-weight: 600; color: var(--ink); text-align: center; }

/* product page title keeps the theme's 30px */
.project-title { font-size: 30px; line-height: 1.25; margin-top: 0; }

/* ------------------------------------------------------------------
   12. EQUAL-HEIGHT CONTENT ROWS + CARD STRETCH
   Bootstrap 3's float grid leaves columns ragged whenever their content
   differs in length. Flexing every top-level content row (and only
   those) makes each column in a row finish at the same baseline, and
   the card inside stretches to fill it.
   Excluded: the header, the footer, the banner, the hero and the
   isotope grid (the plugin positions its items absolutely).
   ------------------------------------------------------------------ */
section:not(.site-cta) > .container > .row,
.body-inner > section.container > .row,
.body-inner > div.container > .row {
    display: flex;
    flex-wrap: wrap;
}
section:not(.site-cta) > .container > .row:before,
section:not(.site-cta) > .container > .row:after,
.body-inner > section.container > .row:before,
.body-inner > section.container > .row:after,
.body-inner > div.container > .row:before,
.body-inner > div.container > .row:after { display: none; }   /* clearfix -> phantom flex items */

section:not(.site-cta) > .container > .row > [class*="col-"],
.body-inner > section.container > .row > [class*="col-"],
.body-inner > div.container > .row > [class*="col-"] { float: none; }

/* the isotope grid must stay a plain block */
#isotope-container { display: block; }
#isotope-container > [class*="col-"] { float: left; }

/* rows that pair an image with copy read better vertically centred */
.row-vcenter > [class*="col-"] { display: flex; flex-direction: column; justify-content: center; }

/* nested rows keep their natural flow */
.main-container .panel-group .row,
[class*="col-"] .row { display: block; }

/* ------------------------------------------------------------------
   13. CARDS FILL THEIR COLUMN
   ------------------------------------------------------------------ */
[class*="col-"] > .ts-service-box,
[class*="col-"] > .contact-box,
[class*="col-"] > .feat-box,
[class*="col-"] > .quote-card,
[class*="col-"] > .gallery-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ts-service-box { padding: 26px 22px; margin-bottom: var(--gap); }
.ts-service-box .ts-service-box-content { flex: 1 1 auto; }
.ts-service-box .ts-service-icon { margin-bottom: 14px; }
.ts-service-box h2, .ts-service-box h3, .ts-service-box .h3 { font-size: 18px; margin: 0 0 8px; }
.ts-service-box p { margin-bottom: 0; font-size: 15px; }
.gallery-box .gallery-caption { margin-top: auto; }

/* hero: it was a Bootstrap carousel shell with no slides */
.hero-slide { position: relative; }

/* ==================================================================
   14. HOMEPAGE FACTS BAND
   These items are grid *columns*, not cards. Giving them a white
   surface hid their white text. They sit on a dark parallax image,
   so they get a translucent panel instead.
   ================================================================== */
.facts-area { padding: 72px 0; }
.facts-area .container { position: relative; z-index: 1; }

.facts-wrapper .ts-facts {
    color: #fff;
    padding: 26px 24px;
    margin-bottom: var(--gap);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    backdrop-filter: blur(2px);
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.facts-wrapper .ts-facts:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-3px);
}

.facts-wrapper .ts-facts-img {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.facts-wrapper .ts-facts .feat-icon,
.facts-wrapper .ts-facts .material-icons {
    font-size: 28px;
    color: #7fd39a;
    flex: 0 0 auto;
    line-height: 1;
}
.facts-wrapper .ts-facts-title,
.facts-wrapper .ts-facts-title.h5 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}
.facts-wrapper .ts-facts-num,
.facts-wrapper .ts-facts-num.h2 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
}

@media (max-width: 767px) {
    .facts-area { padding: 44px 0; }
    .facts-wrapper .ts-facts { padding: 20px 18px; }
    .facts-wrapper .ts-facts-num, .facts-wrapper .ts-facts-num.h2 { font-size: 21px; }
}

/* ==================================================================
   15. PRODUCTS GRID — caption text in white
   ================================================================== */
#isotope-container .project-cat,
#isotope-container .project-cat a,
.project-item-info p.project-cat a {
    color: #fff;
}
#isotope-container .project-cat a:hover,
#isotope-container .project-cat a:focus,
.project-item-info p.project-cat a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==================================================================
   16. FOOTER — pure white type
   ================================================================== */
.footer,
.footer p,
.footer li,
.footer span,
.footer .widget-title,
.footer .footer-widget,
.footer .copyright-info,
.footer .copyright-info p,
.footer address {
    color: #ffffff;
}
.footer a,
.footer .list-arrow > li > a,
.footer .footer-social ul li a,
.footer .copyright-info a {
    color: #ffffff;
}
.footer a:hover,
.footer a:focus,
.footer .list-arrow > li > a:hover {
    color: var(--gold);
}
.footer i { color: #ffffff; }
.footer .footer-social ul li a:hover i { color: var(--gold); }

/* the theme's own footer link rule is more specific than `.footer a` */
.footer .footer-widget ul.list-arrow li a,
.footer .footer-widget ul.list-arrow li:before,
.footer .footer-widget a,
.footer .footer-widget p,
.footer .footer-widget i { color: #ffffff; }
.footer .footer-widget ul.list-arrow li a:hover { color: var(--gold); }

/* ==================================================================
   17. CONTRAST FIXES
   ================================================================== */

/* about: the Fact Sheet accordion headers are brand-green bands. The card
   component was painting them white, so their white link text vanished. */
.panel.panel-default > .panel-heading.band-brand {
    background: var(--brand);
    border-radius: 0;
    padding: 4px 22px;
}
.panel-heading.band-brand,
.panel-heading.band-brand a,
.panel-heading.band-brand .panel-title,
.panel-heading.band-brand .panel-title a { color: #fff; }
.panel-heading.band-brand a:hover,
.panel-heading.band-brand .panel-title a:hover { color: var(--gold); }

/* index: the "Can We Help?" block sits on the brand-green band.
   Its heading was #303030 (2.1:1) and its phone number #7c7c7c (1.5:1). */
.subscribe-call-to-acton,
.subscribe-call-to-acton h3,
.subscribe-call-to-acton p,
.subscribe-call-to-acton p.h4,
.subscribe-call-to-acton p.h4 a,
.subscribe-call-to-acton a { color: #fff; }
.subscribe-call-to-acton p.h4 a:hover { color: var(--gold); }

/* the active nav item was brand green on the dark navbar (2.2:1) */
.site-navigation .navbar-nav > li.active > a,
.site-navigation .navbar-nav > li.active > a:hover,
.site-navigation .navbar-nav > li.active > a:focus { color: var(--gold); }

/* header contact strip: #999 on white is 2.9:1 */
.info-box-subtitle { color: #5f6b73; }
.info-box-title { color: var(--ink); }

/* the theme's own selectors are more specific; match them */
.nav-style-boxed ul.navbar-nav > li.active > a,
.nav-style-boxed ul.navbar-nav > li.active > a:hover,
.nav-style-boxed ul.navbar-nav > li.active > a:focus,
.nav-style-boxed ul.navbar-nav > li:hover > a { color: var(--gold); }

ul.top-info-box li .info-box .info-box-subtitle { color: #5f6b73; }
ul.top-info-box li .info-box .info-box-title { color: var(--ink); }

/* `a[href^="tel"] { color: inherit }` in the theme (specificity 0,2,0) was
   beating the button component, so phone CTAs rendered as grey body text. */
a[href^="tel"].btn,
a[href^="tel"].cta-button,
a[href^="tel"].btn-primary,
a[href^="tel"].btn-success { color: #fff; }
a[href^="tel"].btn-default { color: var(--brand); }
a[href^="tel"].btn-default:hover { color: #fff; }

/* WhatsApp text buttons: white on #25D366 is 1.98:1 (unreadable, and a WCAG
   failure). The floating bubble keeps the recognisable brand colour because
   it carries an icon, not copy; text buttons use an accessible darker green. */
.btn-success {
    background-color: #0d8043;   /* 5.0:1 with white */
    border-color: #0d8043;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #0a6835;
    border-color: #0a6835;
    color: #fff;
}

/* ==================================================================
   18. IMAGE SYSTEM
   Content images arrived at 8 different aspect ratios, only 33 of 178
   carried a shadow, and the certification badges (225x225 source) were
   being upscaled to 458px and stacked. One treatment for all of them.
   ================================================================== */

/* every editorial image in a content column gets the same frame */
.main-container img:not(.no-frame):not(.img-circle),
.content-section img:not(.no-frame),
.body-inner > section.container img:not(.no-frame),
.body-inner > div.container img:not(.no-frame) {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--gap);
}
.main-container p img,
.main-container a > img.no-frame { box-shadow: none; }

/* images paired with copy fill their column and share one 3:2 crop, so
   two-column rows finish level instead of one side dangling */
.row-vcenter img:not(.no-frame),
.row-equal img:not(.no-frame) {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    margin-bottom: 0;
}
@supports not (aspect-ratio: 3 / 2) {
    .row-vcenter img:not(.no-frame),
    .row-equal img:not(.no-frame) { height: 320px; }
}
@media (max-width: 767px) {
    .row-vcenter img:not(.no-frame),
    .row-equal img:not(.no-frame) { margin-bottom: 20px; aspect-ratio: 16 / 10; }
}

/* the product page hero image */
.project-img img,
.project-single img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ------------------------------------------------------------------
   Certification badges: 225x225 sources, previously scaled to 458px
   and stacked vertically down the page.
   ------------------------------------------------------------------ */
/* .cta-images is itself a grid column, so it inherits flex-direction:column
   from the row rules. Force it back to a row of badges. */
.cta-images,
.row-vcenter > [class*="col-"].cta-images,
.row-equal > [class*="col-"].cta-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 10px;
}
.cta-images img:not(.no-frame):not(.img-circle) {
    width: 118px;
    height: 118px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    margin: 0;
    box-shadow: var(--shadow);
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    .cta-images { justify-content: flex-start; gap: 16px; }
    .cta-images img:not(.no-frame):not(.img-circle) { width: 96px; height: 96px; }
}

/* small logos and icons must never be blown up */
.clients-logo img,
.ts-service-icon img,
img[src*="favicon"],
img[width="60"] { box-shadow: none; border-radius: 0; margin-bottom: 0; }

/* the one distorted image on the homepage */
img[src*="service-center"] { object-fit: contain; }

/* ==================================================================
   19. PAGE BANNER — premium treatment
   The banner had no overlay at all: white 38px type sat directly on a
   bright coconut photograph. A gradient scrim, taller frame and refined
   type make it read cleanly and give the page a proper masthead.
   ================================================================== */
#banner-area.banner-area {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    background-position: center 42%;
    background-size: cover;
    overflow: hidden;
    isolation: isolate;
}

/* scrim: dark at the left where the type sits, clearing to the right */
#banner-area.banner-area:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(10, 30, 18, .88) 0%, rgba(10, 30, 18, .70) 38%, rgba(10, 30, 18, .28) 72%, rgba(10, 30, 18, .12) 100%),
        linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 55%);
}

/* a slow drift keeps it from feeling like a flat stock photo */
#banner-area.banner-area:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 55%, transparent 100%);
}

#banner-area .banner-text {
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
}

.banner-heading .border-title.border-left {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 20px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    max-width: 15em;
}
.banner-heading .border-title.border-left:after {
    background: var(--gold);
    width: 64px;
    height: 3px;
    border-radius: 2px;
}

/* breadcrumb reads as a quiet eyebrow, not a second heading */
.banner-heading .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}
.banner-heading .breadcrumb > li > a { color: rgba(255, 255, 255, .82); transition: color .2s var(--ease); }
.banner-heading .breadcrumb > li > a:hover { color: var(--gold); }
.banner-heading .breadcrumb > .active { color: rgba(255, 255, 255, .58); }
.banner-heading .breadcrumb > li + li:before { color: rgba(255, 255, 255, .38); padding: 0 10px; }

@media (max-width: 991px) {
    #banner-area.banner-area { min-height: 300px; }
    .banner-heading .border-title.border-left { font-size: 34px; }
}
@media (max-width: 767px) {
    #banner-area.banner-area { min-height: 230px; }
    #banner-area.banner-area:before {
        background:
            linear-gradient(180deg, rgba(10, 30, 18, .72) 0%, rgba(10, 30, 18, .82) 100%);
    }
    .banner-heading .border-title.border-left { font-size: 26px; margin-bottom: 12px; padding-bottom: 14px; max-width: none; }
    .banner-heading .breadcrumb { font-size: 11px; }
}

/* ==================================================================
   20. SERVICES HUB (what-we-supply.html)
   Link buttons as cards: title, one-line descriptor, arrow affordance.
   ================================================================== */
.hub-blurb {
    color: var(--muted);
    font-size: 17px;
    margin: -6px 0 22px;
    max-width: 46em;
}

.hub-grid { margin-bottom: 18px; }

.hub-link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-height: 118px;
    padding: 20px 46px 20px 20px;
    margin-bottom: var(--gap);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease),
                border-color .22s var(--ease), background-color .22s var(--ease);
}
.hub-link:hover,
.hub-link:focus {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-left-color: var(--gold);
    text-decoration: none;
    background: #fff;
}

.hub-link-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 6px;
}
.hub-link:hover .hub-link-title { color: var(--brand); }

.hub-link-desc {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

.hub-link-go {
    position: absolute;
    right: 18px;
    top: 22px;
    font-size: 18px;
    line-height: 1;
    color: var(--line);
    transition: transform .22s var(--ease), color .22s var(--ease);
}
.hub-link:hover .hub-link-go {
    color: var(--brand);
    transform: translateX(4px);
}

/* the hub's own section headings sit tighter than body H2s */
#main-container .hub-grid + h2 { margin-top: 46px; }

@media (max-width: 767px) {
    .hub-link { min-height: 0; padding: 16px 42px 16px 16px; margin-bottom: 14px; }
    .hub-link-title { font-size: 15px; }
    .hub-blurb { font-size: 15px; }
    .hub-link-go { top: 18px; right: 14px; }
}