/*
  Theme Name: IDH Solutions Theme v2
  Version: 5.3 — Unified paragraph font size
*/

/* ============================================================
   RESET & ROOT
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

: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;
}
html { scroll-behavior: smooth; }
body { font-family: "Nunito Sans", sans-serif; background: var(--wht); color: var(--ink); line-height: 1.6; overflow-x: hidden; }

/* ============================================================
   BASE 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; }
.lbl { font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--grn); display: block; margin-bottom: .55rem; }
.bar { width: 32px; height: 3px; background: var(--grn); border-radius: 2px; margin: 1rem 0 1.3rem; }
section { padding: 88px 5%; }
.inner  { max-width: 1160px; margin: 0 auto; }

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

/* ============================================================
   BUTTONS
   ============================================================ */
.bp  { background: var(--teal); color: white; padding: 12px 26px; border-radius: 6px; font-size: .9rem; font-weight: 700; transition: all .2s; display: inline-block; }
.bp:hover { background: var(--tmd); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,107,110,.28); }
.bo  { border: 2px solid var(--teal); color: var(--teal); padding: 10px 24px; border-radius: 6px; font-size: .9rem; font-weight: 700; transition: all .2s; display: inline-block; }
.bo:hover { background: var(--teal); color: white; }
.bo-white { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.85); }
.bo-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.65); color: white; }
.bw  { background: white; color: var(--teal); padding: 12px 26px; border-radius: 6px; font-size: .9rem; font-weight: 800; transition: all .2s; display: inline-block; }
.bw:hover { background: var(--glt); transform: translateY(-2px); }
.bwo { border: 2px solid rgba(255,255,255,.45); color: white; padding: 10px 24px; border-radius: 6px; font-size: .9rem; font-weight: 700; transition: all .2s; display: inline-block; }
.bwo:hover { border-color: white; background: rgba(255,255,255,.1); }

/* ============================================================
   NAV
   ============================================================ */
nav { position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nh); background:var(--wht); border-bottom:1px solid var(--brd); display:flex; align-items:center; padding:0 5%; justify-content:space-between; transition:box-shadow .3s; }
nav.sc { box-shadow:0 2px 14px rgba(13,107,110,.09); }
.nlinks { display:flex; gap:1.5rem; align-items:center; }
.nlinks a { font-size:.85rem; font-weight:600; color:var(--mut); transition:color .2s; }
.nlinks a:hover { color:var(--teal); }
.ncta { background:var(--teal)!important; color:white!important; padding:8px 20px; border-radius:6px; font-size:.83rem; font-weight:700; transition:all .2s; }
.ncta:hover { background:var(--tmd)!important; transform:translateY(-1px); }

/* ============================================================
   HERO — Option C: Floating tilted image card
   ============================================================ */
#hero {
  min-height: 100vh;
  padding-top: var(--nh);
  background: #071e1e;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero-bg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none; z-index: 0;
}
.hero-bg-glow {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0; filter: blur(80px);
}
.hero-bg-glow--1 { width:500px; height:500px; top:-120px; left:-80px; background:rgba(13,107,110,0.35); }
.hero-bg-glow--2 { width:400px; height:400px; bottom:-80px; right:10%; background:rgba(60,196,124,0.12); }

.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,0.12);
  border: 1px solid rgba(60,196,124,0.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: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(60,196,124,0.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,0.15); border-radius: 7px;
  padding: 7px 14px; font-size: .8rem; color: rgba(255,255,255,0.65);
  font-weight: 600; margin-bottom: 1.4rem; width: fit-content;
  background: rgba(255,255,255,0.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,0.6);
  line-height: 1.78; margin-bottom: 1.8rem; max-width: 480px;
}

.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 2.2rem; }

.hero-mini-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; overflow: hidden; width: fit-content;
}
.hms-item { padding: .8rem 1.1rem; text-align: center; }
.hms-n { display:block; font-size:1.25rem; font-weight:900; color:var(--grn); line-height:1; margin-bottom:3px; }
.hms-l { display:block; font-size:.6rem; color:rgba(255,255,255,0.45); font-weight:600; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.hms-icon { display: block; width: 22px; height: 22px; margin: 0 auto 5px; }
.hms-icon svg { width: 100%; height: 100%; stroke: var(--grn); fill: none; stroke-width: 2; }
.hb-num--sm { font-size: .72rem; font-weight: 800; letter-spacing: .01em; }
.hms-divider { width:1px; height:36px; background:rgba(255,255,255,0.1); flex-shrink:0; }

.hero-right {
  position: relative; display: flex;
  align-items: center; justify-content: center;
  padding: 3rem 2rem;
}

.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(60,196,124,0.12);
  pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.hero-ring--outer { width:480px; height:480px; }
.hero-ring--inner { width:340px; height:340px; border-color:rgba(60,196,124,0.08); }

.hero-img-card {
  position: relative; width: 88%; max-width: 420px;
  border-radius: 18px; overflow: hidden;
  transform: rotate(3deg);
  box-shadow: 12px 16px 0 rgba(60,196,124,0.15), 24px 32px 0 rgba(60,196,124,0.07), 0 40px 80px rgba(0,0,0,0.55);
  border: 2px solid rgba(60,196,124,0.25);
  transition: transform .4s ease, box-shadow .4s ease;
  z-index: 2;
}
.hero-img-card:hover {
  box-shadow: 14px 20px 0 rgba(60,196,124,0.18), 28px 38px 0 rgba(60,196,124,0.08), 0 52px 90px rgba(0,0,0,0.6);
}
.hero-img-card img {
  width: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
  filter: brightness(0.92) saturate(1.1);
}
.hero-img-bar {
  position: absolute; bottom:0; left:0; right:0; height:4px;
  background: linear-gradient(to right, var(--teal), var(--grn));
}

.hero-badge {
  position: absolute; background: white; border-radius: 12px;
  padding: .7rem 1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  z-index: 4; display: flex; align-items: center; gap: 8px;
  animation: badge-float 3.5s ease-in-out infinite;
}
.hero-badge--tl { top:10%; left:-2%; animation-delay:0s; }
.hero-badge--br { bottom:12%; right:-4%; animation-delay:.8s; }
.hero-badge--bl { bottom:30%; left:-6%; animation-delay:1.6s; }
@keyframes badge-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}
.hb-icon { width:32px; height:32px; border-radius:8px; background:var(--tlt); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hb-icon svg { width:15px; height:15px; stroke:var(--teal); fill:none; stroke-width:2; }
.hb-icon--grn { background:var(--glt); }
.hb-icon--grn svg { stroke:var(--grn); }
.hb-icon--dk { background:#e8eeff; }
.hb-icon--dk svg { stroke:#3A2A7A; }
.hero-badge .hb-num { display:block; font-size:1.1rem; font-weight:900; color:var(--ink); line-height:1; }
.hero-badge .hb-lbl { display:block; font-size:.6rem; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; white-space:nowrap; }

.hero-scroll-cue {
  position: absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
}
.hero-scroll-cue span { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,0.3); }
.hero-scroll-arrow { width:32px; height:32px; border:1.5px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; animation:bounce-arrow 2s ease-in-out infinite; }
.hero-scroll-arrow svg { width:14px; height:14px; stroke:rgba(255,255,255,0.45); fill:none; stroke-width:2; }
@keyframes bounce-arrow { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }

/* ============================================================
   STATS BAR
   ============================================================ */
#stats { background:var(--teal); padding:0; }
.ss-grid { display:grid; grid-template-columns:repeat(4,1fr); max-width:100%; }
.ssb { position:relative; padding:3rem 2rem; text-align:center; cursor:default; overflow:hidden; transition:background .25s; border-right:1px solid rgba(255,255,255,0.1); }
.ssb:last-child { border-right:none; }
.ssb::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,0.06); opacity:0; transition:opacity .25s; }
.ssb:hover::before { opacity:1; }
.ssb::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; }
.ssb:hover::after { opacity:1; }
.ssb-inner { position:relative; z-index:1; }
.ssb-n { font-size:3rem; font-weight:900; color:var(--grn); display:block; line-height:1; margin-bottom:.4rem; letter-spacing:-.02em; }
.ssb-l { font-size:.88rem; font-weight:700; color:white; display:block; margin-bottom:.25rem; }
.ssb-sub { font-size:.72rem; color:rgba(255,255,255,.5); display:block; }
.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; }
.stat-tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ink); }
.ssb:hover .stat-tip,.ssb:focus .stat-tip { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   WHO WE ARE
   ============================================================ */
#about { background:var(--crm); padding:88px 5%; }
.about-wrap { display:grid; grid-template-columns:380px 1fr; gap:5rem; align-items:start; max-width:1160px; margin:0 auto; }
.about-left { position:sticky; top:calc(var(--nh) + 2rem); }
.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,0.08); }
.aq-mark { font-size:4rem; line-height:.8; color:var(--teal); font-family:Georgia,serif; display:block; margin-bottom:.25rem; opacity:.35; }
.aq-text { font-size:1.75rem; font-weight:700; color:var(--ink); line-height:1.15; }
.about-body { font-size:.97rem; line-height:1.78; color:var(--mut); margin-bottom:1.75rem; }
.about-kpi-row { display:flex; gap:1rem; flex-wrap:wrap; }
.about-kpi { flex:1; min-width:80px; background:white; border:1px solid var(--brd); border-radius:10px; padding:.85rem .75rem; text-align:center; }
.ak-n { display:block; font-size:1.4rem; font-weight:900; color:var(--teal); line-height:1; }
.ak-l { display:block; font-size:.65rem; color:var(--mut); margin-top:3px; line-height:1.3; }
.about-right { display:flex; flex-direction:column; gap:0; }
.feat-row { display:grid; grid-template-columns:52px 1fr auto; gap:1.25rem; align-items:start; padding:1.6rem 0; border-bottom:1px solid var(--brd); transition:background .2s; }
.feat-row:first-child { border-top:1px solid var(--brd); }
.feat-row:hover { background: rgba(13,107,110,0.025); border-radius: 8px; padding-left: .75rem; padding-right: .75rem; }
.feat-icon { width:52px; height:52px; border-radius:50%; background:var(--fi,var(--teal)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.14); transition:transform .2s; }
.feat-row:hover .feat-icon { transform:scale(1.07); }
.feat-icon svg { width:22px; height:22px; stroke:white; fill:none; stroke-width:1.8; }
.feat-body { flex:1; }
.feat-body h3 { font-size:.97rem; font-weight:800; color:var(--ink); margin-bottom:.3rem; }
.feat-body p  { font-size:.97rem; line-height:1.75; color:var(--mut); }
.feat-tags { display:flex; flex-direction:column; gap:.3rem; align-items:flex-end; flex-shrink:0; padding-top:2px; }
.feat-tags span { background:white; border:1px solid var(--brd); color:var(--teal); font-size:.6rem; font-weight:800; padding:2px 9px; border-radius:100px; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }

/* ============================================================
   OUR APPROACH — Visual cards + pipeline
   ============================================================ */
#approach { background:var(--wht); }
.apg-hdr { margin-bottom:2.5rem; }

.approach-section-label { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; }
.asl-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; }
.approach-section-label span { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); }

.approach-principles { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1rem; }

.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;
}
.ap-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(13,107,110,0.1); }
.ap-card::before {
  content:""; position:absolute; inset:0;
  background:var(--apc-lt,#E8F5F5);
  opacity:1; z-index:0;
}
.ap-card > * { position:relative; z-index:1; }
.ap-card-num { font-size:.6rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--mlt); margin-bottom:.6rem; display:block; }
.ap-card-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,0.14); transition:transform .2s; }
.ap-card:hover .ap-card-icon { transform:scale(1.08) rotate(-3deg); }
.ap-card-icon svg { width:24px; height:24px; stroke:white; fill:none; stroke-width:1.8; }
.ap-card h3 { font-size:1rem; font-weight:800; color:var(--ink); margin-bottom:.5rem; }
.ap-card p  { font-size:.97rem; line-height:1.75; color:var(--mut); }
.ap-card-bar { position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--apc,var(--teal)); transform:scaleX(1); transform-origin:left; }

.approach-pipeline { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--brd); border-radius:16px; overflow:hidden; }

.pipeline-step { display:flex; flex-direction:column; align-items:flex-start; padding:2rem 1.6rem; position:relative; border-right:1px solid var(--brd); transition:background .2s; }
.pipeline-step:nth-child(1) { background:rgba(13,107,110,0.06); }
.pipeline-step:nth-child(2) { background:rgba(9,84,86,0.06); }
.pipeline-step:nth-child(3) { background:rgba(26,107,68,0.06); }
.pipeline-step:nth-child(4) { background:rgba(60,196,124,0.07); }
.pipeline-step:last-child { border-right:none; }
.pipeline-step:hover { filter:brightness(0.97); }
.pipeline-step--last .ps-connector { display:none; }

.ps-node { width:52px; height:52px; border-radius:50%; background:var(--psn,var(--teal)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.15); margin-bottom:.85rem; transition:transform .2s; }
.pipeline-step:hover .ps-node { transform:scale(1.1); }
.ps-node svg { width:22px; height:22px; stroke:white; fill:none; stroke-width:1.8; }
.ps-connector { 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; }
.ps-arrow { font-size:.85rem; color:var(--teal); font-weight:900; line-height:1; }
.ps-num { display:block; font-size:.6rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--mlt); margin-bottom:.3rem; }
.ps-content h3 { font-size:.93rem; font-weight:800; color:var(--ink); margin-bottom:.35rem; }
.ps-content p  { font-size:.97rem; line-height:1.75; color:var(--mut); }

/* ============================================================
   SERVICES
   ============================================================ */
#services { background:var(--crm); }
.svhdr { margin-bottom:2.6rem; }
.sv3grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.svc { border:1px solid var(--brd); border-radius:12px; overflow:hidden; background:white; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; }
.svc:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(13,107,110,.1); }
.svhd { background:var(--teal); padding:1.5rem 1.65rem 1.4rem; }
.svhd.alt { background:var(--tdk); }
.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; }
.svic svg { width:21px; height:21px; stroke:white; fill:none; stroke-width:1.8; }
.svhd h3 { color:white; font-size:1rem; }
.svbd { padding:1.5rem 1.65rem; flex:1; display:flex; flex-direction:column; }
.svbd p { font-size:.97rem; line-height:1.75; color:var(--mut); margin-bottom:1rem; }
.svul { list-style:none; flex:1; }
.svul li { font-size:.97rem; color:var(--mut); padding:3px 0 3px 1rem; position:relative; line-height:1.5; }
.svul li::before { content:""; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:var(--grn); }
.svft { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--brd); }
.svfl { font-size:.62rem; font-weight:800; color:var(--grn); text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px; }
.svfn { font-weight:700; color:var(--teal); font-size:.82rem; }

/* ============================================================
   EXPERIENCE — bento grid with real photo images
   ============================================================ */
#experience { background:var(--wht); overflow:hidden; }
.exphdr { margin-bottom:2.5rem; }
.bento-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:auto auto; gap:1.2rem; }
.bento-half  { grid-column:span 3; }
.bento-third { grid-column:span 2; }
.bento-card { border-radius:16px; overflow:hidden; position:relative; min-height:340px; display:flex; flex-direction:column; cursor:default; transition:transform .22s,box-shadow .22s; }
.bento-card:hover { transform:translateY(-5px); box-shadow:0 20px 56px rgba(0,0,0,0.22); }
.bc-bg { position:absolute; inset:0; background:var(--bc,linear-gradient(145deg,var(--tdk),var(--teal))); z-index:0; }
.bc-photo { position:absolute; inset:0; background-size:cover; background-position:center; z-index:1; opacity:.15; transition:opacity .25s ease,transform .45s ease; }
.bento-card:hover .bc-photo { opacity:.25; transform:scale(1.04); }
.bento-card::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.04) 1px,transparent 1px); background-size:22px 22px; z-index:2; pointer-events:none; }
.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; }
.bc-tag { display:inline-block; background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.9); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:100px; width:fit-content; }
.bc-body h3 { font-size:1.1rem; font-weight:800; color:white; line-height:1.25; }
.bento-half .bc-body h3 { font-size:1.25rem; }
.bc-body p { font-size:.97rem; line-height:1.75; color:rgba(255,255,255,0.72); max-width:480px; }
.bc-stats { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }
.bc-stats > div { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); border-radius:7px; padding:.4rem .7rem; text-align:center; flex:1; min-width:64px; }
.bcsn { display:block; font-size:.95rem; font-weight:900; color:var(--grn); line-height:1; }
.bcsl { display:block; font-size:.6rem; color:rgba(255,255,255,0.55); margin-top:2px; }
.bc-btn { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.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; }
.bc-btn:hover { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.5); }
.bc-btn svg { width:14px; height:14px; stroke:white; fill:none; stroke-width:2.5; }

/* Modals */
.cs-modal-overlay { display:none; position:fixed; inset:0; background:rgba(10,35,35,0.65); backdrop-filter:blur(6px); z-index:500; }
.cs-modal-overlay.open { display:block; }
.cs-modal { display:none; position:fixed; inset:0; z-index:501; align-items:center; justify-content:center; padding:5vh 5vw; overflow-y:auto; }
.cs-modal.open { display:flex; }
.cs-modal-box { background:white; border-radius:16px; width:100%; max-width:720px; box-shadow:0 24px 72px rgba(0,0,0,0.25); overflow:hidden; position:relative; margin:auto; animation:modalIn .28s cubic-bezier(.4,0,.2,1); }
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
.cs-modal-close { position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.4); background:rgba(0,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; }
.cs-modal-close:hover { background:rgba(0,0,0,0.5); border-color:white; }
.cs-modal-img { width:100%; aspect-ratio:21/7; position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:flex-start; }
.cs-modal-img-overlay { position:absolute; inset:0; z-index:1; }
.cs-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,0.4); }
.cs-modal-content { padding:1.75rem 2rem 2rem; }
.cs-modal-content h3 { font-size:1.15rem; font-weight:800; color:var(--ink); margin:.6rem 0 .75rem; line-height:1.25; }
.cs-modal-content > p { font-size:.97rem; line-height:1.75; color:var(--mut); margin-bottom:1.1rem; }
.cs-modal-content h4 { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:var(--teal); margin:1.1rem 0 .5rem; }
.cs-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; }
.cs-modal-stats>div { text-align:center; }
.cs-modal-stats .csn { display:block; font-size:1.4rem; font-weight:900; color:var(--teal); line-height:1; }
.cs-modal-stats .csl { display:block; font-size:.68rem; color:var(--mlt); margin-top:3px; }
.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; }
.sltags  { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.sltag   { background:var(--tlt); color:var(--teal); font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:100px; }
.slcl    { display:flex; align-items:center; gap:8px; padding-top:1rem; border-top:1px solid var(--brd); margin-top:1rem; }
.slcld   { 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; }
.slcln   { font-size:.8rem; font-weight:700; color:var(--ink); }
.slclt   { font-size:.7rem; color:var(--mlt); }

/* ============================================================
   OUR TEAM
   ============================================================ */
#team { background:var(--crm); padding:88px 5%; }
.team-hdr { margin-bottom:3rem; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; justify-items:center; }
.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; }
.team-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(13,107,110,0.12); }
.team-photo { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--tlt); }
.team-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .4s ease; }
.team-card:hover .team-photo img { transform:scale(1.05); }
.team-photo-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 55%,rgba(9,84,86,0.6) 100%); opacity:0; transition:opacity .3s; }
.team-card:hover .team-photo-overlay { opacity:1; }
.team-photo.team-photo-fallback { display:flex; align-items:center; justify-content:center; background:var(--tlt); }
.team-photo.team-photo-fallback::after { content:"👤"; font-size:3rem; opacity:.4; }
.team-info { padding:1.1rem 1.2rem 1.25rem; }
.team-name { font-size:.97rem; font-weight:800; color:var(--ink); margin-bottom:2px; }
.team-role { font-size:.76rem; color:var(--teal); font-weight:600; margin-bottom:.7rem; }
.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; }
.team-email:hover { color:var(--teal); }
.team-email svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.team-initials-ph { width: 100%; height: 100%; background: var(--ti-bg, var(--teal)); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 900; color: rgba(255,255,255,0.9); letter-spacing: .04em; user-select: none; }
.team-initials-ph::after { content: attr(data-initials); }
.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; }

/* ============================================================
   CLIENTS & PARTNERS
   ============================================================ */
#clients { background:var(--wht); padding:78px 5%; }
.partner-group { margin-bottom:1.8rem; }
.partner-group:last-child { margin-bottom:0; }
.partner-group-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); }
.marquee-track { overflow:hidden; position:relative; }
.marquee-track::before,.marquee-track::after { content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.marquee-track::before { left:0; background:linear-gradient(to right,var(--wht),transparent); }
.marquee-track::after  { right:0; background:linear-gradient(to left,var(--wht),transparent); }
.marquee-inner { display:flex; gap:.75rem; width:max-content; animation:marquee-ltr 32s linear infinite; }
.marquee-inner.rtl { animation:marquee-rtl 32s linear infinite; }
.marquee-track:hover .marquee-inner { animation-play-state:paused; }
@keyframes marquee-ltr { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marquee-rtl { from{transform:translateX(-50%)} to{transform:translateX(0)} }
.plg-item { 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; }
.plg-item:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:0 6px 18px rgba(13,107,110,.08); }
.plg-item img  { width:64px; height:32px; object-fit:contain; display:block; }
.plg-fb { display:flex; width:48px; height:28px; border-radius:5px; align-items:center; justify-content:center; font-size:.52rem; font-weight:900; color:white; letter-spacing:.04em; flex-shrink:0; }
.plg-item span { font-size:.72rem; font-weight:700; color:var(--mut); line-height:1.3; }

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

/* ============================================================
   CONTACT
   ============================================================ */
#contact { background:var(--crm); }
.cgg { display:grid; gap:5rem; align-items:start; max-width:1160px; margin:0 auto; }
.clft h2 { color:var(--teal); margin-bottom:1rem; }
.contact-person-wrapper { display:flex; gap:20px; flex-wrap:wrap; margin-top:1.6rem; }
.cpc { background:white; border:1px solid var(--brd); border-radius:10px; padding:1.2rem 1.35rem; flex:1; min-width:200px; }
.cpn { font-weight:800; color:var(--ink); font-size:.92rem; margin-bottom:2px; }
.cpr { font-size:.78rem; color:var(--mlt); margin-bottom:.65rem; }
.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; }
.cplk:hover { color:var(--grn); }
.cplk svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--ink); padding:52px 5% 26px; }
.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; }
.fc h4 { font-size:.62rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:1rem; }
.fc a  { display:block; font-size:.8rem; color:rgba(255,255,255,.52); padding:3px 0; transition:color .2s; }
.fc a:hover { color:var(--grn); }
.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); }
.soc   { display:flex; gap:9px; }
.soc a { width:29px; height:29px; 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; }
.soc a:hover { border-color:var(--grn); color:var(--grn); }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.sb2 { background:none; border:none; cursor:pointer; padding:6px 8px; display:flex; align-items:center; color:var(--mut); transition:color .2s; }
.sb2:hover { color:var(--teal); }
.sb2 svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; }
.sov { position:fixed; inset:0; z-index:999; background:rgba(10,35,35,.78); backdrop-filter:blur(8px); display:none; align-items:flex-start; justify-content:center; padding-top:90px; }
.sov.open { display:flex; }
.sbox { background:white; border-radius:14px; width:100%; max-width:660px; margin:0 18px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; }
.srow { display:flex; align-items:center; padding:1.1rem 1.4rem; gap:12px; border-bottom:1px solid var(--brd); }
.srow>svg { width:18px; height:18px; stroke:var(--mlt); fill:none; stroke-width:2; flex-shrink:0; }
#sinp { flex:1; border:none; outline:none; font-family:"Nunito Sans",sans-serif; font-size:1rem; font-weight:600; color:var(--ink); background:transparent; }
#sinp::placeholder { color:var(--mlt); font-weight:400; }
.scl { background:none; border:none; cursor:pointer; color:var(--mut); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:background .2s; flex-shrink:0; }
.scl:hover { background:var(--tlt); color:var(--teal); }
#sres { max-height:440px; overflow-y:auto; padding:.4rem 0; }
.se  { padding:1.75rem 1.4rem; text-align:center; color:var(--mut); font-size:.88rem; }
.sit { display:block; padding:.8rem 1.4rem; border-bottom:1px solid var(--brd); transition:background .13s; cursor:pointer; }
.sit:last-child { border-bottom:none; }
.sit:hover { background:var(--crm); }
.stag { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--grn); margin-bottom:2px; }
.sttl { font-size:.92rem; font-weight:700; color:var(--teal); margin-bottom:2px; }
.ssnp { font-size:.79rem; color:var(--mut); line-height:1.45; }
.shl  { background:#D2FFE8; border-radius:2px; font-weight:700; color:var(--tdk); padding:0 2px; }
.shnt { padding:.55rem 1.4rem; font-size:.7rem; color:var(--mlt); border-top:1px solid var(--brd); display:flex; justify-content:space-between; }
kbd   { background:var(--crm); border:1px solid var(--brd); border-radius:3px; padding:1px 5px; font-size:.66rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px) {
  .about-wrap { grid-template-columns:300px 1fr; gap:3rem; }
  .feat-tags  { display:none; }
  .approach-principles { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(3,1fr); }
  .hero-badge--bl { display:none; }
}

@media (max-width:1024px) {
  .sv3grid { grid-template-columns:repeat(2,1fr); }
  .bento-half  { grid-column:span 3; }
  .bento-third { grid-column:span 2; }
  .approach-pipeline { grid-template-columns:repeat(2,1fr); }
  .pipeline-step:nth-child(2) { border-right:none; }
  .pipeline-step:nth-child(1),.pipeline-step:nth-child(2) { border-bottom:1px solid var(--brd); }
  .ps-connector { display:none; }
}

@media (max-width:900px) {
  /* Hero */
  .hero-inner { grid-template-columns:1fr; padding:60px 5% 80px; gap:2.5rem; }
  .hero-right  { display:none; }
  .hero-left   { text-align:center; align-items:center; }
  .hero-sub    { max-width:100%; }
  .hero-actions { justify-content:center; }
  .hero-mini-stats { width:100%; justify-content:center; }

  /* Stats */
  .ss-grid { grid-template-columns:repeat(2,1fr); }
  .ssb { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
  .ssb-n { font-size:2.4rem; }
  .stat-tip { display:none; }

  /* About */
  .about-wrap { grid-template-columns:1fr; gap:2.5rem; }
  .about-left { position:static; }
  .feat-tags  { display:none; }
  .feat-row   { grid-template-columns:52px 1fr; }

  /* Approach */
  .approach-principles { grid-template-columns:repeat(2,1fr); }
  .approach-pipeline   { grid-template-columns:repeat(2,1fr); }
  .pipeline-step { border-right:none; border-bottom:1px solid var(--brd); }
  .pipeline-step:last-child { border-bottom:none; }
  .ps-connector { display:none; }

  /* Services */
  .sv3grid { grid-template-columns:1fr; }

  /* Bento */
  .bento-grid { grid-template-columns:1fr; }
  .bento-half,.bento-third { grid-column:span 1; }

  /* Team */
  .team-grid { grid-template-columns:repeat(2,1fr); justify-items:center; }

  /* Footer */
  .ftop   { grid-template-columns:1fr 1fr; }
  .nlinks { display:none; }
  .contact-person-wrapper { flex-direction:column; }
  .cpc { width:100%; }
  .cs-modal { padding:3vh 4vw; }
  .cs-modal-content { padding:1.25rem 1.25rem 1.5rem; }
}

@media (max-width:600px) {
  .hero-title { font-size:clamp(1.8rem,8vw,2.4rem); }
  .ss-grid { grid-template-columns:1fr; }
  .approach-principles { grid-template-columns:1fr; }
  .approach-pipeline   { grid-template-columns:1fr; }
  .feat-row { grid-template-columns:44px 1fr; }
  .feat-icon { width:44px; height:44px; }
  .ftop { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .hms-item { padding:.65rem .75rem; }
}

@media (max-width:420px) {
  .team-grid { grid-template-columns:1fr; }
}