@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* =========================================
   Variables & Configuration
   ========================================= */
/* Deep Blue from image */
/* =========================================
   Global Styles
   ========================================= */
body {
  font-family: "Poppins", sans-serif;
  color: #212529;
  background-color: #fff;
  overflow-x: hidden;
}


a {
  text-decoration: none;
  transition: color 0.3s;
}

.btn {
  background-color: #0056b3;
}

.btn-outline-secondary {
  background-color: #111;
  color: #f8f9fa;
}

.sub-heading {
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  color: #007bff;
  letter-spacing: 1.5px;
  display: inline-block;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 15px;
}
.sub-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  background-color: #007bff;
}

.bg-light {
  background-color: rgba(0, 86, 179, 0.05) !important;
}

.text-highlight {
  color: #0056b3;
}

.headingwithlink {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.headingwithlink a {
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  color: #212529;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 15px;
}

h2 {
  font-weight: 800;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

/* =========================================
   Navigation
   ========================================= */
.main-nav {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1rem 0;
  transition: all 0.3s ease;
}
.main-nav.scrolled {
  padding: 0.5rem 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.main-nav .nav-item.active a {
  color: #0056b3;
}
.main-nav .nav-link {
  font-weight: 500;
  color: #212529;
  margin-right: 1.5rem;
  font-size: 0.95rem;
}
.main-nav .nav-link:hover {
  color: #0056b3;
}
.main-nav .nav-cta {
  border-radius: 50px;
  padding: 0.6rem 1.8rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.main-nav .navbar-brand {
  max-width: 210px;
}
.main-nav .navbar-brand img {
  width: 100%;
}

/* =========================================
   Hero Section
   ========================================= */
.hero-section {
  padding: 160px 0 100px;
  background: radial-gradient(circle at 50% 50%, #f4f8ff 0%, #ffffff 70%);
  position: relative;
}
.hero-section .hero-badge {
  display: inline-block;
  background: #eef4ff;
  color: #0056b3;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}
.hero-section .hero-title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #212529;
}
.hero-section .hero-subtitle {
  font-size: 1.2rem;
  color: #6c757d;
  max-width: 650px;
  margin: 0 auto 3rem;
  font-weight: 400;
}

.hero-actions .action-btn {
  border-radius: 50px;
  padding: 14px 35px;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 10px 10px;
  transition: transform 0.2s;
}
.hero-actions .action-btn:hover {
  transform: translateY(-2px);
}

.stats-bar {
  margin-top: 5rem;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  padding: 2.5rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.stats-bar .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f0f0f0;
}
.stats-bar .stat-item:last-child {
  border-right: none;
}
.stats-bar .stat-item .stat-icon {
  font-size: 1.8rem;
  color: #0056b3;
  margin-bottom: 0.8rem;
}
.stats-bar .stat-item .stat-text {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: #212529;
}

/* =========================================
   Numbers Section
   ========================================= */
.numbers-section {
  padding: 80px 0;
  background-color: #ffffff;
}
.numbers-section .numbers-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.numbers-section .numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
@media (max-width: 767px) {
  .numbers-section .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.numbers-section .number-card .count-up {
  font-size: 3.5rem;
  font-weight: 800;
  color: #0056b3;
  margin-bottom: 10px;
  display: block;
}
.numbers-section .number-card .count-up::after {
  content: attr(data-suffix);
}
.numbers-section .number-card p {
  font-size: 1rem;
  color: #777;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
}

/* =========================================
   Growth/Case Studies
   ========================================= */
.growth-section {
  padding: 4rem 0 8rem;
}
.growth-section .g-grid {
  margin-top: 2rem;
}
.growth-section .g-grid .col-lg-6 {
  margin-top: 0;
}
.growth-section .g-grid .col-lg-6:nth-child(2n) {
  margin-top: 2rem;
}
.growth-section .case-card {
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  align-items: flex-end;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}
.growth-section .case-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.growth-section .case-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.growth-section .case-card.bg-dark-gradient {
  background: linear-gradient(160deg, #34495e, #1a252f);
}
.growth-section .case-card.bg-orange-gradient {
  background: linear-gradient(160deg, #e67e22, #34495e);
}
.growth-section .case-card .case-content {
  z-index: 2;
  width: 100%;
}
.growth-section .case-card .case-badge {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  margin-bottom: 1.5rem;
  font-weight: 600;
  padding: 0.5em 1em;
  font-size: 0.75rem;
  letter-spacing: 1px;
}
.growth-section .case-card h3 {
  font-size: 1.8rem;
  margin-bottom: 0;
  font-weight: 700;
}
.growth-section .case-card .case-stat {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.growth-section .case-card p {
  opacity: 0.8;
  margin: 0;
  font-size: 1.1rem;
}

/* =========================================
   Services Section
   ========================================= */
.services-section {
  padding: 6rem 0;
}
.services-section .service-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: 1rem;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  position: relative;
}
.services-section .service-card .abs {
  position: absolute;
  inset: 0;
}
.services-section .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
  border-color: transparent;
}
.services-section .service-card:hover .icon-box {
  background: #0056b3;
  color: #fff;
}
.services-section .service-card .icon-box {
  width: 60px;
  height: 60px;
  background: #eef4ff;
  color: #0056b3;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}
.services-section .service-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.services-section .service-card p {
  font-size: 0.95rem;
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

/* =========================================
   Tech Stack
   ========================================= */
.tech-stack-section {
  padding: 6rem 0;
}
.tech-stack-section .tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.tech-stack-section .tech-grid .tech-tag {
  background: #fff;
  border: 1px solid #e9ecef;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.2s;
  font-size: 1rem;
}
.tech-stack-section .tech-grid .tech-tag i {
  color: #0056b3;
  font-size: 1.2rem;
}
.tech-stack-section .tech-grid .tech-tag:hover {
  border-color: #0056b3;
  background: #eef4ff;
  transform: scale(1.05);
}

/* =========================================
   Tech Stack Marquee Animation
   ========================================= */
@keyframes marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes marquee-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.tech-marquee-container {
  padding: 2rem 0;
  overflow: hidden;
  width: 100%;
}

.marquee-row {
  display: flex;
  width: 100%;
  white-space: nowrap;
  position: relative;
}
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 30s;
  min-width: -moz-max-content;
  min-width: max-content;
  padding-right: 1.5rem;
}

.marquee-left .marquee-track {
  animation-name: marquee-scroll-left;
}

.marquee-right .marquee-track {
  animation-name: marquee-scroll-right;
}

.tech-tag {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e9ecef;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  color: #212529;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.2s;
  font-size: 1rem;
}
.tech-tag i {
  color: #0056b3;
  font-size: 1.2rem;
}
.tech-tag:hover {
  border-color: #0056b3;
  background: #eef4ff;
}

/* =========================================
   Testimonials
   ========================================= */
.testimonials-section {
  padding: 6rem 0;
  background: #fcfcfc;
  border-top: 1px solid #f0f0f0;
}
.testimonials-section .splide__pagination__page.is-active {
  background-color: #0056b3;
}
.testimonials-section .splide__list {
  padding: 2.5rem 0 !important;
}
.testimonials-section .testimonial-card {
  position: relative;
  height: 100%;
  padding: 2.5rem;
  border-radius: 1rem;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
}
.testimonials-section .testimonial-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}
.testimonials-section .testimonial-card .stars {
  color: #ffc107;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}
.testimonials-section .testimonial-card .quote {
  font-style: italic;
  color: #212529;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
}
.testimonials-section .testimonial-card .author {
  display: flex;
  align-items: center;
}
.testimonials-section .testimonial-card .author .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1rem;
  background-clip: padding-box;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.testimonials-section .testimonial-card .author .avatar img {
  width: 100%;
}
.testimonials-section .testimonial-card .author .info h5 {
  font-size: 1rem;
  margin: 0;
  font-weight: 700;
  color: #212529;
}
.testimonials-section .testimonial-card .author .info span {
  font-size: 0.85rem;
  color: #6c757d;
  opacity: 0.85;
}

/* Contact Section Styles */
.contact-area {
  padding: 120px 0;
  background-color: #ffffff;
  /* Left Side Info List */
  /* Map Overlay Graphic */
}
.contact-area .text-gradient-cyan {
  background: linear-gradient(90deg, #0056b3, #0056b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-area .contact-list .contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}
.contact-area .contact-list .contact-item .icon-box {
  width: 45px;
  height: 45px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0056b3;
  margin-right: 20px;
  font-size: 1.1rem;
}
.contact-area .contact-list .contact-item .details h6 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 1rem;
}
.contact-area .contact-list .contact-item .details p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.contact-area .contact-list .contact-item .details span {
  font-size: 0.8rem;
  color: #999;
}
.contact-area .status-map-placeholder {
  height: 180px;
  background: linear-gradient(135deg, #ccc, #eee);
  border-radius: 15px;
  position: relative;
  margin-top: 40px;
  overflow: hidden;
}
.contact-area .status-map-placeholder .status-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: #fff;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  padding-left: 1.4rem;
}
.contact-area .status-map-placeholder .status-overlay:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: #28a745;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

/* Form Card Styles */
.contact-form-card {
  background: #fff;
  padding: 50px;
  border-radius: 25px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.06);
}
.contact-form-card label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.contact-form-card .form-control {
  background-color: #f8f9fa;
  border: 1px solid #f0f0f0;
  padding: 12px 15px;
  border-radius: 10px;
}
.contact-form-card .btn-cyan-gradient {
  background: linear-gradient(90deg, #0052d4, #0056b3);
  border: none;
  color: #fff;
  padding: 15px;
  border-radius: 50px;
  font-weight: 700;
  transition: transform 0.2s;
}
.contact-form-card .btn-cyan-gradient:hover {
  transform: translateY(-3px);
  color: #fff;
}
.contact-form-card .form-legal {
  font-size: 0.78rem;
  color: #6c757d;
  text-align: center;
  margin-top: 15px;
}
.contact-form-card .form-legal a {
  display: inline-block;
  padding: 0.45rem 0.15rem;
}

/* Footer Dark */
.footer-dark {
  background-color: #1a1a1a;
  color: #fff;
  padding: 80px 0 30px;
}
.footer-dark .row.g-4 {
  justify-content: space-between;
}
.footer-dark .footer-brand {
  font-size: 1.5rem;
  font-weight: 800;
}
.footer-dark .footer-brand a {
  display: inline-block;
  max-width: 210px;
}
.footer-dark .footer-brand a img {
  width: 100%;
  filter: brightness(0) invert(1);
}
.footer-dark .brand-desc {
  color: #888;
  font-size: 0.9rem;
  line-height: 1.6;
}
.footer-dark h6 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #fff;
  letter-spacing: 1px;
}
.footer-dark ul li a {
  color: #888;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.footer-dark ul li a:hover {
  color: #0056b3;
}
.footer-dark .footer-socials a {
  color: #fff;
  background: #333;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 0.9rem;
  transition: all 0.3s ease-in-out;
}
.footer-dark .footer-socials a:hover {
  background-color: #0055b2;
}
.footer-dark .footer-bottom {
  border-top: 1px solid #333;
  padding-top: 25px;
  color: #666;
  font-size: 0.8rem;
}
.footer-dark .system-status {
  background: #222;
  padding: 5px 15px;
  border-radius: 20px;
  color: #888;
}
.footer-dark .system-status .status-dot {
  height: 8px;
  width: 8px;
  background-color: #28a745;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* =========================================
   Responsive Tweaks
   ========================================= */
@media (max-width: 991px) {
  .hero-section {
    padding: 120px 0 60px;
  }
  .hero-section .hero-title {
    font-size: 3rem;
  }
  .stats-bar {
    padding: 2rem 1rem;
    border-radius: 20px;
  }
  .stats-bar .stat-item {
    border-right: none;
    padding: 1rem 0;
  }
}
@media (max-width: 767px) {
  .hero-section .hero-title {
    font-size: 2.5rem;
  }
  .numbers-section .number-card h2 {
    font-size: 2.5rem;
  }
}
/* =========================================
   Reusable Inner Banner Component
   ========================================= */
.inner-banner {
  padding: 170px 0 0;
  text-align: center;
  position: relative;
  background-color: #fff;
  /* Removed 2026-09-12: pointed at an unreplaced template placeholder
     filename, so every inner page requested a file that does not exist. */
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}
.inner-banner .banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef4ff;
  color: #0056b3;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}
.inner-banner .banner-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #0056b3;
  border-radius: 50%;
}
.inner-banner .banner-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  max-width: 900px;
  margin: 0 auto 1.5rem;
  color: #212529;
}
.inner-banner .banner-title span {
  color: #0056b3;
}
.inner-banner .banner-desc {
  font-size: 1.1rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .inner-banner {
    padding: 120px 0 50px;
  }
  .inner-banner .banner-title {
    font-size: 2.5rem;
  }
}
/* =========================================
   Alternating Services Section
   ========================================= */
.services-zigzag {
  padding: 100px 0;
}
.services-zigzag .service-row {
  margin-bottom: 120px;
  align-items: center;
  scroll-margin-top: 100px;
}
.services-zigzag .service-row:last-child {
  margin-bottom: 0;
}
.services-zigzag .service-row:nth-child(even) {
  flex-direction: row-reverse;
}
.services-zigzag .service-row .service-text-content {
  padding: 0 40px;
}
.services-zigzag .service-row .service-text-content .service-icon-badge {
  width: 40px;
  height: 40px;
  background: #eef4ff;
  color: #0056b3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.services-zigzag .service-row .service-text-content h2 {
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.services-zigzag .service-row .service-text-content .service-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.services-zigzag .service-row .service-text-content .service-list li {
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 10px;
}
.services-zigzag .service-row .service-text-content .service-list li i {
  color: #0056b3;
  font-size: 0.8rem;
}
.services-zigzag .service-row .service-text-content .learn-more-link {
  font-weight: 600;
  color: #0056b3;
  font-size: 0.9rem;
  border-bottom: 2px solid rgba(0, 86, 179, 0.2);
  padding-bottom: 2px;
}
.services-zigzag .service-row .service-text-content .learn-more-link:hover {
  border-bottom-color: #0056b3;
}
.services-zigzag .service-row .service-image-container .img-placeholder {
  width: 100%;
  height: 400px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.services-zigzag .service-row .service-image-container .img-placeholder img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================================
   Case Studies / Portfolio Section
   ========================================= */
.portfolio-section {
  padding: 80px 0;
  background-color: #fcfcfc;
}
.portfolio-section .grid {
  /* Clearfix for Isotope */
}
.portfolio-section .grid::after {
  content: "";
  display: block;
  clear: both;
}
.portfolio-section .grid-item {
  /* Ensure items don't overlap during transition */
}
.portfolio-section .filter-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.portfolio-section .filter-nav .filter-btn {
  border: none;
  background: #eee;
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  transition: all 0.3s ease;
  cursor: pointer;
}
.portfolio-section .filter-nav .filter-btn.active, .portfolio-section .filter-nav .filter-btn:hover {
  background: #0056b3;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}
.portfolio-section .project-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  margin-bottom: 30px;
  transition: all 0.3s ease;
  display: block;
}
.portfolio-section .project-card.hidden {
  display: none;
  opacity: 0;
}
.portfolio-section .project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.portfolio-section .project-card .project-thumb {
  height: 240px;
  position: relative;
  background: linear-gradient(135deg, #eef4ff, #d9e7ff);
  overflow: hidden;
}
.portfolio-section .project-card .project-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.portfolio-section .project-card .project-thumb .category-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0056b3;
}
.portfolio-section .project-card .project-body {
  padding: 30px;
}
.portfolio-section .project-card .project-body h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.portfolio-section .project-card .project-body p {
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 25px;
}
.portfolio-section .project-card .project-body .project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f8f9fa;
  padding-top: 20px;
}
.portfolio-section .project-card .project-body .project-footer .tags {
  font-size: 0.75rem;
  color: #999;
}
.portfolio-section .project-card .project-body .project-footer .case-link {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0056b3;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mission-section {
  padding: 100px 0;
  background-color: #fff;
  /* Image and Overlay Logic */
}
.mission-section .mission-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 15px;
}
.mission-section .mission-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 4px;
  background-color: #0056b3;
}
.mission-section .mission-desc {
  font-size: 1.1rem;
  color: #6c757d;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.mission-section .mission-list {
  list-style: none;
  padding: 0;
}
.mission-section .mission-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #212529;
}
.mission-section .mission-list li i {
  color: #0056b3;
  font-size: 1.2rem;
}
.mission-section .mission-image-wrapper {
  position: relative;
  padding-bottom: 40px;
  padding-left: 20px;
}
.mission-section .mission-image-wrapper .main-mission-img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.mission-section .mission-image-wrapper .stats-overlay-card {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 20px 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.mission-section .mission-image-wrapper .stats-overlay-card .icon-box {
  width: 50px;
  height: 50px;
  background: #eef4ff;
  color: #0056b3;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.mission-section .mission-image-wrapper .stats-overlay-card .stats-text {
  display: flex;
  flex-direction: column;
}
.mission-section .mission-image-wrapper .stats-overlay-card .stats-text .label {
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 600;
}
.mission-section .mission-image-wrapper .stats-overlay-card .stats-text .number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #212529;
}

@media (max-width: 991px) {
  .mission-image-wrapper {
    margin-top: 60px;
    padding-left: 0;
  }
  .mission-image-wrapper .stats-overlay-card {
    bottom: -20px;
    left: 20px;
  }
}
/* =========================================
   Our Journey (Timeline) Section
   ========================================= */
.journey-section {
  padding: 100px 0;
  background-color: #fff;
}
.journey-section .journey-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 60px;
}
.journey-section .timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 50px;
}
.journey-section .timeline-container .timeline-spine {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #eef1f6;
}
.journey-section .timeline-container .timeline-item {
  position: relative;
  margin-bottom: 60px;
}
.journey-section .timeline-container .timeline-item:last-child {
  margin-bottom: 0;
}
.journey-section .timeline-container .timeline-item .timeline-icon {
  position: absolute;
  left: -48px;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 2px solid #eef1f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #0056b3;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
.journey-section .timeline-container .timeline-item .timeline-content .year {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0056b3;
  margin-bottom: 5px;
}
.journey-section .timeline-container .timeline-item .timeline-content .milestone-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 10px;
}
.journey-section .timeline-container .timeline-item .timeline-content .milestone-desc {
  font-size: 1rem;
  color: #777;
  line-height: 1.6;
  max-width: 500px;
}

/* =========================================
   Our Core Values Section
   ========================================= */
.core-values-section {
  padding: 100px 0;
  background-color: #f8fafd;
}
.core-values-section .values-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 10px;
}
.core-values-section .values-sub-text {
  color: #777;
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
.core-values-section .core-value-card {
  background: #fff;
  padding: 50px 40px;
  border-radius: 20px;
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.02);
}
.core-values-section .core-value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}
.core-values-section .core-value-card .value-icon-box {
  width: 60px;
  height: 60px;
  background-color: #eef4ff;
  color: #0056b3;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 1.5rem;
  border: 1px solid rgba(0, 86, 179, 0.1);
}
.core-values-section .core-value-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 15px;
}
.core-values-section .core-value-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 0;
}

.team-showcase {
  padding: 100px 0;
  background-color: #f8fafd;
}
.team-showcase .content-limit {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.team-showcase .team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .team-showcase .team-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.team-showcase .team-header .team-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 10px;
}
.team-showcase .team-header .team-subtitle {
  color: #777;
  font-size: 1rem;
  max-width: 450px;
}
.team-showcase .team-header .team-cta {
  color: #0056b3;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-showcase .team-header .team-cta:hover {
  text-decoration: underline;
}
.team-showcase .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media (max-width: 992px) {
  .team-showcase .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .team-showcase .team-grid {
    grid-template-columns: 1fr;
  }
}
.team-showcase .member-card .image-frame {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1/1.1;
  margin-bottom: 15px;
  background-color: #ddd;
}
.team-showcase .member-card .image-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.team-showcase .member-card:hover .image-frame img {
  filter: grayscale(0%);
  transform: scale(1.05);
}
.team-showcase .member-card .member-meta .member-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}
.team-showcase .member-card .member-meta .member-role {
  font-size: 0.85rem;
  color: #0056b3;
  font-weight: 600;
}

.project-cta-section {
  padding: 120px 0;
  background-color: #ffffff;
  text-align: center;
}
.project-cta-section .cta-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.project-cta-section .cta-heading {
  font-size: 3rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 20px;
  letter-spacing: -1px;
}
@media (max-width: 767px) {
  .project-cta-section .cta-heading {
    font-size: 2.2rem;
  }
}
.project-cta-section .cta-subtext {
  font-size: 1.15rem;
  color: #777;
  line-height: 1.6;
  margin-bottom: 40px;
}
.project-cta-section .cta-action-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* Base Button Styles */
}
@media (max-width: 480px) {
  .project-cta-section .cta-action-group {
    flex-direction: column;
    align-items: center;
  }
}
.project-cta-section .cta-action-group a {
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-block;
}
.project-cta-section .cta-action-group .btn-fill {
  background-color: #0056b3;
  color: #ffffff;
  border: 1px solid #0056b3;
  box-shadow: 0 10px 20px rgba(0, 86, 179, 0.2);
}
.project-cta-section .cta-action-group .btn-fill:hover {
  transform: translateY(-2px);
}
.project-cta-section .cta-action-group .btn-outline {
  background-color: transparent;
  color: #222;
  border: 1px solid #e0e0e0;
}
.project-cta-section .cta-action-group .btn-outline:hover {
  background-color: #f8f9fa;
  border-color: #ccc;
}

.quote-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}
.quote-modal-overlay.is-visible {
  display: flex;
}
.quote-modal-overlay .quote-modal-window {
  background: #fff;
  width: 100%;
  max-width: 650px;
  border-radius: 24px;
  padding: 50px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  max-height: 90vh;
  overflow-y: auto;
}
@media (max-width: 576px) {
  .quote-modal-overlay .quote-modal-window {
    padding: 30px 20px;
  }
}
.quote-modal-overlay .modal-close-trigger {
  position: absolute;
  top: 25px;
  right: 25px;
  background: #f0f0f0;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
}
.quote-modal-overlay .modal-close-trigger:hover {
  background: #e0e0e0;
  color: #000;
}
.quote-modal-overlay .modal-header {
  text-align: center;
  margin-bottom: 35px;
  flex-direction: column;
}
.quote-modal-overlay .modal-header .modal-badge {
  color: #0056b3;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 10px;
}
.quote-modal-overlay .modal-header .modal-title {
  font-size: 2.2rem;
  font-weight: 800;
}
.quote-modal-overlay .modal-header .modal-title span {
  color: #0056b3;
}
.quote-modal-overlay .modal-header .modal-subtitle {
  color: #777;
  margin-top: 10px;
}
.quote-modal-overlay .modal-form .field-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 576px) {
  .quote-modal-overlay .modal-form .field-split {
    grid-template-columns: 1fr;
  }
}
.quote-modal-overlay .modal-form .input-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.quote-modal-overlay .modal-form .input-container label {
  font-size: 0.65rem;
  font-weight: 800;
  color: #aaa;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.quote-modal-overlay .modal-form .input-container input,
.quote-modal-overlay .modal-form .input-container select,
.quote-modal-overlay .modal-form .input-container textarea {
  padding: 14px;
  background: #f8f9fb;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  font-family: inherit;
}
.quote-modal-overlay .modal-form .input-container input:focus,
.quote-modal-overlay .modal-form .input-container select:focus,
.quote-modal-overlay .modal-form .input-container textarea:focus {
  outline: 1px solid #0056b3;
  background: #fff;
}
.quote-modal-overlay .modal-form .input-container textarea {
  height: 100px;
  resize: none;
}
.quote-modal-overlay .modal-form .modal-submit-btn {
  background: linear-gradient(90deg, #0052d4, #0056b3);
  border: none;
  color: #fff;
  padding: 15px;
  border-radius: 50px;
  font-weight: 700;
  transition: transform 0.2s;
}
.quote-modal-overlay .modal-form .modal-submit-btn:hover {
  transform: translateY(-2px);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* Ensure this exact block is in your SCSS */
.quote-modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* This is the critical class the JS toggles */
.quote-modal-overlay.is-visible {
  display: flex !important;
}

.custom-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px 25px;
  color: white;
  border-radius: 8px;
  z-index: 10001;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
}
.custom-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.custom-toast.toast-success {
  background: #28a745;
}
.custom-toast.toast-error {
  background: #dc3545;
}

/* Highlight invalid fields ONLY after user tries to submit */
input:invalid:focus,
textarea:invalid:focus {
  border-color: #ff4d4d !important;
  background-color: #fff9f9;
}

/* Success state when valid */
input:valid:focus,
textarea:valid:focus {
  border-color: #0056b3 !important;
}

/* Specific styling for the 'required' asterisk if you want it */
label::after {
  content: " *";
  color: #ff4d4d;
  font-size: 12px;
}

/* ===============================
   Privacy Policy Page Styling
   =============================== */
.privacy-policy-section {
  width: 100%;
  padding: 100px 0;
}
.privacy-policy-section .policy-header {
  text-align: center;
  margin-bottom: 50px;
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
}
.privacy-policy-section .policy-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 10px;
  letter-spacing: -1px;
}
.privacy-policy-section .policy-header .date {
  color: #0056b3; /* Brand Cyan */
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.privacy-policy-section .policy-body .intro-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #212529;
}
.privacy-policy-section .policy-body .policy-block {
  margin-bottom: 40px;
}
.privacy-policy-section .policy-body .policy-block:last-child {
  margin-bottom: 0;
}
.privacy-policy-section .policy-body .policy-block h2 {
  font-size: 1.5rem;
  color: #222;
  margin-bottom: 15px;
  font-weight: 700;
}
.privacy-policy-section .policy-body .policy-block p {
  margin-bottom: 15px;
  font-size: 1rem;
}
.privacy-policy-section .policy-body .policy-block ul {
  list-style-type: none;
  padding-left: 15px;
  margin-top: 10px;
}
.privacy-policy-section .policy-body .policy-block ul li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  /* Custom Cyan Bullet Points */
}
.privacy-policy-section .policy-body .policy-block ul li::before {
  content: "•";
  color: #0056b3;
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: -2px;
}
.privacy-policy-section .policy-body .policy-block ul li strong {
  color: #333;
}
.privacy-policy-section .policy-body .policy-block .contact-highlight {
  background: #f0fbff;
  border-left: 4px solid #0056b3;
  padding: 20px;
  margin-top: 20px;
  border-radius: 0 8px 8px 0;
}
.privacy-policy-section .policy-body .policy-block .contact-highlight strong {
  color: #0056b3;
}

/* New Year 2026 Overlay */
.ny-2026-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Light sweep */
.ny-2026-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(0, 86, 179, 0.35), transparent);
  animation: nySweep 2.2s ease-out forwards;
}

/* 2026 text */
.ny-year {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(0, 86, 179, 0.15);
  opacity: 0;
  animation: nyYearReveal 2.5s ease-out forwards;
}

/* Animations */
@keyframes nySweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}
@keyframes nyYearReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}
/* Keep content above */
.hero-section .container {
  position: relative;
  z-index: 2;
}

/* ===============================
   Decodeinfy Creative Preloader
================================ */
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.hide {
  opacity: 0;
  visibility: hidden;
}
#preloader .preloader-core {
  position: relative;
  width: 90px;
  height: 90px;
}
#preloader .preloader-core .orbit {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(0, 86, 179, 0.15);
  border-top-color: #0056b3;
  border-radius: 50%;
  animation: orbitSpin 1.6s linear infinite;
}
#preloader .preloader-core .dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#preloader .preloader-core .dots span {
  width: 8px;
  height: 8px;
  background: #0056b3;
  border-radius: 50%;
  opacity: 0.2;
  animation: pulse 1.4s ease-in-out infinite;
}
#preloader .preloader-core .dots span:nth-child(1) {
  animation-delay: 0s;
}
#preloader .preloader-core .dots span:nth-child(2) {
  animation-delay: 0.2s;
}
#preloader .preloader-core .dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Animations */
@keyframes orbitSpin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0.2;
    transform: translateY(0);
  }
}
/* Lock scroll */
body.loading {
  overflow: hidden;
}

/* =========================================
   Studio note (about page) -- added 2026-09-12
   ========================================= */
.studio-note {
  background-color: #f8f9fa;
}
.studio-note .lead-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #6c757d;
  margin-bottom: 1.1rem;
}
.studio-note .lead-text:last-child {
  margin-bottom: 0;
}

/* =========================================
   Service starting price -- added 2026-09-12
   ========================================= */
.service-price {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.95rem;
  color: #6c757d;
}
.service-price strong {
  color: #0056b3;
  font-weight: 700;
  font-size: 1.1rem;
}
.service-price span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #6c757d;
  opacity: 0.85;
}

/* =========================================
   FAQ accordion (services page) -- 2026-09-12
   ========================================= */
.faq-area {
  background-color: #f8f9fa;
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Full width, as asked. I had capped this at 60rem for readability, which was
   a judgement nobody requested and which stopped the section at 960px inside a
   1140px container -- so it read as not having worked. */
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: #212529;
  transition: color 0.2s;
}
.faq-trigger:hover {
  color: #0056b3;
}
.faq-trigger:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 3px;
}
.faq-trigger[aria-expanded=true] {
  color: #0056b3;
}
.faq-trigger[aria-expanded=true] .faq-icon {
  transform: rotate(180deg);
}

.faq-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}

.faq-panel {
  padding-bottom: 1.35rem;
}
.faq-panel p {
  margin: 0;
  color: #6c757d;
  line-height: 1.8;
}

/* The same accordion on an article page. One pattern for questions across the
   site: a reader who has used it on the services page already knows how this
   one works, and a second style for the same job is a second thing to keep
   correct. */
.article-faq {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}
.article-faq h2 {
  margin-top: 0 !important;
}
/* `.faq-item h3 { margin: 0 }` was being beaten by `.article-page h3`, which
   has the same specificity and is declared later, so every question carried
   32px above and 10px below on top of the trigger's own padding. That is 106px
   of vertical space per closed question, and seven of them read as a list of
   disconnected headings rather than an accordion. */
.article-faq .faq-item h3 {
  margin: 0 !important;
}
.article-faq .faq-trigger {
  font-size: 1.05rem;
  padding: 1.05rem 0;
}
.article-faq .faq-panel {
  padding-bottom: 1.25rem;
}
.article-faq .faq-panel p {
  margin: 0 !important;
}

/* =========================================
   Breadcrumbs (inner pages) -- added 2026-09-12
   ========================================= */
.breadcrumb-nav {
  margin-bottom: 1.25rem;
}
.breadcrumb-nav ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
}
.breadcrumb-nav li {
  color: #6c757d;
}
.breadcrumb-nav li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(108, 117, 125, 0.5);
}
.breadcrumb-nav a {
  color: #6c757d;
}
.breadcrumb-nav a:hover {
  color: #0056b3;
}
.breadcrumb-nav [aria-current=page] {
  color: #212529;
  font-weight: 600;
}

.numbers-section .numbers-container .numbers-grid .number-card .count-static {
  font-size: 3.5rem;
  font-weight: 800;
  color: #0056b3;
  margin-bottom: 10px;
  display: block;
}

/* =========================================
   Mobile tap targets -- added 2026-09-12
   ========================================= */
.footer-socials a,
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.splide__pagination__page {
  position: relative;
}
.splide__pagination__page::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}


@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}

/* =========================================
   Narrow-viewport gutter fix -- 2026-09-12
   Bootstrap g-5 gives the row a -24px side margin against only 12px of
   container padding, overflowing 320px viewports by 24px. Pre-existing.
   ========================================= */
@media (max-width: 575.98px) {
  .contact-area .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }
}

/* Masthead logo was 210px wide on a 320px screen and would not shrink,
   widening the fixed navbar past the viewport. 2026-09-12 */
@media (max-width: 575.98px) {
  .navbar-brand img {
    width: 150px;
    max-width: 45vw;
  }
  .navbar .container {
    min-width: 0;
  }
}

/* Inner-page H1 stayed at 40px down to 320px, where the word "Comprehensive"
   is wider than its box -- overflowed the page sideways. 2026-09-12 */
@media (max-width: 575.98px) {
  .inner-banner .banner-title {
    font-size: 1.9rem;
  }
  .hero-title,
  .banner-title,
  h1, h2 {
    overflow-wrap: break-word;
  }
}

/* =========================================
   Blog -- article pages and index. Added 2026-09-12.
   Single narrow column: long-form reading wants a short measure, not the
   marketing grid the rest of the site uses.
   ========================================= */
.article-page {
  padding: 150px 0 90px;
  min-height: calc(100vh - 260px);
}
.article-page .container {
  max-width: 720px;
}
/* The index is a grid of cards, not a column of prose. The 720px measure that
   makes an article readable makes the grid a single cramped column. */
body.blog .article-page .container {
  max-width: 1120px;
}
.article-page h1 {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
  color: #212529;
}
.article-page h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  color: #212529;
}
.article-page h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  color: #212529;
}
.article-page p {
  font-size: 1.09rem;
  line-height: 1.8;
  /* Was #6c757d -- the muted grey the site uses for captions. Correct for a
     line of metadata, wrong for a thousand words of argument: it reads as
     provisional, and on a phone in daylight it fails contrast outright. */
  color: #343a40;
  margin-bottom: 1.4rem;
}
.article-page ul {
  margin: 0 0 1.5rem;
  padding-left: 0;
  /* Markers inside the box, so they sit on the text's left edge instead of
     hanging in the gutter -- and so nothing can be clipped on a narrow
     screen, which is the risk `outside` carries once the padding is gone. */
  list-style-position: inside;
}
.article-page ul li {
  font-size: 1.09rem;
  line-height: 1.8;
  color: #343a40;
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}
.article-page ul li::marker {
  color: #adb5bd;
}
.article-page a {
  color: #0056b3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-meta {
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6c757d;
  margin-bottom: 2.5rem !important;
}

.article-source {
  margin-top: 2.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9rem !important;
}

.article-cta {
  margin-top: 3.5rem;
  padding: 1.75rem;
  background-color: #f8f9fa;
  border-radius: 1rem;
}
.article-cta h2 {
  margin-top: 0 !important;
  font-size: 1.2rem !important;
}
.article-cta p {
  margin-bottom: 0 !important;
  font-size: 1rem !important;
}

/* Related reading, under each service's prose. Quieter than body text: it is
   a signpost for a reader who wants more before enquiring, not part of the
   pitch. Kept out of the UI/UX section on purpose -- no article covers it yet,
   and a forced link sends a reader somewhere unhelpful. */
.service-reading {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: #6c757d;
}
.service-reading a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.service-reading a:hover {
  color: #0d6efd;
}

/* Works page prose. The portfolio was 496 words of thumbnails with nothing to
   read, which is thin for a page a buyer lands on from search, and gave a
   visitor no reason to believe anything about how the work is done. */
.works-intro,
.works-outro {
  max-width: 62ch;
  margin: 0 auto 2.5rem;
}
.works-outro {
  margin-top: 3.5rem;
  margin-bottom: 0;
  padding-top: 2.5rem;
  border-top: 1px solid #e9ecef;
}
.works-intro h2,
.works-outro h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #212529;
}
.works-intro p,
.works-outro p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #343a40;
  margin-bottom: 1.1rem;
}
.works-outro p:last-child {
  margin-bottom: 0;
}
.works-intro a,
.works-outro a {
  color: #0056b3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The direct answer, under the title. Set apart because it is doing two jobs:
   it is what a reader who bounces still leaves with, and it is the passage a
   search result lifts. A left rule rather than a filled box -- it should read
   as the opening of the article, not as a callout beside it. */
.article-answer {
  margin: 0 0 2.25rem !important;
  padding-left: 1.1rem;
  border-left: 3px solid #0d6efd;
  font-size: 1.15rem !important;
  line-height: 1.75;
  color: #1d2433;
}

/* The one-line summary for a reader who skipped to the end. */
.article-takeaway {
  margin-top: 2.5rem !important;
  padding: 1rem 1.25rem;
  background-color: #f8f9fa;
  border-radius: 0.75rem;
  font-size: 1rem !important;
}

/* Read next. Sits after the call to action deliberately: somebody still
   reading at that point is browsing rather than buying, and the useful thing
   to offer them is another page. */
.article-related {
  margin-top: 2.5rem;
}
.article-related h2 {
  margin-top: 0 !important;
  font-size: 1.1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
}
.article-related ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.article-related li + li {
  margin-top: 0.5rem;
}
.article-related a {
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-related a:hover {
  border-bottom-color: currentColor;
}

@media (max-width: 575.98px) {
  .article-answer {
    font-size: 1.05rem !important;
  }
}

.est-link {
  font-weight: 600;
  color: #0056b3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Cost estimator ----------------------------------------------------
   A tool, not prose, so it takes the full container. `.article-page .container`
   caps at 720px for readability, which is right for a thousand words and wrong
   for a form beside a summary panel. */
.estimator-page .container {
  max-width: 1180px;
}

.est-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}

.est-form {
  margin: 0;
  min-width: 0;
}
.est-question {
  border: 0;
  padding: 0;
  margin: 0 0 2.25rem;
}
.est-question legend {
  font-size: 1.15rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.35rem;
  padding: 0;
  float: none;
  width: auto;
}
.est-help {
  font-size: 0.95rem !important;
  color: #6c757d !important;
  margin-bottom: 0.9rem !important;
}
.est-options {
  display: grid;
  gap: 0.6rem;
}
/* A global `label::after { content: " *" }` marks required contact-form fields.
   These are radio choices, not required inputs. */
.est-option::after,
.est-question legend::after {
  content: none !important;
}
.est-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid #e9ecef;
  border-radius: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.est-option:hover {
  border-color: #ced4da;
}
.est-option input {
  margin-top: 0.3rem;
  accent-color: #0056b3;
}
.est-option:has(input:checked) {
  border-color: #0056b3;
  background: #f5f9ff;
}
.est-option-label {
  font-weight: 600;
  color: #212529;
}
.est-option-note {
  grid-column: 2;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6c757d;
  margin-top: 0.2rem;
}

/* ---- The summary, which behaves like a cart -----------------------------
   Sticky beside the questions, so the figure is in view while the reader is
   still changing the answers that move it. Offset by the fixed header's 85px
   plus a little air. */
.est-summary {
  position: sticky;
  top: 110px;
}
.est-result {
  padding: 1.5rem 1.6rem;
  background: #0056b3;
  color: #fff;
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(0, 86, 179, 0.22);
}
.est-summary-title {
  margin: 0 0 1rem !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.75) !important;
}
.est-result-waiting {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.est-lines {
  list-style: none;
  padding: 0;
  margin: 0;
}
.est-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.est-line-label {
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.est-line-figure {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.est-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}
.est-total-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: rgba(255, 255, 255, 0.8);
}
.est-total-figure {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  color: #ffc107;
}

.est-result-note {
  margin: 0.9rem 0 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.est-cta {
  display: block;
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
  background: #ffc107;
  color: #212529 !important;
  border-radius: 0.6rem;
  text-align: center;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.est-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.est-caveat {
  margin: 0.9rem 0 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Before the first answer: the panel holds its place and says what to do
   rather than showing a price nobody asked for. */
.est-waiting {
  background: #495057;
  box-shadow: 0 10px 24px rgba(73, 80, 87, 0.2);
}
.est-waiting .est-lines,
.est-waiting .est-total,
.est-waiting .est-result-note,
.est-waiting .est-cta,
.est-waiting .est-caveat {
  display: none;
}
.est-result:not(.est-waiting) .est-result-waiting {
  display: none;
}

.est-reading {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

@media (max-width: 991.98px) {
  /* One column. The summary moves to the bottom of the viewport rather than
     the bottom of the page, so it is still visible while answering. */
  .est-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .est-summary {
    position: sticky;
    top: auto;
    bottom: 0.75rem;
    order: 2;
  }
  .est-result {
    padding: 1.1rem 1.25rem;
  }
  .est-total-figure {
    font-size: 1.1rem;
  }
  /* The itemised lines are what make it a cart, but on a phone they push the
     total off screen. The total and the button are what matter there. */
  .est-lines {
    display: none;
  }
}

/* ---- Blog index: a lead card, then a grid -------------------------------
   A flat list of headlines gave a reader no idea where to start and no reason
   to believe the writing was worth their time. The newest article leads at
   full width; the rest sit two or three across depending on the viewport. */
.post-grid {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.post-card {
  margin: 0;
}
/* The lead spans every column the grid happens to have, so it stays full
   width at any breakpoint without a media query per size. */
.post-card-lead {
  grid-column: 1 / -1;
}

.post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card-link:hover {
  border-color: #ced4da;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(33, 37, 41, 0.09);
}
.post-card-lead .post-card-link {
  flex-direction: row;
  align-items: stretch;
}

.post-card-media {
  display: block;
  background: #f1f3f5;
}
.post-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
}
.post-card-lead .post-card-media {
  flex: 0 0 58%;
}
.post-card-lead .post-card-media img {
  height: 100%;
  /* The hero is 40:21 and this slot is near square, so `cover` has to discard
     most of the width. The title is set left, so keep the left edge -- centred
     cropping cut the first two words off every lead card. */
  object-position: left center;
}

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.5rem 1.75rem;
}
.post-card-lead .post-card-body {
  justify-content: center;
  padding: 2.5rem 2.25rem;
}

.post-card-meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6c757d;
}
.post-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: #212529;
}
.post-card-lead .post-card-title {
  font-size: 1.9rem;
  letter-spacing: -0.4px;
}
.post-card-excerpt {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #495057;
}
.post-card-more {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0056b3;
}
.post-card-more::after {
  content: " →";
}

.blog-intro {
  max-width: 56ch;
  font-size: 1.1rem !important;
  line-height: 1.75;
  color: #495057 !important;
}

/* ---- Article hero -------------------------------------------------------
   Full-bleed inside the reading column rather than edge-to-edge across the
   viewport: the article is 720px wide, and an image spanning 1600px above it
   would read as a banner belonging to the site rather than to the piece. */
.article-hero {
  /* Above the title now, so the space belongs below it rather than above. */
  margin: 0 0 2.25rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #f1f3f5;
}
.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .post-grid {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
  /* The lead's side-by-side layout needs width it does not have on a phone. */
  .post-card-lead .post-card-link {
    flex-direction: column;
  }
  .post-card-lead .post-card-media {
    flex: none;
  }
  .post-card-lead .post-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
  }
  .post-card-lead .post-card-title {
    font-size: 1.45rem;
  }
  .article-hero {
    border-radius: 0.75rem;
    margin-bottom: 2rem;
  }
}

  .article-page h1 {
    font-size: 1.9rem;
  }
}

/*# sourceMappingURL=style.css.map */