/* ECOTECH CLEAN CSS BUNDLE — generated from the final approved cascade */


/* ===== SOURCE: technology-neutral-canvas-v1.css ===== */


/* =========================================================
   TECHNOLOGIES — NEUTRAL MATTE CANVAS
   Remove legacy green/teal atmospheric washes from the technology
   catalogue while retaining intentional colored typography.
   ========================================================= */

body.tech-catalog-page{
  background:#F4F3EF!important;
}

/* The old global style.css added translucent teal gradients to generic
   .section surfaces. They create the unwanted green cast here. */
body.tech-catalog-page main > .section,
body.tech-catalog-page main .cat-block{
  background:#F4F3EF!important;
}

/* Kill decorative color washes only; content remains untouched. */
body.tech-catalog-page main > .section::before,
body.tech-catalog-page main > .section::after,
body.tech-catalog-page main .cat-block::before,
body.tech-catalog-page main .cat-block::after{
  background:none!important;
  background-image:none!important;
  opacity:0!important;
}

/* Technology cards stay clean and neutral. */
body.tech-catalog-page .tile-grid .tile{
  background:#F8F7F3!important;
}

/* Keep category structure crisp rather than allowing the old green
   accent to tint the entire surface. */
body.tech-catalog-page .cat-head{
  border-color:rgba(48,72,63,.14)!important;
}

/* Detail pages: neutralize generic light-section atmospheric overlays,
   while leaving intentional dark hero/CTA backgrounds alone. */
body.tech-catalog-page .section:not(.section-navy):not(.cta-band)::before,
body.tech-catalog-page .section:not(.section-navy):not(.cta-band)::after{
  background:none!important;
  background-image:none!important;
  opacity:0!important;
}

/* No green wash behind technology detail content. */
body.tech-catalog-page .content-section::before,
body.tech-catalog-page .content-section::after{
  background:none!important;
  background-image:none!important;
}

/* Typography accents remain available; only the canvas wash is removed. */


/* ===== SOURCE: technologies-mobile-final.css ===== */


/* =========================================================
   ECOTECH — TECHNOLOGIES DIRECTORY MOBILE
   Deliberately self-contained. No dependency on the global
   animation/reveal/particle layer.
   ========================================================= */

@media (max-width:900px){

  body.tech-catalog-page{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
    background:#F4F3EF!important;
  }

  body.tech-catalog-page #photonCanvas{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    pointer-events:none!important;
    z-index:0!important;
    mix-blend-mode:screen!important;
    opacity:.72!important;
    visibility:visible!important;
  }

  body.tech-catalog-page main,
  body.tech-catalog-page header,
  body.tech-catalog-page footer{
    position:relative;
    z-index:3;
  }

  body.tech-catalog-page main{
    display:block!important;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow:visible;
  }

  body.tech-catalog-page .detail-hero{
    display:block!important;
    width:100%;
    min-height:0!important;
    padding:116px 0 46px!important;
    margin:0!important;
    background:#17252B!important;
    overflow:hidden;
  }

  body.tech-catalog-page .detail-hero .container{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }

  body.tech-catalog-page .detail-hero h1{
    display:block!important;
    max-width:100%!important;
    font-size:clamp(32px,9vw,48px)!important;
    line-height:1.02!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  body.tech-catalog-page .detail-hero p{
    display:block!important;
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.55!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  body.tech-catalog-page > main > .section{
    display:block!important;
    width:100%;
    padding:42px 0 64px!important;
    margin:0!important;
    background:#F4F3EF!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  body.tech-catalog-page .section > .container{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }

  body.tech-catalog-page .cat-block{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 46px!important;
    padding:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  body.tech-catalog-page .cat-block:last-child{
    margin-bottom:0!important;
  }

  body.tech-catalog-page .cat-head{
    display:flex!important;
    width:100%!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 0 16px!important;
    padding:0 0 10px!important;
    border-bottom:1px solid rgba(48,72,63,.14)!important;
  }

  body.tech-catalog-page .cat-head h2{
    display:block!important;
    flex:1 1 auto;
    min-width:0;
    margin:0!important;
    font-size:clamp(21px,6vw,29px)!important;
    line-height:1.08!important;
    color:#17252B!important;
  }

  body.tech-catalog-page .cat-count{
    flex:0 0 auto;
    font-size:9px!important;
    white-space:nowrap;
  }

  body.tech-catalog-page .tile-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:12px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }

  body.tech-catalog-page .tile-grid .tile{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:17px!important;
    background:#F8F7F3!important;
    border:1px solid rgba(48,72,63,.10)!important;
    border-radius:16px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    overflow:hidden!important;
  }

  body.tech-catalog-page .tech-logo-stage{
    width:76px!important;
    height:60px!important;
    display:grid!important;
    place-items:center!important;
    margin:0 0 8px!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    clip-path:none!important;
    overflow:visible!important;
  }

  body.tech-catalog-page .tech-logo-stage img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:70px!important;
    max-height:52px!important;
    object-fit:contain!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
  }

  body.tech-catalog-page .tech-logo-stage[data-logo-shape="square"] img{
    max-width:48px!important;
    max-height:48px!important;
  }

  body.tech-catalog-page .tech-logo-stage[data-logo-shape="wide"] img{
    max-width:68px!important;
    max-height:34px!important;
  }

  body.tech-catalog-page .tech-logo-stage[data-logo-shape="ultrawide"] img{
    max-width:72px!important;
    max-height:27px!important;
  }

  body.tech-catalog-page .tech-logo-stage[data-logo-shape="tall"] img{
    max-width:38px!important;
    max-height:52px!important;
  }

  body.tech-catalog-page .tile h3{
    display:block!important;
    margin:0 0 5px!important;
    font-size:19px!important;
    line-height:1.12!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  body.tech-catalog-page .tile .tagline{
    display:block!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.45!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  body.tech-catalog-page .tile .tile-cta{
    display:inline-block!important;
    margin-top:12px!important;
    font-size:10px!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* The footer should remain normal and never inherit catalog overflow. */
  body.tech-catalog-page footer{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
}

@media (max-width:380px){
  body.tech-catalog-page .detail-hero{
    padding-top:106px!important;
  }

  body.tech-catalog-page .cat-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  body.tech-catalog-page .tile{
    padding:15px!important;
  }
}

@media (min-width:601px) and (max-width:900px){
  body.tech-catalog-page .tile-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:900px){
  body.tech-catalog-page .eco-nav-v23,
  body.tech-catalog-page .eco-mobile-nav-backdrop,
  body.tech-catalog-page .eco-nav-v23__sheet{
    z-index:2147483000!important;
  }
}

@media (max-width:900px){
  body.tech-catalog-page #photonCanvas{
    z-index:0!important;
    filter:none!important;
    -webkit-filter:none!important;
  }
  body.tech-catalog-page main{
    position:relative!important;
    z-index:1!important;
  }
  body.tech-catalog-page .eco-nav-v23{
    z-index:2147483000!important;
  }
  body.tech-catalog-page .eco-nav-v23__sheet{
    z-index:2147483001!important;
  }
  body.tech-catalog-page .eco-mobile-nav-backdrop{
    z-index:2147482990!important;
  }
}

/* ============================================================
   Technology category palettes — unique matte hue per group
   ============================================================ */

body.tech-catalog-page #data-engineering-tech{
  --cat-accent: #1F8A8D;
  --cat-accent-soft: #3E7D82;
  --cat-bg: #E8F2F1;
  --cat-border: rgba(31,138,141,.22);
  --cat-count: #1F8A8D;
}
body.tech-catalog-page #cloud-technologies{
  --cat-accent: #5A6E9A;
  --cat-accent-soft: #7A8BB0;
  --cat-bg: #E9ECF3;
  --cat-border: rgba(90,110,154,.22);
  --cat-count: #5A6E9A;
}
body.tech-catalog-page #databases{
  --cat-accent: #3D7A6A;
  --cat-accent-soft: #5A9A88;
  --cat-bg: #E6EFEA;
  --cat-border: rgba(61,122,106,.22);
  --cat-count: #3D7A6A;
}
body.tech-catalog-page #programming-languages{
  --cat-accent: #8A5A72;
  --cat-accent-soft: #A87890;
  --cat-bg: #F1EAEF;
  --cat-border: rgba(138,90,114,.22);
  --cat-count: #8A5A72;
}
body.tech-catalog-page #data-modelling-warehouse{
  --cat-accent: #A07A28;
  --cat-accent-soft: #C4A04A;
  --cat-bg: #F3EEE3;
  --cat-border: rgba(160,122,40,.22);
  --cat-count: #A07A28;
}
body.tech-catalog-page #reporting-tools{
  --cat-accent: #B45A3C;
  --cat-accent-soft: #D07A5C;
  --cat-bg: #F3EBE6;
  --cat-border: rgba(180,90,60,.22);
  --cat-count: #B45A3C;
}
body.tech-catalog-page #ai-ml{
  --cat-accent: #6B5B8C;
  --cat-accent-soft: #8A7AA8;
  --cat-bg: #ECEAF1;
  --cat-border: rgba(107,91,140,.22);
  --cat-count: #6B5B8C;
}

body.tech-catalog-page main .cat-block{
  background: var(--cat-bg, #F4F3EF) !important;
  border-radius: 20px;
  padding: 28px 24px 32px !important;
  margin: 28px 0 !important;
  border: 1px solid var(--cat-border, rgba(23,37,43,.08)) !important;
  box-shadow: none !important;
}
body.tech-catalog-page main .cat-block::before,
body.tech-catalog-page main .cat-block::after{
  display: none !important;
}

body.tech-catalog-page .cat-head{
  border-bottom: 2px solid var(--cat-accent, #3E7D82) !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
}
body.tech-catalog-page .cat-head h2{
  color: #17252B !important;
}
body.tech-catalog-page .cat-head h2::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat-accent, #3E7D82);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-accent) 18%, transparent);
}
body.tech-catalog-page .cat-count{
  color: var(--cat-count, #3E7D82) !important;
  background: color-mix(in srgb, var(--cat-accent) 12%, #fff) !important;
  border: 1px solid var(--cat-border, rgba(23,37,43,.1)) !important;
  border-radius: 999px;
  padding: 4px 10px !important;
  font-weight: 700;
}

body.tech-catalog-page .tile-grid .tile{
  background: #fff !important;
  border: 1px solid rgba(23,37,43,.10) !important;
  border-top: 3px solid var(--cat-accent, #3E7D82) !important;
  border-radius: 16px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.tech-catalog-page .tile-grid .tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(23,37,43,.08) !important;
  border-color: var(--cat-border, rgba(23,37,43,.14)) !important;
  border-top-color: var(--cat-accent, #3E7D82) !important;
}
body.tech-catalog-page .tile .tile-cta{
  color: var(--cat-accent, #3E7D82) !important;
}

/* Inline category intro visuals inherit the next cat accent when possible */
body.tech-catalog-page .eco-visual--inline-cat + .cat-block{
  margin-top: 8px !important;
}
body.tech-catalog-page .eco-visual--inline-cat .kicker{
  color: var(--cat-accent, #3E7D82);
}

/* Pair each intro visual with its category accent via sibling */
body.tech-catalog-page .eco-visual--inline-cat:has(+ #data-engineering-tech){ --cat-accent:#1F8A8D; }
body.tech-catalog-page .eco-visual--inline-cat:has(+ #cloud-technologies){ --cat-accent:#5A6E9A; }
body.tech-catalog-page .eco-visual--inline-cat:has(+ #programming-languages){ --cat-accent:#8A5A72; }
body.tech-catalog-page .eco-visual--inline-cat:has(+ #reporting-tools){ --cat-accent:#B45A3C; }
body.tech-catalog-page .eco-visual--inline-cat:has(+ #ai-ml){ --cat-accent:#6B5B8C; }
body.tech-catalog-page .eco-visual--inline-cat:has(+ #databases){ --cat-accent:#3D7A6A; }
body.tech-catalog-page .eco-visual--inline-cat:has(+ #data-modelling-warehouse){ --cat-accent:#A07A28; }

body.tech-catalog-page .eco-visual--inline-cat .kicker{
  color: var(--cat-accent, #3E7D82) !important;
}
body.tech-catalog-page .eco-visual--inline-cat .eco-visual__media{
  border-color: color-mix(in srgb, var(--cat-accent, #3E7D82) 22%, transparent) !important;
}

@media (max-width: 700px){
  body.tech-catalog-page main .cat-block{
    padding: 20px 14px 24px !important;
    margin: 20px 0 !important;
    border-radius: 16px;
  }
}


/* =========================================================
   TECHNOLOGIES — SEARCH + FILTERS
   Practical finder. Not sticky: tall filter panel must not
   cover technology cards when categories collapse.
   ========================================================= */

.tech-search{
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 22px 24px 20px;
  background: #FFFEFA;
  border: 1px solid rgba(23,37,43,.14);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 10px 32px rgba(23,37,43,.08);
}
.tech-search__inner{
  display: grid;
  gap: 14px;
  width: 100%;
}
.tech-search__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.tech-search__label{
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3E7D82;
}
.tech-search__hint{
  margin: 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.45;
  color: #5A6569;
}
.tech-search__meta{
  margin: 0;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #17252B;
  letter-spacing: .01em;
  text-align: right;
  white-space: nowrap;
}
.tech-search__field{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.tech-search__icon{
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: #3E7D82;
  pointer-events: none;
  z-index: 1;
}
.tech-search__input{
  width: 100%;
  height: 54px;
  padding: 0 96px 0 48px;
  border: 1.5px solid rgba(62,125,130,.35);
  border-radius: 14px;
  background: #F4F3EF;
  color: #17252B;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing: border-box;
}
.tech-search__input::placeholder{ color: #7A8488; font-weight: 400; }
.tech-search__input:hover{
  border-color: rgba(62,125,130,.55);
  background: #FFFEFA;
}
.tech-search__input:focus{
  border-color: #3E7D82;
  background: #FFFEFA;
  box-shadow: 0 0 0 4px rgba(62,125,130,.16);
}
.tech-search__clear{
  position: absolute;
  right: 10px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #17252B;
  color: #FFFEFA;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
.tech-search__clear:hover{ background: #315E78; }

.tech-search__filters,
.tech-search__popular{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px 12px;
  align-items: start;
}
.tech-search__filters-label{
  padding-top: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #697174;
}
.tech-search__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tech-chip{
  appearance: none;
  border: 1px solid rgba(23,37,43,.14);
  background: #F4F3EF;
  color: #17252B;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tech-chip:hover{
  border-color: rgba(62,125,130,.45);
  background: #FFFEFA;
}
.tech-chip.is-active{
  background: #17252B;
  border-color: #17252B;
  color: #FFFEFA;
}
.tech-chip--soft{
  background: #FFFEFA;
  border-color: rgba(62,125,130,.28);
  color: #315E78;
  font-weight: 650;
}
.tech-chip--soft:hover{
  background: rgba(62,125,130,.10);
  border-color: rgba(62,125,130,.45);
  color: #17252B;
}

/* Clear gap between finder and results — prevents cards merging into the bar */
.tech-results-gap{
  height: 36px;
  width: 100%;
  pointer-events: none;
}
body.tech-catalog-page.is-tech-filtering .tech-results-gap{
  height: 44px;
}

.tech-search-empty{
  margin: 0 0 8px;
  padding: 32px 24px;
  border: 1px dashed rgba(23,37,43,.16);
  border-radius: 16px;
  background: #FFFEFA;
  text-align: center;
}
.tech-search-empty p{
  margin: 0;
  color: #4D595E;
  font-size: 14px;
  line-height: 1.55;
}
.tech-search-empty p + p{ margin-top: 8px; }
.tech-search-empty strong{ color: #17252B; }
.tech-search__reset{
  border: 0;
  background: none;
  padding: 0;
  color: #315E78;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tech-search__reset:hover{ color: #17252B; }

/* When filtering: stable category spacing (no collapse into search) */
body.tech-catalog-page.is-tech-filtering .cat-block{
  margin-top: 40px !important;
}
body.tech-catalog-page.is-tech-filtering .cat-block.tech-cat-first-visible{
  margin-top: 0 !important;
}
body.tech-catalog-page .cat-block{
  scroll-margin-top: 120px;
}

/* Hidden tiles/blocks must leave no residual grid space */
body.tech-catalog-page .cat-block .tile[hidden],
body.tech-catalog-page .cat-block[hidden],
body.tech-catalog-page .eco-visual--inline-cat[hidden],
body.tech-catalog-page .tech-search-empty[hidden]{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 900px){
  .tech-search{
    margin-top: 0;
    padding: 16px 14px 14px;
    border-radius: 16px;
  }
  .tech-search__top{
    flex-direction: column;
    gap: 6px;
  }
  .tech-search__meta{
    text-align: left;
    white-space: normal;
  }
  .tech-search__filters,
  .tech-search__popular{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tech-search__filters-label{ padding-top: 0; }
  .tech-search__input{ height: 52px; font-size: 16px; }
  .tech-chip{ padding: 9px 12px; }
  .tech-results-gap{ height: 28px; }
  body.tech-catalog-page.is-tech-filtering .tech-results-gap{ height: 32px; }
}