/*
Theme Name: Motloli Engineering Solutions Website
Author: Simple Perfect Solutions
Description:Motloli Engineering Solutions Website style sheet.
Version: 1.0
Brand colours:
- Green: #91bf18
- Charcoal: #343434
- Grey: #707070
*/

:root{
      --motloli-green:#91bf18;
      --motloli-green-dark:#6b940b;
      --motloli-charcoal:#343434;
      --motloli-grey:#707070;
      --motloli-light:#f7f8f6;
      --motloli-border:#e7e9e3;
      --motloli-white:#ffffff;
      --shadow-soft:0 20px 60px rgba(25,28,20,.12);
      --shadow-card:0 14px 40px rgba(34,34,34,.08);
      --radius:22px;
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--motloli-charcoal);
      background:#fff;
      overflow-x:hidden;
    }
    img{max-width:100%;height:auto;}
    a{text-decoration:none;}

    .text-green{color:var(--motloli-green)!important;}
    .bg-green{background:var(--motloli-green)!important;}
    .section-padding{padding:4.5rem 0;}
    .eyebrow{
      color:var(--motloli-green);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.78rem;
      margin-bottom:.55rem;
    }
    .section-title{
      font-weight:900;
      letter-spacing:-.045em;
      line-height:1.03;
      margin-bottom:1rem;
    }
    .muted{color:#666;line-height:1.75;}

    .btn-motloli{
      --bs-btn-bg:var(--motloli-green);
      --bs-btn-border-color:var(--motloli-green);
      --bs-btn-hover-bg:var(--motloli-green-dark);
      --bs-btn-hover-border-color:var(--motloli-green-dark);
      --bs-btn-color:#fff;
      --bs-btn-hover-color:#fff;
      font-weight:800;
      border-radius:0;
      padding:.9rem 1.35rem;
      letter-spacing:.02em;
      box-shadow:0 14px 24px rgba(145,191,24,.28);
    }
    .btn-outline-dark-custom{
      border:1.5px solid #3d3d3d;
      color:#252525;
      font-weight:800;
      border-radius:0;
      padding:.9rem 1.35rem;
      background:#fff;
    }
    .btn-outline-dark-custom:hover{background:#252525;color:#fff;}

    .topbar{
      display:none;
      background:#fafbf8;
      border-bottom:1px solid var(--motloli-border);
      font-size:.84rem;
      color:#565656;
    }
    .topbar a{color:#565656;}
    .topbar i{color:var(--motloli-green);}

    .navbar{
      background:#fff;
      border-bottom:1px solid rgba(0,0,0,.06);
      padding:.85rem 0;
    }
    .navbar-brand img{width:145px;}
    .navbar-toggler{border:0;box-shadow:none!important;}
    .nav-link{
      color:#202020;
      font-weight:800;
      font-size:.86rem;
      text-transform:uppercase;
      letter-spacing:.03em;
      padding:1rem .85rem!important;
      position:relative;
    }
    .nav-link.active,.nav-link:hover{color:var(--motloli-green);}
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:.85rem;right:.85rem;bottom:.35rem;
      height:3px;background:var(--motloli-green);
    }

    .hero{
      position:relative;
      background:
        radial-gradient(circle at 8% 30%, rgba(145,191,24,.09), transparent 22rem),
        linear-gradient(135deg,#fff 0%,#fff 44%,#f3f5ef 44%,#fff 100%);
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(145,191,24,.25) 1px, transparent 1px);
      background-size:18px 18px;
      mask-image:linear-gradient(90deg,black 0%,transparent 48%);
      opacity:.35;
      pointer-events:none;
    }
    .hero-content{
      position:relative;
      z-index:3;
      padding:3.8rem 0 2rem;
    }
    .hero h1{
      font-size:clamp(2.7rem,11vw,6.5rem);
      font-weight:900;
      line-height:.96;
      letter-spacing:-.075em;
      margin-bottom:1.25rem;
    }
    .hero p{font-size:1rem;line-height:1.8;color:#555;max-width:34rem;}
    .hero-rule{
      display:inline-block;width:76px;height:3px;background:var(--motloli-green);margin-left:.85rem;vertical-align:middle;
    }
    .hero-slider-wrap{
      position:relative;
      z-index:2;
      min-height:300px;
      margin-top:1.5rem;
      clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      background:#ddd;
    }
    .hero-slider-wrap .carousel,.hero-slider-wrap .carousel-inner,.hero-slider-wrap .carousel-item{height:100%;min-height:300px;}
    .hero-slider-wrap img{
      width:100%;height:100%;min-height:300px;object-fit:cover;
    }
    .hero-slider-wrap::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(0,0,0,.08));
      z-index:1;pointer-events:none;
    }
    .hero-stats{
      position:relative;
      z-index:4;
      background:#fff;
      box-shadow:var(--shadow-soft);
      border:1px solid var(--motloli-border);
      margin-top:-1.35rem;
      padding:.75rem;
    }
    .stat-item{
      display:flex;align-items:center;gap:.75rem;
      padding:1rem .7rem;
      border-bottom:1px solid var(--motloli-border);
    }
    .stat-item:last-child{border-bottom:0;}
    .stat-item i{font-size:1.8rem;color:var(--motloli-green);}
    .stat-number{display:block;font-size:1.35rem;font-weight:900;line-height:1;}
    .stat-label{display:block;font-size:.75rem;color:#686868;}

    .service-card{
      position:relative;
      height:100%;
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:10px;
      padding:1.4rem;
      transition:.25s ease;
      overflow:hidden;
    }
    .service-card::before{
      content:"";
      position:absolute;
      left:0;top:0;width:4px;height:0;
      background:var(--motloli-green);
      transition:.25s ease;
    }
    .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);}
    .service-card:hover::before{height:100%;}
    .service-card i{font-size:2.3rem;color:var(--motloli-green);margin-bottom:1.2rem;}
    .service-card h3{font-size:1rem;font-weight:900;margin-bottom:.6rem;}
    .service-card p{font-size:.9rem;color:#666;line-height:1.65;margin-bottom:1.4rem;}
    .mini-arrow{color:var(--motloli-green);font-size:1.2rem;}

    .about-band{
      background:linear-gradient(120deg,#fff 0%,#fff 48%,#f4f6f1 48%,#fff 100%);
      position:relative;
      overflow:hidden;
    }
    .image-cut{
      clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);
      overflow:hidden;
      min-height:260px;
      box-shadow:var(--shadow-soft);
    }
    .image-cut img{width:100%;height:100%;min-height:260px;object-fit:cover;}
    .feature-line{display:flex;gap:.85rem;margin-bottom:1rem;}
    .feature-line i{color:var(--motloli-green);font-size:1.4rem;flex:0 0 auto;}
    .feature-line h4{font-size:.98rem;font-weight:900;margin:0;}
    .feature-line p{font-size:.9rem;color:#666;margin:.15rem 0 0;line-height:1.55;}

    .project-card{
      position:relative;
      overflow:hidden;
      min-height:220px;
      border-radius:8px;
      background:#111;
      box-shadow:var(--shadow-card);
    }
    .project-card img{width:100%;height:240px;object-fit:cover;transition:.35s ease;opacity:.9;}
    .project-card:hover img{transform:scale(1.06);opacity:.72;}
    .project-overlay{
      position:absolute;inset:auto 0 0 0;
      padding:1.2rem;
      color:#fff;
      background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
    }
    .tag{display:inline-block;background:var(--motloli-green);color:#fff;font-size:.67rem;font-weight:900;padding:.24rem .5rem;margin-bottom:.55rem;text-transform:uppercase;}
    .project-overlay h3{font-size:1.05rem;font-weight:900;margin:0;}
    .project-overlay small{color:#d6d6d6;}

    .why-card{
      height:100%;background:#fff;border:1px solid var(--motloli-border);border-radius:14px;padding:1.4rem;
      box-shadow:0 6px 24px rgba(0,0,0,.04);
    }
    .why-card i{font-size:2rem;color:var(--motloli-green);}
    .why-card h3{font-size:1rem;font-weight:900;margin:.9rem 0 .45rem;}
    .why-card p{font-size:.9rem;color:#666;line-height:1.65;margin:0;}

    .testimonial-card{
      background:#fff;border:1px solid var(--motloli-border);border-radius:16px;padding:1.4rem;height:100%;box-shadow:var(--shadow-card);
    }
    .quote-mark{font-size:2rem;color:var(--motloli-green);line-height:1;}
    .stars{color:var(--motloli-green);letter-spacing:.12rem;font-size:.85rem;}

    .cta-band{
      position:relative;
      overflow:hidden;
      background:linear-gradient(90deg,rgba(145,191,24,.96),rgba(123,169,14,.94)), url('/assets/img/roofing.webp') center/cover;
      color:#fff;
    }
    .cta-band h2{font-weight:900;letter-spacing:-.04em;}
    .cta-icon{
      width:68px;height:68px;border-radius:50%;background:#fff;color:var(--motloli-green);display:grid;place-items:center;font-size:2rem;flex:0 0 auto;
    }

    footer{background:#303030;color:#d7d7d7;padding-top:3rem;}
    footer h5{font-size:.85rem;text-transform:uppercase;color:#fff;font-weight:900;letter-spacing:.05em;margin-bottom:1rem;}
    footer a{display:block;color:#d7d7d7;margin-bottom:.55rem;font-size:.9rem;}
    footer a:hover{color:var(--motloli-green);}
    .footer-logo{width:150px;filter:brightness(1.07);}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.11);padding:1rem 0;margin-top:2rem;font-size:.82rem;}
    .social a{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.08);margin-right:.35rem;color:#fff;}
    .social a:hover{background:var(--motloli-green);color:#fff;}
    .seo-list{list-style:none;padding:0;margin:1.25rem 0 0;}
    .seo-list li{display:flex;gap:.65rem;margin-bottom:.75rem;color:#555;line-height:1.55;}
    .seo-list i{color:var(--motloli-green);flex:0 0 auto;margin-top:.1rem;}
    .area-chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--motloli-border);background:#fff;border-radius:999px;padding:.55rem .85rem;font-size:.86rem;font-weight:800;color:#444;margin:.25rem;}
    .process-step{background:#fff;border:1px solid var(--motloli-border);border-radius:14px;padding:1.2rem;height:100%;}
    .process-step span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--motloli-green);color:#fff;font-weight:900;margin-bottom:.9rem;}
    .process-step h3{font-size:1rem;font-weight:900;margin-bottom:.5rem;}
    .process-step p{font-size:.9rem;color:#666;line-height:1.65;margin:0;}
    .faq-item{border:1px solid var(--motloli-border);background:#fff;border-radius:12px;padding:1rem 1.2rem;height:100%;}
    .faq-item h3{font-size:.98rem;font-weight:900;margin-bottom:.45rem;}
    .faq-item p{font-size:.9rem;color:#666;line-height:1.65;margin:0;}


    @media (min-width:576px){
      .hero-stats{padding:.5rem 1rem;}
      .stat-item{border-bottom:0;border-right:1px solid var(--motloli-border);}
      .stat-item:last-child{border-right:0;}
    }
    @media (min-width:768px){
      .topbar{display:block;}
      .hero-content{padding:5rem 0 4rem;}
      .hero-slider-wrap{margin-top:0;min-height:470px;}
      .hero-slider-wrap .carousel,.hero-slider-wrap .carousel-inner,.hero-slider-wrap .carousel-item{min-height:470px;}
      .hero-slider-wrap img{min-height:470px;}
      .hero-stats{margin-top:-3.2rem;border-radius:4px;}
      .section-padding{padding:6rem 0;}
    }
    @media (min-width:992px){
      .hero .container-fluid{padding-left:5vw;}
      .hero-content{padding-top:6.8rem;}
      .hero-slider-wrap{min-height:560px;}
      .hero-slider-wrap .carousel,.hero-slider-wrap .carousel-inner,.hero-slider-wrap .carousel-item{min-height:560px;}
      .hero-slider-wrap img{min-height:560px;}
      .hero-stats{max-width:720px;margin-left:auto;margin-right:5vw;}
    }
  
    .page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#fff 46%,#f2f5ed 46%,#fff 100%);}
    .page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(145,191,24,.25) 1px, transparent 1px);background-size:18px 18px;mask-image:linear-gradient(90deg,black 0%,transparent 55%);opacity:.3;}
    .page-hero h1{font-size:clamp(2.7rem,9vw,5.6rem);font-weight:900;line-height:.95;letter-spacing:-.075em;}
    .page-hero .hero-img{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);min-height:340px;overflow:hidden;box-shadow:var(--shadow-soft);}
    .page-hero .hero-img img{width:100%;height:100%;min-height:340px;object-fit:cover;}
    .breadcrumb-strip{border-top:1px solid var(--motloli-border);border-bottom:1px solid var(--motloli-border);background:#fff;font-size:.86rem;}
    .breadcrumb-strip a{color:#555;font-weight:700}.breadcrumb-strip span{color:var(--motloli-green);font-weight:800}
    .service-tile{height:100%;border:1px solid var(--motloli-border);background:#fff;border-radius:16px;padding:1.35rem;box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:.28s ease;}
    .service-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
    .service-tile::after{content:"";position:absolute;right:-40px;top:-40px;width:110px;height:110px;border-radius:50%;background:rgba(145,191,24,.10);}
    .service-icon{width:58px;height:58px;border:1px solid rgba(145,191,24,.35);background:#f9fbf5;color:var(--motloli-green);display:grid;place-items:center;font-size:1.85rem;margin-bottom:1.1rem;}
    .service-tile h3{font-size:1.1rem;font-weight:900;margin-bottom:.7rem;letter-spacing:-.02em;}
    .service-tile p{color:#666;line-height:1.65;font-size:.92rem;margin-bottom:1rem;}
    .service-link{font-weight:900;text-transform:uppercase;font-size:.76rem;color:var(--motloli-green);letter-spacing:.06em;}
    .split-feature{background:linear-gradient(120deg,#fff 0%,#fff 52%,#f5f7f1 52%,#fff 100%);}
    .service-list{list-style:none;margin:0;padding:0;}
    .service-list li{display:flex;gap:.7rem;border-bottom:1px solid var(--motloli-border);padding:.85rem 0;color:#555;line-height:1.55;}
    .service-list i{color:var(--motloli-green);margin-top:.1rem;}
    .sector-card{height:100%;background:#303030;color:#fff;border-radius:18px;padding:1.4rem;position:relative;overflow:hidden;}
    .sector-card i{font-size:2rem;color:var(--motloli-green)}.sector-card p{color:#d5d5d5;line-height:1.65;font-size:.92rem}
    .mini-cta{border:1px solid var(--motloli-border);background:#fff;border-radius:18px;padding:1.3rem;height:100%;}
    .mini-cta i{color:var(--motloli-green);font-size:1.75rem}.mini-cta h3{font-size:1.05rem;font-weight:900}.mini-cta p{color:#666;font-size:.9rem;line-height:1.6}

    .portfolio-filter{background:#fff;border:1px solid var(--motloli-border);border-radius:18px;padding:.55rem;box-shadow:var(--shadow-card);}
    .filter-pill{border:1px solid var(--motloli-border);background:#fff;color:#333;font-weight:800;font-size:.78rem;padding:.8rem 1rem;border-radius:14px;display:inline-flex;gap:.45rem;align-items:center;transition:.25s ease;}
    .filter-pill.active,.filter-pill:hover{background:var(--motloli-green);color:#fff;border-color:var(--motloli-green);transform:translateY(-2px);}
    .project-card{border:1px solid var(--motloli-border);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-card);height:100%;transition:.3s ease;}
    .project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);}
    .project-img{height:235px;object-fit:cover;width:100%;filter:saturate(.96) contrast(1.04);}
    .project-body{padding:1.3rem;}
    .project-tag{display:inline-flex;align-items:center;gap:.4rem;background:rgba(145,191,24,.11);color:var(--motloli-green-dark);border:1px solid rgba(145,191,24,.2);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;padding:.42rem .7rem;border-radius:999px;margin-bottom:.8rem;}
    .project-meta{display:grid;grid-template-columns:1fr;gap:.55rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--motloli-border);color:#666;font-size:.9rem;}
    .featured-project{border-radius:28px;background:linear-gradient(115deg,rgba(255,255,255,.96),rgba(255,255,255,.92)),radial-gradient(circle at 95% 10%,rgba(145,191,24,.18),transparent 32%);border:1px solid var(--motloli-border);box-shadow:var(--shadow-soft);overflow:hidden;}
    .mini-stat{border:1px solid var(--motloli-border);background:#fff;border-radius:20px;padding:1.1rem;height:100%;box-shadow:var(--shadow-card);}
    .mini-stat i{font-size:1.8rem;color:var(--motloli-green);}

    .testimonial-hero-card{
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:28px;
      box-shadow:var(--shadow-soft);
      padding:1.4rem;
      position:relative;
      margin-top:-3rem;
      z-index:5;
    }
    .quote-card{
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:24px;
      padding:1.5rem;
      height:100%;
      box-shadow:var(--shadow-card);
      transition:.3s ease;
      position:relative;
      overflow:hidden;
    }
    .quote-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);}
    .quote-card:before{
      content:"“";
      position:absolute;
      right:1.2rem;
      top:-.8rem;
      font-size:7rem;
      line-height:1;
      font-weight:900;
      color:rgba(145,191,24,.12);
    }
    .stars{color:var(--motloli-green);letter-spacing:.08em;}
    .client-avatar{
      width:54px;
      height:54px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(145,191,24,.13);
      color:var(--motloli-green-dark);
      font-weight:900;
      border:1px solid rgba(145,191,24,.24);
    }
    .trust-strip{
      border:1px solid var(--motloli-border);
      border-radius:26px;
      background:#fff;
      box-shadow:var(--shadow-card);
      overflow:hidden;
    }
    .trust-item{
      padding:1.3rem;
      border-bottom:1px solid var(--motloli-border);
    }
    .trust-item i{font-size:2rem;color:var(--motloli-green);}
    @media(min-width:992px){
      .trust-item{border-bottom:0;border-right:1px solid var(--motloli-border);}
      .trust-item:last-child{border-right:0;}
    }
    .review-highlight{
      border-radius:28px;
      background:
        linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),
        url('/assets/img/slide-3.webp') center/cover;
      color:#fff;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .review-highlight .muted{color:rgba(255,255,255,.78);}
    .industry-card{
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:22px;
      padding:1.25rem;
      height:100%;
      box-shadow:var(--shadow-card);
    }
    .industry-card i{font-size:1.9rem;color:var(--motloli-green);}

    .contact-panel{
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:28px;
      box-shadow:var(--shadow-soft);
      padding:1.25rem;
    }
    .form-control,.form-select{
      border:1px solid var(--motloli-border);
      border-radius:14px;
      padding:.95rem 1rem;
      font-weight:600;
      color:#333;
      background:#fff;
    }
    .form-control:focus,.form-select:focus{
      border-color:var(--motloli-green);
      box-shadow:0 0 0 .2rem rgba(145,191,24,.15);
    }
    textarea.form-control{min-height:150px;}
    .contact-card{
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:22px;
      padding:1.25rem;
      height:100%;
      box-shadow:var(--shadow-card);
      transition:.25s ease;
    }
    .contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
    .contact-card i{
      width:52px;
      height:52px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:rgba(145,191,24,.13);
      color:var(--motloli-green);
      font-size:1.55rem;
      margin-bottom:1rem;
    }
    .map-panel{
      border-radius:28px;
      overflow:hidden;
      min-height:420px;
      background:
        linear-gradient(115deg,rgba(255,255,255,.92),rgba(255,255,255,.72)),
        url('/assets/hero-building.png') center/cover;
      border:1px solid var(--motloli-border);
      box-shadow:var(--shadow-soft);
      position:relative;
    }
    .map-pin{
      width:86px;
      height:86px;
      border-radius:50%;
      background:var(--motloli-green);
      color:#fff;
      display:grid;
      place-items:center;
      font-size:2.5rem;
      box-shadow:0 20px 40px rgba(145,191,24,.35);
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
    }
    .map-info{
      position:absolute;
      left:1rem;
      right:1rem;
      bottom:1rem;
      background:#fff;
      border:1px solid var(--motloli-border);
      border-radius:20px;
      padding:1rem;
      box-shadow:var(--shadow-card);
    }
    .faq-item{
      border:1px solid var(--motloli-border);
      border-radius:18px;
      background:#fff;
      overflow:hidden;
      box-shadow:var(--shadow-card);
      margin-bottom:.9rem;
    }
    .accordion-button{
      font-weight:800;
      padding:1.05rem 1.2rem;
      color:#333;
    }
    .accordion-button:not(.collapsed){
      background:rgba(145,191,24,.1);
      color:#222;
      box-shadow:none;
    }
    .accordion-button:focus{box-shadow:none;border-color:transparent;}
    .service-area-list{
      columns:1;
      list-style:none;
      padding:0;
      margin:0;
    }
    .service-area-list li{
      margin-bottom:.65rem;
      color:#666;
      font-weight:600;
    }
    .service-area-list i{color:var(--motloli-green);margin-right:.45rem;}
    @media(min-width:768px){.service-area-list{columns:2;}}

.service-detail-card{background:#fff;border:1px solid var(--motloli-border);border-radius:24px;padding:1.35rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.service-detail-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.service-detail-card i{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:rgba(145,191,24,.13);color:var(--motloli-green);font-size:1.6rem;margin-bottom:1rem;}
.service-sticky-box{background:#fff;border:1px solid var(--motloli-border);border-radius:26px;box-shadow:var(--shadow-soft);padding:1.35rem;position:sticky;top:105px;}
.service-sticky-box .list-group-item{border:0;border-bottom:1px solid var(--motloli-border);padding:.9rem 0;font-weight:700;color:#555;}
.service-sticky-box .list-group-item:last-child{border-bottom:0;}
.service-sticky-box i{color:var(--motloli-green);}
.process-step{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);}
.step-number{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--motloli-green);color:#fff;font-weight:900;margin-bottom:1rem;}
.roofing-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/img/roofing.webp') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.roofing-highlight .muted{color:rgba(255,255,255,.78);}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{display:flex;gap:.7rem;margin-bottom:.85rem;color:#666;line-height:1.6;font-weight:600;}
.check-list i{color:var(--motloli-green);margin-top:.2rem;}
.roofing-highlight .check-list li{color:rgba(255,255,255,.86);}

.painting-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/hero-building.png') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.painting-highlight .muted{color:rgba(255,255,255,.78);}
.painting-highlight .check-list li{color:rgba(255,255,255,.86);}
.paint-finish-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);}
.paint-finish-card i{font-size:1.9rem;color:var(--motloli-green);}

.building-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/img/slide-3.webp') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.building-highlight .muted{color:rgba(255,255,255,.78);}
.building-highlight .check-list li{color:rgba(255,255,255,.86);}
.maintenance-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.maintenance-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.maintenance-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.plumbing-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/hero-building.png') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.plumbing-highlight .muted{color:rgba(255,255,255,.78);}
.plumbing-highlight .check-list li{color:rgba(255,255,255,.86);}
.plumbing-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.plumbing-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.plumbing-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.electrical-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/img/slide-3.webp') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.electrical-highlight .muted{color:rgba(255,255,255,.78);}
.electrical-highlight .check-list li{color:rgba(255,255,255,.86);}
.electrical-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.electrical-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.electrical-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.steel-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/img/slide-3.webp') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.steel-highlight .muted{color:rgba(255,255,255,.78);}
.steel-highlight .check-list li{color:rgba(255,255,255,.86);}
.steel-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.steel-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.steel-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.cleaning-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/hero-building.png') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.cleaning-highlight .muted{color:rgba(255,255,255,.78);}
.cleaning-highlight .check-list li{color:rgba(255,255,255,.86);}
.cleaning-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.cleaning-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.cleaning-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.road-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/hero-building.png') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.road-highlight .muted{color:rgba(255,255,255,.78);}
.road-highlight .check-list li{color:rgba(255,255,255,.86);}
.road-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.road-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.road-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.tiling-highlight{border-radius:28px;background:linear-gradient(115deg,rgba(52,52,52,.94),rgba(32,32,32,.92)),url('/assets/hero-building.png') center/cover;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft);}
.tiling-highlight .muted{color:rgba(255,255,255,.78);}
.tiling-highlight .check-list li{color:rgba(255,255,255,.86);}
.tiling-scope-card{background:#fff;border:1px solid var(--motloli-border);border-radius:22px;padding:1.25rem;height:100%;box-shadow:var(--shadow-card);transition:.25s ease;}
.tiling-scope-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.tiling-scope-card i{font-size:1.9rem;color:var(--motloli-green);}

.quote-shell{
  background:#fff;
  border:1px solid var(--motloli-border);
  border-radius:30px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.quote-form-side{
  padding:1.25rem;
}
.quote-trust-side{
  background:
    linear-gradient(145deg,rgba(52,52,52,.96),rgba(28,28,28,.94)),
    url('/assets/img/slide-3.webp') center/cover;
  color:#fff;
  padding:1.4rem;
  height:100%;
}
.quote-trust-side .muted{color:rgba(255,255,255,.76);}
.quote-input-group{
  background:#fff;
  border:1px solid var(--motloli-border);
  border-radius:18px;
  padding:1rem;
  height:100%;
}
.quote-input-group label{
  font-weight:800;
  font-size:.9rem;
  margin-bottom:.5rem;
}
.quote-check-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
.quote-check{
  border:1px solid var(--motloli-border);
  border-radius:16px;
  padding:.9rem;
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  background:#fff;
  transition:.25s ease;
}
.quote-check:hover{
  border-color:rgba(145,191,24,.45);
  background:rgba(145,191,24,.06);
}
.quote-check input{
  margin-top:.25rem;
  accent-color:var(--motloli-green);
}
.quote-check span{
  font-weight:800;
  line-height:1.25;
}
.quote-check small{
  display:block;
  color:#777;
  font-weight:500;
  margin-top:.18rem;
}
@media(min-width:768px){.quote-check-grid{grid-template-columns:1fr 1fr;}}
.quote-step-card{
  background:#fff;
  border:1px solid var(--motloli-border);
  border-radius:22px;
  padding:1.2rem;
  height:100%;
  box-shadow:var(--shadow-card);
}
.quote-step-card .step-number{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--motloli-green);
  color:#fff;
  font-weight:900;
  margin-bottom:1rem;
}
.upload-box{
  border:2px dashed rgba(145,191,24,.45);
  background:rgba(145,191,24,.06);
  border-radius:18px;
  padding:1.2rem;
}
.trust-mini{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
}
.trust-mini i{
  font-size:1.6rem;
  color:var(--motloli-green);
}


/* First-visit branded preloader */
#preloader{
  position:fixed;
  inset:0;
  background:#ffffff;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}

#preloader.preloader-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#preloader.preloader-skip{
  display:none!important;
}

.loader-brand{
  text-align:center;
  width:min(260px,80vw);
}

.loader-brand img{
  max-width:180px;
  width:100%;
  height:auto;
  margin-bottom:18px;
}

.loader-line{
  display:block;
  width:160px;
  max-width:100%;
  height:4px;
  margin:0 auto;
  background:#e7e9e3;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}

.loader-line::after{
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:45%;
  height:100%;
  background:var(--motloli-green);
  border-radius:999px;
  animation:motloliLoaderLine 1s ease-in-out infinite;
}

.loader-text{
  display:block;
  margin-top:14px;
  color:var(--motloli-charcoal);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@keyframes motloliLoaderLine{
  to{left:100%;}
}

@media (prefers-reduced-motion: reduce){
  #preloader{display:none!important;}
  .loader-line::after{animation:none;}
}

/* -------------------------------------------------------
   Navbar logo visibility update
   Larger responsive logo sizing so "Engineering Solutions"
   remains readable in the header.
------------------------------------------------------- */

.navbar-brand img{
  width:190px;
  max-width:100%;
  height:auto;
}

@media (min-width:576px){
  .navbar-brand img{
    width:220px;
  }
}

@media (min-width:992px){
  .navbar-brand img{
    width:260px;
  }

  .navbar-nav{
    gap:.75rem!important;
  }

  .main-nav .nav-link{
    font-size:.82rem;
  }

  .main-nav .btn-motloli{
    padding:.75rem 1.05rem;
    font-size:.82rem;
  }
}

@media (min-width:1400px){
  .navbar-brand img{
    width:285px;
  }
}

/* Keep the mobile menu comfortable after logo increase */
@media (max-width:991.98px){
  .main-nav .navbar-collapse{
    padding-top:1rem;
  }

  .main-nav .navbar-nav{
    gap:.35rem!important;
  }

  .main-nav .nav-link{
    padding:.7rem 0;
  }

  .main-nav .btn-motloli{
    width:100%;
    margin-top:.6rem;
    text-align:center;
  }
}

/* -------------------------------------------------------
   Back to top button
------------------------------------------------------- */

.back-to-top{
  position:fixed;
  right:1rem;
  bottom:1rem;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:var(--motloli-green);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.25rem;
  z-index:9990;
  box-shadow:0 14px 30px rgba(145,191,24,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .25s ease;
}

.back-to-top:hover,
.back-to-top:focus{
  background:var(--motloli-green-dark);
  color:#fff;
  outline:none;
  transform:translateY(10px) scale(1.04);
}

.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top i{
  line-height:1;
}

@media (min-width:992px){
  .back-to-top{
    right: 0.5rem;
    bottom: 6.5rem;
    width:54px;
    height:54px;
  }
}

@media (max-width:575.98px){
  .back-to-top{
    right:.85rem;
    bottom:.85rem;
    width:44px;
    height:44px;
    font-size:1.1rem;
  }
}


/* -------------------------------------------------------
   Final Site Coverage Additions
------------------------------------------------------- */

/* Common aliases and utility helpers used across the PHP templates */
.btn-green,
.btn.btn-green{
  background:var(--motloli-green,#91bf18);
  border:1px solid var(--motloli-green,#91bf18);
  color:#fff!important;
  font-weight:800;
  border-radius:0;
  padding:.9rem 1.35rem;
  letter-spacing:.02em;
  box-shadow:0 14px 24px rgba(145,191,24,.28);
}

.btn-green:hover,
.btn-green:focus,
.btn.btn-green:hover,
.btn.btn-green:focus{
  background:var(--motloli-green-dark,#6b940b);
  border-color:var(--motloli-green-dark,#6b940b);
  color:#fff!important;
}

.bg-light-soft,
.bg-light-custom{
  background:var(--motloli-light,#f7f8f6)!important;
}

.fw-black{
  font-weight:900!important;
}

.object-fit-cover{
  object-fit:cover!important;
}

/* Inner hero used by internal pages */
.inner-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 30%,rgba(145,191,24,.09),transparent 22rem),
    linear-gradient(135deg,#fff 0%,#fff 46%,#f2f5ed 46%,#fff 100%);
  padding:3.8rem 0 3rem;
}

.inner-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(145,191,24,.25) 1px,transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(90deg,black 0%,transparent 55%);
  opacity:.3;
  pointer-events:none;
}

.inner-hero > .container,
.inner-hero > .container-fluid{
  position:relative;
  z-index:2;
}

.hero-image-cut{
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  overflow:hidden;
  min-height:330px;
  box-shadow:var(--shadow-soft);
  background:#ddd;
}

.hero-image-cut img{
  width:100%;
  height:100%;
  min-height:330px;
  object-fit:cover;
}

.value-card{
  background:#fff;
  border:1px solid var(--motloli-border,#e7e9e3);
  border-radius:22px;
  padding:1.25rem;
  height:100%;
  box-shadow:var(--shadow-card);
  transition:.25s ease;
}

.value-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-soft);
}

.value-card i{
  font-size:1.9rem;
  color:var(--motloli-green,#91bf18);
}

/* About Page */
.hero-cut{
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  border-radius:0 0 0 44px;
  min-height:330px;
  object-fit:cover;
  width:100%;
  box-shadow:var(--shadow-soft);
}

.story-card{
  background:#fff;
  border:1px solid var(--motloli-border,#e7e9e3);
  border-radius:var(--radius,22px);
  box-shadow:var(--shadow-card);
  padding:1.5rem;
  height:100%;
}

.story-card.feature{
  background:linear-gradient(135deg,#303030,#1f1f1f);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.story-card.feature::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border:30px solid rgba(145,191,24,.18);
  border-radius:50%;
  right:-65px;
  bottom:-70px;
}

.story-card.feature .muted,
.story-card.feature p{
  color:rgba(255,255,255,.78);
}

.story-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  background:rgba(145,191,24,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--motloli-green,#91bf18);
  font-size:1.55rem;
  margin-bottom:1rem;
}

.story-card.feature .story-icon{
  background:rgba(255,255,255,.1);
}

.value-strip{
  background:#fff;
  border-top:1px solid var(--motloli-border,#e7e9e3);
  border-bottom:1px solid var(--motloli-border,#e7e9e3);
}

.value-item{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  padding:1rem 0;
}

.value-item i{
  font-size:1.65rem;
  color:var(--motloli-green,#91bf18);
  line-height:1;
}

.timeline{
  position:relative;
}

.timeline::before{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(var(--motloli-green,#91bf18),rgba(145,191,24,.1));
}

.timeline-item{
  position:relative;
  padding-left:4rem;
  margin-bottom:1.8rem;
}

.timeline-dot{
  position:absolute;
  left:0;
  top:.1rem;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--motloli-green,#91bf18);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  box-shadow:0 12px 30px rgba(145,191,24,.3);
}

.proof-panel{
  background:linear-gradient(135deg,rgba(145,191,24,.08),rgba(255,255,255,.95));
  border:1px solid var(--motloli-border,#e7e9e3);
  border-radius:var(--radius,22px);
  padding:1.5rem;
}

.cert-list{
  list-style:none;
  margin:0;
  padding:0;
}

.cert-list li{
  display:flex;
  gap:.7rem;
  margin-bottom:.8rem;
  color:#505050;
}

.cert-list i{
  color:var(--motloli-green,#91bf18);
}

/* Form and rating helpers */
.stars{
  color:var(--motloli-green,#91bf18);
  font-size:1.1rem;
  letter-spacing:.08em;
  line-height:1;
}

/* Final navbar override */
.navbar-brand img{
  width:190px;
  max-width:100%;
  height:auto;
}

@media (min-width:576px){
  .navbar-brand img{
    width:220px;
  }
}

@media (min-width:992px){
  .navbar-brand img{
    width:260px;
  }

  .navbar-nav{
    gap:.75rem!important;
  }

  .main-nav .nav-link,
  .navbar .nav-link{
    font-size:.82rem;
  }

  .main-nav .btn-motloli,
  .navbar .btn-motloli{
    padding:.75rem 1.05rem;
    font-size:.82rem;
  }

  .hero-cut{
    min-height:430px;
  }

  .story-card{
    padding:2rem;
  }

  .timeline::before{
    left:50%;
  }

  .timeline-item{
    width:50%;
    padding-left:0;
    padding-right:3rem;
    text-align:right;
  }

  .timeline-item:nth-child(even){
    margin-left:50%;
    padding-left:3rem;
    padding-right:0;
    text-align:left;
  }

  .timeline-dot{
    left:auto;
    right:-23px;
  }

  .timeline-item:nth-child(even) .timeline-dot{
    left:-23px;
    right:auto;
  }
}

@media (min-width:1400px){
  .navbar-brand img{
    width:285px;
  }
}

@media (min-width:768px){
  .inner-hero{
    padding:5rem 0 4rem;
  }

  .hero-image-cut,
  .hero-image-cut img{
    min-height:430px;
  }
}

@media (max-width:991.98px){
  .main-nav .navbar-collapse{
    padding-top:1rem;
  }

  .main-nav .navbar-nav{
    gap:.35rem!important;
  }

  .main-nav .nav-link{
    padding:.7rem 0;
  }

  .main-nav .btn-motloli{
    width:100%;
    margin-top:.6rem;
    text-align:center;
  }
}

@media (max-width:575.98px){
  .inner-hero{
    padding:3rem 0 2.5rem;
  }

  .hero-cut,
  .hero-image-cut{
    min-height:260px;
    clip-path:none;
    border-radius:24px;
  }

  .hero-image-cut img{
    min-height:260px;
  }

  .timeline-item{
    padding-left:3.5rem;
  }

  .timeline-dot{
    width:40px;
    height:40px;
  }
}


/* -------------------------------------------------------
   Home Page Minor Helpers
------------------------------------------------------- */

.slide{
  min-height:inherit;
}

.stats-card{
  background:#fff;
  border:1px solid var(--motloli-border,#e7e9e3);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  padding:1.25rem;
  height:100%;
}


.btn-motloli,
.btn-green,
.btn-outline-dark-custom{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  line-height:1.2;
  min-height:54px;
  white-space:nowrap;
}

.btn-motloli i,
.btn-green i,
.btn-outline-dark-custom i{
  line-height:1;
  display:inline-flex;
  align-items:center;
}


/* -------------------------------------------------------
   Portfolio Reference Layout
------------------------------------------------------- */
.portfolio-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 36% 48%,rgba(145,191,24,.14),transparent 22rem),linear-gradient(110deg,#fff 0%,#fff 43%,#f4f6f0 43%,#fff 100%);min-height:520px}
.portfolio-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(145,191,24,.24) 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(90deg,black 0%,transparent 48%);opacity:.36;pointer-events:none}
.portfolio-hero-content{position:relative;z-index:3;padding:4.2rem 0 2rem}
.portfolio-hero h1{font-size:clamp(2.7rem,7vw,5.7rem);font-weight:900;letter-spacing:-.07em;line-height:.96;margin-bottom:1.2rem}
.portfolio-hero h1 span{display:block;color:var(--motloli-green,#91bf18)}
.portfolio-hero p{max-width:34rem;color:#555;line-height:1.8;font-size:1rem}
.portfolio-hero-image{position:relative;z-index:2;min-height:390px;height:100%;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);overflow:hidden;box-shadow:var(--shadow-soft);background:#ddd}
.portfolio-hero-image img{width:100%;height:100%;min-height:390px;object-fit:cover}
.portfolio-filter-bar{position:relative;z-index:5;margin-top:-2.15rem}
.portfolio-filter{background:#fff;border:1px solid var(--motloli-border,#e7e9e3);box-shadow:var(--shadow-soft);border-radius:8px;padding:1rem}
.filter-pill{border:1px solid var(--motloli-border,#e7e9e3);background:#fff;color:#333;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;padding:1rem 1.25rem;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;transition:.25s ease;cursor:pointer;min-height:58px;font-family:inherit}
.filter-pill i{font-size:1.35rem;color:var(--motloli-green,#91bf18)}
.filter-pill.active,.filter-pill:hover,.filter-pill:focus{background:var(--motloli-green,#91bf18);color:#fff;border-color:var(--motloli-green,#91bf18);transform:translateY(-2px);outline:none}
.filter-pill.active i,.filter-pill:hover i,.filter-pill:focus i{color:#fff}
.portfolio-item{transition:opacity .25s ease,transform .25s ease}
.portfolio-item.hide{display:none!important}
.portfolio-grid-card{position:relative;min-height:190px;overflow:hidden;border-radius:4px;background:#1d1d1d;box-shadow:var(--shadow-card);transition:.3s ease}
.portfolio-grid-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.portfolio-grid-card img{width:100%;height:205px;object-fit:cover;opacity:.82;transition:.35s ease;filter:saturate(.96) contrast(1.05)}
.portfolio-grid-card:hover img{opacity:.68;transform:scale(1.06)}
.portfolio-card-overlay{position:absolute;inset:auto 0 0 0;padding:1rem;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.02));z-index:2}
.portfolio-card-tag{display:inline-flex;align-items:center;gap:.35rem;background:var(--motloli-green,#91bf18);color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:.24rem .55rem;border-radius:2px;margin-bottom:.55rem}
.portfolio-card-title-row{display:flex;gap:.7rem;align-items:center;justify-content:space-between}
.portfolio-card-title-row h3{margin:0;font-size:1rem;line-height:1.25;font-weight:900}
.portfolio-card-title-row .arrow{width:34px;height:34px;display:grid;place-items:center;background:#fff;color:#222;border-radius:50%;flex:0 0 auto;transition:.25s ease}
.portfolio-grid-card:hover .arrow{background:var(--motloli-green,#91bf18);color:#fff}
.portfolio-card-location{display:flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.86);font-size:.78rem;margin-top:.35rem}
.portfolio-featured{background:#fff;border:1px solid var(--motloli-border,#e7e9e3);border-radius:8px;box-shadow:var(--shadow-soft);overflow:hidden;padding:1.1rem}
.portfolio-featured img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:4px}
.featured-meta{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.3rem 0}
.featured-meta-item{display:flex;gap:.7rem;align-items:center;color:#555;font-size:.86rem}
.featured-meta-item i{font-size:1.5rem;color:var(--motloli-green,#91bf18)}
.portfolio-stats-strip{background:#fff;border:1px solid var(--motloli-border,#e7e9e3);box-shadow:var(--shadow-card);border-radius:8px;padding:1rem}
.portfolio-stat{display:flex;align-items:center;gap:.8rem;padding:1rem;border-bottom:1px solid var(--motloli-border,#e7e9e3)}
.portfolio-stat:last-child{border-bottom:0}
.portfolio-stat i{font-size:2rem;color:var(--motloli-green,#91bf18)}
.portfolio-stat strong{display:block;font-size:1.5rem;font-weight:900;line-height:1;color:#303030}
.portfolio-stat span{display:block;font-size:.78rem;color:#666;line-height:1.2}
.before-after-card{position:relative;overflow:hidden;border-radius:6px;box-shadow:var(--shadow-card);background:#111;min-height:210px}
.before-after-card img{width:100%;height:230px;object-fit:cover;opacity:.9}
.before-after-label{position:absolute;top:.75rem;left:.75rem;background:#303030;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;padding:.38rem .65rem;border-radius:3px}
.highlight-list{list-style:none;margin:0;padding:0}
.highlight-list li{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.75rem;color:#555;font-weight:600}
.highlight-list i{color:var(--motloli-green,#91bf18);margin-top:.1rem}
.portfolio-empty{display:none;background:#fff;border:1px solid var(--motloli-border,#e7e9e3);border-radius:18px;padding:2rem;text-align:center;box-shadow:var(--shadow-card)}
.portfolio-empty.show{display:block}
@media (min-width:768px){.featured-meta{grid-template-columns:repeat(2,1fr)}.portfolio-stat{border-bottom:0;border-right:1px solid var(--motloli-border,#e7e9e3)}.portfolio-stat:last-child{border-right:0}}
@media (min-width:992px){.portfolio-hero-content{padding:5.5rem 0 4.5rem}.portfolio-hero-image,.portfolio-hero-image img{min-height:560px}.featured-meta{grid-template-columns:repeat(4,1fr)}}
@media (max-width:575.98px){.portfolio-filter{padding:.75rem}.filter-pill{width:100%}.portfolio-hero-image{clip-path:none;border-radius:18px}}

.error{

  color: #f00;
}

/* -------------------------------------------------------
   404 Error Page
------------------------------------------------------- */

.error-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 30%, rgba(145, 191, 24, .12), transparent 24rem),
    linear-gradient(135deg, #fff 0%, #fff 48%, #f4f6f1 48%, #fff 100%);
  padding: 5rem 0;
}

.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(145, 191, 24, .25) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, black 0%, transparent 55%);
  opacity: .3;
  pointer-events: none;
}

.error-page .container-fluid {
  position: relative;
  z-index: 2;
}

.min-vh-75 {
  min-height: 75vh;
}

.error-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.075em;
  margin-bottom: 1.2rem;
}

.error-visual {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}

.error-code {
  position: absolute;
  font-size: clamp(8rem, 22vw, 16rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  color: rgba(145, 191, 24, .13);
  z-index: 1;
}

.error-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--motloli-border);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  max-width: 360px;
  text-align: center;
}

.error-card i {
  width: 82px;
  height: 82px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--motloli-green);
  color: #fff;
  font-size: 2.4rem;
  box-shadow: 0 20px 40px rgba(145, 191, 24, .35);
}

.error-card h2 {
  font-weight: 900;
  letter-spacing: -.04em;
  margin-bottom: .4rem;
}

.error-card p {
  color: #666;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .error-page {
    padding: 3.5rem 0;
  }

  .error-visual {
    min-height: 280px;
  }

  .error-card {
    padding: 1.5rem;
  }
}

/* Next.js conversion header parity overrides */
.navbar .navbar-nav .nav-link{
  color:#000;
  font-weight:900;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:0;
}

.navbar .navbar-nav .nav-link.active::after{
  display:none;
}

.navbar .navbar-nav .nav-link:hover{
  color:var(--motloli-green)!important;
}

.navbar .btn-motloli,
.navbar .btn.btn-motloli,
a.btn-motloli,
button.btn-motloli{
  background:var(--motloli-green)!important;
  border-color:var(--motloli-green)!important;
  color:#fff!important;
  border-radius:0!important;
  font-weight:900;
  box-shadow:0 14px 24px rgba(145,191,24,.28);
}

.navbar .btn-motloli:hover,
.navbar .btn.btn-motloli:hover,
a.btn-motloli:hover,
button.btn-motloli:hover{
  background:var(--motloli-green-dark)!important;
  border-color:var(--motloli-green-dark)!important;
  color:#fff!important;
}