/*
 Theme Name:   IDH Solutions – Elementor Child
 Theme URI:    https://idhsolutions.com
 Description:  Elementor child theme for IDH Solutions. Parent: Hello Elementor.
 Author:       IDH Solutions
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  idh-child
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  --teal:  #0D6B6E;
  --tmd:   #12868A;
  --tlt:   #E8F5F5;
  --tdk:   #095456;
  --grn:   #3CC47C;
  --glt:   #E8F9F1;
  --ink:   #1A2B2B;
  --mut:   #4A6060;
  --mlt:   #8AABAB;
  --brd:   #D0E4E4;
  --crm:   #F5F9F8;
  --wht:   #FFFFFF;
  --nh:    75px;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Nunito Sans", sans-serif;
  background: var(--wht);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { font-size: clamp(1.9rem,4vw,3.2rem); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(1.5rem,2.6vw,2.1rem); font-weight: 800; line-height: 1.2; }
h3 { font-size: 1rem; font-weight: 700; }
p  { line-height: 1.75; color: var(--mut); font-size: .97rem; }
a  { color: inherit; text-decoration: none; }

.idh-lbl {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grn);
  display: block;
  margin-bottom: .55rem;
}
.idh-bar {
  width: 32px;
  height: 3px;
  background: var(--grn);
  border-radius: 2px;
  margin: 1rem 0 1.3rem;
}

/* ============================================================
   SCROLL REVEAL  (.idh-rev added by JS)
   ============================================================ */
.idh-rev {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.idh-rev.on { opacity: 1; transform: none; }
.idh-rev.d1 { transition-delay: .08s; }
.idh-rev.d2 { transition-delay: .16s; }
.idh-rev.d3 { transition-delay: .24s; }

/* ============================================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================================ */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1200px; }
.e-con-inner { max-width: 1200px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.idh-btn-primary {
  background: var(--teal);
  color: white !important;
  padding: 12px 26px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
  display: inline-block;
  border: none;
  cursor: pointer;
}
.idh-btn-primary:hover {
  background: var(--tmd);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13,107,110,.28);
}
.idh-btn-outline {
  border: 2px solid var(--teal);
  color: var(--teal) !important;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
  display: inline-block;
  background: transparent;
  cursor: pointer;
}
.idh-btn-outline:hover { background: var(--teal); color: white !important; }
.idh-btn-white {
  background: white;
  color: var(--teal) !important;
  padding: 12px 26px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 800;
  transition: all .2s;
  display: inline-block;
}
.idh-btn-white:hover { background: var(--glt); transform: translateY(-2px); }
.idh-btn-outline-white {
  border: 2px solid rgba(255,255,255,.45);
  color: white !important;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
  display: inline-block;
}
.idh-btn-outline-white:hover { border-color: white; background: rgba(255,255,255,.1); }

/* ============================================================
   SECTION 1 — HERO SLIDER
   ============================================================ */
#idh-hero {
  min-height: 100vh;
  background: #071e1e;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nh);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.1);
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}
.hero-slide.active {
  opacity: 1;
  animation: idh-zoomout 7s ease-out forwards;
}
@keyframes idh-zoomout {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1.0); }
}
.hero-slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,rgba(7,30,30,.85) 0%,rgba(7,30,30,.62) 50%,rgba(7,30,30,.38) 100%);
  pointer-events: none;
}
.hero-progress-track {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,.12); z-index: 4;
}
.hero-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(to right, var(--teal), var(--grn));
  border-radius: 0 2px 2px 0;
}
.hero-slide-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; gap: 8px; align-items: center;
}
.hsd {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35); border: none; padding: 0;
  cursor: pointer; transition: background .3s, width .3s, border-radius .3s;
}
.hsd--on { background: var(--grn); width: 22px; border-radius: 4px; }
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: 80px 5% 100px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.hero-left { display: flex; flex-direction: column; gap: 0; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(60,196,124,.12); border: 1px solid rgba(60,196,124,.3);
  color: var(--grn); padding: 6px 14px; border-radius: 100px;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1.5rem; width: fit-content;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grn); flex-shrink: 0;
  animation: idh-pulse 2.2s ease-in-out infinite;
}
@keyframes idh-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(60,196,124,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(60,196,124,0); }
}
.hero-title {
  font-size: clamp(2rem,3.6vw,3rem); font-weight: 900; color: white;
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.3rem;
}
.hero-title em { font-style: normal; color: var(--grn); }
.hero-mission-tag {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid rgba(255,255,255,.15); border-radius: 7px;
  padding: 7px 14px; font-size: .8rem; color: rgba(255,255,255,.65);
  font-weight: 600; margin-bottom: 1.4rem; width: fit-content;
  background: rgba(255,255,255,.04);
}
.hero-mission-tag svg {
  width: 13px; height: 13px;
  stroke: var(--grn); fill: none; stroke-width: 2; flex-shrink: 0;
}
.hero-sub {
  font-size: .97rem; color: rgba(255,255,255,.6);
  line-height: 1.78; margin-bottom: 1.8rem; max-width: 480px;
}
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }

/* ============================================================
   SECTION 2 — STATS BAR
   ============================================================ */
#idh-stats { background: var(--teal); padding: 0; }
.idh-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); max-width: 100%; }
.idh-stat {
  position: relative; padding: 3rem 2rem; text-align: center;
  cursor: default; overflow: hidden; transition: background .25s;
  border-right: 1px solid rgba(255,255,255,.1);
}
.idh-stat:last-child { border-right: none; }
.idh-stat::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,.06); opacity: 0; transition: opacity .25s;
}
.idh-stat:hover::before { opacity: 1; }
.idh-stat::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right,rgba(60,196,124,0),var(--grn),rgba(60,196,124,0));
  opacity: 0; transition: opacity .25s;
}
.idh-stat:hover::after { opacity: 1; }
.idh-stat-num {
  font-size: 3rem; font-weight: 900; color: var(--grn);
  display: block; line-height: 1; margin-bottom: .4rem; letter-spacing: -.02em;
}
.idh-stat-label { font-size: .88rem; font-weight: 700; color: white; display: block; margin-bottom: .25rem; }
.idh-stat-sub   { font-size: .72rem; color: rgba(255,255,255,.5); display: block; }
.idh-stat-tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: white; font-size: .74rem; font-weight: 600;
  line-height: 1.5; padding: .6rem .9rem; border-radius: 8px;
  white-space: normal; max-width: 200px; text-align: center;
  pointer-events: none; opacity: 0; transition: opacity .18s,transform .18s; z-index: 10;
}
.idh-stat-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink);
}
.idh-stat:hover .idh-stat-tip,
.idh-stat:focus .idh-stat-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   SECTION 3 — WHO WE ARE
   ============================================================ */
#idh-about { background: var(--crm); padding: 88px 5%; }
.idh-about-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 5rem; align-items: start; max-width: 1160px; margin: 0 auto; }
.idh-about-left { position: sticky; top: calc(var(--nh) + 2rem); }
.idh-about-quote {
  position: relative; margin: 1.5rem 0 1.75rem; padding: 1.5rem 1.75rem;
  background: white; border-radius: 14px; border-left: 4px solid var(--teal);
  box-shadow: 0 4px 20px rgba(13,107,110,.08);
}
.idh-aq-mark { font-size: 4rem; line-height: .8; color: var(--teal); font-family: Georgia,serif; display: block; margin-bottom: .25rem; opacity: .35; }
.idh-aq-text { font-size: 1.75rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.idh-about-body { font-size: .97rem; line-height: 1.78; color: var(--mut); margin-bottom: 1.75rem; }
.idh-kpi-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.idh-kpi {
  flex: 1; min-width: 80px; background: white; border: 1px solid var(--brd);
  border-radius: 10px; padding: .85rem .75rem; text-align: center;
}
.idh-kpi-n { display: block; font-size: 1.4rem; font-weight: 900; color: var(--teal); line-height: 1; }
.idh-kpi-l { display: block; font-size: .65rem; color: var(--mut); margin-top: 3px; line-height: 1.3; }
.idh-feat-list { display: flex; flex-direction: column; gap: 0; }
.idh-feat-row {
  padding: 1.6rem 1rem; border-bottom: 1px solid var(--brd);
  border-radius: 10px; transition: background .2s, box-shadow .2s;
}
.idh-feat-row:first-child { border-top: 1px solid var(--brd); }
.idh-feat-row:hover { background: rgba(13,107,110,.04); box-shadow: 0 4px 18px rgba(13,107,110,.09); }
.idh-feat-row h3 { font-size: .97rem; font-weight: 800; color: var(--ink); margin-bottom: .3rem; }
.idh-feat-row p  { font-size: .97rem; line-height: 1.75; color: var(--mut); }

/* ============================================================
   SECTION 4 — OUR APPROACH
   ============================================================ */
#idh-approach { background: var(--wht); padding: 88px 5%; }
.idh-approach-hdr { margin-bottom: 2.5rem; }
.idh-section-label { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.idh-sl-badge {
  width: 32px; height: 32px; border-radius: 50%; background: var(--teal);
  color: white; font-size: .72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.idh-section-label span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--teal); }
.idh-principles { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin-bottom: 1rem; }
.idh-ap-card {
  background: white; border: 1px solid var(--brd); border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem; position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .22s;
}
.idh-ap-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(13,107,110,.1); }
.idh-ap-card::before { content: ""; position: absolute; inset: 0; background: var(--apc-lt,#E8F5F5); z-index: 0; }
.idh-ap-card > * { position: relative; z-index: 1; }
.idh-ap-num { font-size: .6rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--mlt); margin-bottom: .6rem; display: block; }
.idh-ap-icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--apc,var(--teal));
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.14); transition: transform .2s;
}
.idh-ap-card:hover .idh-ap-icon { transform: scale(1.08) rotate(-3deg); }
.idh-ap-icon svg { width: 24px; height: 24px; stroke: white; fill: none; stroke-width: 1.8; }
.idh-ap-card h3 { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.idh-ap-card p  { font-size: .97rem; line-height: 1.75; color: var(--mut); }
.idh-ap-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--apc,var(--teal)); }
.idh-pipeline { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--brd); border-radius: 16px; overflow: hidden; }
.idh-ps {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2rem 1.6rem; position: relative; border-right: 1px solid var(--brd);
  transition: filter .2s;
}
.idh-ps:last-child { border-right: none; }
.idh-ps:hover { filter: brightness(.97); }
.idh-ps:nth-child(1) { background: rgba(13,107,110,.06); }
.idh-ps:nth-child(2) { background: rgba(9,84,86,.06); }
.idh-ps:nth-child(3) { background: rgba(26,107,68,.06); }
.idh-ps:nth-child(4) { background: rgba(60,196,124,.07); }
.idh-ps-node {
  width: 52px; height: 52px; border-radius: 50%; background: var(--psn,var(--teal));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); margin-bottom: .85rem; transition: transform .2s;
}
.idh-ps:hover .idh-ps-node { transform: scale(1.1); }
.idh-ps-node svg { width: 22px; height: 22px; stroke: white; fill: none; stroke-width: 1.8; }
.idh-ps-conn {
  position: absolute; top: 50%; right: -14px; transform: translateY(-50%); z-index: 2;
  background: white; border: 1px solid var(--brd); border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.idh-ps-conn span { font-size: .85rem; color: var(--teal); font-weight: 900; line-height: 1; }
.idh-ps-num { display: block; font-size: .6rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--mlt); margin-bottom: .3rem; }
.idh-ps h3 { font-size: .93rem; font-weight: 800; color: var(--ink); margin-bottom: .35rem; }
.idh-ps p  { font-size: .97rem; line-height: 1.75; color: var(--mut); }

/* ============================================================
   SECTION 5 — SERVICES
   ============================================================ */
#idh-services { background: var(--crm); padding: 88px 5%; }
.idh-sv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.idh-svc {
  border: 1px solid var(--brd); border-radius: 12px; overflow: hidden;
  background: white; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.idh-svc:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(13,107,110,.1); }
.idh-svhd { background: var(--teal); padding: 1.5rem 1.65rem 1.4rem; }
.idh-svhd.alt { background: var(--tdk); }
.idh-svic {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: flex; align-items: center;
  justify-content: center; margin-bottom: .85rem;
}
.idh-svic svg { width: 21px; height: 21px; stroke: white; fill: none; stroke-width: 1.8; }
.idh-svhd h3 { color: white; font-size: 1rem; }
.idh-svbd { padding: 1.5rem 1.65rem; flex: 1; display: flex; flex-direction: column; }
.idh-svbd p { font-size: .97rem; line-height: 1.75; color: var(--mut); margin-bottom: 1rem; }
.idh-svul { list-style: none; flex: 1; }
.idh-svul li { font-size: .97rem; color: var(--mut); padding: 3px 0 3px 1rem; position: relative; line-height: 1.5; }
.idh-svul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--grn); }

/* ============================================================
   SECTION 6 — EXPERIENCE (BENTO GRID)
   ============================================================ */
#idh-experience { background: var(--wht); overflow: hidden; padding: 88px 5%; }
.idh-bento { display: grid; grid-template-columns: repeat(6,1fr); grid-template-rows: auto auto; gap: 1.2rem; }
.idh-bento-half  { grid-column: span 3; }
.idh-bento-third { grid-column: span 2; }
.idh-bc {
  border-radius: 16px; overflow: hidden; position: relative;
  min-height: 340px; display: flex; flex-direction: column;
  cursor: default; transition: transform .22s, box-shadow .22s;
}
.idh-bc:hover { transform: translateY(-5px); box-shadow: 0 20px 56px rgba(0,0,0,.22); }
.idh-bc-bg { position: absolute; inset: 0; background: var(--bc,linear-gradient(145deg,var(--tdk),var(--teal))); z-index: 0; }
.idh-bc-photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; opacity: .15; transition: opacity .25s, transform .45s; }
.idh-bc:hover .idh-bc-photo { opacity: .25; transform: scale(1.04); }
.idh-bc::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 22px 22px; z-index: 2; pointer-events: none; }
.idh-bc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%); z-index: 2; }
.idh-bc-body { position: relative; z-index: 3; padding: 1.75rem 1.85rem; display: flex; flex-direction: column; flex: 1; gap: .6rem; justify-content: flex-end; }
.idh-bc-tag { display: inline-block; background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; width: fit-content; }
.idh-bc-body h3 { font-size: 1.1rem; font-weight: 800; color: white; line-height: 1.25; }
.idh-bento-half .idh-bc-body h3 { font-size: 1.25rem; }
.idh-bc-body p { font-size: .97rem; line-height: 1.75; color: rgba(255,255,255,.72); max-width: 480px; }
.idh-bc-stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.idh-bc-stats > div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; padding: .4rem .7rem; text-align: center; flex: 1; min-width: 64px; }
.idh-bcsn { display: block; font-size: .95rem; font-weight: 900; color: var(--grn); line-height: 1; }
.idh-bcsl { display: block; font-size: .6rem; color: rgba(255,255,255,.55); margin-top: 2px; }
.idh-bc-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px; padding: 8px 14px;
  font-family: "Nunito Sans",sans-serif; font-size: .8rem; font-weight: 700;
  color: white; cursor: pointer; transition: background .2s; width: fit-content; margin-top: .25rem;
}
.idh-bc-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.idh-bc-btn svg { width: 14px; height: 14px; stroke: white; fill: none; stroke-width: 2.5; }

/* Case Study Modals */
.idh-overlay { display: none; position: fixed; inset: 0; background: rgba(10,35,35,.65); backdrop-filter: blur(6px); z-index: 9000; }
.idh-overlay.open { display: block; }
.idh-modal { display: none; position: fixed; inset: 0; z-index: 9001; align-items: center; justify-content: center; padding: 5vh 5vw; overflow-y: auto; }
.idh-modal.open { display: flex; }
.idh-modal-box { background: white; border-radius: 16px; width: 100%; max-width: 720px; box-shadow: 0 24px 72px rgba(0,0,0,.25); overflow: hidden; position: relative; margin: auto; animation: idh-modalIn .28s cubic-bezier(.4,0,.2,1); }
@keyframes idh-modalIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
.idh-modal-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; transition: all .2s; }
.idh-modal-close:hover { background: rgba(0,0,0,.5); border-color: white; }
.idh-modal-img { width: 100%; aspect-ratio: 21/7; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.idh-modal-img-ov { position: absolute; inset: 0; z-index: 1; }
.idh-modal-img-title { position: relative; z-index: 2; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 800; color: white; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.idh-modal-content { padding: 1.75rem 2rem 2rem; }
.idh-modal-content h3 { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: .6rem 0 .75rem; line-height: 1.25; }
.idh-modal-content > p { font-size: .97rem; line-height: 1.75; color: var(--mut); margin-bottom: 1.1rem; }
.idh-modal-content h4 { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; color: var(--teal); margin: 1.1rem 0 .5rem; }
.idh-modal-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: .75rem; background: var(--crm); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.idh-modal-stats > div { text-align: center; }
.idh-msn { display: block; font-size: 1.4rem; font-weight: 900; color: var(--teal); line-height: 1; }
.idh-msl { display: block; font-size: .68rem; color: var(--mlt); margin-top: 3px; }
.idh-cs-tag { display: inline-block; background: var(--tlt); color: var(--teal); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; }
.idh-sl-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.idh-sl-tag { background: var(--tlt); color: var(--teal); font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.idh-sl-cl { display: flex; align-items: center; gap: 8px; padding-top: 1rem; border-top: 1px solid var(--brd); margin-top: 1rem; }
.idh-sl-cld { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 900; color: white; flex-shrink: 0; }
.idh-sl-cln { font-size: .8rem; font-weight: 700; color: var(--ink); }
.idh-sl-clt { font-size: .7rem; color: var(--mlt); }

/* ============================================================
   SECTION 7 — OUR TEAM
   ============================================================ */
#idh-team { background: var(--crm); padding: 88px 5%; }
.idh-team-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1.5rem; justify-items: center; }
.idh-team-card {
  background: white; border: 1px solid var(--brd); border-radius: 14px;
  overflow: hidden; width: 100%; max-width: 260px;
  transition: transform .22s, box-shadow .22s;
}
.idh-team-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(13,107,110,.12); }
.idh-team-photo { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--tlt); }
.idh-team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .4s; }
.idh-team-card:hover .idh-team-photo img { transform: scale(1.05); }
.idh-team-photo-ov { position: absolute; inset: 0; background: linear-gradient(to bottom,transparent 55%,rgba(9,84,86,.6) 100%); opacity: 0; transition: opacity .3s; }
.idh-team-card:hover .idh-team-photo-ov { opacity: 1; }
.idh-team-info { padding: 1.1rem 1.2rem 1.25rem; }
.idh-team-name { font-size: .97rem; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.idh-team-role { font-size: .76rem; color: var(--teal); font-weight: 600; margin-bottom: .7rem; }
.idh-team-bio  { font-size: .97rem; line-height: 1.75; color: var(--mut); margin-bottom: .65rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idh-team-email { display: inline-flex; align-items: center; gap: 5px; color: var(--mut); font-size: .74rem; font-weight: 600; text-decoration: none; transition: color .2s; word-break: break-all; }
.idh-team-email:hover { color: var(--teal); }
.idh-team-email svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ============================================================
   SECTION 8 — CLIENTS / PARTNERS
   ============================================================ */
#idh-clients { background: var(--wht); padding: 78px 5%; }
.idh-partner-group { margin-bottom: 1.8rem; }
.idh-partner-group:last-child { margin-bottom: 0; }
.idh-pg-label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--mlt); margin-bottom: .85rem; padding-bottom: .4rem; border-bottom: 1px solid var(--brd); }
.idh-marquee { overflow: hidden; position: relative; }
.idh-marquee::before, .idh-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.idh-marquee::before { left: 0; background: linear-gradient(to right,var(--wht),transparent); }
.idh-marquee::after  { right: 0; background: linear-gradient(to left,var(--wht),transparent); }
.idh-marquee-inner { display: flex; gap: .75rem; width: max-content; animation: idh-ltr 32s linear infinite; }
.idh-marquee-inner.rtl { animation: idh-rtl 32s linear infinite; }
.idh-marquee:hover .idh-marquee-inner { animation-play-state: paused; }
@keyframes idh-ltr { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes idh-rtl { from{transform:translateX(-50%)} to{transform:translateX(0)} }
.idh-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: .85rem .9rem .75rem; border: 1px solid var(--brd); border-radius: 10px;
  background: white; text-align: center; min-width: 110px; flex-shrink: 0;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.idh-logo:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13,107,110,.08); }
.idh-logo img  { width: 64px; height: 32px; object-fit: contain; display: block; }
.idh-logo span { font-size: .72rem; font-weight: 700; color: var(--mut); line-height: 1.3; }

/* ============================================================
   SECTION 9 — CTA BANNER
   ============================================================ */
#idh-cta { background: var(--teal); padding: 84px 5%; }
.idh-cta-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.idh-cta-inner h2 { color: white; margin-bottom: 1rem; }
.idh-cta-inner p  { color: rgba(255,255,255,.7); font-size: .97rem; margin-bottom: 2.4rem; }
.idh-cta-btns { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   SECTION 10 — CONTACT
   ============================================================ */
#idh-contact { background: var(--crm); padding: 88px 5%; }
.idh-contact-grid { max-width: 1160px; margin: 0 auto; }
.idh-contact-persons { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 1.6rem; }
.idh-cpc { background: white; border: 1px solid var(--brd); border-radius: 10px; padding: 1.2rem 1.35rem; flex: 1; min-width: 200px; }
.idh-cpn { font-weight: 800; color: var(--ink); font-size: .92rem; margin-bottom: 2px; }
.idh-cpr { font-size: .78rem; color: var(--mlt); margin-bottom: .65rem; }
.idh-cplk { display: flex; align-items: center; gap: 5px; color: var(--teal); font-size: .81rem; font-weight: 700; margin-top: 4px; transition: color .2s; cursor: pointer; }
.idh-cplk:hover { color: var(--grn); }
.idh-cplk svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ============================================================
   ELEMENTOR SECTION ID HELPERS
   ============================================================ */
.elementor-section[data-id] > .elementor-container { width: 100%; max-width: 1200px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .idh-sv-grid     { grid-template-columns: repeat(2,1fr); }
  .idh-bento-half  { grid-column: span 3; }
  .idh-bento-third { grid-column: span 2; }
  .idh-principles  { grid-template-columns: repeat(2,1fr); }
  .idh-pipeline    { grid-template-columns: repeat(2,1fr); }
  .idh-ps:nth-child(2) { border-right: none; }
  .idh-ps:nth-child(1),
  .idh-ps:nth-child(2) { border-bottom: 1px solid var(--brd); }
  .idh-ps-conn { display: none; }
}
@media (max-width: 900px) {
  .hero-inner       { grid-template-columns: 1fr; padding: 60px 5% 80px; }
  .hero-left        { text-align: center; align-items: center; }
  .hero-sub         { max-width: 100%; }
  .hero-actions     { justify-content: center; }
  .idh-stats-grid   { grid-template-columns: repeat(2,1fr); }
  .idh-stat         { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .idh-stat-num     { font-size: 2.4rem; }
  .idh-stat-tip     { display: none; }
  .idh-about-wrap   { grid-template-columns: 1fr; gap: 2.5rem; }
  .idh-about-left   { position: static; }
  .idh-sv-grid      { grid-template-columns: 1fr; }
  .idh-bento        { grid-template-columns: 1fr; }
  .idh-bento-half,
  .idh-bento-third  { grid-column: span 1; }
  .idh-team-grid    { grid-template-columns: repeat(2,1fr); }
  .idh-contact-persons { flex-direction: column; }
  .idh-cpc          { width: 100%; }
  .idh-modal        { padding: 3vh 4vw; }
  .idh-modal-content { padding: 1.25rem 1.25rem 1.5rem; }
}
@media (max-width: 600px) {
  .hero-title       { font-size: clamp(1.8rem,8vw,2.4rem); }
  .idh-stats-grid   { grid-template-columns: 1fr; }
  .idh-principles   { grid-template-columns: 1fr; }
  .idh-pipeline     { grid-template-columns: 1fr; }
  .idh-ps           { border-right: none; border-bottom: 1px solid var(--brd); }
  .idh-ps-conn      { display: none; }
}
@media (max-width: 420px) {
  .idh-team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FONT FALLBACK — @import as safety net
   Primary load is via <link> in header.php with preconnect.
   This @import ensures the font loads even if header.php
   is bypassed (e.g. Elementor editor iframe, caching plugins).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;1,6..12,700&display=swap');

/* Force Nunito Sans — but protect Elementor icon fonts */
body,
body p, body h1, body h2, body h3, body h4, body h5, body h6,
body a, body li, body td, body label, body input, body button, body select,
.elementor-widget-container p,
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3 {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* Never override icon fonts */
[class*="eicon"], i[class*="eicon"],
[class*="elementor-icon"],
[class*="fa-"], i[class*="fa"],
.e-font-icon-svg {
  font-family: eicons !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nh, 75px);
  background: var(--wht, #fff);
  border-bottom: 1px solid var(--brd, #D0E4E4);
  display: flex;
  align-items: center;
  padding: 0 5%;
  justify-content: space-between;
  transition: box-shadow .3s;
  font-family: "Nunito Sans", sans-serif;
}
#nav.sc { box-shadow: 0 2px 14px rgba(13,107,110,.09); }

#nav img { display: block; }

.nlinks {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.nlinks a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--mut, #4A6060);
  transition: color .2s;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
}
.nlinks a:hover { color: var(--teal, #0D6B6E); }

.ncta {
  background: var(--teal, #0D6B6E) !important;
  color: white !important;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: .83rem !important;
  font-weight: 700 !important;
  transition: all .2s;
}
.ncta:hover {
  background: var(--tmd, #12868A) !important;
  transform: translateY(-1px);
  color: white !important;
}

/* Mobile hamburger */
.nav-mob-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-mob-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink, #1A2B2B);
  border-radius: 2px;
  transition: all .3s;
}
.nav-mob-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mob-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mob-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-mob-drawer {
  display: none;
  position: fixed;
  top: var(--nh, 75px);
  left: 0; right: 0;
  background: white;
  border-bottom: 2px solid var(--brd, #D0E4E4);
  flex-direction: column;
  padding: 1.2rem 5% 1.5rem;
  gap: .1rem;
  z-index: 199;
  box-shadow: 0 8px 24px rgba(13,107,110,.08);
}
.nav-mob-drawer.open { display: flex; }
.nav-mob-drawer a {
  font-size: .95rem;
  font-weight: 600;
  color: var(--mut, #4A6060);
  padding: .65rem 0;
  border-bottom: 1px solid var(--brd, #D0E4E4);
  text-decoration: none;
  transition: color .2s;
}
.nav-mob-drawer a:last-child { border-bottom: none; }
.nav-mob-drawer a:hover { color: var(--teal, #0D6B6E); }
.nav-mob-drawer .ncta {
  text-align: center;
  border-radius: 6px;
  padding: .75rem !important;
  border-bottom: none !important;
}

@media (max-width: 768px) {
  .nlinks { display: none; }
  .nav-mob-toggle { display: flex; }
}

/* ============================================================
   FOOTER
   ============================================================ */
#idh-footer {
  background: var(--ink, #1A2B2B);
  padding: 52px 5% 26px;
  font-family: "Nunito Sans", sans-serif;
}
.fin { max-width: 1160px; margin: 0 auto; }

.ftop {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.75rem;
  margin-bottom: 2.5rem;
}
.ftg {
  font-size: .8rem;
  color: rgba(255,255,255,.38);
  max-width: 220px;
  line-height: 1.65;
  margin-top: .7rem;
  font-family: "Nunito Sans", sans-serif;
}
.fc h4 {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-bottom: 1rem;
  font-family: "Nunito Sans", sans-serif;
}
.fc a {
  display: block;
  font-size: .8rem;
  color: rgba(255,255,255,.52);
  padding: 3px 0;
  transition: color .2s;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
}
.fc a:hover { color: var(--grn, #3CC47C); }

.fbot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
}
.fbot p {
  font-size: .74rem;
  color: rgba(255,255,255,.28);
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.6;
}
.fbot p a {
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s;
}
.fbot p a:hover { color: var(--grn, #3CC47C); }
.soc { display: flex; gap: 9px; }
.soc a {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: .7rem; font-weight: 800;
  transition: all .2s;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
}
.soc a:hover { border-color: var(--grn, #3CC47C); color: var(--grn, #3CC47C); }

/* Page top padding so hero doesn't hide behind fixed nav */
.elementor-page { padding-top: 0 !important; }
body.idh-site { padding-top: 0; }

/* Footer responsive */
@media (max-width: 900px) {
  .ftop { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .ftop { grid-template-columns: 1fr; }
  .fbot { flex-direction: column; align-items: flex-start; gap: .5rem; }
}