/* ===== Fonts (as requested) ===== */
@font-face{
  font-family:"Circular";
  src:url("assets/fonts/circular/CircularStd-Book.woff2") format("woff2"),
      url("assets/fonts/circular/CircularStd-Book.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("assets/fonts/circular/CircularStd-Medium.woff2") format("woff2"),
      url("assets/fonts/circular/CircularStd-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("assets/fonts/circular/CircularStd-Bold.woff2") format("woff2"),
      url("assets/fonts/circular/CircularStd-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --brand-dark:#0e2f27;
  --brand-light:#f5f7f6;
  --line:#e6ebe9;
  --ink:#0b1720;
  --radius-3: 24px;
  --radius-2: 18px;
  --shadow-1: 0 8px 24px rgba(0,0,0,.06);
}

.vision{ background:var(--brand-light); color:#0f1721; font-family:"Circular","Circular Std",Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
.container{ max-width:1160px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

.overline{ display:flex; align-items:center; gap:10px; letter-spacing:.22em; text-transform:uppercase; font:500 11px/1 "Circular"; color:#64707b; margin-bottom:6px; }
.overline--light{ color:rgba(255,255,255,.8); }
.overline__bar{ width:24px; height:4px; border-radius:999px; background:var(--brand-dark); opacity:.9; }

/* ===== Global spacing ===== */
.vision section{ padding:80px 0; }
.vision-hero{ padding-top:112px; padding-bottom:80px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.vision-cta{ padding-top:32px; padding-bottom:80px; }

/* ===== HERO — fix stacking & spacing (no collisions) ===== */
.vision-hero__bg{ position:absolute; inset:0; opacity:.10; z-index:0; }
.vision-hero__bg img{ width:100%; height:100%; object-fit:cover; }

.vision-hero .container{ position:relative; z-index:1; }
.hero-title{
  margin:24px 0 18px 0;              /* separation around H1 */
  font-weight:800;
  font-size:clamp(34px,4.6vw,72px);
  line-height:1.08;
  letter-spacing:-.01em;
  color:#0e1720;
  word-break:break-word;
  position:relative; z-index:1;      /* create a local stacking context */
}
.hero-sub{
  margin:0 0 18px 0;                 /* must have units */
  color:#4b5563;
  max-width:760px;
  line-height:1.55;
  position:relative; z-index:2;      /* always above H1 if they overlap visually */
}
.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; position:relative; z-index:2; }
.hero-chip{
  display:inline-flex; align-items:center;
  padding:6px 10px; line-height:1;
  border:1px solid #dfe5e2; border-radius:999px; background:#fff;
  font-size:11px;
}

/* ===== WHY (dark band) ===== */
.vision-why{ background:var(--brand-dark); color:#fff; }
.sec-title{ font-weight:700; font-size:clamp(28px,3.5vw,44px); letter-spacing:-.01em; color:#0e1720; margin:8px 0 24px; }
.sec-title--light{ color:#fff; }
.grid{ display:grid; gap:28px; }
.grid--2{ grid-template-columns:1fr; }
@media (min-width: 960px){ .grid--2{ grid-template-columns:1.1fr .9fr; } } /* keep original layout for "why" */

/* ===== VALUES CARDS — uniform width/height + compact KPI pill ===== */
.cards{ margin-top:8px; }

/* force equal columns JUST for the cards grid (do not affect "why") */
.cards.grid--2{ grid-template-columns:1fr; }
@media (min-width:960px){ .cards.grid--2{ grid-template-columns:repeat(2,1fr) !important; } }

.grid.cards{ grid-auto-rows:1fr; align-items:stretch; }  /* rows equal height */

.card{
  background:#fff; border:1px solid #e2e8e5; border-radius:var(--radius-2);
  box-shadow:var(--shadow-1); overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
.card-media{ aspect-ratio:16/9; width:100%; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
.card:hover .card-media img{ transform:scale(1.02); }

.card-body{
  padding:20px;
  display:flex; flex-direction:column; flex:1;
  gap:10px; box-sizing:border-box;
}
.card-head{ display:flex; align-items:center; gap:8px; color:#334155; }
.card-ico{ width:18px; height:18px; color:#334155; }
.card-title{ font:700 18px/1.2 "Circular"; color:#0e1720; }
.card-desc{ color:#5b6470; font-size:14px; line-height:1.6; }

/* KPI pill — force compact chip and keep it at the bottom */
.card-kpi{
  display:inline-flex !important;     /* defeat any global .block/.w-full utility */
  width:auto !important; max-width:100%;
  align-self:flex-start; white-space:nowrap; box-sizing:border-box;

  margin-top:auto;                    /* pushes it to the bottom of the body */
  padding:6px 10px; gap:6px;
  font-size:11px; color:#55616c;
  background:#f8faf9; border:1px solid #e2e8e5; border-radius:10px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-dark); display:inline-block; }

/* ===== WHY inner bits ===== */
.why-intro{ color:rgba(255,255,255,.90); line-height:1.6; }
.why-steps{ margin-top:24px; display:grid; gap:16px; }
.why-steps li{ display:flex; gap:12px; align-items:flex-start; opacity:.95; }
.step-dot{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--brand-dark); font:700 11px/1 "Circular"; }
.step-title{ font:600 16px/1.25 "Circular"; }
.step-desc{ font-size:14px; opacity:.95; margin-top:2px; }
.why-right{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mini-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:16px; }
.mini-card h3{ font:600 16px/1.25 "Circular"; color:#fff; margin:4px 0; }
.mini-card p{ font:400 13px/1.45 "Circular"; color:rgba(255,255,255,.84); }
.mini-ico{ width:20px; height:20px; color:#fff; opacity:.9; }

/* ===== TABS (expertises) ===== */
.vision-expert{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.tabs{ border:1px solid var(--line); border-radius:var(--radius-2); background:#fff; }
.tabs-bar{ display:flex; flex-wrap:wrap; gap:8px; padding:8px; }
.tab{ appearance:none; border:1px solid #e2e8e5; background:#fff; color:#344054; padding:10px 12px; border-radius:14px; font:500 13px/1 "Circular"; cursor:pointer; }
.tab.is-active{ background:#0f1721; color:#fff; border-color:#0f1721; }
.tab-ico{ margin-right:6px; }
.tabs-panels{ padding:14px; border-top:1px solid var(--line); }
.panel-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px; }
@media (min-width: 680px){ .panel-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.exp-item{ background:#fff; border:1px solid #e2e8e5; border-radius:14px; box-shadow:var(--shadow-1); }
.exp-head{ width:100%; text-align:left; padding:14px; background:#fff; border:none; border-radius:14px; cursor:pointer; display:grid; gap:6px; }
.exp-title{ font:600 14px/1.2 "Circular"; color:#0e1720; }
.exp-desc{ font:400 12px/1.4 "Circular"; color:#66707b; }
.exp-caret{ width:10px; height:10px; border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8; transform:rotate(45deg); justify-self:end; margin-top:-18px; transition:transform .22s ease; }
.exp-item.is-open .exp-caret{ transform:rotate(225deg); }
.exp-more{ padding:0 14px 12px; font:400 12px/1.55 "Circular"; color:#475569; overflow:hidden; }
.exp-meta{ font:500 11px/1 "Circular"; color:#61707c; padding:0 14px 14px; display:flex; align-items:center; gap:8px; }

/* ===== TIMELINE — ONLY THIS SECTION CHANGED ===== */
.timeline{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-2); padding:24px; box-shadow:var(--shadow-1);
}

/* grid layout */
.timeline__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px; align-items:start;
}
@media (min-width: 900px){ .timeline__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* rail */
.timeline__line{ position:absolute; left:24px; right:24px; top:28px; height:1px; background:var(--line); }

/* items & dots */
.tl-item{ position:relative; text-align:center; padding-top:0 !important; }  /* kill any legacy padding */
.tl-dot{
  position:absolute; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--brand-dark);
  top:22px;  /* 22px + (12px / 2) = 28px -> center on the rail */
}
.tl-year{ display:block; font:600 13px/1 "Circular"; color:#66707b; margin-top:44px; }
.tl-title{ font:700 16px/1.25 "Circular"; color:#0e1720; margin-top:6px; }
.tl-desc{ font:400 13px/1.45 "Circular"; color:#5b6470; margin-top:4px; }

/* ===== FOUNDER ===== */
.founder-box{ display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--radius-3); overflow:hidden; background:#fff; box-shadow:var(--shadow-1); }
@media (min-width: 960px){ .founder-box{ grid-template-columns:3fr 2fr; } }
.founder-text{ padding:32px; }
.founder-quote{ font-size:clamp(18px,2.2vw,24px); line-height:1.5; color:#0e1720; margin-top:10px; }
.founder-id{ display:flex; align-items:center; gap:12px; margin-top:18px; color:#475569; }
.founder-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.founder-name{ font-weight:600; color:#0e1720; }
.founder-role{ font-size:12px; color:#6b7280; }
.founder-media{ position:relative; min-height:220px; }
.founder-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ===== CTA ===== */
.cta-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-3); box-shadow:var(--shadow-1); padding:32px 24px; text-align:center; }
.cta-title{ font-weight:700; font-size:clamp(22px,3vw,30px); color:#0e1720; }
.cta-sub{ color:#64707b; margin-top:6px; }
.cta-actions{ display:flex; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font:600 14px/1 "Circular"; text-decoration:none; }
.btn--primary{ background:var(--brand-dark); color:#fff; }
.btn--ghost{ background:#fff; color:#0e1720; border:1px solid #d7dedb; }

/* ===== Reveals (subtle) ===== */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease; }
.reveal.is-in{ opacity:1; transform:none; }