/* new header and footer css start */
  /* =========================================================================
    LP Navigation — desktop mega menus (>=1024) + multi-level mobile drawer (<1024)
    Conventions: hardcoded hex, Gibson -> DM Sans.
    ========================================================================= */

    :root {
        /* Color */
        --c-orange:        #F2652D;   /* primary brand orange */
        --c-orange-deep:   #F15A22;   /* eyebrow / kicker orange */
        --c-orange-hot:    #FF5A1F;   /* dark-section accent */
        --c-orange-dot:    #FF5A2C;   /* active carousel dot */
        --c-orange-check:  #E2571C;   /* list checkmarks */
        --c-navy:          #192A35;   /* headings + dark sections */
        --c-navy-brand:    #275570;   /* legacy brand navy (testimonial names) */
        --c-ink:           #1C1715;   /* services card titles */
        --c-mirage:        #14202B;   /* badge brand text */

        --c-text-muted:    #7B7B7B;
        --c-text-sub:      #4A5A62;
        --c-text-soft:     #6B5F5A;
        --c-text-slate:    #6B7785;
        --c-text-cloud:    #93A1AB;   /* footer links */
        --c-text-storm:    #78788A;   /* events label */
        --c-text-ash:      #9AA0AB;   /* dark-card descriptions */
        --c-pampas:        #F6F4F1;

        --c-bg-page:       #FBFAF6;
        --c-bg-hero:       #FAF5EE;
        --c-bg-section:    #F4F1EA;
        --c-bg-chip:       #FFF4EF;
        --c-bg-chip-soft:  #FFF1EA;
        --c-bg-icon:       #FFE9E2;
        --c-bg-tag:        #FEEFE9;
        --c-bg-lpcol:      #FFFAF7;

        --c-border:        #E6E2D9;
        --c-border-chip:   #F3C4AE;
        --c-border-card:   #F0D9CF;
        --c-border-soft:   #EEF0F3;
        --c-border-gray:   #E6E8EC;
        --c-border-table:  #ECECEC;
        --c-border-row:    #F3F3F3;
        --c-border-cols:   #E7E3DA;
        --c-green:         #1FAA59;
        --c-green-dot:     #22C55E;
        --c-white:         #FFFFFF;

        /* Typography
            Gibson is a licensed font (Canada Type). Load it via your existing
            @font-face kit / Adobe Fonts; DM Sans is the visual fallback. */
        --font-primary:   'Gibson', "canada-type-gibson", sans-serif !important;

        /* Spacing & radius */
        --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
        --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
        --sp-12: 48px; --sp-15: 60px; --sp-20: 80px;
        --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 22px; --r-pill: 999px;

        /* Shadow */
        --sh-nav:    0 1px 2px rgba(15,42,60,.04), 0 2px 4px rgba(15,42,60,.03);
        --sh-card:   0 2px 8px rgba(99,99,99,.2);
        --sh-cf:     0 24px 50px -26px rgba(132,64,30,.32);
        --sh-cf-big: 0 40px 70px -30px rgba(132,64,30,.5);
        --sh-pcard:  0 16px 40px -26px rgba(21,21,30,.3);
        --sh-table:  0 8px 12px rgba(16,24,40,.08), 0 2px 2px rgba(16,24,40,.04);
        --sh-btn:    0 3px 4px rgba(0,0,0,.24);

        --container: 1240px;
        --transition: .25s ease;
    }

    a{text-decoration:none;color:inherit;}
    button{font-family:inherit;cursor:pointer;border:none;background:none;}
    ul{list-style:none;}
    .container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px;position:relative;}

    /* ---- NAV ---------------------------------------------------------------- */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        /* padding-top: var(--sp-5); */
    }
    .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:13px 15px 13px 22px;background:rgba(251,250,246,.78);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid #e6e2d9;border-radius:999px;
    box-shadow: 0px 2px 4px 0px #0F2A3C08,0px 1px 2px 0px #0F2A3C0A;}
    .nav__brand{display:flex;align-items:center;gap:7px;flex-shrink:0;}
    
    .nav__brand img {
        max-width: 180px;
    }

    .nav__logo-text{font-weight:700;font-size:21px;letter-spacing:-0.01em;color:#275570;}
    .nav__logo-text span{font-weight:600;}
  
    .nav__links {
        display:inline-flex !important;
        align-items:center;
        gap:4px;
        padding:8px 14px;
        border-radius:999px;
        color:#7b7b7b;
        font-size:16px;
        transition:background-color .18s,color .18s;
    }

    .nav__links li:hover,
    .nav__links li.is-active {
        color:#192a35;
    }
    .nav__chev {
        width:11px;
        height:7px;
        transition:transform .2s ease;
    }
    .nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg);}

    .nav__chev path{stroke:#7b7b7b;}

    .nav__link:hover .nav__chev path,
    .nav__link.is-active .nav__chev path {
        stroke: #192a35;
    }

    .nav__actions{display:flex;align-items:center;gap:20px;flex-shrink:0;}
    .btn-login{display:inline-flex;align-items:center;padding:8px 22px;border-radius:20px;
    border:1px solid #f2652d;color:#f2652d;font-size:14px;font-weight:500;transition:background-color .18s,color .18s;}
    .btn-login:hover{background:#f2652d;color:#fff;}
    .btn-start{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:20px;
    background:#f2652d;color:#fff;font-size:14px;font-weight:500;transition:background-color .18s;}
    .btn-start:hover{ 
        background:#d9531e;
        color: #fff;
    }
    .nav__toggle{display:none;width:44px;height:44px;border-radius:999px;align-items:center;justify-content:center;
    color:#192a35;flex-shrink:0;}
    .nav__toggle[aria-expanded="true"] .ic-bars{display:none;}
    .nav__toggle[aria-expanded="true"] .ic-x{display:block!important;}

    /* ============================ DESKTOP MEGA MENU ========================= */
    .mm-wrap{position:relative;z-index:55;}
    .mm {
        position:absolute;
        left:50%;
        top:14px;
        transform:translateX(-50%) translateY(-8px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        background:#fff;
        border-radius:30px;
        box-shadow:0 30px 70px -28px rgba(20,36,45,.45),0 6px 18px rgba(20,36,45,.08);
        transition:opacity .2s ease,transform .2s ease,visibility .2s;
    }

    .mm.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
    .mm-eyebrow { 
        font-size:12px;
        font-weight:500;
        letter-spacing:.1em;
        text-transform:uppercase;
        color: #7B7B7B;
    }

    .mm-feature p.mm-eyebrow {
        color: #F2652D;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .mm-eyebrow--accent{color:#f2652d;}
    .svc {
        display:flex;
        gap:14px;
        align-items:flex-start;
        padding: 10px 14px;
        border-radius:14px;
        transition:background-color .16s ease;
    }

    .svc:hover{background:#fbf4ee;}
    .svc__icn{width:36px;height:36px;border-radius:10px;background:#fdece3;color:#f2652d;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .svc__icn svg{width:18px;height:18px;}
    .svc__title {
        font-size:16px;
        font-weight:500;
        color:#192a35;
        line-height:1.2;
        display: block;
        margin-bottom: 2px;
    }
    .svc__desc {
        font-size: 12px;
        line-height: 1.3;
        color: #7B7B7B;
        margin-top: 2px;
        max-width: 220px;
        font-weight: 400;
        display: inline-block;
    }
    .svc--featured{background:#fbf4ee;}
    .svc--featured:hover{background:#fbf4ee;}
    .mm-platform {
        width:1024px;
        max-width:calc(100vw - 32px);
        padding:29px 40px 39px;
    }
    .mm-platform .mm-eyebrow{margin-bottom:14px;}
    .mm-platform__grid{display:grid;grid-template-columns:1fr 1fr 320px;gap:18px 24px;align-items:start;}
    .mm-col{display:flex;flex-direction:column;gap:6px;}
    .mm-promo{align-self:stretch;border-radius:18px;padding:26px;color:#fff;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#16242d 0%,#1d2a30 45%,#7a4327 100%);
    display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;}
    .mm-promo__new{position:absolute;top:22px;left:22px;display:inline-flex;align-items:center;gap:5px;
    background:#f2652d;color:#fff;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;}
    .mm-promo h3, 
    .mm-promo p.relevink-mm {
        font-size:22px;
        font-weight:700;
        margin-bottom:10px;
        color: var(--c-white);
    }
    .mm-promo p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);font-family:"Gibson","canada-type-gibson",sans-serif;margin-bottom:22px;max-width:230px;}
    .mm-promo a{display:inline-flex;align-items:center;gap:7px;color:#ff8a5c;font-weight:600;font-size:14px;}
    .mm-promo a svg{width:15px;height:15px;}
    .mm-resources {
        width:940px;
        max-width:calc(100vw - 32px);
        display:grid;
        grid-template-columns:234px 1fr;
        overflow:hidden;
    }
    .mm-rail{
        background:#FCF7F1;
        border-right:1px solid #E6E6E6;
        padding: 30px 14px;
    }
    .mm-rail__group {    
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #7B7B7B;
        padding: 0 10px;
        margin: 10px 0 8px;
        border-top: 1px solid #E6E6E6;
        padding-top: 16px; 
    }

    .mm-rail__group:first-child {
        margin-top:0;
        border-top: none;
        padding-top: 0; 
    }
    .mm-rail__item {
        display:flex;
        align-items:center;
        gap: 10px;
        padding: 10px;
        border-radius:10px;
        width:100%;
        text-align:left;
        transition:background-color .16s ease;
    }

    .mm-rail__item:hover{background:#faf4ee;}
    .mm-rail__item.is-active {
        background:#fff;
    }
    .mm-rail__icn{width:34px;height:34px;border-radius:9px;background:#fdece3;color:#f2652d;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .mm-rail__item.is-active .mm-rail__icn{background:#f2652d;color:#fff;}
    .mm-rail__icn svg{width:17px;height:17px;}
    .mm-rail__txt{flex:1;}
    .mm-rail__txt b {
        display:block;
        font-size:14px;
        font-weight: 500;
        color:#192a35;
        line-height:1.2;
    }

    .mm-rail__txt small{
        display: block;
        font-size: 11px;
        color: #7B7B7B;
        margin-top: 2px;
        font-weight: 400;
    }

    .mm-rail__chev{width:14px;height:14px;color:#c4baa9;opacity:0;}
    .mm-rail__item.is-active .mm-rail__chev {
        opacity:1;
        color:#7B7B7B;
    }

    .mm-panel { 
        padding:33px 36px;
        display:none;
    }

    .mm-panel.is-active{display:block;}
    .mm-panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin-top:14px;}
    .mm-ext-row {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 18px;
        padding: 15px 20px;
        border-radius: 10px;
        background: #FFF1E9;
    }

    .mm-ext-row .svc__icn{background:#fff;}
    .mm-ext-badge {
        margin-left: auto;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .05em;
        color: #F2652D;
        border: 1px solid #fff;
        border-radius: 999px;
        padding: 5px 13px;
        background: #fff;
    }

    .mm-feature{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding-top:8px;}
    .mm-feature h3,
    .mm-feature span {
        font-size: 26px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #192a35;
        line-height: 1.15;
        margin: 0 0 6px;
        display: inline-block;
    }
    .mm-feature p {
        font-size: 12px;
        line-height: 1.55;
        color: #7B7B7B;
        max-width: 300px;
        margin-bottom: 20px;
        font-weight: 400;
    }
    .mm-btn{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #f2652d;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        padding: 11px 20px 9px;
        border-radius: 30px;
        transition: background-color .18s, transform .18s;
    }

    .mm-btn:hover{ 
        background:#d9531e;
        transform:translateY(-1px);
        color: #fff;
    }
    .mm-btn svg{width:15px;height:15px;}
    p.mm-links__label,
    .mm-links__label {
        font-size:12px;
        font-weight:500;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:#7B7B7B;
        margin-bottom:14px;
    }
    .mm-links a {
        display: block;
        font-size: 14px;
        color: #404040;
        padding: 9px 0;
        transition: color .16s;
        font-weight: 500;
    }

    .mm-links a:hover{color:#f2652d;}

    /* ============================ MOBILE FULL-WIDTH NAV (<1024) ============= */
    /* Region pinned below the fixed navbar; --navh is set in JS to the bar height */
    .mnav{position:fixed;top:var(--navh,76px);left:0;right:0;bottom:0;background:#fff;z-index:90;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);overflow:hidden;
    border-top:1px solid #f0ece4;}
    .mnav.open{transform:translateX(0);}
    .mpanel{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;width:100%;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);}
    .mpanel[data-depth="0"]{transform:translateX(0);z-index:1;}
    .mpanel[data-depth="1"]{z-index:2;}
    .mpanel[data-depth="2"]{z-index:3;}
    .mpanel.active{transform:translateX(0);}
    .mpanel__head{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid #f0ece4;flex-shrink:0;min-height:64px;}
    .mpanel__back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
    color:#192a35;background:#faf4ee;flex-shrink:0;transition:background-color .16s;}
    .mpanel__back:hover{background:#f3e9df;}
    .mpanel__title{font-size:18px;font-weight:400;color:#192a35;flex:1;}
    .mpanel__title small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9b9384;}
    .mpanel__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px 24px;}
    .mpanel__sub{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a59c8c;padding:14px 14px 6px;}

    /* tappable rows (min 56px touch target) */
    .mrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;
    min-height:56px;transition:background-color .16s ease;}
    .mrow:active,.mrow:hover{background:#fbf4ee;}
    .mrow--featured{background:#fdf0e9;}
    .mrow__icn{width:38px;height:38px;border-radius:10px;background:#fdece3;color:#f2652d;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .mrow__icn svg{width:19px;height:19px;}
    .mrow__txt{flex:1;min-width:0;}
    .mrow__txt b{display:block;font-size:15.5px;font-weight:400;color:#192a35;line-height:1.25; position: relative;}
    .mrow__txt small{display:block;font-size:12.5px;color:#8b9099;margin-top:2px;line-height:1.35;}
    .mrow__chev{width:18px;height:18px;color:#c4baa9;flex-shrink:0;}
    .mrow__badge{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.05em;color:#f2652d;border:1px solid #f6c1a6;border-radius:999px;padding:4px 10px;flex-shrink:0;}

    /* feature panel content (Blog/Glossary/FAQs/Help) */
    .mfeature{padding:16px 14px;}
    .mfeature .mm-eyebrow{display:block;margin-bottom:8px;}
    .mfeature h3,
    .mfeature span {
        font-size:26px;
        font-weight:700;
        letter-spacing:-0.02em;
        color:#192a35;
        line-height:1.18;
        margin-bottom:10px;
        display: inline-block;
    }
    .mfeature p{font-size:14px;line-height:1.55;color:#6b7681;font-family:"Gibson","canada-type-gibson",sans-serif;margin-bottom:18px;}
    .mfeature .mm-btn{width:100%;justify-content:center;padding:13px;}

    /* root footer actions */
    .mpanel__foot{padding:16px 18px calc(18px + env(safe-area-inset-bottom));border-top:1px solid #f0ece4;display:flex;flex-direction:column;gap:12px;flex-shrink:0;}
    .mpanel__foot .btn-login,.mpanel__foot .btn-start{width:100%;justify-content:center;padding:13px;font-size:15px;border-radius:14px;}

    body.mm-lock{overflow:hidden;}


     /* ---- breakpoint switch -------------------------------------------------- */

    .demo-hint{text-align:center;margin-top:120px;color:#9b9384;font-size:14px;padding:0 20px;}
    .demo-hint b{color:#192a35;}

    .nav__link, .nav__links a.nav__link.active,
    .nav__link, .nav__links a.nav__link:hover {
        color: #192A35;
    }

    .mm-rail__item.is-active .mm-rail__icn img {
        fill: #fff;
        color: #fff;
        stroke: #fff;
        filter: brightness(0) invert(1);
    }

/* new header and footer css end */


/* new home page css */

/* ---------- 19. Responsive: laptop 1024px+ ---------- */
@media (min-width: 1024px) {
  .nav__links { 
    display: flex; 
    gap:20px;
}
  .nav__actions { display: flex; }
  .nav__toggle { display: none; }

  /* Floating menu panels — exact Figma frames 943px (45635:21103 / 45640:41118) */
  .nav { position: relative; }
  .nav-menu {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    width: min(943px, calc(100vw - 48px));
    padding: 0;
    background: var(--c-white);
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,.35);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
  }
  .nav-menu::before {
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
  }
  .nav__item.is-open > .nav-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  /* Platform: services block + promo card */
  .nav-menu--platform {
    align-items: center;
    justify-content: space-between;
    height: 352px;
    padding: 29px 43px 29px 40px;
  }
  .nav-menu--platform .nav-menu__services { width: 576px; align-self: flex-start; }
  .nav-menu--platform .nav-menu__cols { grid-template-columns: 268px 268px; gap: 40px; }
  .nav-menu--platform .nav-menu__col { gap: 20px; }
  .nav-promo { margin-top: 0; align-self: center; }

  /* Resources: sidebar + switchable panels */
  .nav-menu--resources { height: 434px; }
  .rside {
    flex-shrink: 0;
    width: 232px;
    height: 100%;
    padding: 30px 14px 14px;
    gap: 8px;
    background: #FCF7F1;
    border-right: 1px solid #E6E6E6;
  }
  .rside__group { padding-bottom: 10px; border-bottom: 1px solid #E6E6E6; }
  .rside__group--last { padding-top: 10px; padding-bottom: 0; border-bottom: 0; }
  .rpanels { flex: 1; display: flex; }
  .rpanel.is-active { width: 100%; padding: 39px 48px; }
  .nav-menu__cols--tools { grid-template-columns: 1fr 1fr; gap: 20px 70px; }
  .nav-menu__cols--tools .mitem__copy { max-width: 224px; }
  .rpanel--promo.is-active { flex-direction: row; align-items: flex-start; gap: 104px; }

  .hero { padding-top: 137px; }
  .results__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  .results__stat { position: relative; }
  .results__stat:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -15px; top: 0;
    height: 100%;
    border-left: 1px solid rgba(255,255,255,.18);
  }
  .builders__grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .builders__col { padding-inline: 30px; }
  .builders__col + .builders__col { border-left: 1px solid var(--c-border-cols); }
  .builders__col:first-child { padding-left: 20px; }
  .footer__top {
    grid-template-columns: 285px auto auto 310px;
    justify-content: space-between;
    gap: var(--sp-6);
  }
  .mnav{display:none;}
}

@media (max-width:1023.98px){
    .nav__links,
    .nav__actions{
        display:none !important;
    }

    .nav__toggle{display:flex;}
    .mm{display:none!important;}
    /* fixed navbar */
    .site-header{position:fixed;top:0;left:0;right:0;background:#faf5ee;padding-bottom:14px;}
    body{padding-top:84px;}
}

/* ---------- 20. Responsive: desktop 1440px+ ---------- */
@media (min-width: 1440px) {
  .container { padding-inline: 0; }
  .hero__title { font-size: 86px; }
}

/* ---------- 21. Large screens 1920px+ ---------- */
@media (min-width: 1920px) {
  .hero__glow { right: calc(50% - 730px); }
  .footer__watermark { font-size: 160px; }
}

.mpanel.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mpanel {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
}

/**Overriding the css */
    .nav__links li:hover,
    .nav__links li.is-active {
        color:#192a35;
    }