/* =====================================================
   PRO-F — GLOBAL THEME (Bootstrap 5.3)
   Load order on EVERY page:
     1. Bootstrap 5.3 CSS  (CDN)
     2. app.css            (this file: theme layer)
     3. <page>.css         (page-only styles, e.g. home.css)
   And before </body>: bootstrap.bundle.min.js, then app.js.

   This file does NOT redefine Bootstrap. It re-skins it:
   tokens -> Bootstrap CSS variables -> components.
   Fonts (add in <head>): DM Sans 400-700 + Playfair Display 400-700
   ===================================================== */

/* =====================================================
   0. THEME TOKENS  (change the look of the whole site here)
   ===================================================== */
:root {
    /* brand palette */
    --navy:         #244a6b;
    --navy-mid:     #173B63;
    --navy-dark:    #102e49;
    --navy-deep:    #0c243b;
    --emerald:      #35A66F;
    --emerald-dark: #238653;
    --mint:         #E6F5EA;
    --accent:       #bca47c;
    /* neutrals */
    --ink:          #182b3a;
    --muted:        #5e6c78;
    --paper:        #f7f8f7;
    --line:         #e1e6e8;

    /* typography */
    --font-body:    'DM Sans', Arial, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* section rhythm (same idea as the Sacred Vastu theme) */
    --section-padding-block:  60px;  /* top/bottom space of every section   */
    --section-padding-inline: 32px;   /* left/right space inside container    */
    --section-heading-gap:    52px;   /* gap between heading block & content  */
    --section-max-width:      1190px; /* content width                        */
    --section-bg:             #fff;
    --section-bg-alt:         var(--paper);
    --section-bg-dark:        var(--navy-deep);
    --header-height:          90px;

    /* images & cards (every photo/card on the site uses these) */
    --image-radius:           0px;
    --image-border:           1px solid #D5EBDD;
    --image-shadow:           0 10px 28px rgba(23, 59, 99, .10);
    --card-media-height:      195px;
    --card-lg-media-height:   215px;   /* article cards */
    --card-gap:               22px;

    /* type scale */
    --fs-body:                15px;
    --fs-h2:                  clamp(35px, 4.2vw, 56px);
    --fs-small:               12px;
}
@media (max-width: 650px) { :root { --card-media-height: 230px; } }
@media (max-width: 560px) { :root { --card-lg-media-height: 240px; } }
@media (max-width: 1000px) { :root { --header-height: 75px; } }
@media (max-width: 800px) {
    :root {
        --section-padding-block:  75px;
        --section-padding-inline: 18px;
    }
}
@media (max-width: 560px) {
    :root { --section-padding-block: 62px; }
}

/* =====================================================
   1. BOOTSTRAP VARIABLE OVERRIDES
   ===================================================== */
:root {
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size:   var(--fs-body);
    --bs-body-line-height: 1.75;
    --bs-body-color:       var(--ink);
    --bs-body-bg:          #fff;
    --bs-heading-color:    inherit;
    --bs-primary:          var(--navy);
    --bs-primary-rgb:      36, 74, 107;
    --bs-link-color:       var(--navy);
    --bs-link-hover-color: var(--emerald-dark);
    --bs-link-decoration:  none;
    --bs-border-color:     var(--line);
    --bs-border-radius:    0;
    --bs-gutter-x:         1.5rem;
    --bs-heading-color:    inherit;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 10px); }
body { -webkit-tap-highlight-color: transparent; overflow-x: clip; }   /* clip (not hidden) keeps Bootstrap scrollspy working */
a { text-decoration: none; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid #b48b45; outline-offset: 4px; }

/* container = content width + side space from tokens */
.container {
    max-width: calc(var(--section-max-width) + 2 * var(--section-padding-inline));
    padding-inline: var(--section-padding-inline);
}
@media (max-width: 767.98px) { .row { --bs-gutter-x: 1.5rem; } }   /* keep gutters inside the container padding on phones */
.row.g-card { --bs-gutter-x: var(--card-gap); --bs-gutter-y: var(--card-gap); } 
/* card rows 

/* =====================================================
   2. SECTIONS & HEADINGS
   ===================================================== */
.section {
    background: var(--section-bg);
    padding: 64px 0px;
}
.section-alt  { background: var(--section-bg-alt); }
.section-dark { background: var(--section-bg-dark); color: #fff; }

.section-head {
    max-width: 100%;
    margin: 0px;
    text-align: left;
}
.section-head p {
    max-width: 700px;
    margin: 15px auto 0;
    color: var(--muted);
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: inherit; }
h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--navy-deep);
}
@media (max-width: 560px) { h2, .h2 { font-size: 36px; } }
h2 em, .h2 em { font-weight: 400; color: var(--accent); }
.section-dark h2, .section-dark .h2 { color: #fff; }
h3, .h3 { margin: 0; }
.lead-muted { color: var(--muted); line-height: 1.8; }
.section-more { display: flex; justify-content: center; margin-top: 40px; }
.section-more .btn { min-width: 205px; justify-content: center; }

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.eyebrow.light  { color: #d9e6ed; }
.eyebrow.center { justify-content: center; }
.eyebrow .dash  { display: inline-block; width: 30px; height: 3px; border-radius: 3px; background: var(--emerald); }

/* =====================================================
   3. BUTTONS  (Bootstrap .btn re-skinned through its variables)
   ===================================================== */
.btn {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 16px;
    --bs-btn-font-size: 15px;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 0;
    --bs-btn-border-width: 0;
    --bs-btn-line-height: 1.75;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    letter-spacing: .035em;
    transition: transform .2s, background .2s, color .2s;
}
.btn, .btn-primary, .btn-secondary, .btn-light { background-image: none; box-shadow: none; text-shadow: none; }
/* .btn:hover { transform: translateY(-2px); } */
.btn-primary {
    --bs-btn-bg: var(--navy);               --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--emerald-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--emerald-dark);--bs-btn-active-color: #fff;
}
.btn-secondary {
    --bs-btn-bg: var(--emerald-dark);               --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--emerald); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--emerald);--bs-btn-active-color: #fff;
}
.btn-light {
    --bs-btn-bg: #fff;                      --bs-btn-color: var(--navy-deep);
    --bs-btn-hover-bg: var(--mint);         --bs-btn-hover-color: var(--navy-deep);
    --bs-btn-active-bg: var(--mint);        --bs-btn-active-color: var(--navy-deep);
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
}
.text-link.white { color: #fff; }
.text-link:hover { 
    color: var(--emerald-dark); border-color: var(--emerald-dark); }

/* =====================================================
   4. TOP BAR, HEADER & NAVBAR  (Bootstrap navbar + collapse)
   ===================================================== */
.topline {
    background: var(--navy-deep);
    color: #d9e4e9;
    font-size: 11px;
    letter-spacing: .14em;
    padding-block: 9px;
}
.topline .right { opacity: .75; }

.site-header {
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid #e7ecef;
    transition: box-shadow .2s;
    z-index: 1030;
}
.site-header.scrolled { box-shadow: 0 5px 22px #112f4812; }
.site-header .navbar { --bs-navbar-padding-y: 0; min-height: var(--header-height); }
.site-header .navbar-brand { width: 160px; margin: 0; padding: 0; flex: none; }
.site-header .navbar-brand img { width: 100%; height: auto; object-fit: contain; }
.site-header .navbar-nav { --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0; gap: clamp(10px, 1.35vw, 20px); align-items: center; }
.site-header .nav-link {
    color: #3c4b58;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1.35;
    white-space: nowrap;
}
.site-header .nav-link:hover, .site-header .nav-link:focus-visible { color: var(--emerald); }
.site-header .nav-link.active { color: var(--emerald-dark); }
.site-header .nav-link.active:hover { color: #1B6F43; }

.site-header .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 132px;
    height: 52px;
    background: var(--navy);
    
    

}
/* Let's talk button */
.site-header .nav-cta {
    background: var(--navy);
    color: #fff;
}

/* Hover आणि Active — दोन्ही वेळी Green */
.site-header .nav-cta:hover,
.site-header .nav-cta:focus-visible,
.site-header .nav-cta.active,
.site-header .nav-cta.active:hover {
    background: var(--emerald-dark);
    color: #fff;
}
/* Active menu underline */
.site-header .nav-link.active {
    position: relative;
}
.site-header .nav-link.active:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    height: 2px;
    background-color: var(--emerald);
    border-radius: 2px;
}
.navbar-toggler { border: 0; padding: 0; width: 40px; height: 40px; box-shadow: none !important; }
.navbar-toggler-icon { position: relative; width: 40px; height: 40px; background: none; }
.navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon span {
    content: ""; position: absolute; left: 7px; right: 7px; height: 2px; background: var(--navy);
}
.navbar-toggler-icon::before { top: 12px; }
.navbar-toggler-icon::after  { bottom: 12px; }
.navbar-toggler-icon span    { top: 19px; }
@media (max-width: 1000px) { .site-header .navbar-brand { width: 150px; } }
@media (max-width: 800px)  { .topline { font-size: 9px; } }
@media (max-width: 991.98px) {
    .site-header .navbar-collapse { padding-block: 10px 18px; }
    .site-header .navbar-nav { align-items: stretch; gap: 0; }
    .site-header .nav-link { padding: 13px 8px; white-space: normal; }
    .site-header .nav-cta { width: 100%; margin-top: 8px; }
}

/* =====================================================
   5. CARDS  (Bootstrap .card — used for services & articles)
   ===================================================== */
.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
    --bs-card-spacer-x: 20px;
    --bs-card-spacer-y: 20px;
    --bs-card-cap-padding-y: 0;
    background: #fff;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
    border: 1px solid #e2e8f0;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px #14385416; }
.card-body { padding: 20px; }
.card-media { height: var(--card-media-height); overflow: hidden; flex-shrink: 0; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-media img { transform: scale(1.04); }
.card-label { display: block; color: var(--emerald-dark); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.card-title { margin: 10px 0 10px; color: var(--navy-deep); font: 500 19px/1.3 var(--font-display); }
.card-text  { flex: 1; margin: 0 0 0px; color: var(--muted); line-height: 1.75; }
.card .btn-sm-link {
    display: inline-flex; align-items: center; gap: 14px; align-self: center;
    margin-top: auto; padding: 11px 15px;
    background: #164567; color: #fff; font-size: .82rem; font-weight: 700;
}
.card .btn-sm-link:hover { background: var(--navy-dark); color: #fff; }

.card-lg .card-media { height: var(--card-lg-media-height); }
.card-lg .card-body  { padding: 20px; min-height: 268px; }
.card-lg .card-title { font-size: 25px; margin: 10px 0; }
.card-lg .card-text  { margin: 0px 0px 10px; }
.card-note { margin-top: auto; color: #82909a; font-size: 9px; letter-spacing: .13em; }

/* =====================================================
   6. STATS BAND
   ===================================================== */
.stats-band { 
/*background: #f0f4f7;*/
/*border-block: 1px solid #e2e8ee; */
padding-block: 34px; }
.stats-band .stat { text-align: center; }
.stats-band strong { display: block; color: var(--navy-mid); font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: 1.1; font-weight: 700; }
.stats-band strong span { color: var(--emerald-dark); font-size: .55em; }
.stats-band .stat > span { display: block; margin-top: 9px; color: var(--emerald-dark); font-size: .83rem; font-weight: 700; }
.stats-band .note {
    padding-left: 18px;
     /* border-left: 2px solid var(--emerald); */
    /*font-family: Georgia, serif;*/
    font-size: 1.3rem; line-height: 1.45; color: #174366;
}

@media (max-width: 700px) { .stats-band .note { font-size: 1.05rem; } }
@media (min-width: 992px) {
    .stats-band .stat:not(:last-child) { border-right: 1px solid #d4dde5; }
    .stats-band .stat:not(:first-child) { padding-left: 24px; }
}
.stats-band strong b { font: inherit; color: inherit; }

/* =====================================================
   7. ACCORDION (FAQ) — Bootstrap accordion with + / − icon
   ===================================================== */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: #dce5ec;
    --bs-accordion-border-radius: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 24px;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-btn-color: #1b334d;
    --bs-accordion-active-color: #1b334d;
    --bs-accordion-active-bg: var(--mint);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
}
.accordion-item { border-width: 0 0 1px; }
.accordion-button { font-size: var(--fs-body); line-height: 1.75; font-weight: 650; box-shadow: none !important; padding-right: 28px; position: relative; }
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    content: ""; position: absolute; right: 2px; top: 50%; width: 15px; height: 2px; margin: -1px 0 0;
    background: #147e82; transform: none;
}
.accordion-button::before {
    content: ""; position: absolute; right: 2px; top: 50%; width: 15px; height: 2px; margin-top: -1px; background: #147e82;
    transform: rotate(90deg); transition: transform .2s;
}
.accordion-button:not(.collapsed)::before { transform: rotate(0); }
.accordion-body { line-height: 1.7; color: #5e6f80; max-width: 620px; padding-top: 0; padding-bottom: 23px; }
/*.accordion-flush>.accordion-item>.accordion-collapse {*/
/*    background-color: var(--mint);*/
/*    margin-bottom: 20px;*/
/*    padding: 10px;*/
/*}*/

/* =====================================================
   8. CONTACT CARD & NEWSLETTER BAND
   ===================================================== */
.contact-card { background: var(--paper); padding: 46px; }
.contact-card h3 { margin: 12px 0; color: var(--navy-deep); font: 500 32px var(--font-display); }
.contact-card p  { color: var(--muted); margin: 15px 0 25px; }
.contact-small {  display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: capitalize; }
.contact-card small { display: block; margin-top: 13px; color: #7d8a93; font-size: 10px; }
@media (max-width: 650px) { .contact-card { padding: 30px; } }
.section-navy { background: var(--navy); color: #fff; }

/* =====================================================
   9. FOOTER
   ===================================================== */
.site-footer { background: var(--navy-deep); color: #d6e2e9; padding: 68px 0 0; }
.site-footer .footer-logo { display: block; width: 200px; background: #fff; border-radius: 3px; padding: 5px; }
.site-footer .footer-tag { margin: 25px 0 13px; color: #afc3d1; font-size: 15px; line-height: 1.75; }
.site-footer h6 { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .07em; }
.site-footer a { color: #b5c7d2; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.site-footer a:hover { color: #8de0ae; }
.site-footer .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer address { margin: 0; color: #b5c7d2; font-size: 15px; line-height: 1.8; }
/*.footer-socials { display: flex; gap: 9px; margin-top: 5px; }*/
/*.footer-socials a {*/
/*    display: inline-flex; align-items: center; justify-content: center;*/
/*    width: 32px; height: 32px; border: 1px solid #ffffff50; border-radius: 50%;*/
/*    font-size: 13px; font-weight: 700; color: #fff;*/
/*}*/
/*.footer-socials a:hover { border-color: var(--emerald); }*/

.footer-socials {
    display: flex;
    align-items: center;
    gap: 15px; /* दोन्ही आयकॉन्समध्ये अंतर ठेवण्यासाठी */
    margin-top: 15px; /* वरील ॲड्रेसपासून खाली घेण्यासाठी */
}

.footer-socials a {
    color: #ffffff; /* तुमच्या गरजेनुसार कलर बदला */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-size:24px;
}

.footer-socials a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}
.footer-bottom {
    margin-top: 65px; padding: 24px 0; border-top: 1px solid #ffffff26;
    font-size: 15px; color: #b5c7d2;
}
.footer-bottom .right { letter-spacing: .14em; }

@media (max-width: 650px) {
    .site-footer { padding-top: 48px; }
    .site-footer .row { --bs-gutter-y: 30px; }
    .site-footer .footer-logo { width: 175px; }
    .footer-bottom { margin-top: 38px; padding: 20px 0; }
}

/* Fakt Quick Links sathich flex ani arrow apply hoil */
.footer-col.quick-links-col a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    text-decoration: none;
}

.footer-col.quick-links-col a::before {
    content: "›"; /* Yithe tumhi arrow symbol badlu sakta jasa ki "→" */
    font-size: 28px;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Hover kelyavr arrow thoda pude sarkel */
/*.footer-col.quick-links-col a:hover::before {*/
/*    transform: translateX(3px);*/
/*}*/
.footer-col.get-in-touch-col .footer-contact-link {
    display: flex;
    align-items: center;
    gap: 8px; /* आयकॉन आणि टेक्स्ट मधील अंतर */
    margin-bottom: 8px; /* ओळींमधील अंतर */
    text-decoration: none;
}

.footer-col.get-in-touch-col .footer-icon {
    font-size: 15px; /* आयकॉनची साईझ */
    flex-shrink: 0;
}

/* =====================================================
   9b. PHOTO FRAME (rounded image with emerald top bar)
   ===================================================== */
.photo-frame {
    position: relative; isolation: isolate; overflow: hidden;
    /*border: var(--image-border); border-radius: var(--image-radius);*/
    /*box-shadow: var(--image-shadow);*/
}
/*.photo-frame::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 5px; background: var(--emerald); }*/
.photo-frame img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
/*.photo-frame:hover img { transform: scale(1.015); }*/
@media (max-width: 760px) { 
    /*.photo-frame { border-radius: 13px; }*/
    /*.photo-frame img { border-radius: 12px; }*/
    }

/* =====================================================
   10. SCROLL-TO-TOP (progress ring)
   ===================================================== */
.scroll-progress {
    position: fixed; right: 24px; bottom: 80px; z-index: 1040;
    display: grid; place-items: center; width: 56px; height: 56px;
    border: 0; border-radius: 50%; background: #fff; cursor: pointer;
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: opacity .2s, transform .2s;
}
.scroll-progress.visible { opacity: 1; pointer-events: auto; transform: none; }
.scroll-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-progress circle { fill: none; stroke-width: 3; }
.scroll-progress .track { stroke: #e3ebef; }
.scroll-progress .fill  { stroke: var(--navy); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.scroll-progress span   { position: relative; color: var(--navy); font-size: 24px; font-weight: 700; line-height: 1; }
@media (max-width: 650px) { .scroll-progress { right: 14px; bottom: 14px; width: 50px; height: 50px; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* =====================================================
   SHARED HERO + BREADCRUMB  (app.css — paste at END of app.css,
   replacing the old "SHARED HERO" block)
   Used by: Home, About, Knowledge Centre, FAQ, Contact, Services
   Change the banner ONCE here and every page follows.
   ===================================================== */

.hero,
.about-hero,
.kc-hero,
.faq-hero,
.contact-hero,
.services-hero {
    height: 580px;
    min-height: 580px;
    position: relative;
    background: #143954;
    color: #fff;
    overflow: hidden;
}

.hero-photo, .about-hero-photo, .kc-hero-photo, .faq-hero-photo, .contact-hero-photo, .services-hero-photo {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1900&q=85') center 43% / cover no-repeat;
    opacity: .52;
}
.hero-wash, .about-hero-wash, .kc-hero-wash, .faq-hero-wash, .contact-hero-wash, .services-hero-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9,35,56,.97) 0%, rgba(13,44,68,.91) 34%, rgba(13,44,68,.40) 78%, rgba(13,44,68,.18) 100%);
}
.hero-inner, .about-hero-inner, .kc-hero-inner, .faq-hero-inner, .contact-hero-inner, .services-hero-inner {
    position: relative;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px var(--section-padding-inline) 56px;
}
.hero-copy, .about-hero-copy, .kc-hero-copy, .faq-hero-copy, .contact-hero-copy, .services-hero-copy {
    max-width: 690px;
}
.hero h1, .about-hero h1, .kc-hero h1, .faq-hero h1, .contact-hero h1, .services-hero h1 {
    font: 500 clamp(3rem, 5.6vw, 5.4rem)/1.11 var(--font-display);
    letter-spacing: -.035em;
    margin: 0 0 22px;
}
.hero h1 em, .about-hero h1 em, .kc-hero h1 em, .faq-hero h1 em, .contact-hero h1 em, .services-hero h1 em {
    font-weight: 400;
    color: var(--accent);
}
.hero-copy > p, .about-hero-copy > p, .kc-hero-copy > p, .faq-hero-copy > p, .contact-hero-copy > p, .services-hero-copy > p {
    max-width: 520px;
    margin: 0 0 30px;
    color: #e1e9ed;
    font-size: 16px;
    line-height: 1.85;
}

/* Breadcrumb (KC, FAQ, Contact, Services) */
.kc-crumb, .faq-crumb, .contact-crumb, .services-crumb {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: .17em;
    color: #dbe5eb;
}
.kc-crumb a, .faq-crumb a, .contact-crumb a, .services-crumb a { color: #dbe5eb; transition: color .2s; }
.kc-crumb a:hover, .faq-crumb a:hover, .contact-crumb a:hover, .services-crumb a:hover { color: #8de0ae; }
.kc-crumb i, .faq-crumb i, .contact-crumb i, .services-crumb i {
    width: 56px;
    height: 1px;
    background: #9ab0bd;
    flex-shrink: 0;
}

/* Tablet */
@media (max-width: 800px) {
    .hero, .hero-inner,
    .about-hero, .about-hero-inner,
    .kc-hero, .kc-hero-inner,
    .faq-hero, .faq-hero-inner,
    .contact-hero, .contact-hero-inner,
    .services-hero, .services-hero-inner { min-height: 630px; }
}
/* Mobile heading */
@media (max-width: 700px) {
    .hero h1, .about-hero h1, .kc-hero h1, .faq-hero h1, .contact-hero h1, .services-hero h1 {
        font-size: clamp(2.8rem, 12vw, 4.4rem);
    }
}
/* Small mobile */
@media (max-width: 560px) {
    .hero, .hero-inner,
    .about-hero, .about-hero-inner,
    .kc-hero, .kc-hero-inner,
    .faq-hero, .faq-hero-inner,
    .contact-hero, .contact-hero-inner,
    .services-hero, .services-hero-inner { min-height: 600px; }

    .hero-photo, .about-hero-photo, .kc-hero-photo, .faq-hero-photo, .contact-hero-photo, .services-hero-photo {
        background-position: 58% center;
    }
    .hero-wash, .about-hero-wash, .kc-hero-wash, .faq-hero-wash, .contact-hero-wash, .services-hero-wash {
        background: linear-gradient(90deg, #0b2945ed, #0d304cd0);
    }
    .hero-inner, .about-hero-inner, .kc-hero-inner, .faq-hero-inner, .contact-hero-inner, .services-hero-inner {
        padding: 55px var(--section-padding-inline) 75px;
    }
    .hero-copy > p, .about-hero-copy > p, .kc-hero-copy > p, .faq-hero-copy > p, .contact-hero-copy > p, .services-hero-copy > p {
        font-size: 14px;
    }
}









/* =====================================================
   4. OUR PROCESS (BARS)
   ===================================================== */
.process {
    background: white;
}
.process {
    background: #f6f9fa;
}
.growth-caption {
    text-align: center;
    color: #667c88;
    font-size: 12px;
    margin: 23px 0 0;
}
.bars-process {
    max-width: 1080px;
    margin: 0 auto;
}
.bars-stage {
    height: 360px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: end;
    gap: 26px;
    padding: 0 20px 8px;
    border-bottom: 2px solid #b6cbd8;
}
.bar-step {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    padding: 0;
    color: var(--navy);
}
.bar-title {
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 9px;
}
.bar-fill {
    display: block;
    height: var(--bar-h);
    background: linear-gradient(180deg,#4c91b0,var(--navy));
    border-radius: 9px 9px 0 0;
    transition: filter .25s,transform .25s,background .25s;
    transform-origin: bottom;
}
.bar-step:hover .bar-fill,
.bar-step:focus-visible .bar-fill {
    filter: brightness(1.18);
    transform: scaleX(1.035);
}
.bar-step.selected .bar-fill {
    background: linear-gradient(180deg,#7aabc2,#123b61);
    box-shadow: 0 0 0 3px #bad8e6 inset;
}
.bar-step:focus-visible {
    outline: 3px solid #1b5d88;
    outline-offset: 4px;
}
@media(max-width:760px) {
    .bars-stage {
        height: 260px;
        gap: 10px;
        padding: 0 3px 8px;
    }
}
#process .bars-process {
    max-width: 1080px;
    margin: 0 auto;
}
#process .bars-stage {
    height: 380px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: end;
    gap: 22px;
    padding: 0 12px 8px;
    border-bottom: 2px solid #b6cbd8;
    overflow: visible;
}
#process .bar-step {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
    transform: none!important;
    transition: none!important;
    outline-offset: 4px;
}
#process .bar-step:hover,
#process .bar-step:focus-visible,
#process .bar-step.selected {
    transform: none!important;
    top: auto!important;
    margin-top: 0!important;
    box-shadow: none;
}
#process .bar-fill {
    height: var(--bar-h);
    width: 100%;
    min-height: 0;
    flex: 0 0 var(--bar-h);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px 13px 12px;
    background: linear-gradient(180deg,#4c91b0,var(--navy));
    border-radius: 8px 8px 0 0;
    color: #fff;
    text-align: left;
    overflow: hidden;
    box-shadow: none;
    transform: none!important;
    filter: none!important;
    transition: background .2s;
}
#process .bar-step.selected .bar-fill {
    background: linear-gradient(180deg,#327e9e,#123b61);
    box-shadow: inset 0 0 0 2px #a8cedf;
}
#process .bar-step:hover .bar-fill,
#process .bar-step:focus-visible .bar-fill {
    filter: none;
    transform: none;
}
#process .bar-title {
    display: block;
    width: 100%;
    margin: 0;
    font-family: 'DM Sans',Arial,sans-serif;
    font-size: clamp(16px,1.55vw,19px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
    color: #fff;
    overflow-wrap: anywhere;
}
#process .bar-description {
    display: block;
    font-size: clamp(12px,1.05vw,14px);
    font-weight: 500;
    line-height: 1.45;
    color: #f0f6f8;
    overflow-wrap: anywhere;
}
#process .growth-caption {
    margin: 28px auto 0;
    text-align: center;
    font-size: 12px;
    color: #788a97;
}
@media(max-width:760px) {
    #process .bars-stage {
        height: 330px;
        gap: 8px;
        padding: 0 2px 8px;
    }
    #process .bar-fill {
        padding: 10px 7px 8px;
        gap: 7px;
    }
    #process .bar-title {
        font-size: clamp(13px,2.5vw,16px);
        line-height: 1.25;
    }
    #process .bar-description {
        font-size: clamp(10px,1.8vw,12px);
        line-height: 1.35;
    }
}
@media(max-width:440px) {
    #process .bars-stage {
        height: 350px;
        gap: 5px;
    }
    #process .bar-fill {
        padding: 9px 5px 7px;
        gap: 6px;
    }
    #process .bar-title {
        font-size: 12px;
    }
    #process .bar-description {
        font-size: 10px;
        line-height: 1.3;
    }
}
#process .bars-stage {
    gap: 22px;
}
#process .bar-fill {
    gap: 11px;
    padding: 17px 15px 13px;
}
#process .bar-step.selected .bar-fill {
    background: linear-gradient(180deg,#327e9e,#123b61);
    box-shadow: inset 0 0 0 2px #a8cedf;
}
@media(max-width:650px) {
    #process .bars-stage {
        gap: 6px;
    }
    #process .bar-fill {
        padding: 10px 5px 8px;
        gap: 7px;
    }
}
#process .bar-fill {
    align-items: center!important;
    justify-content: center!important;
    text-align: center!important;
    position: relative;
}
#process .bar-number {
    display: block!important;
    font-family: 'DM Sans',Arial,sans-serif;
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    opacity: .98;
    text-align: center;
    transition: opacity .18s ease;
}
#process .bar-title,
#process .bar-description {
    display: none!important;
    width: 100%;
    text-align: center!important;
}
#process .bar-step:hover .bar-title,
#process .bar-step:hover .bar-description,
#process .bar-step:focus-visible .bar-title,
#process .bar-step:focus-visible .bar-description,
#process .bar-step.selected .bar-title,
#process .bar-step.selected .bar-description {
    display: block!important;
}
#process .bar-step:hover .bar-number,
#process .bar-step:focus-visible .bar-number,
#process .bar-step.selected .bar-number {
    font-size: clamp(24px,2.6vw,32px);
    margin-bottom: 2px;
}
#process .bar-title {
    font-size: clamp(17px,1.65vw,20px);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    overflow-wrap: anywhere;
}
#process .bar-description {
    font-size: clamp(13px,1.1vw,15px);
    line-height: 1.45;
    color: #f0f6f8;
    font-weight: 500;
    overflow-wrap: anywhere;
}
#process .bar-step:hover .bar-fill,
#process .bar-step:focus-visible .bar-fill {
    background: linear-gradient(180deg,#327e9e,#123b61);
    box-shadow: inset 0 0 0 2px #a8cedf;
}
@media(max-width:760px) {
    #process .bar-number {
        font-size: clamp(27px,5vw,38px);
    }
    #process .bar-step:hover .bar-number,
    #process .bar-step:focus-visible .bar-number,
    #process .bar-step.selected .bar-number {
        font-size: clamp(20px,3.2vw,25px);
    }
    #process .bar-title {
        font-size: clamp(14px,2.7vw,17px);
    }
    #process .bar-description {
        font-size: clamp(11px,2vw,13px);
        line-height: 1.35;
    }
}
@media(max-width:440px) {
    #process .bar-fill {
        padding: 9px 5px 7px;
        gap: 6px;
    }
    #process .bar-number {
        font-size: 26px;
    }
    #process .bar-step:hover .bar-number,
    #process .bar-step:focus-visible .bar-number,
    #process .bar-step.selected .bar-number {
        font-size: 19px;
    }
    #process .bar-title {
        font-size: 12px;
    }
    #process .bar-description {
        font-size: 10px;
        line-height: 1.3;
    }
}
#process .bar-fill {
    background: linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%)!important;
    border-top: 3px solid var(--emerald);
    transition: background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
#process .bar-number {
    color: #bfe8cf!important;
}
#process .bar-step:hover .bar-fill,
#process .bar-step:focus-visible .bar-fill,
#process .bar-step.selected .bar-fill {
    background: linear-gradient(180deg,var(--mint) 0%,#ccebd6 100%)!important;
    border-top-color: var(--emerald);
    box-shadow: inset 0 0 0 2px var(--emerald)!important;
}
#process .bar-step:hover .bar-number,
#process .bar-step:focus-visible .bar-number,
#process .bar-step.selected .bar-number,
#process .bar-step:hover .bar-title,
#process .bar-step:focus-visible .bar-title,
#process .bar-step.selected .bar-title,
#process .bar-step:hover .bar-description,
#process .bar-step:focus-visible .bar-description,
#process .bar-step.selected .bar-description {
    color: var(--navy-dark)!important;
}
#process .bar-fill {
    align-items: center!important;
    text-align: center!important;
}
#process .bar-number {
    display: block!important;
    font-size: clamp(24px,2.6vw,32px)!important;
    line-height: 1.1!important;
    margin: 0 0 3px!important;
    color: var(--navy-dark)!important;
}
#process .bar-title,
#process .bar-description {
    display: none!important;
    text-align: center!important;
    width: 100%;
}
#process .bar-step.selected .bar-title,
#process .bar-step.selected .bar-description,
#process .bar-step:hover .bar-title,
#process .bar-step:hover .bar-description,
#process .bar-step:focus-visible .bar-title,
#process .bar-step:focus-visible .bar-description {
    display: block!important;
    color: var(--navy-dark)!important;
}
#process .bar-step.selected .bar-fill,
#process .bar-step:hover .bar-fill,
#process .bar-step:focus-visible .bar-fill {
    background: linear-gradient(180deg,var(--mint) 0%,#ccebd6 100%)!important;
    border-top-color: var(--emerald)!important;
    box-shadow: inset 0 0 0 2px var(--emerald)!important;
}
#process .bar-title {
    font-size: clamp(17px,1.65vw,20px)!important;
    font-weight: 800!important;
    line-height: 1.25!important;
}
#process .bar-description {
    font-size: clamp(13px,1.1vw,15px)!important;
    line-height: 1.45!important;
}
@media(max-width:760px) {
    #process .bar-fill {
        padding: 10px 7px 8px!important;
        gap: 7px!important;
    }
    #process .bar-title {
        font-size: clamp(14px,2.7vw,17px)!important;
    }
    #process .bar-description {
        font-size: clamp(11px,2vw,13px)!important;
        line-height: 1.35!important;
    }
}
@media(max-width:440px) {
    #process .bar-fill {
        padding: 9px 5px 7px!important;
        gap: 6px!important;
    }
    #process .bar-title {
        font-size: 12px!important;
    }
    #process .bar-description {
        font-size: 10px!important;
        line-height: 1.3!important;
    }
}
#process .bar-fill {
    background: linear-gradient(180deg,var(--navy) 0%,var(--navy-mid) 100%)!important;
    border-top: 3px solid var(--emerald)!important;
}
#process .bar-number {
    color: #d9f3e2!important;
}
#process .bar-step.selected .bar-fill {
    background: linear-gradient(180deg,var(--mint) 0%,#ccebd6 100%)!important;
    border-top-color: var(--emerald)!important;
    box-shadow: inset 0 0 0 2px var(--emerald)!important;
}
#process .bar-step.selected .bar-number,
#process .bar-step.selected .bar-title,
#process .bar-step.selected .bar-description {
    color: var(--navy-mid)!important;
}
#process .bar-step.selected .bar-title,
#process .bar-step.selected .bar-description {
    display: block!important;
}
#process .bars-stage:has(.bar-step:hover) .bar-step.selected:not(:hover) .bar-fill {
    background: linear-gradient(180deg,var(--navy) 0%,var(--navy-mid) 100%)!important;
    border-top-color: var(--emerald)!important;
    box-shadow: none!important;
}
#process .bars-stage:has(.bar-step:hover) .bar-step.selected:not(:hover) .bar-title,
#process .bars-stage:has(.bar-step:hover) .bar-step.selected:not(:hover) .bar-description {
    display: none!important;
}
#process .bars-stage:has(.bar-step:hover) .bar-step.selected:not(:hover) .bar-number {
    color: #d9f3e2!important;
}
#process .bar-step:hover .bar-fill,
#process .bar-step:focus-visible .bar-fill {
    background: linear-gradient(180deg,var(--mint) 0%,#ccebd6 100%)!important;
    border-top-color: var(--emerald)!important;
    box-shadow: inset 0 0 0 2px var(--emerald)!important;
}
#process .bar-step:hover .bar-number,
#process .bar-step:focus-visible .bar-number,
#process .bar-step:hover .bar-title,
#process .bar-step:focus-visible .bar-title,
#process .bar-step:hover .bar-description,
#process .bar-step:focus-visible .bar-description {
    color: var(--navy-mid)!important;
}
#process .bar-step:hover .bar-title,
#process .bar-step:hover .bar-description,
#process .bar-step:focus-visible .bar-title,
#process .bar-step:focus-visible .bar-description {
    display: block!important;
}
#process .bar-title {
    font-size: 18px!important;
    line-height: 1.3!important;
}
#process .bar-description {
    font-size: 16px!important;
    line-height: 1.45!important;
}
@media(max-width:760px) {
    #process .bar-title {
        font-size: 16px!important;
    }
    #process .bar-description {
        font-size: 14px!important;
        line-height: 1.4!important;
    }
}
@media(max-width:440px) {
    #process .bar-title {
        font-size: 15px!important;
    }
    #process .bar-description {
        font-size: 13px!important;
        line-height: 1.35!important;
    }
}