/*------------------------------------------------------------------
Ekipa brand theme override
Maps the Tecmo template's colour tokens onto Ekipa's live brand colours
(sampled from ekipa.co logo + site): sky blue #00BFF3, dark navy #272B38,
leaf green #78B018 (sampled from the logo mark). No orange/red anywhere.
Loaded after main.css so these custom properties win.
-------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

/* Site-wide font: Poppins everywhere, except icon glyphs (Font Awesome
   sets its own font-family on .fa-* classes with higher specificity than
   these bare tag selectors, so icons are unaffected). */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
button,
input,
textarea,
select,
li,
label {
  font-family: "Poppins", sans-serif;
}

:root {
  --p1-clr: #00BFF3;
  /* Ekipa sky blue - primary */
  --p2-clr: #78B018;
  /* Ekipa leaf green (from logo) - accent / CTA */
  --p3-clr: #78B018;
  --theme: #00BFF3;
  --theme2: #272B38;
  --header: #272B38;
  --black: #272B38;
  --n900-clr: #272B38;
  --bg3: #272B38;
  --bg4: #1B1E27;
  --border3: #00BFF3;
  --text: #4A5063;
  --pra: #5B6172;
}

/* ---- Buttons: solid green, no gradient ---- */
.box-style.cmn-style1::before {
  background: #78B018 !important;
}

.box-bg {
  background: #78B018 !important;
}

.consulting-section {
  background: #F7FBFD !important;
}

.company-infowrapper .progress_bar_item .item_bar .progress {
  background: linear-gradient(90deg, #00BFF3 0%, #78B018 100%) !important;
}

.challenge-section.bg-color3 {
  background: #272B38 !important;
}

.challenge-section.bg-color3 .challenge-item {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* ---- CTA banner: keep the blue -> green gradient, add decorative pattern ---- */
.customer-touch-wrap {
  background: linear-gradient(120deg, #049CCB 0%, #00BFF3 50%, #78B018 130%) !important;
  position: relative;
  overflow: hidden;
}

.customer-touch::before {
  background: #272B38 !important;
}

.touch-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.touch-pattern svg {
  position: absolute;
  inset: 0;
}

.touch-pattern .touch-circle {
  position: absolute;
  right: 18%;
  top: 50%;
  transform: translateY(-50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #78B018;
  opacity: 0.55;
}

@media (max-width: 991px) {
  .touch-pattern .touch-circle {
    width: 120px;
    height: 120px;
    right: 6%;
  }
}

.customer-touch-wrap .section-title,
.customer-touch-wrap>a {
  position: relative;
  z-index: 1;
}

/* Ekipa wordmark colouring on the logo text fallback */
.ekipa-logo-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #272B38;
}

.ekipa-logo-text span {
  color: #00BFF3;
}

.footer-section .ekipa-logo-text {
  color: #ffffff;
}

.footer-section .ekipa-logo-text span {
  color: #00BFF3;
}

/* ---- Hero: full-bleed photo with brand gradient wash ---- */
.banner-bg-slide {
  position: relative;
  overflow: hidden;
  background: #049CCB none !important;
}

.banner-bg-slide .hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.banner-bg-slide .hero-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
      rgba(4, 60, 90, 0.92) 0%,
      rgba(0, 128, 170, 0.88) 35%,
      rgba(0, 191, 243, 0.55) 65%,
      rgba(120, 176, 24, 0.55) 100%);
}

.banner-bg-slide>.container {
  position: relative;
  z-index: 2;
}

.banner-bg-slide>.hero-text-box {
  z-index: 2;
}

.banner-bg-slide .hero-text-box {
  width: max-content;
  max-width: calc(100% - 40px);
  right: 4%;
  transform: scale(0.78);
  transform-origin: bottom right;
}

@media (max-width: 767px) {
  .banner-bg-slide .hero-text-box {
    transform: none;
  }
}

.hero-text-box {
  z-index: 3;
}

.hero-text-box .boxes1,
.hero-text-box .boxes2-inner {
  position: relative;
  z-index: 1;
}

/* Keep the stat icon a true circle: without this it gets squeezed
   narrower than its 80px height by the text sibling next to it. */
.hero-text-box .boxes2-inner .icon {
  flex-shrink: 0;
}

/* Hovering either stat tile gives it a little shake, making clear the
   "Since 2016..." card and the stat-number card below it are two
   separate, independently-interactive tiles rather than one block. */
.hero-text-box .boxes1,
.hero-text-box .boxes2-inner {
  transition: box-shadow 0.25s ease;
}

.hero-text-box .boxes1:hover,
.hero-text-box .boxes2-inner:hover {
  animation: heroTileShake 0.4s ease-in-out;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

@keyframes heroTileShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-4px) rotate(-0.6deg);
  }

  40% {
    transform: translateX(4px) rotate(0.6deg);
  }

  60% {
    transform: translateX(-3px) rotate(-0.4deg);
  }

  80% {
    transform: translateX(3px) rotate(0.4deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-text-box .boxes1:hover,
  .hero-text-box .boxes2-inner:hover {
    animation: none;
  }
}

/* Bring the hero text up, leave enough bottom room for the stat card.
   The stat card shrank to 78% (see .hero-text-box scale above), so it
   needs less reserved space than before. */
.banner-bg-slide {
  padding: 90px 0 150px !important;
}

@media (max-width: 1199px) {
  .banner-bg-slide {
    padding: 80px 0 120px !important;
  }
}

@media (max-width: 767px) {
  .banner-bg-slide {
    padding: 90px 0 40px !important;
  }

  .banner-bg-slide .hero-text-box {
    width: 280px;
    max-width: 100%;
  }
}

/* Real laptop browser windows are usually much shorter than the screen
   (tab strip + address bar + bookmarks bar all eat into it), so size the
   hero by available height too, not just width — otherwise the CTA
   buttons and stat card end up pushed below the fold on ordinary windowed
   Chrome, even on a big display. */
@media (max-height: 820px) {
  .banner-bg-slide {
    padding: 60px 0 110px !important;
  }

  .banner-bg-slide .banner-content h1 {
    font-size: 52px !important;
    line-height: 1.1 !important;
  }
}

@media (max-height: 680px) {
  .banner-bg-slide {
    padding: 40px 0 90px !important;
  }

  .banner-bg-slide .banner-content h1 {
    font-size: 40px !important;
  }

  .hero-diamond-accent {
    display: none;
  }
}

/* Accent shape behind the stat card: the template's own hero-ele1.png asset,
   used at its native size and anchored bottom-right exactly like the demo
   (measured: 537x406px, flush to the hero's bottom-right corner, poking out
   just above/right of the stat card) — not a giant shape bleeding off-screen. */
.hero-diamond-accent {
  position: absolute;
  bottom: 0;
  right: -40px;
  width: 400px;
  height: 302px;
  background-color: #78B018;
  -webkit-mask-image: url(../img/element/hero-ele1.png);
  mask-image: url(../img/element/hero-ele1.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 1;
}

@media (max-width: 1400px) {
  .hero-diamond-accent {
    width: 300px;
    height: 226px;
  }
}

@media (max-width: 991px) {
  .hero-diamond-accent {
    display: none;
  }
}

/* Cinematic slow zoom on the hero photo */
.banner-bg-slide .hero-bg-photo {
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-bg-slide .hero-bg-photo {
    animation: none;
  }
}

.hero-bg-video {
  animation: none !important;
}

/* ---- About "ten years" section: two overlapping photos ---- */
.about-thumb-duo {
  min-height: 460px;
}

.about-thumb-duo .thumb-main {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 20px 50px rgba(3, 23, 64, 0.12);
  width: 82%;
}

.about-thumb-duo .thumb-main img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.about-thumb-duo .thumb-sub {
  position: absolute;
  right: 0;
  bottom: -30px;
  width: 46%;
  border-radius: 20px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0px 20px 50px rgba(3, 23, 64, 0.18);
  z-index: 2;
}

.about-thumb-duo .thumb-sub img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

@media (max-width: 575px) {
  .about-thumb-duo {
    min-height: 340px;
  }

  .about-thumb-duo .thumb-main img {
    height: 300px;
  }

  .about-thumb-duo .thumb-sub img {
    height: 140px;
  }
}

.about-thumb-duo .about-ele {
  position: absolute;
  right: -10px;
  top: -40px;
  z-index: 0;
  animation: updown 2s linear infinite;
}

@media (max-width: 767px) {
  .about-thumb-duo .about-ele {
    display: none;
  }
}

/* Both this section's own wrapper and the next section already carry
   120px of section-padding each (240px combined) — no extra needed. */

/* ==== Trusted-by logo chips: Ekipa's real client logos ==== */
.logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 14px 18px;
  border: 1px solid #E3E9EE;
  border-radius: 10px;
  background: #fff;
  transition: all .25s ease;
}

.logo-chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: all .25s ease;
}

.logo-chip:hover {
  border-color: #00BFF3;
  box-shadow: 0px 10px 24px rgba(3, 23, 64, 0.08);
}

.logo-chip:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ==== Mission section: icon cards on the dark background ==== */
.mission-card {
  background: #fff;
  border-radius: 16px;
  padding: 34px 24px;
  text-align: center;
  height: 100%;
}

.mission-card .mission-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}

.mission-card:nth-child(1) .mission-icon {
  background: #00BFF3;
}

.mission-card:nth-child(2) .mission-icon {
  background: #049CCB;
}

.mission-card:nth-child(3) .mission-icon {
  background: #78B018;
}

/* ==== "What we do" cards (event-work-items, matches index-3 demo) ==== */
.event-work-items {
  border: 2px solid #E3EEF3;
  background: #F5FAFC;
  height: 100%;
}

.event-work-items:hover {
  background: #fff;
}

.event-work-items .icon-mark {
  font-size: 40px;
  color: #00BFF3;
}

.event-work-items .icon-mark.ai {
  color: #78B018;
}

/* ==== "Our working steps" (work-learn-item, matches index-3 demo) ==== */
.work-learn-item .thumb-author {
  background: #DCEBF7;
  border: 1px solid #C3DDEF;
}

.work-learn-item .thumb-author .serial {
  background: #DCEBF7;
  border: 1px solid #C3DDEF;
}

.work-learn-item .thumb-author::before {
  background: #DCEBF7;
}

.work-learn-item .thumb-author .thumb {
  width: 158px;
  height: 158px;
  overflow: hidden;
  display: block;
}

.work-learn-item .thumb-author img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ==== Industry we are serving ==== */
.industry-section {
  background: #272B38 !important;
}

.industry-icon:hover {
  background: #00BFF3 !important;
}

.industry-photo {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  min-height: 260px;
}

.industry-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==== Latest insights: equal-height cards, aligned footers ==== */
.news-wrapper .row {
  align-items: stretch;
}

.news-wrapper .news-single-items {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.news-wrapper .news-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-wrapper .news-content h4 {
  flex-grow: 1;
}

.news-wrapper .news-image img {
  height: 220px;
  object-fit: cover;
}

/* ==== Insights grid: don't crop the banner featured images (2026-09-09) ====
   The rule above pins the thumbnail to a FIXED 220px height while its width
   stays fluid, so the crop box changes shape with the viewport: ~1.85 at
   1440px but only 1.48 at an iPad's 768px, where the columns are col-md-6.
   Insights featured images are title BANNERS carrying typography (45 of the
   52 published blogs/articles are 1024x403, ratio 2.54), so `cover` sliced
   the words off - "Agile Teams. Smarter AI Adoption." rendered as "gile
   Teams. narter Adoption." on iPad, with only 58% of the image visible.

   Fix: give the box the banners' own aspect ratio so it scales with the card
   instead of shape-shifting, and `contain` so nothing is ever sliced. The 45
   house-standard banners fill it exactly (no mat, no crop); the 7 legacy
   photo thumbnails (1.50-1.91) sit on a light mat rather than losing edges.

   Also reused by [ekipa_thankyou_picks] on /thank-you/, whose insights row
   carries the same id for exactly this reason (2026-09-11) - if this hook is
   ever renamed, update that shortcode too or its banners start getting sliced.

   Scoped to #insightGrid - the id that ekipa_insights_grid_shortcode() puts
   on its row - NOT to .news-wrapper, which is shared with the events grid,
   the case-studies section, the service listings and the homepage's Latest
   insights row. Those carry ordinary landscape photos that the 220px cover
   box suits fine, and a 2.54 letterbox would wreck them. */
#insightGrid .news-image img {
  object-fit: contain;
  background: #F0F4FD;
}

@supports (aspect-ratio: 1 / 1) {
  #insightGrid .news-image img {
    height: auto;
    aspect-ratio: 1024 / 403;
  }
}

/* Tighten the gap between the "ten years" section and "Two pillars, one team":
   both carried a full 120px section-padding on their touching edges (240px
   combined) — trim each side down. */
.about-section .about-wrapper.section-padding {
  padding-bottom: 40px;
}

.event-work-section.section-padding {
  padding-top: 60px;
}

@media (max-width: 767px) {
  .about-section .about-wrapper.section-padding {
    padding-bottom: 20px;
  }

  .event-work-section.section-padding {
    padding-top: 40px;
  }
}

/* ============================================================
   Section ambience + cinematic scroll
   Soft brand-tinted shapes sit behind otherwise-plain sections,
   drift slightly on scroll (parallax), and content fades up as
   it enters the viewport.
   ============================================================ */

/* Sections that host ambience need a stacking context; their
   inner containers must stay above the decoration. */
.has-ambience {
  position: relative;
}

/* Every direct child that isn't decoration is lifted above it, so the
   ambience can never paint over headings, copy, cards or images. */
.has-ambience>*:not(.amb) {
  position: relative;
  z-index: 1;
}

.amb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Soft blurred colour wash */
.amb-orb {
  border-radius: 50%;
  filter: blur(70px);
}

.amb-orb.blue {
  background: radial-gradient(circle, rgba(0, 191, 243, 0.30), rgba(0, 191, 243, 0) 70%);
}

.amb-orb.green {
  background: radial-gradient(circle, rgba(120, 176, 24, 0.26), rgba(120, 176, 24, 0) 70%);
}

/* Fine dot grid */
.amb-dots {
  background-image: radial-gradient(rgba(0, 191, 243, 0.55) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
  opacity: 0.35;
}

/* Thin outline shapes */
.amb-ring {
  border: 1.5px solid rgba(0, 191, 243, 0.28);
  border-radius: 50%;
}

.amb-ring.green {
  border-color: rgba(120, 176, 24, 0.30);
}

/* Note: no `transform` here — the parallax script owns transform on .amb,
   so the rotation is passed via data-rotate and composed in JS instead. */
.amb-square {
  border: 1.5px solid rgba(120, 176, 24, 0.28);
  border-radius: 18px;
}

/* Dark sections need lighter-weight ambience to stay subtle */
.industry-section .amb-dots,
.challenge-section .amb-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.4px, transparent 1.4px);
  opacity: 0.16;
}

.industry-section .amb-ring,
.challenge-section .amb-ring {
  border-color: rgba(255, 255, 255, 0.14);
}

/* ---- Scroll reveal ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1);
}

.reveal-up.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .amb {
    display: none;
  }
}

/* Ambience is decorative — drop it on small screens to keep things clean */
@media (max-width: 991px) {
  .amb {
    display: none;
  }
}

/* Footer newsletter box: white instead of the template's dark fill */
.footer-section .form-style1 {
  background: var(--white);
}

.footer-section .form-style1 input {
  color: var(--black);
}

.footer-section .form-style1 input::placeholder {
  color: rgba(39, 43, 56, 0.55);
}

.footer-section .form-style1 button {
  border: none;
}

.form-style1 button i {
  color: var(--black);
}

/* main.css has a blanket `span { font-size: 16px; }` reset that was
   shrinking our brand-green highlight words inside headings (e.g. "Agile",
   "AI") down to 16px regardless of the heading's actual font-size. Force
   these highlight spans back to matching whatever heading they're in. */
h1 .p2-clr,
h2 .p2-clr,
h3 .p2-clr,
h4 .p2-clr,
h5 .p2-clr,
h6 .p2-clr {
  font-size: inherit;
}

/* ==== Inner-page breadcrumb banner: real photo + brand gradient, plus a
   couple of decorative shapes, instead of the template's generic flat
   navy overlay ==== */
.breadcrumb-section {
  background: url(../img/stock/hero-team.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.breadcrumb-section::before {
  background: linear-gradient(100deg,
      rgba(4, 60, 90, 0.92) 0%,
      rgba(0, 128, 170, 0.85) 45%,
      rgba(120, 176, 24, 0.55) 100%);
}

.breadcrumb-section .amb {
  z-index: 0;
}

.breadcrumb-section .bread-content {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .breadcrumb-section .amb {
    display: none;
  }
}

/* ==== Service page sidebar: nav list + "Any questions? Let's talk" box ====
   Brand-colored (not the template's purple/coral). The sticky rule goes on
   the whole sidebar wrapper, not just the talk box — Bootstrap's row
   stretches the column (.col-lg-4) to match the much taller right-hand
   content column, so this wrapper's containing block is that full height.
   Sticking only the talk box (whose own wrapper is short — just the nav
   list + box) meant it stuck for a few hundred px then vanished for the
   rest of the page, reading as "not sticky" at all. */
.common-left-sidebar {
  position: sticky;
  top: 110px;
}

/* "You are here" state for the sidebar nav (added 2026-09-09).
   ekipa_service_sidebar_shortcode() has always emitted .active on the
   current service, but the purchased template never styled it, so every
   service page's sidebar list gave no indication which item you were
   reading. Deliberately NOT the same solid fill as .cate-tags:hover
   (main.css) — a tint reads as "current" while leaving hover free to
   still respond, including on the active item itself.
   Scoped under .common-left-sidebar: .cate-tags alone is also emitted by
   ekipa_article_sidebar_shortcode() and ekipa_case_sidebar_shortcode(),
   which have no current-item concept. */
.common-left-sidebar .cate-tags.active {
  background: rgba(0, 191, 243, 0.1);
  color: var(--p1-clr);
  font-weight: 600;
}

.common-left-sidebar .cate-tags.active i {
  color: var(--p1-clr);
}

.common-left-sidebar .cate-tags.active:hover,
.common-left-sidebar .cate-tags.active:hover i {
  color: var(--white);
}

.common-left-sidebar .cate-tags.active:hover {
  background: var(--p1-clr);
}

/* ==== Two-column body templates: restore the side gutter <= 1024px ====
   Reported on iPad, 2026-09-09, on /services/training/agile-fundamentals/.

   These bodies are Elementor BOXED containers, so their only horizontal inset
   came from `--content-width: min(100%, 1024px)` on `.e-con-inner` — and
   Elementor's own `.e-con > .e-con-inner` rule sets `padding-inline: 0`. At any
   viewport <= 1024px that max-width resolves to 100%, leaving a gutter of
   exactly zero: the sidebar card, the content image and the body copy all sat
   flush against both screen edges, while every other section on the page
   (Bootstrap `.container`, 12px padding + max-width steps) kept its normal
   inset. Broken at every iPad size and on phones; only viewports > 1024px
   looked right. Note this is invisible to an overflow audit — nothing crosses
   the viewport edge, it just touches it. See [[ekipa-responsive-audit-method]].

   The same construction is used by four templates, all equally affected:
     ek-sv-body  service pages          ([ekipa_service_styles])
     ek-in-body  insights articles AND case studies ([ekipa_insights_styles])
     ek-ev-body  event pages            ([ekipa_event_styles])

   Fix: track `.container`'s own max-width steps and padding so these bodies
   line up with the header and hero at every width. The >= 1400 step (1320px)
   is what the container already resolved to on desktop, so wide screens keep
   their layout — the only change there is `.container`'s 12px padding, which
   brings the sidebar into alignment with the header logo.

   Belongs with those three shortcodes in functions.php, but that file is not
   writable from here. `.elementor` is prepended purely to outrank Elementor's
   own equal-specificity `.e-con > .e-con-inner`. */
.elementor .elementor-element-ek-sv-body > .e-con-inner,
.elementor .elementor-element-ek-in-body > .e-con-inner,
.elementor .elementor-element-ek-ev-body > .e-con-inner {
  padding-inline: 12px;
}

@media (min-width: 576px) {

  .elementor .elementor-element-ek-sv-body > .e-con-inner,
  .elementor .elementor-element-ek-in-body > .e-con-inner,
  .elementor .elementor-element-ek-ev-body > .e-con-inner {
    max-width: 540px;
  }
}

@media (min-width: 768px) {

  .elementor .elementor-element-ek-sv-body > .e-con-inner,
  .elementor .elementor-element-ek-in-body > .e-con-inner,
  .elementor .elementor-element-ek-ev-body > .e-con-inner {
    max-width: 720px;
  }
}

@media (min-width: 992px) {

  .elementor .elementor-element-ek-sv-body > .e-con-inner,
  .elementor .elementor-element-ek-in-body > .e-con-inner,
  .elementor .elementor-element-ek-ev-body > .e-con-inner {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {

  .elementor .elementor-element-ek-sv-body > .e-con-inner,
  .elementor .elementor-element-ek-in-body > .e-con-inner,
  .elementor .elementor-element-ek-ev-body > .e-con-inner {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {

  .elementor .elementor-element-ek-sv-body > .e-con-inner,
  .elementor .elementor-element-ek-in-body > .e-con-inner,
  .elementor .elementor-element-ek-ev-body > .e-con-inner {
    max-width: 1320px;
  }
}

.question-talk-box {
  background: linear-gradient(155deg, #04395C 0%, #00538A 45%, #00BFF3 100%);
}

.question-talk-box .common-btn {
  background: #78B018 !important;
}

/* The section wrapping the sidebar clips overflow (template's ".fix"
   utility), which breaks position:sticky — let it size normally here. */
.services-development-section.fix {
  overflow: visible !important;
}

/* main.css sets `overflow-x: hidden` on body to stop decorative shapes
   bleeding off the edge — but that also silently breaks position:sticky
   everywhere on the page (a well-known browser quirk). `clip` prevents
   the same horizontal overflow without that side effect. */
body {
  overflow-x: clip;
}

@media (max-width: 991px) {
  .common-left-sidebar {
    position: static;
  }
}

/* Service listing cards (services hub + category pages): image zoom,
   overlay darken and arrow-circle reveal on hover, matching the Tecmo
   template's services grid interaction. */
.service-card .news-image {
  overflow: hidden;
}

.service-card .news-image img {
  transition: transform 0.5s ease;
}

.service-card:hover .news-image img {
  transform: scale(1.08);
}

.service-card .card-arrow {
  width: 44px;
  height: 44px;
  right: 16px;
  bottom: 16px;
  background: var(--white);
  color: var(--black);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.35s ease;
  z-index: 2;
}

.service-card:hover .card-arrow {
  opacity: 1;
  transform: scale(1);
  background: var(--p3-clr);
  color: var(--white);
}

.service-card .news-content h4 a {
  transition: color 0.3s ease;
}

/* Who We Are: evolution timeline (modern vertical scroll feed) */
.evolution-timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 76px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.evolution-track {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 27px;
  width: 3px;
  border-radius: 3px;
  background: rgba(3, 23, 64, 0.08);
  overflow: hidden;
}

.evolution-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--p1-clr), var(--p2-clr));
  border-radius: 3px;
  will-change: height;
}

.evolution-item {
  position: relative;
}

.evolution-badge {
  position: absolute;
  left: -76px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(3, 23, 64, 0.06);
  color: var(--n900-clr, #031740);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px var(--white);
  transition: all 0.4s ease;
}

.evolution-item.is-in .evolution-badge {
  background: linear-gradient(135deg, var(--p1-clr), var(--p2-clr));
  color: var(--white);
  box-shadow: 0 0 0 6px var(--white), 0 10px 24px -8px rgba(3, 23, 64, 0.35);
  transform: scale(1.05);
}

.evolution-item:hover .evolution-badge {
  transform: scale(1.15);
}

.evolution-card {
  background: var(--white);
  border: 1px solid rgba(3, 23, 64, 0.08);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px -16px rgba(3, 23, 64, 0.15);
  transition: all 0.3s ease;
}

.evolution-item:hover .evolution-card {
  transform: translateX(4px);
  box-shadow: 0 16px 36px -14px rgba(3, 23, 64, 0.22);
  border-color: rgba(0, 191, 243, 0.25);
}

.evolution-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p1-clr);
  background: rgba(0, 191, 243, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

@media (max-width: 575px) {
  .evolution-timeline {
    padding-left: 58px;
  }

  .evolution-badge {
    left: -58px;
    width: 44px;
    height: 44px;
    font-size: 11px;
  }

  .evolution-track {
    left: 21px;
  }

  .evolution-card {
    padding: 18px;
  }
}

/* Desktop: centered line, cards alternating left/right of it */
@media (min-width: 768px) {
  .evolution-timeline {
    max-width: 960px;
    padding-left: 0;
    gap: 46px;
  }

  .evolution-track {
    left: 50%;
    transform: translateX(-50%);
  }

  .evolution-item {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: start;
    column-gap: 32px;
  }

  .evolution-badge {
    position: static;
    grid-column: 2;
    justify-self: center;
    margin-top: 2px;
  }

  .evolution-item--right .evolution-card {
    grid-column: 3;
  }

  .evolution-item--left .evolution-card {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }

  .evolution-item--left .evolution-tag {
    margin-left: auto;
  }

  .evolution-item:hover .evolution-card {
    transform: translateY(-6px);
  }
}

/* Lightweight, dependency-free entrance animation used on inner pages
   (avoids the homepage's GSAP ScrollTrigger reveal, which can get stuck
   mid-transform when its trigger math never fires on shorter pages). */
.reveal-photo {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-photo.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-photo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .evolution-track-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* Services hub: Agile / AI pillar cards */
.pillar-card {
  border: 1px solid rgba(3, 23, 64, 0.08);
  transition: all 0.35s ease;
}

.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -20px rgba(3, 23, 64, 0.22);
  border-color: rgba(0, 191, 243, 0.25);
}

.pillar-card .icon-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 26px;
  background: rgba(0, 191, 243, 0.1);
  color: var(--p1-clr);
  transition: all 0.3s ease;
}

.pillar-card .icon-mark.ai {
  background: rgba(120, 176, 24, 0.12);
  color: var(--p2-clr);
}

/* On hover: icon fills solid, heading picks up the same accent as the icon
   (blue by default, green when the icon carries .ai), and the "Learn more"
   arrow nudges right — makes the whole tile read as one clickable unit
   rather than just lifting in place. */
.pillar-card:hover .icon-mark {
  background: var(--p1-clr);
  color: var(--white);
}

.pillar-card:hover .icon-mark.ai {
  background: var(--p2-clr);
}

.pillar-card h4 {
  transition: color 0.3s ease;
}

.pillar-card:hover h4 {
  color: var(--p1-clr);
}

.pillar-card:hover .icon-mark.ai + h4 {
  color: var(--p2-clr);
}

.pillar-card .fa-arrow-right {
  display: inline-block;
  transition: transform 0.3s ease;
}

.pillar-card:hover .fa-arrow-right {
  transform: translateX(4px);
}

.pillar-card a:hover {
  text-decoration: underline;
}

/* Services hub: marquee ticker. Self-contained (not reusing the
   template's .marquee-wrapper/.marquee-list, which assume the content
   of each half exactly fills one viewport width — with real copy that
   assumption breaks and the two halves overlap). translateX(-50%) on a
   track holding two identical copies loops seamlessly regardless of
   content width. */
.ekipa-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(3, 23, 64, 0.06);
  border-bottom: 1px solid rgba(3, 23, 64, 0.06);
}

.ekipa-marquee-track {
  display: inline-flex;
  width: max-content;
  animation: ekipaMarqueeScroll 30s linear infinite;
}

.ekipa-marquee-set {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ekipa-marquee .text-slider {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
  margin-right: 30px;
}

.ekipa-marquee .text-slider.text-color-2 {
  color: var(--n900-clr, #031740);
}

.ekipa-marquee .logo-chip {
  flex-shrink: 0;
  height: 60px;
  padding: 10px 22px;
  margin-right: 28px;
}

@keyframes ekipaMarqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .ekipa-marquee .text-slider {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ekipa-marquee-track {
    animation: none;
  }
}

/* Services hub: "how to navigate this site" flow */
.site-flow-step {
  background: var(--white);
  border: 1px solid rgba(3, 23, 64, 0.08);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  transition: all 0.3s ease;
}

.site-flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -18px rgba(3, 23, 64, 0.22);
  border-color: rgba(0, 191, 243, 0.25);
}

.site-flow-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p1-clr), var(--p2-clr));
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
}

.site-flow-arrow {
  font-size: 18px;
  opacity: 0.5;
}

/* Services hub: fact cards (reuses the homepage's .about-info icon
   pattern, restyled since it here appears outside .about-content) */
section .about-info.reveal-photo {
  background: var(--white);
  border: 1px solid rgba(3, 23, 64, 0.08);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s ease;
}

section .about-info.reveal-photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -18px rgba(3, 23, 64, 0.18);
}

section .about-info.reveal-photo .icon {
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 10px 30px 0 rgba(13, 18, 30, 0.12);
}

/* Services hub: pillar accordion + swapping photo (teckko "Grow &
   Development" pattern) */
.pillar-accordion .accordion-item {
  background: var(--white);
}

.pillar-accordion .accordion-button {
  font-size: 22px;
}

.pillar-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 50px -24px rgba(3, 23, 64, 0.28);
}

.pillar-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pillar-photo img.is-active {
  opacity: 1;
}

/* .bread-content is a CSS grid with the default justify-items: stretch,
   which stretches every child — including a hero CTA button — to the
   full column width. Keep the button sized to its own content. */
.bread-content > a.common-btn {
  justify-self: center;
  width: fit-content;
}

/* Training page: Agile / AI tab switcher */
.training-tabs {
  flex-wrap: wrap;
}

.training-tabs .nav-link {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid rgba(3, 23, 64, 0.1);
  background: var(--white);
  color: var(--black);
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
}

.training-tabs .nav-link .count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 100px;
  background: rgba(3, 23, 64, 0.06);
  font-size: 12px;
  font-weight: 700;
}

.training-tabs .nav-link:hover {
  border-color: rgba(0, 191, 243, 0.35);
}

.training-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--p1-clr), var(--p2-clr));
  border-color: transparent;
  color: var(--white);
}

.training-tabs .nav-link.active .count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}



/* ============================================================
   Community / Agile Circles page (added 2026-08-22)
   Three components the ported template did not already carry:
   the brand lockup panel, the numbered principle list and the
   dark-section benefit rows.
   ============================================================ */
.community-brand-panel {
  background: var(--bg);
  border: 1px solid rgba(3, 23, 64, 0.08);
  min-height: 420px;
  padding: 48px 40px;
}

.community-brand-panel img.community-brand-mark {
  width: 100%;
  max-width: 320px !important;
  height: auto;
  display: block;
}

.community-brand-panel .about-ele {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 96px;
  opacity: 0.7;
}

@media (max-width: 991px) {
  .community-brand-panel {
    min-height: 300px;
    padding: 36px 24px;
  }
  .community-brand-panel img.community-brand-mark {
    max-width: 240px !important;
    margin: 0 auto;
  }
}

/* ---- Numbered principle list (hairline rows, not cards) ---- */
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.principle-row {
  padding: 28px 0;
  border-top: 1px solid rgba(3, 23, 64, 0.1);
}

.principle-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.principle-row:last-child {
  padding-bottom: 0;
}

.principle-num {
  width: 48px;
  min-width: 48px;
  height: 48px;
  background: var(--p2-clr);
  color: var(--white);
  font-family: var(--heading-font, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 575px) {
  .principle-row {
    padding: 22px 0;
  }
  .principle-num {
    width: 40px;
    min-width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* ---- Benefit rows on the dark ground ---- */
.benefit-item {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
}

.benefit-icon {
  width: 56px;
  min-width: 56px;
  height: 56px;
  background: rgba(0, 191, 243, 0.14);
  border: 1px solid rgba(0, 191, 243, 0.35);
  color: #00BFF3;
  font-size: 20px;
  transition: all 0.4s;
}

.benefit-item:hover .benefit-icon {
  background: #00BFF3;
  color: var(--white);
}

/* ---- Region cards: equal-height media so the three line up ---- */
.region-card .news-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.region-card .news-content {
  padding: 20px 16px 8px;
}


/* ============================================================
   Header dropdowns: tap + keyboard, not hover only (2026-08-22)

   main.css opens a submenu solely on `li:hover`, so on any touch input
   the Services / Community / Insights menus cannot be opened at all and
   their children (Case Studies among them) are unreachable. Keyboard
   users are locked out for the same reason. `.is-open` mirrors the hover
   state exactly; the hover rule is left untouched.
   ============================================================ */
.header-main .main-menu ul li.is-open > .submenu,
.header-main .main-menu ul li:focus-within > .submenu {
  /* !important because main.css repeats the hidden state inside media
     queries that would otherwise out-cascade this override. */
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0px) !important;
}

/* Nested (second level) submenus, same treatment. */
.header-main .main-menu ul li .submenu li.is-open > .submenu,
.header-main .main-menu ul li .submenu li:focus-within > .submenu {
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================================
   Per-page hero images (2026-08-22, WebP + framing pass)

   Every inner-page hero shared one photo, so /services/, /events/ and
   the rest all looked identical. Each hero now carries a photo matching
   that page's subject.

   Only background-image and -position are overridden, so the base rule
   keeps supplying cover sizing and the brand gradient in ::before.

   WebP at q76: roughly half the bytes of the JPEGs, which still sit
   beside them in the same folder as a manual fallback.

   background-position is per-photo, NOT center: the hero band is about
   3:1 while the sources are 3:2, so a centered crop shows only the
   middle third of the frame and slices faces in half. Each value below
   pulls the crop to that photo's focal row.

   New photos: Pexels License (free commercial use, no attribution).
   ============================================================ */

/* Services hub - Agile workshop, sticky notes on a whiteboard (pexels 7495607) */
body.page-id-27 .breadcrumb-section,
body.page-id-11944 .breadcrumb-section,
body.page-id-11946 .breadcrumb-section,
body.page-id-11948 .breadcrumb-section {
  background-image: url(../img/hero/hero-services.webp) !important;
  background-position: center 38% !important;
}

/* Who We Are - a multinational team together (pexels 30004357) */
body.page-id-4286 .breadcrumb-section {
  background-image: url(../img/hero/hero-who-we-are.webp) !important;
  background-position: center 30% !important;
}

/* Community / Agile Circles - a large group in an office (pexels 1181438) */
body.page-id-6645 .breadcrumb-section {
  background-image: url(../img/hero/hero-community.webp) !important;
  background-position: center 36% !important;
}

/* Enterprise AI - data centre aisle (pexels 4508751). No faces, so a
   centred crop is correct here. */
body.page-id-28619 .breadcrumb-section {
  background-image: url(../img/hero/hero-ai.webp) !important;
  background-position: center center !important;
}

/* Events - a seminar room mid-session (pexels 7648050) */
body.page-id-35 .breadcrumb-section,
body.page-id-16531 .breadcrumb-section,
body.page-id-16533 .breadcrumb-section,
body.page-id-16535 .breadcrumb-section {
  background-image: url(../img/hero/hero-events.webp) !important;
  background-position: center 45% !important;
}

/* English Events page only (2026-09-02 image refresh) — overrides the shared
   rule above just for page-id-35, so the en-id/en-my/en-sg duplicates keep
   the original photo until they're refreshed too. */
body.page-id-35 .breadcrumb-section {
  background-image: url(../img/hero/hero-events-en.webp) !important;
  background-position: center center !important;
}

/* Service category archives. */
body.tax-services_categories.term-training .breadcrumb-section {
  background-image: url(../img/hero/hero-training.webp) !important;
  background-position: center 35% !important;
}

body.tax-services_categories.term-coaching .breadcrumb-section {
  background-image: url(../img/stock/about-team.webp) !important;
  background-position: center 35% !important;
}

body.tax-services_categories.term-consultancy .breadcrumb-section {
  background-image: url(../img/stock/step-strategy.webp) !important;
  background-position: center 35% !important;
}

body.tax-services_categories.term-ai-trainings .breadcrumb-section {
  background-image: url(../img/stock/step-enablement.webp) !important;
  background-position: center 35% !important;
}

/* Case studies archive - the regulated-enterprise composite */
body.post-type-archive-case-studies .breadcrumb-section {
  background-image: url(../img/stock/industries-composite.webp) !important;
  background-position: center center !important;
}

/* Insights archives */
body.tax-insights_types.term-blogs .breadcrumb-section {
  background-image: url(../img/stock/blog-workflow.webp) !important;
  background-position: center 40% !important;
}

body.tax-insights_types.term-articles .breadcrumb-section {
  background-image: url(../img/stock/blog-strategy.webp) !important;
  background-position: center 40% !important;
}

/* ---- Custom cursor removed ----
   The follower dot/ring and its text-hover spotlight were dropped; the
   normal system cursor is used everywhere. The empty <div class="mouse-follower">
   still ships inside older Elementor page data, so keep it out of the layout. */
.mouse-follower {
  display: none !important;
}

/* Who We Are: the pre-2016 milestone badge carries a word, not a 4-digit year.
   Same 56px circle and position as every other badge - only the type wraps. */
.evolution-badge--wide {
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  padding: 0 6px;
  white-space: normal;
}
@media (max-width: 575px) {
  .evolution-badge--wide {
    font-size: 9px;
    padding: 0 5px;
  }
}

/* ==== FAQ accordion (homepage "What clients ask before they start") ==== */
.faq-accordion .accordion-item {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.faq-accordion .accordion-button {
  font-size: 19px;
  font-weight: 600;
  padding: 20px 24px;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(94, 212, 0, 0.08);
  color: inherit;
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(94, 212, 0, 0.25);
}

.faq-accordion .accordion-body {
  padding: 0 24px 22px;
}

@media (max-width: 575px) {
  .faq-accordion .accordion-button {
    font-size: 17px;
    padding: 16px 18px;
  }

  .faq-accordion .accordion-body {
    padding: 0 18px 18px;
  }
}

/* ==== "The engineering behind the build" note under the two-service block ==== */
.engineering-note {
  background: rgba(0, 191, 243, 0.07);
  border-left: 3px solid #00BFF3;
}

/* ============================================================
   AI Strategy & Advisory page (2026-09-02, updated 2026-09-02)
   Small leading icon inside each "Where you are" accordion button,
   so the three pain points are identifiable at a glance, not just
   by their label text. The "Our approach" and "After the roadmap"
   redesigns below reuse the site's existing .pillar-card and
   .mission-card components instead of one-off classes.
   ============================================================ */
.where-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: rgba(0, 191, 243, 0.1);
  color: var(--p1-clr);
  font-size: 15px;
}

.where-icon.green {
  background: rgba(120, 176, 24, 0.12);
  color: var(--p2-clr);
}

.accordion-button:not(.collapsed) .where-icon {
  background: var(--p1-clr);
  color: var(--white);
}

.accordion-button:not(.collapsed) .where-icon.green {
  background: var(--p2-clr);
}

/* ============================================================
   "After the roadmap" — connected delivery road (2026-09-02)
   "Our approach" above already uses a card grid (.pillar-card), so
   this section needed its own shape to avoid repeating the same
   layout family twice in a row. Three stops linked by one dotted
   route line — reads as a path forward, which is what the section
   is actually about, not another set of cards.
   ============================================================ */
.delivery-road {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 32px;
}

.road-stop {
  position: relative;
  z-index: 1;
  flex: 1 1 260px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Above the 991px breakpoint (where .road-stop lays out side-by-side in
   Bootstrap columns rather than the stacked mobile list below), stack
   the icon centered above the heading/text instead of beside it —
   matches .road-node's own centering (margin: 0 auto) and this rule's
   text-align: center, which a plain row layout was fighting against.
   Scoped to min-width so it never touches the intentional mobile
   left-aligned row layout defined under max-width: 991px below. */
@media (min-width: 992px) {
  .road-stop {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Tighten the gap above the "Book a Call" CTA in this section —
   Bootstrap's .mb-4 on the stops row (24px) read as too much air
   before the button; scoped here instead of touching .mb-4 globally.
   (20px: a middle ground — 8px read as too tight once the two stops
   were pulled closer together below.) */
.challenge-section .row.g-4.mb-4 {
  margin-bottom: 20px !important;
}

/* The two stops were each centered inside a full 50%-wide Bootstrap
   column, so with content much narrower than the column the pair
   ended up ~337px apart — a lot of dead center space. Let each
   column shrink to fit its stop instead of holding the 50% grid
   width, and use the row's own gap for a deliberate, even space
   between them (matches .delivery-road's 32px stop gap elsewhere). */
/* Scoped with :has(.road-stop) on 2026-09-09. Without it these two rules
   matched EVERY .challenge-section row with .g-4.justify-content-center,
   including the three-up .mission-card grids on /services/ai/ ("Why Ekipa")
   and /about-us/who-we-are/ — width:auto replaced Bootstrap's col-md-4
   33.333%, so each card sized to its own text (1282/1029/1163px on the AI
   hub) and the row wrapped into a ragged stack. Only the Agile hub's
   two-stop road row is meant to shrink to content. If a browser lacks
   :has() the whole block is dropped, which is the safe direction: the
   mission grids stay correct and the road row merely keeps Bootstrap's
   wider 50% columns. */
@media (min-width: 992px) {
  .challenge-section .row.g-4.justify-content-center:has(.road-stop) {
    gap: 32px;
  }

  .challenge-section .row.g-4.justify-content-center:has(.road-stop) > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Connects THIS stop's node to the next one only — not a line spanning the
   whole row — so there's nothing dangling before the first stop or after
   the last one. left:50% is the node's own center (it's margin:auto inside
   a centered stop); width reaches exactly to the next stop's center
   because the gap is included and columns are equal width. */
.road-stop:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 34px;
  left: 50%;
  width: calc(100% + 32px);
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.35) 0 10px, transparent 10px 20px);
}

.road-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  min-width: 68px;
  flex-shrink: 0;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p1-clr), var(--p2-clr));
  color: var(--white);
  font-size: 24px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 14px 30px -12px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.road-stop:hover .road-node {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 18px 36px -12px rgba(0, 0, 0, 0.6);
}

/* Same hover language as the "Our approach" pillar cards: the title picks
   up the brand accent so the whole stop reads as one responsive unit, not
   just the icon reacting. */
.road-stop h4 {
  transition: color 0.3s ease;
}

.road-stop:hover h4 {
  color: var(--p1-clr);
}

@media (max-width: 991px) {
  .delivery-road {
    display: block;
  }

  .road-stop {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
    max-width: none;
    padding-bottom: 36px;
  }

  .road-stop:last-child {
    padding-bottom: 0;
  }

  /* Same "only between nodes" logic, rotated vertical: top:28px starts at
     this node's center (half of the 56px node), height:100% of this stop's
     own box lands exactly on the next node's center. */
  .road-stop:not(:last-child)::after {
    top: 28px;
    left: 28px;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0 10px, transparent 10px 20px);
  }

  .road-node {
    margin: 0;
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 20px;
  }
}


/* ============================================================
   Our Team page (/about-us/who-we-are/our-team/, added 2026-09-08)
   The purchased template ships .team-items hover behaviour in
   main.css (gradient overlay + the .social-wrapper2 chip that
   slides up) but never carried markup or styles for the name /
   role block under the portrait, a fixed portrait ratio, or a
   founder row. Those three things live here.
   ============================================================ */
.ek-founder-card {
  background: var(--white);
  border: 1px solid rgba(3, 23, 64, 0.08);
  border-radius: 12px;
  padding: 24px;
  height: 100%;
}

.ek-founder-thumb {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
}

.ek-founder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ek-founder-social {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--p1-clr);
  transition: all 0.3s ease;
}

.ek-founder-social i {
  color: var(--white);
}

.ek-founder-social:hover {
  background: var(--p2-clr);
}

@media (max-width: 575px) {
  .ek-founder-card {
    flex-direction: column;
    text-align: center;
  }
  .ek-founder-thumb {
    width: 130px;
    height: 130px;
  }
}

/* ---- De-duplicated team grid + region filter ---- */
.ek-team-card {
  height: 100%;
  border: 1px solid rgba(3, 23, 64, 0.08);
}

/* .team-items rounds all four corners of .thumb; here the portrait sits
   directly above a text block, so only the top corners should curve. */
.ek-team-card .thumb,
.ek-team-card .thumb img,
.ek-team-card .thumb::before {
  border-radius: 10px 10px 0 0;
}

.ek-team-card .thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ek-team-cont {
  padding: 20px 16px 24px;
}

.ek-team-filter {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.ek-team-filter .nav-link {
  cursor: pointer;
}

.ek-team-col[hidden] {
  display: none !important;
}


/* ============================================================
   Touch targets (added 2026-09-09)
   Raises the two undersized interactive controls to a 44px
   minimum, and fixes a hover-only control that was completely
   unreachable on touch devices.
   ============================================================ */

/* The purchased template reveals the team card's LinkedIn chip on :hover
   only - .social-wrapper2 parks at bottom:-200px and slides in on
   .team-items:hover. :hover never fires on a touch device, so on phones and
   tablets those links sat ~144px below the card, permanently unreachable.
   Park the chip in view wherever the pointer can't hover. The chip carries
   its own solid --p1-clr background, so it stays legible over the photo
   without the hover gradient that normally sits behind it. */
@media (hover: none), (pointer: coarse) {
  .ek-team-card .thumb .social-wrapper2 {
    bottom: 16px;
  }
}

/* 44x44 minimum for both social chips (was 36px on the team cards, 38px on
   the founder rows). */
.ek-team-card .thumb .social-wrapper2 a,
.ek-founder-social {
  width: 44px;
  height: 44px;
}

/* Footer link lists were 28px tall on a 38px pitch. The anchor is already a
   full-width flex row with align-items:center, so a min-height both grows
   the target and keeps the label centred. The list gap drops from 10px to
   4px so the pitch only goes 38px -> 48px: the targets clear 44px and still
   stay visually separated rather than butting together. */
.footer-widgets-wrapper .single-footer-widget .list-area li:not(:last-child) {
  margin-bottom: 4px;
}

.footer-widgets-wrapper .single-footer-widget .list-area li a {
  min-height: 44px;
}


/* ============================================================
   Hero stat callout: stop it hanging off the left edge on phones
   (fixed 2026-09-09)

   main.css switches .hero-text-box to position:relative at <=767px
   and resets its offset (right:0%) precisely because a relative
   element treats `right` as a LEFTWARD shift. The Ekipa override
   above sets `right: 4%` with no media query, so it also applied
   below 767px and pushed the card off-screen: left:-15px at 375px,
   left:-24px at 600px, clipping the icon and the "100+" block.

   Reset the offset where the element is relative, and centre the
   fixed-280px card the way the rest of the mobile hero is centred.
   ============================================================ */
@media (max-width: 767px) {
  .banner-bg-slide .hero-text-box {
    right: auto;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   AI Delivery Frameworks band  (/services/ai/, added 2026-09-09)
   A deliberately compact band between the full-height "Four core
   AI capabilities" section and the dark "Why Ekipa" one, so the
   frameworks read as a pointer rather than a fifth capability.
   Shorter than .section-padding's 120px on purpose. Class is
   page-specific so it cannot collide with the shared section
   classes the way .challenge-section rules did.
   ============================================================ */
.ek-frameworks-band {
  padding: 72px 0;
}

@media (max-width: 991px) {
  .ek-frameworks-band {
    padding: 56px 0;
  }
}

/* The band's heading sits a step below the page's section titles — it
   introduces a single link, not a whole section of content. */
.ek-frameworks-band h2 {
  font-size: 36px;
  line-height: 1.2;
}

@media (max-width: 991px) {
  .ek-frameworks-band h2 {
    font-size: 28px;
  }
}


/* ============================================================
   Delivery road: complete the dotted connector (fixed 2026-09-09)

   .road-stop carries margin-left/right:auto. On a flex row those
   auto margins absorb ALL the container's spare width, so the real
   gap between stops was never the 32px that
   .road-stop:not(:last-child)::after assumes in its
   width: calc(100% + 32px). Measured on /services/ai/data-modernization/
   the stops sat 341px apart and the dotted line stopped 309px short of
   the next node; three-stop roads fell 89px short.

   Dropping the auto margins at desktop lets .delivery-road's own
   justify-content:center do the centring, which leaves the gap at
   exactly 32px and makes the connector land on the next node's centre.
   Scoped to min-width:992px so the stacked mobile layout below that
   breakpoint - which uses display:block and its own vertical
   connector - is untouched.
   ============================================================ */
@media (min-width: 992px) {
  .delivery-road > .road-stop {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Accordion label wrapping (2026-09-09) */
/* reset.css sets white-space:nowrap on every <button>; long pillar-accordion
   labels therefore clipped past the viewport at narrow widths. */
.pillar-accordion .accordion-button,
.pillar-accordion .accordion-button > .d-flex,
.faq-accordion .accordion-button,
.faq-accordion .accordion-button > .d-flex { white-space: normal; }
.pillar-accordion .accordion-button > .d-flex { flex-wrap: nowrap; min-width: 0; }
.pillar-accordion .accordion-button .where-icon { flex: 0 0 auto; }

/* Accordion header tap target (2026-09-09) */
@media (hover: none), (pointer: coarse) {
  .pillar-accordion .accordion-button { min-height: 44px; }
}

/* ============================================================
   Desktop header: group the nav with the CTA (2026-09-10)

   main.css gives .header-main `justify-content: space-between` with three
   children - .header-left (logo), .header-right (the nav) and
   .header-hamburger-inner (the "Talk to us" button). With only three items
   that centres the nav in the leftover space, so the gap to the logo and the
   gap to the button were always identical: 219px at 1440, 137px at 1280. The
   nav read as stranded mid-header.

   `margin-left: auto` on the nav absorbs that free space instead, pushing the
   nav right to sit as a group with the button, and the explicit margin on the
   button sets a deliberate gap rather than a computed one. At 1440 the nav
   moves ~109px right and the gap becomes 110px; at 1280 it moves ~27px and
   the gap is the same 110px, so the spacing is now consistent across widths
   instead of stretching with the viewport.

   Scoped to min-width 1200px - that is where the template reveals
   .header-hamburger-inner (d-none d-xl-flex). Below it the button is hidden
   and .header-right holds the mobile search and hamburger, which must keep
   main.css's own spacing untouched. */
@media (min-width: 1200px) {
  .header-1 .header-main .header-right {
    margin-left: auto;
  }

  .header-1 .header-main .header-hamburger-inner {
    margin-left: 110px;
  }
}


/* ==== /thank-you/ hero confirmation tick (2026-09-11) ====
   The thank-you page was rebuilt from the 2023 design onto the ported
   template. Its hero shows a tick above the eyebrow so the page reads as a
   confirmation at a glance.

   .ty-check appears only inside that one page's hero html widget, so this
   cannot reach another ported document - the scoping rule this stylesheet
   needs, since all ~167 ported docs share it. fa-check is FontAwesome FREE
   (verified on the rendered page), not one of the Pro-only glyphs that
   silently render as an empty circle. */
.ty-check {
  width: 76px;
  height: 76px;
  font-size: 30px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

@media (max-width: 575px) {
  .ty-check {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
}