/* =========================================================================
   Matrix Insight — Founder / Portfolio page components.
   Every block below is built from ordinary WordPress blocks, so the layout
   here is what turns those blocks into the designed page.
   ========================================================================= */

/* ---- Section rhythm + the little blue rule after each heading ---------- */
.mi-founder-section{padding:52px 0}
.mi-founder-section.is-soft{background:var(--mi-bg)}
/* Heading on the left, the small grey note on the right of the same line. */
.mi-founder-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 24px;flex-wrap:wrap;margin:0 0 22px
}
.mi-founder-head > h2.wp-block-heading{
  font-size:clamp(23px,2.6vw,29px);margin:0;display:flex;align-items:center;gap:14px
}
.mi-founder-head > h2.wp-block-heading::after{
  content:"";flex:0 0 34px;height:3px;border-radius:2px;background:var(--mi-blue)
}
.mi-founder-head > p.mi-section-note{
  color:var(--mi-muted);font-size:14px;margin:0;text-align:right
}

/* =========================================================================
   HERO
   ========================================================================= */
.mi-founder-hero{
  background:linear-gradient(100deg,#f7fbff 0%,#f1f7fe 52%,#e7f1fb 100%);
  overflow:hidden
}
.mi-founder-hero-grid{
  display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center
}
.mi-founder-hero-copy{padding:56px 0}
.mi-founder-hero-copy h1{
  font-size:clamp(30px,3.9vw,50px);line-height:1.08;letter-spacing:-.035em;
  margin:0 0 18px;font-weight:800
}
.mi-founder-hero-copy > p{font-size:clamp(15px,1.5vw,18px);color:#4c6587;max-width:560px;margin:0 0 26px}
.mi-founder-hero-copy .wp-block-buttons{gap:12px}

/* Photo + the handwritten note card */
.mi-founder-visual{position:relative;padding:26px 0}
.mi-founder-visual .wp-block-image{margin:0}
.mi-founder-visual img{
  width:100%;border-radius:16px;object-fit:cover;
  box-shadow:0 18px 44px rgba(16,42,80,.14)
}
.mi-note{
  position:absolute;right:0;bottom:44px;width:min(232px,54%);
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  border:1px solid #e2ecf8;border-radius:14px;padding:18px 20px;
  box-shadow:0 12px 30px rgba(16,42,80,.12)
}
/* v8.4: the handwritten line was removed from the photo card (also hidden on pages built earlier). */
.mi-note p.mi-note-script,.mi-note p.mi-note-rule{display:none}
.mi-note{border-left:4px solid var(--mi-blue)}
.mi-note p.mi-note-name{margin:0 0 2px;font-weight:800;color:var(--mi-navy);font-size:14px}
.mi-note p:last-child{margin:0;color:var(--mi-muted);font-size:12.5px;line-height:1.4}

/* =========================================================================
   ABOUT + STAT TILES
   ========================================================================= */
.mi-founder-about{display:grid;grid-template-columns:1.18fr .82fr;gap:40px;align-items:start}
.mi-founder-about h2.wp-block-heading{
  font-size:clamp(23px,2.6vw,29px);margin:0 0 16px;display:flex;align-items:center;gap:14px
}
.mi-founder-about h2.wp-block-heading::after{
  content:"";flex:0 0 34px;height:3px;border-radius:2px;background:var(--mi-blue)
}
.mi-founder-about p{color:var(--mi-muted);font-size:15.5px;line-height:1.65;margin:0 0 16px}

.mi-stats-panel{
  background:#f3f8ff;border:1px solid #dcebfb;border-radius:16px;padding:16px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.mi-stat-tile{
  background:#fff;border:1px solid #e4edf8;border-radius:12px;padding:16px 14px
}
.mi-stat-tile p.mi-ico{
  width:38px;height:38px;border-radius:10px;background:#e8f2ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;
  margin:0 0 12px
}
.mi-stat-tile p.mi-val{margin:0 0 3px;font-weight:800;color:var(--mi-navy);font-size:17px;line-height:1.2}
.mi-stat-tile p:last-child{margin:0;color:var(--mi-muted);font-size:12.5px;line-height:1.35}

/* =========================================================================
   CARD GRIDS
   ========================================================================= */
.mi-cards{display:grid;gap:13px}
.mi-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mi-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mi-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mi-cards-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mi-cards-6{grid-template-columns:repeat(6,minmax(0,1fr))}

.mi-icon-card{
  background:#fff;border:1px solid var(--mi-line);border-radius:12px;padding:18px 16px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.mi-icon-card:hover{transform:translateY(-3px);box-shadow:var(--mi-shadow-sm);border-color:#c9dcf5}
.mi-icon-card p.mi-ico{
  width:38px;height:38px;border-radius:10px;background:#e8f2ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;
  margin:0 0 12px
}
.mi-icon-card h3{margin:0 0 8px;font-size:15px;line-height:1.3}
.mi-icon-card p:last-child{margin:0;color:var(--mi-muted);font-size:13.5px;line-height:1.45}

/* =========================================================================
   HOW I THINK
   ========================================================================= */
.mi-think{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.mi-think-item{
  background:#fff;border:1px solid var(--mi-line);border-radius:12px;padding:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px
}
.mi-think-item p.mi-num{
  flex:0 0 38px;height:38px;border-radius:50%;background:#eef5ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin:0
}
.mi-think-item p.mi-ico{
  flex:0 0 30px;height:30px;border-radius:8px;background:#e8f2ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:15px;margin:0
}
.mi-think-item h3{flex:1 1 90px;margin:0;font-size:14.5px;line-height:1.25}
.mi-think-item p:last-child{
  flex:1 0 100%;margin:0;padding-left:48px;color:var(--mi-muted);
  font-size:13px;line-height:1.45
}

/* =========================================================================
   FROM EXPERTISE TO EXECUTION
   ========================================================================= */
.mi-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.mi-flow-item{
  position:relative;background:#fff;border:1px solid var(--mi-line);border-radius:12px;
  padding:16px;display:flex;align-items:flex-start;gap:12px
}
.mi-flow-item p.mi-num{
  flex:0 0 38px;height:38px;border-radius:50%;background:#eef5ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin:0
}
.mi-flow-item h3{margin:0 0 4px;font-size:15px}
.mi-flow-item p:last-child{margin:0;color:var(--mi-muted);font-size:13px;line-height:1.45}
.mi-flow-item > div{min-width:0}
.mi-flow-item:not(:last-child)::after{
  content:"→";position:absolute;right:-27px;top:50%;transform:translateY(-50%);
  color:#87b0ea;font-size:20px;font-weight:700;line-height:1
}

/* =========================================================================
   TOOLS
   ========================================================================= */
.mi-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.mi-tool{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--mi-line);
  border-radius:10px;padding:11px 13px;font-weight:600;font-size:13.5px;color:var(--mi-navy);
  transition:border-color .2s ease,transform .2s ease
}
.mi-tool:hover{border-color:#c2d9f5;transform:translateY(-2px)}
.mi-tool p.mi-ico{
  flex:0 0 26px;height:26px;border-radius:7px;background:#eef5ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin:0
}
.mi-tool p:last-child{margin:0}
.mi-tool.is-muted{background:var(--mi-bg);color:var(--mi-muted);border-style:dashed}

/* =========================================================================
   WORK HISTORY + EDUCATION + LANGUAGES
   ========================================================================= */
.mi-founder-history{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:start}
.mi-founder-history h2.wp-block-heading{
  font-size:clamp(22px,2.4vw,27px);margin:0 0 20px;display:flex;align-items:center;gap:14px
}
.mi-founder-history h2.wp-block-heading::after{
  content:"";flex:0 0 34px;height:3px;border-radius:2px;background:var(--mi-blue)
}

.mi-timeline{
  position:relative;background:#fff;border:1px solid var(--mi-line);
  border-radius:14px;padding:22px 22px 6px
}
.mi-timeline::before{
  content:"";position:absolute;left:28px;top:30px;bottom:30px;width:2px;background:#dfeafa
}
.mi-tl-item{
  position:relative;display:grid;grid-template-columns:116px 1fr;gap:14px;
  padding:0 0 20px 24px
}
.mi-tl-item::before{
  content:"";position:absolute;left:1px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--mi-blue);box-shadow:0 0 0 3px #fff,0 0 0 5px #cfe2fb
}
.mi-tl-item p.mi-tl-date{margin:0;font-size:12px;font-weight:800;color:var(--mi-blue);line-height:1.6;white-space:nowrap}
.mi-tl-item h3{margin:0 0 2px;font-size:14.5px;line-height:1.3}
.mi-tl-item p:last-child{margin:0;color:var(--mi-muted);font-size:13px;line-height:1.4}
.mi-tl-item > div{min-width:0}

.mi-edu-item{
  display:grid;grid-template-columns:40px 1fr auto;gap:13px;align-items:center;
  background:#fff;border:1px solid var(--mi-line);border-radius:12px;
  padding:14px 16px;margin:0 0 10px
}
.mi-edu-item p.mi-ico{
  width:40px;height:40px;border-radius:10px;background:#e8f2ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin:0
}
.mi-edu-item h3{margin:0 0 2px;font-size:14.5px;line-height:1.3}
.mi-edu-item p.mi-edu-school{margin:0;color:var(--mi-muted);font-size:13px}
.mi-edu-item p.mi-edu-years{margin:0;color:var(--mi-muted);font-size:12.5px;font-weight:700;white-space:nowrap}
.mi-edu-item > div{min-width:0}

.mi-langs{
  background:#fff;border:1px solid var(--mi-line);border-radius:12px;padding:16px 18px;margin-top:16px
}
.mi-langs h3{margin:0 0 12px;font-size:14.5px}
.mi-lang-list{display:flex;flex-wrap:wrap;gap:8px}
.mi-lang{
  display:inline-flex;align-items:baseline;gap:6px;background:var(--mi-bg);
  border:1px solid var(--mi-line);border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:700;color:var(--mi-navy);margin:0
}
.mi-lang b{color:var(--mi-blue);font-size:11.5px;font-weight:800}

/* =========================================================================
   CERTIFICATIONS SLIDER
   ========================================================================= */
.mi-certs{position:relative}
.mi-cert-track{
  display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:3px 2px 10px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch
}
.mi-cert-track::-webkit-scrollbar{height:6px}
.mi-cert-track::-webkit-scrollbar-thumb{background:#d4e2f3;border-radius:3px}
.mi-cert{
  flex:0 0 clamp(212px,23%,248px);scroll-snap-align:start;
  background:#fff;border:1px solid var(--mi-line);border-radius:12px;
  padding:15px;display:flex;gap:12px;align-items:flex-start
}
.mi-cert p.mi-ico{
  flex:0 0 36px;height:36px;border-radius:9px;background:#e8f2ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:16px;margin:0
}
.mi-cert h3{margin:0 0 2px;font-size:14px;line-height:1.25}
.mi-cert p.mi-cert-sub{margin:0 0 5px;font-size:12.5px;color:var(--mi-navy);font-weight:600;line-height:1.3}
.mi-cert p.mi-cert-meta{margin:0;font-size:12px;color:var(--mi-muted)}
.mi-cert > div{min-width:0}

.mi-slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--mi-line);
  background:#fff;color:var(--mi-navy);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(16,42,80,.12)
}
.mi-slider-btn:hover:not(:disabled){border-color:var(--mi-blue);color:var(--mi-blue)}
.mi-slider-btn:disabled{opacity:.3;cursor:not-allowed}
.mi-slider-btn.is-prev{left:-14px}
.mi-slider-btn.is-next{right:-14px}

/* =========================================================================
   CLOSING CTA
   ========================================================================= */
.mi-founder-cta{
  background:linear-gradient(120deg,#eff6ff,#e6f0fd);border:1px solid #d5e5f8;
  border-radius:16px;padding:26px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap
}
.mi-founder-cta p.mi-ico{
  flex:0 0 52px;height:52px;border-radius:14px;background:#fff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:0;
  box-shadow:0 4px 14px rgba(16,42,80,.08)
}
.mi-founder-cta > div{flex:1 1 320px;min-width:0}
.mi-founder-cta h2{margin:0 0 5px;font-size:clamp(20px,2.2vw,25px)}
.mi-founder-cta p:last-child{margin:0;color:var(--mi-muted);font-size:15px}
.mi-founder-cta .wp-block-buttons{margin:0;flex:0 0 auto}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1100px){
  .mi-cards-5,.mi-cards-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mi-think{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 36px}
  .mi-flow-item:nth-child(2n)::after{display:none}
}
@media(max-width:960px){
  .mi-cards-5,.mi-cards-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-founder-hero-grid{grid-template-columns:1fr;gap:0}
  .mi-founder-hero-copy{padding:44px 0 10px}
  .mi-founder-visual{padding:0 0 30px;max-width:520px}
  .mi-founder-about{grid-template-columns:1fr;gap:28px}
  .mi-founder-history{grid-template-columns:1fr;gap:32px}
  .mi-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .mi-founder-section{padding:40px 0}
  .mi-founder-head{margin-bottom:18px}
  .mi-founder-head > p.mi-section-note{text-align:left}
  .mi-cards-6,.mi-cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-stats-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-note{position:static;width:auto;margin-top:14px;backdrop-filter:none}
  .mi-founder-visual{padding-bottom:0}
  .mi-flow{grid-template-columns:1fr;gap:14px}
  .mi-flow-item::after{display:none!important}
  .mi-slider-btn{display:none}
  .mi-cert{flex:0 0 78%}
}
@media(max-width:480px){
  .mi-cards-2,.mi-cards-3,.mi-cards-4,.mi-cards-6{grid-template-columns:1fr}
  .mi-think{grid-template-columns:1fr}
  .mi-stats-panel{grid-template-columns:1fr}
  .mi-tl-item{grid-template-columns:1fr;gap:4px}
  .mi-tl-item p.mi-tl-date{white-space:normal}
  .mi-edu-item{grid-template-columns:36px 1fr;row-gap:6px}
  .mi-edu-item p.mi-edu-years{grid-column:2;text-align:left}
  .mi-founder-cta{padding:22px}
  .mi-founder-cta .wp-block-buttons,
  .mi-founder-cta .wp-block-button,
  .mi-founder-cta .wp-block-button__link{width:100%}
  .mi-think-item p:last-child{padding-left:0}
}

/* ---- Hero action row (button block + CV download button side by side) --- */
.mi-founder-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mi-founder-actions .wp-block-buttons{margin:0}
.mi-cv-btn{background:#fff;color:var(--mi-blue);border:1px solid #cfe0f6}
.mi-cv-btn:hover{color:var(--mi-blue-dark);border-color:var(--mi-blue)}
@media(max-width:480px){
  .mi-founder-actions{flex-direction:column;align-items:stretch;gap:10px}
  .mi-founder-actions > *{width:100%}
  .mi-founder-actions .wp-block-button,
  .mi-founder-actions .wp-block-button__link,
  .mi-founder-actions .mi-cv-btn{width:100%}
}

/* ---- Layout wrappers: allow grid/flex children to shrink properly ------- */
.mi-founder-col,
.mi-founder-copy,
.mi-founder-head,
.mi-edu,
.mi-txt{min-width:0}
.mi-founder-col > .wp-block-heading:first-child{margin-top:0}
/* v9.4 — agency clients under a timeline entry */
.mi-tl-item .mi-txt > p{margin:0;color:var(--mi-muted);font-size:13px;line-height:1.4}
.mi-tl-item p.mi-tl-clients{margin:6px 0 0!important;font-size:12.5px!important;line-height:1.5!important;color:#48648a!important;background:#f1f6fd;border-radius:8px;padding:7px 10px}

/* v9.5 — Certifications: gliding row of boxes (like "Experience gained at") */
.mi-certs2{position:relative;margin-top:6px}
.mi-cert-marquee{padding:14px 0 18px}
.mi-cert-marquee .mi-marquee-track.mi-cert-row{align-items:stretch;gap:18px;padding:0}
html.mi-motion .mi-cert-row{animation-duration:var(--mi-dur,60s)!important}
.mi-cert-marquee:hover .mi-cert-row,.mi-cert-marquee:focus-within .mi-cert-row,.mi-cert-marquee.is-paused .mi-cert-row{animation-play-state:paused}
.mi-cert-card{position:relative;flex:0 0 300px;width:300px;box-sizing:border-box;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--mi-line);border-radius:16px;padding:18px 18px 16px;margin:0!important;box-shadow:0 4px 14px rgba(16,42,80,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.mi-cert-card:hover{transform:translateY(-4px);border-color:#bcd6f7;box-shadow:0 14px 30px rgba(16,42,80,.12)}
.mi-cert-badge{flex:0 0 48px;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.mi-cert-body{min-width:0;display:flex;flex-direction:column}
.mi-cert-body > *{margin:0!important}
.mi-cert-card h3{font-size:16px;line-height:1.3;color:var(--mi-navy);font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.mi-cert-inst{margin-top:5px!important;font-size:14px;color:var(--mi-muted);line-height:1.4}
.mi-cert-verify{margin-top:10px!important;font-size:12.5px;font-weight:700;color:var(--mi-blue);text-decoration:none}
.mi-cert-verify:hover{text-decoration:underline}
.mi-cert-new{position:absolute;top:-9px;right:14px;background:linear-gradient(90deg,var(--mi-blue),#6d5cff);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:3px 10px;box-shadow:0 4px 10px rgba(18,104,232,.3)}
p.mi-cert-count{margin:4px 0 0;font-size:13px;color:var(--mi-muted);text-align:center}
/* No animation (reduced motion): the row becomes a swipeable strip instead. */
html:not(.mi-motion) .mi-cert-marquee{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
html:not(.mi-motion) .mi-cert-card{scroll-snap-align:start}
@media (max-width:640px){
  .mi-cert-card{flex-basis:260px;width:260px;padding:16px 15px 14px}
  .mi-cert-badge{flex-basis:42px;width:42px;height:42px;font-size:18px}
  .mi-cert-card h3{font-size:15px}
}
/* start gliding only once visitors can see the row (so the latest certificate is seen first) */
html.mi-motion .mi-cert-marquee:not(.is-live) .mi-cert-row{animation-play-state:paused}
.mi-marquee.mi-cert-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent)}
.mi-cert-badge.is-two{font-size:17px}
.mi-cert-badge.is-long{font-size:13.5px;letter-spacing:.02em}

/* v9.6 — What Defines Me (under Languages) */
.mi-traits{background:#fff;border:1px solid var(--mi-line);border-radius:12px;padding:16px 18px;margin-top:16px}
.mi-traits > *,.mi-trait-list > *,.mi-trait > *{margin-block-start:0!important}
.mi-traits h3{margin:0 0 12px;font-size:14.5px}
.mi-trait-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mi-trait{display:flex;align-items:center;gap:10px;background:var(--mi-bg);border:1px solid var(--mi-line);border-radius:10px;padding:8px 10px;transition:border-color .2s,transform .2s,background .2s}
.mi-trait:hover{border-color:var(--mi-blue);background:#fff;transform:translateY(-2px)}
.mi-trait figure.mi-trait-ico{flex:0 0 30px;width:30px;height:30px;margin:0;border-radius:8px;background:#e3efff;display:flex;align-items:center;justify-content:center}
.mi-trait figure.mi-trait-ico img{width:17px;height:17px;margin:0}
p.mi-trait-t{margin:0;font-size:13px;font-weight:700;color:var(--mi-navy);line-height:1.3}
@media(max-width:420px){.mi-trait-list{grid-template-columns:1fr}}
/* v9.9.1 — Core Expertise: ten cards, two rows */
.mi-expertise-grid .mi-icon-card{min-height:100%}