/* AI service detail pages: panels, accent colors, animation helpers */

/* 100vw full-bleed panels include the scrollbar width, which causes a small
   horizontal overflow on pages tall enough to scroll. Clip it globally. */
html, body{
  overflow-x: hidden;
}

/* Services nav dropdown: open on hover (desktop nav only) instead of click */
.main-menu .dropdown-menu{
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  margin-top: 0;
}
.main-menu .dropdown:hover .dropdown-menu,
.main-menu .dropdown:focus-within .dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-menu .dropdown-toggle:focus{
  outline: none;
}
.main-menu .dropdown-menu{
  min-width: 260px;
  max-height: 80vh;
  overflow-y: auto;
}
.main-menu .dropdown-header{
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b3b3b3;
  padding-top: 8px;
}
.main-menu .dropdown-menu > li:first-child .dropdown-header{
  padding-top: 3px;
}

/* Services mega-menu: 2x2 category grid with icons */
/* Position the wide mega-menu relative to the nav bar itself (.main-menu)
   rather than the small toggle link. .logo_section's position type varies
   (absolute / fixed / relative) across pages and scroll (affix) states,
   which made the menu jump around; .main-menu stays a stable, predictable
   anchor and is scoped to just the nav links, not the full-width header. */
.main-menu{
  position: relative;
}
.main-menu .services-dropdown{
  position: static;
}
.services-mega-menu{
  width: 620px;
  max-width: 90vw;
  padding: 22px 24px 12px;
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  margin-top: 12px;
}
.mega-menu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
}
.mega-menu-col{
  min-width: 0;
}
.mega-menu-cat-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--ai-accent, #f38c33);
}
.mega-menu-cat-icon{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mega-menu-cat-header span{
  font-weight: 800;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  white-space: nowrap;
}
.mega-menu-col a{
  display: block;
  padding: 6px 0 6px 40px;
  color: #5a5a5a;
  font-size: 13.5px;
  line-height: 1.4;
  transition: color 0.2s ease, transform 0.2s ease;
}
.mega-menu-col a:hover{
  color: var(--ai-accent, #f38c33);
  transform: translateX(4px);
  text-decoration: none;
}
.mega-menu-footer{
  border-top: 1px solid #ececec;
  margin-top: 16px;
  padding: 12px 0;
  text-align: center;
}
.mega-menu-footer a{
  color: #f38c33;
  font-size: 14px;
}
.mega-menu-footer a:hover{
  text-decoration: underline;
}
@media (max-width: 800px){
  .services-mega-menu{
    width: 460px;
  }
  .mega-menu-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.ai-hero-icon{
  width: 90px;
  height: 90px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}
.ai-hero-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-service-content{
  padding-top: 10px;
}

.ai-panel{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 55px 20px;
}
.ai-panel-inner{
  max-width: 960px;
  margin: 0 auto;
}
.ai-panel p{
  font-size: 17px;
  line-height: 1.8;
  color: #4a4a4a;
}
.ai-panel .section-heading{
  font-size: 28px;
}

.ai-panel-shaded{
  background: var(--ai-tint, #f6f8fa);
}
.ai-panel-dark{
  background: linear-gradient(135deg, #1b2733 0%, #26384a 100%);
  color: #fff;
}
.ai-panel-dark p{
  color: #dfe6ec;
}
.ai-panel-dark .section-heading{
  color: #fff;
}

.ai-chip-row{
  margin: 18px 0 6px;
}

/* Homepage intro panel: narrower paragraph for readable line length, and
   bigger/bolder chips since here they're real links to the four core
   service pillars, not just decorative tags. */
.intro-panel .section-text{
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.intro-panel .ai-chip-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.intro-panel .ai-chip{
  padding: 10px 22px;
  margin: 0;
  font-size: 14px;
}
.ai-chip{
  display: inline-block;
  padding: 6px 16px;
  margin: 4px 6px 4px 0;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--ai-accent, #f38c33);
}

.ai-list-icon{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.ai-list-icon li{
  position: relative;
  padding: 12px 0 12px 42px;
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s ease;
}
.ai-list-icon li:last-child{
  border-bottom: none;
}
.ai-list-icon li:hover{
  transform: translateX(6px);
}
.ai-list-icon li::before{
  content: "\f00c";
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  top: 10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background: var(--ai-accent, #f38c33);
}

.ai-approach-icon{
  font-size: 34px;
  color: #f38c33;
  margin-bottom: 14px;
}

.ai-cta-panel{
  text-align: center;
  padding: 60px 20px 70px;
}
.ai-cta-panel .btn-hero{
  box-shadow: 0 10px 25px rgba(243,140,51,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ai-cta-panel .btn-hero:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(243,140,51,0.45);
}

/* accent + tint per service, set on the page wrapper */
.ai-theme-consulting{ --ai-accent: #34495e; --ai-tint: #eef2f5; }
.ai-theme-generative{ --ai-accent: #16a085; --ai-tint: #e9f9f5; }
.ai-theme-automation{ --ai-accent: #f38c33; --ai-tint: #fff4ea; }
.ai-theme-product{ --ai-accent: #d9971f; --ai-tint: #fffaea; }
.ai-theme-engineering{ --ai-accent: #3a6ea5; --ai-tint: #eaf1f8; }
.ai-theme-cloud{ --ai-accent: #7d5ba6; --ai-tint: #f4effa; }
.ai-theme-quality{ --ai-accent: #c0392b; --ai-tint: #fbeceb; }
.ai-theme-industry{ --ai-accent: #2e7d32; --ai-tint: #eaf3ea; }

/* Per-industry accents for the individual industry detail pages (distinct
   from one another so each page's hero banner reads as its own, instead of
   all six industries sharing the same generic green). */
.ai-theme-industry-healthcare{ --ai-accent: #148f77; --ai-tint: #e7f6f3; }
.ai-theme-industry-fintech{ --ai-accent: #1b4f72; --ai-tint: #eaf1f6; }
.ai-theme-industry-ecommerce-retail{ --ai-accent: #b03a5b; --ai-tint: #fbecf0; }
.ai-theme-industry-education{ --ai-accent: #7d3c98; --ai-tint: #f3ecf7; }
.ai-theme-industry-travel-hospitality{ --ai-accent: #c76b1f; --ai-tint: #fdf1e6; }
.ai-theme-industry-logistics-supply-chain{ --ai-accent: #46617a; --ai-tint: #eef1f4; }

.category-heading-row{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 30px;
}
.category-heading{
  display: inline-block;
  padding-bottom: 10px;
  position: relative;
  color: var(--ai-accent, #f38c33);
}
.category-heading::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: 4px;
  background: var(--ai-accent, #f38c33);
  border-radius: 2px;
  transform: translateX(-50%);
}
.category-intro{
  font-size: 16px;
  color: #6b6b6b;
  margin-top: 6px;
}
.ai-chip-row a.ai-chip{
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-chip-row a.ai-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.service-category-eyebrow{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ai-accent, #f38c33);
  margin-bottom: 6px;
}

@media (max-width: 767px){
  .ai-panel{ padding: 40px 16px; }
  .ai-panel .section-heading{ font-size: 22px; }
}

/* Homepage service rows: numbered badge + hover-lift icon */
.svc-num{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  background: var(--ai-accent, #f38c33);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
}
.svc-icon-wrap{
  overflow: hidden;
  border-radius: 16px;
}
.svc-icon-wrap img{
  transition: transform 0.45s ease;
}
.svc-icon-wrap:hover img{
  transform: scale(1.07);
}
.svc-link{
  display: inline-block;
  font-weight: 700;
  color: var(--ai-accent, #f38c33) !important;
  transition: transform 0.2s ease;
}
.svc-link:hover{
  transform: translateX(4px);
  text-decoration: none;
}

/* Services page card grid */
.svc-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1020px;
  margin: 10px auto 0;
}
.svc-card{
  flex: 1 1 calc(50% - 30px);
  min-width: 260px;
  max-width: calc(50% - 15px);
  background: #fff;
  border-radius: 10px;
  padding: 45px 30px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.07);
  border-top: 5px solid var(--ai-accent, #f38c33);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(0,0,0,0.14);
}
.svc-card .ai-hero-icon{
  background: var(--ai-tint, #f6f8fa);
  border: 2px solid var(--ai-accent, #f38c33);
  width: 80px;
  height: 80px;
}
.svc-card h2{
  font-size: 20px;
  margin: 6px 0 12px;
  color: #262626;
  text-transform: none;
}
.svc-card p{
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}
@media (max-width: 767px){
  .svc-card{ max-width: 100%; flex: 1 1 100%; }
}

/* Pricing / engagement model cards */
.pricing-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-card{
  flex: 1 1 300px;
  max-width: 340px;
  background: #fff;
  border-radius: 10px;
  padding: 40px 28px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.07);
  border-top: 5px solid #f38c33;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(0,0,0,0.14);
}
.pricing-card h2{
  font-size: 21px;
  margin: 6px 0 8px;
  color: #262626;
}
.pricing-tagline{
  font-size: 15px;
  color: #f38c33;
  font-weight: 700;
  margin-bottom: 16px;
}
.pricing-features{
  text-align: left;
  flex-grow: 1;
}
.pricing-features li{
  font-size: 14px;
  padding-left: 36px;
}
.pricing-features li::before{
  width: 22px;
  height: 22px;
  line-height: 22px;
  top: 8px;
}
.pricing-best-for{
  font-size: 13px;
  color: #6b6b6b;
  background: #fff4ea;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 16px 0;
  text-align: left;
}
.pricing-card .btn-hero{
  width: 100%;
  margin-top: auto;
}

/* Technologies page */
.tech-group-heading{
  text-align: center;
  margin-bottom: 30px;
}
.tech-logo-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.tech-logo-card{
  width: 130px;
  text-align: center;
}
.tech-logo-wrap{
  background: #1b2733;
  border-radius: 14px;
  height: 80px;
  padding: 0 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tech-logo-card:hover .tech-logo-wrap{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}
.tech-logo-wrap img{
  max-width: 80px;
  max-height: 36px;
  width: auto;
  height: auto;
  display: block;
}
.tech-logo-card span{
  font-size: 13px;
  font-weight: 700;
  color: #4a4a4a;
}
.tech-chip-group{
  max-width: 800px;
  margin: 0 auto 26px;
}
.tech-chip-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f38c33;
  margin-bottom: 10px;
}
.tech-chip{
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3);
}
@media (max-width: 767px){
  .tech-logo-card{ width: 100px; }
}

/* Guides page */
.guide-icon{
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  background: #fff4ea;
  border: 2px solid #f38c33;
  color: #f38c33;
  font-size: 28px;
  margin: 0 auto 16px;
}
.guide-card h2{
  font-size: 19px;
}

/* Homepage "Technologies We Use" band: remove the gaps above/below (was
   margin:30px 0 in custom.css) and restyle the logos to match the
   /technologies page's dark icon-chip treatment for consistency. */
.techuse{
  margin: 0;
  padding: 35px 20px 45px;
}
.techuse .tech-logo-grid{
  margin-top: 30px;
}
.techuse .tech-logo-card span{
  color: #fff;
}
.techuse .tech-view-all{
  display: inline-block;
  margin-top: 30px;
  color: #f38c33;
  font-weight: 700;
  font-size: 14px;
}
.techuse .tech-view-all:hover{
  color: #fff;
  text-decoration: none;
}

/* Hero carousel: full-bleed autoplaying video slide.
   Note: .slide-1/2/3 are normal in-flow divs (not position:absolute) —
   that's what gives their parent .item its height. .slide-video must
   follow the same pattern (position:relative, not absolute) or .item
   collapses to zero height and the whole slide disappears. */
.fade-carousel .slides .slide-video{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0b0f14;
}
.fade-carousel .slides .slide-video video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* The poster is a real image so it paints straight away; the video sits on
   top, invisible until it is actually playing, then fades in over it. */
.fade-carousel .slides .slide-video video.is-playing{
  opacity: 1;
}
.fade-carousel .slides .slide-video .slide-poster{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.slide-video-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(10,14,20,0.6) 0%, rgba(10,14,20,0.35) 45%, rgba(10,14,20,0.7) 100%);
}

/* Footer accent + polish */
.footer-accent-bar{
  height: 4px;
  background: linear-gradient(90deg, #34495e 0%, #16a085 33%, #f38c33 66%, #d9971f 100%);
}
footer .heading{
  position: relative;
  padding-bottom: 10px;
}
footer .heading::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: #f38c33;
  border-radius: 2px;
}

/* Hero carousel: nudge caption/button block down for better balance */
.fade-carousel .hero{
  top: 82%;
}

/* Contact page: icon cards + map/form panel, matching the svc-card /
   pricing-card language used elsewhere (white card, orange top border,
   hover lift) instead of the old plain text list. */
.contact-cards-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin: 10px auto 45px;
}
.contact-card{
  flex: 1 1 260px;
  max-width: 320px;
  background: #fff;
  border-radius: 10px;
  padding: 36px 26px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.07);
  border-top: 5px solid #f38c33;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(0,0,0,0.14);
}
.contact-icon{
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  background: #fff4ea;
  border: 2px solid #f38c33;
  color: #f38c33;
  font-size: 26px;
  margin: 0 auto 16px;
}
.contact-card h3{
  font-size: 17px;
  margin: 0 0 8px;
  color: #262626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.contact-card p{
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}
.contact-card p + p{
  margin-top: 14px;
}
.contact-card p a{
  color: #666;
}
.contact-card p a:hover{
  color: #f38c33;
  text-decoration: none;
}

/* Map + form: a flex row so the two stacked address maps always match
   the form card's height exactly (align-items:stretch, the flex
   default), instead of a fixed iframe height that drifted out of sync
   whenever the form's copy changed.
   Named .contact-panels-row (not .contact-info) because the footer
   also has a .contact-info block for its address list — a shared name
   here previously turned the footer's address into a flex row and
   broke its vertical stacking. */
.contact-panels-row{
  display: flex;
  align-items: stretch;
  gap: 30px;
  margin-top: 0;
  margin-bottom: 60px;
}
.contact-map{
  flex: 0 0 42%;
  max-width: 42%;
  min-height: 400px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.contact-map-canvas{
  flex: 1;
  width: 100%;
  min-height: 400px;
}
.contact-map-canvas .leaflet-popup-content strong{
  color: #f38c33;
}
.contact-form{
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.contact-form h3{
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
}
.contact-form p{
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: #666;
}
.contact-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-captchac){
  border: 1px solid #dedede;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.contact-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-captchac):focus{
  border-color: #f38c33;
  outline: none;
}
.contact-form .wpcf7-captchac{
  display: block;
  margin-bottom: 10px;
  border: 1px solid #dedede;
  border-radius: 4px;
}
.contact-form .wpcf7-submit{
  background: #f38c33;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact-form .wpcf7-submit:hover{
  background: #de7c22;
  transform: translateY(-2px);
}
@media (max-width: 767px){
  .contact-panels-row{
    flex-direction: column;
  }
  .contact-map{
    flex-basis: auto;
    max-width: 100%;
    min-height: 320px;
  }
  .contact-form{
    padding: 28px 22px;
  }
}

/* About page: story intro, portrait beside the founding narrative */
.story-row{
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1020px;
  margin: 10px auto 0;
}
.story-media{
  flex: 0 0 40%;
  max-width: 40%;
}
.story-media img{
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  display: block;
  margin: 0;
}
.story-copy{
  flex: 1;
}
.story-copy p{
  text-align: left;
}
.story-copy p + p{
  margin-top: 16px;
}
@media (max-width: 767px){
  .story-row{
    flex-direction: column;
    gap: 30px;
  }
  .story-media{
    max-width: 100%;
    flex-basis: auto;
  }
}

/* About page: 4-across value / capability cards. Reuses .svc-card's white
   card / top-border / hover-lift language at a narrower width so four fit
   per row, instead of duplicating that styling under a new class. */
.feature-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  max-width: 1120px;
  margin: 10px auto 0;
}
.feature-grid .svc-card{
  flex: 1 1 calc(25% - 26px);
  max-width: calc(25% - 20px);
  padding: 36px 22px;
}
@media (max-width: 991px){
  .feature-grid .svc-card{
    flex: 1 1 calc(50% - 26px);
    max-width: calc(50% - 13px);
  }
}
@media (max-width: 767px){
  .feature-grid .svc-card{
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* About page: "by the numbers" band, honest counts only (no invented metrics) */
.stat-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 60px;
  max-width: 900px;
  margin: 26px auto 0;
  text-align: center;
}
.stat-item{
  flex: 1 1 160px;
}
.stat-number{
  font-size: 46px;
  font-weight: 900;
  font-style: italic;
  color: #f38c33;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #dfe6ec;
}

/* About page: numbered "how we work" steps, reusing the homepage's .svc-num badge */
.process-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  max-width: 1100px;
  margin: 10px auto 0;
}
.process-card{
  flex: 1 1 220px;
  max-width: 250px;
  text-align: center;
}
.process-card h3{
  font-size: 17px;
  margin: 4px 0 10px;
  color: #262626;
}
.process-card p{
  font-size: 14px;
  color: #666;
  line-height: 1.65;
}
@media (max-width: 767px){
  .process-card{
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Industry & service detail pages: themed hero banner replacing the old
   generic .inner-heading bar + lonely icon panel. The page's own badge icon
   is blended (not just faded) into the gradient via mix-blend-mode, so it
   reads as texture rather than clashing with the per-page accent color set
   on the page wrapper (see .ai-theme-industry-* / .ai-theme-* above).
   Shared by industry-page.php (.industry-hero) and ai-service-page.php
   (.service-hero) since both need the identical treatment. */
.industry-hero,
.service-hero{
  position: relative;
  overflow: hidden;
  padding: 90px 20px 68px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #10151b 0%, var(--ai-accent, #2e7d32) 145%);
}
.industry-hero::before,
.service-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.industry-hero-icon,
.service-hero-icon{
  position: absolute;
  top: 50%;
  right: -70px;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  opacity: 0.9;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.industry-hero-inner,
.service-hero-inner{
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.industry-hero .service-category-eyebrow,
.service-hero .service-category-eyebrow{
  color: #fff;
  opacity: 0.85;
}
.industry-hero h1,
.service-hero h1{
  font-size: 36px;
  font-weight: 900;
  font-style: italic;
  margin: 8px 0 18px;
  color: #fff;
}
.industry-hero-tagline,
.service-hero-tagline{
  font-size: 17px;
  line-height: 1.8;
  color: #eef1f3;
  margin: 0 auto;
  max-width: 620px;
}
@media (max-width: 767px){
  .industry-hero,
  .service-hero{ padding: 60px 20px 46px; }
  .industry-hero h1,
  .service-hero h1{ font-size: 25px; }
  .industry-hero-tagline,
  .service-hero-tagline{ font-size: 15px; }
  .industry-hero-icon,
  .service-hero-icon{ width: 190px; height: 190px; right: -80px; opacity: 0.65; }
}

/* Industry detail pages: two-column "What We Build" list on wider screens
   so five short items don't stretch into one long, flat column. */
.ai-list-icon.two-col{
  column-count: 2;
  column-gap: 40px;
}
.ai-list-icon.two-col li{
  break-inside: avoid;
}
@media (max-width: 767px){
  .ai-list-icon.two-col{ column-count: 1; }
}