/* ============================================================
   mananmehta.com v2 · design system (Gate 2 font swap, 28 Jul 2026)
   White, clean, simple animations. Advercase titles, IBM Plex Sans
   body+UI, EB Garamond pull-quotes. Advercase has only Regular(400)
   and Bold(700): font-synthesis off, hierarchy via size + letter-spacing.
   Media lives inside rounded cards, never full-bleed heavy.
   ============================================================ */
@import url('/assets/css/fonts.css');

:root{
  --ink:#0B1326; --navy:#1D386A;
  --mc-yellow:#F7B827; --mc-teal:#42B6A2;
  --peri:#AEC6FF; --mint:#6AD9C3; --amber:#FFBE2E;
  --grad:linear-gradient(100deg,#7FA5F5 0%,#42B6A2 48%,#F7B827 100%);
  --gray-7:#4a5165; --gray-6:#6e7385; --gray-3:#a5aab8;
  --hairline:rgba(11,19,38,.10); --paper:#F7F7F5;
  --fh:'Advercase',system-ui,-apple-system,sans-serif;   /* titles */
  --fb:'IBM Plex Sans',system-ui,-apple-system,sans-serif;/* body + UI */
  --fa:'Advercase',system-ui,-apple-system,sans-serif;    /* accent/eyebrows */
  --fq:'EB Garamond',Georgia,serif;                       /* pull-quotes only */
  --r-card:24px; --r-big:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Advercase ships only 400 + 700: never synthesize bolder weights */
*{font-synthesis:none}
body{font-family:var(--fb);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap--wide{max-width:1280px}

/* ---------------- top nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s ease,border-color .3s ease}
.nav.is-solid{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.nav__in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.nav__brand{font-family:var(--fh);font-weight:800;font-size:16px;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.nav.on-media .nav__brand,.nav.on-media .nav__links a{color:#fff}
.nav.is-solid .nav__brand,.nav.is-solid .nav__links a{color:var(--ink)}
.nav__links{display:flex;gap:26px;list-style:none;align-items:center}
.nav__links a{font-family:var(--fb);font-size:13.5px;font-weight:600;text-decoration:none;color:var(--gray-7);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{font-family:var(--fb);font-weight:600;font-size:13.5px;text-decoration:none;
  background:var(--ink);color:#fff !important;padding:10px 20px;border-radius:999px;transition:.2s}
.nav.on-media .nav__cta{background:#fff;color:var(--ink) !important}
.nav.is-solid .nav__cta{background:var(--ink);color:#fff !important}
.nav__cta:hover{transform:translateY(-1px)}
.nav__burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative}
.nav__burger span{position:absolute;left:9px;right:9px;height:2px;background:currentColor;border-radius:2px;transition:.25s;color:var(--ink)}
.nav.on-media .nav__burger span{color:#fff}
.nav.is-solid .nav__burger span{color:var(--ink)}
.nav__burger span:nth-child(1){top:14px}.nav__burger span:nth-child(2){top:20px}.nav__burger span:nth-child(3){top:26px}
.nav__drawer{display:none}
@media(max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__drawer{display:block;position:fixed;inset:0;background:#fff;z-index:89;padding:110px 32px 40px;
    transform:translateY(-102%);transition:transform .45s cubic-bezier(.7,0,.3,1)}
  .nav__drawer.open{transform:translateY(0)}
  .nav__drawer a{display:block;font-family:var(--fh);font-weight:700;font-size:30px;letter-spacing:-.02em;
    text-decoration:none;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--hairline)}
  .nav__drawer a:last-child{border:0}
  body.drawer-open .nav{background:rgba(255,255,255,.86)}
  body.drawer-open .nav .nav__brand,body.drawer-open .nav .nav__burger span{color:var(--ink)}
}

/* ---------------- home hero · Snellenberg style (v4) ---------------- */
.hero{position:relative;min-height:92svh;display:flex;flex-direction:column;background:#fff;overflow:hidden;padding-top:92px}
.hero__in{width:100%;max-width:1280px;margin:0 auto;padding:32px 24px 0;flex:1;
  display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.hero__hello{font-family:var(--fa);font-size:clamp(15px,1.5vw,19px);letter-spacing:.04em;color:var(--gray-6);margin-bottom:18px}
.hero__hello .st,.st{font-family:var(--fa);color:var(--mc-teal);font-style:normal}
.hero__h1{font-family:var(--fh);font-weight:800;font-size:clamp(32px,4.3vw,56px);line-height:1.06;letter-spacing:-.012em;margin-bottom:16px}
.hero__h1 .sub,h1 .sub{display:block;font-family:var(--fb);font-weight:600;font-size:clamp(14px,1.5vw,18px);
  color:var(--gray-6);letter-spacing:0;line-height:1.5;margin-top:14px;max-width:640px}
.hero__lede{color:var(--gray-6);font-size:16px;max-width:520px;margin-bottom:26px}
.hero__lede b{color:var(--ink)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero__photo{position:relative;justify-self:end;width:min(430px,100%)}
.hero__photo img{width:100%;border-radius:var(--r-big);
  -webkit-mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.35) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.35) 96%,transparent 100%)}
.hero__chip{position:absolute;left:18px;bottom:22px;display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;border-radius:999px;padding:9px 18px 9px 12px;
  font-family:var(--fa);font-size:12.5px;letter-spacing:.05em;white-space:nowrap}
.hero__chip svg{width:18px;height:18px;flex:none;animation:heroSpin 12s linear infinite}
@keyframes heroSpin{to{transform:rotate(360deg)}}
/* big drifting name line */
.hero__name{overflow:hidden;white-space:nowrap;padding:30px 0 10px;user-select:none}
.hero__name-track{display:inline-flex;align-items:baseline;animation:heroDrift 48s linear infinite;will-change:transform}
.hero__name-track span{font-family:var(--fh);font-weight:800;font-size:clamp(56px,9vw,148px);
  letter-spacing:-.015em;line-height:1;color:var(--ink);padding-right:.55em}
.hero__name-track .st{font-size:.55em;padding-right:.55em}
@keyframes heroDrift{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .hero__name-track{animation:none}
  .hero__chip svg{animation:none}
}
@media(max-width:820px){
  .hero{min-height:auto;padding-top:84px}
  .hero__in{grid-template-columns:1fr;gap:28px;padding-top:20px}
  .hero__photo{justify-self:start;width:min(340px,88%)}
  .hero__name{padding:22px 0 6px}
}

/* ---------------- statement section (I love / teach / talk / manage) ---------------- */
.stmt__lines{margin-top:8px}
.stmt__line{font-family:var(--fh);font-weight:800;font-size:clamp(28px,5.4vw,66px);line-height:1.1;
  letter-spacing:-.012em;padding:16px 0;border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;transition:opacity .3s ease}
.stmt__line:first-child{border-top:1px solid var(--hairline)}
.stmt__line .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stmt__line .tail{font-family:var(--fb);font-weight:600;font-size:clamp(13px,1.5vw,17px);
  color:var(--gray-6);letter-spacing:0;line-height:1.4}
.stmt__thumb{display:none;width:58px;height:58px;object-fit:cover;border-radius:14px;flex:none}
@media(hover:hover) and (pointer:fine){
  .stmt__lines:hover .stmt__line{opacity:.32}
  .stmt__lines .stmt__line:hover{opacity:1}
}
.stmt__float{position:fixed;z-index:70;width:170px;height:212px;object-fit:cover;border-radius:18px;
  pointer-events:none;opacity:0;transform:translate(0,-50%) scale(.92);
  transition:opacity .25s ease,transform .25s ease;
  box-shadow:0 24px 60px -28px rgba(29,56,106,.4)}
.stmt__float.on{opacity:1;transform:translate(0,-50%) scale(1)}
@media(max-width:820px){
  .stmt__thumb{display:block}
  .stmt__float{display:none}
}

/* ---------------- page hero · AI Crew style (inner pages, v4) ---------------- */
.ai-hero{padding:148px 0 64px;background:#fff}
.ai-hero__in{max-width:1280px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
.ai-hero__eyebrow{font-family:var(--fa);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-6);margin-bottom:16px}
.ai-hero h1{font-family:var(--fh);font-weight:800;font-size:clamp(36px,4.7vw,62px);
  line-height:1.05;letter-spacing:-.015em;margin-bottom:18px}
.ai-hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-hero__p{color:var(--gray-6);font-size:16.5px;max-width:540px;margin-bottom:26px}
.ai-hero__p b{color:var(--ink)}
.ai-hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:30px;border-top:1px solid var(--hairline);padding-top:22px}
.ai-hero__stats b{font-family:var(--fh);font-weight:800;font-size:clamp(24px,2.6vw,34px);display:block;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-hero__stats span{font-size:13px;color:var(--gray-6)}
.ai-hero__media{aspect-ratio:4/3}
@media(max-width:900px){
  .ai-hero{padding:120px 0 48px}
  .ai-hero__in{grid-template-columns:1fr;gap:30px}
  .ai-hero__media{order:2}
}

/* ---------------- buttons, chips ---------------- */
.btn{font-family:var(--fb);font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;
  text-decoration:none;display:inline-block;transition:transform .2s,opacity .2s,border-color .2s;cursor:pointer;border:0}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{transform:translateY(-2px);opacity:.92}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px)}
.btn--ghost{color:var(--navy);border:1.5px solid var(--hairline);background:transparent}
.btn--ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn--ghost-w{color:#fff;border:1.5px solid rgba(255,255,255,.5);background:transparent}
.btn--ghost-w:hover{border-color:#fff;transform:translateY(-2px)}
.chip{font-family:var(--fa);font-size:11.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:7px 14px;border:1px solid var(--hairline);color:var(--gray-6);background:#fff;display:inline-block}
.chip--tint{color:var(--ink);background:rgba(66,182,162,.12);border-color:rgba(66,182,162,.4)}

/* ---------------- sections ---------------- */
.sec{padding:88px 0}
.sec--paper{background:var(--paper)}
.sec__eyebrow{font-family:var(--fa);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-6);margin-bottom:14px}
.sec__h2{font-family:var(--fh);font-weight:700;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.012em;line-height:1.08;margin-bottom:14px}
.sec__h2 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec__lede{color:var(--gray-6);max-width:640px;font-size:16.5px;margin-bottom:40px}
.center{text-align:center}
.center .sec__lede{margin-left:auto;margin-right:auto}
@media(max-width:820px){.sec{padding:64px 0}}

/* reveals */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;transition:none}}

/* ---------------- media card ---------------- */
.mcard{position:relative;border-radius:var(--r-big);overflow:hidden;border:1px solid var(--hairline);
  box-shadow:0 24px 60px -28px rgba(29,56,106,.25);background:#eef3fb}
.mcard video,.mcard img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
/* portrait sources (9:16 phone shots) inside wide cards: pull the crop up to the face */
.mcard img.is-tall,.mcard video.is-tall{object-position:50% 8%}
/* group / landscape shots read better centred */
.mcard img.is-wide{object-position:50% 45%}
.mcard__label{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--fa);font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(11,19,38,.45);
  padding:7px 14px;border-radius:999px;backdrop-filter:blur(8px)}

/* ---------------- logo bar + stats ---------------- */
.logos{display:flex;gap:12px 26px;flex-wrap:wrap;justify-content:center;align-items:center}
.logos span{font-family:var(--fh);font-weight:700;font-size:14px;color:var(--gray-3);letter-spacing:.02em;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:44px}
.stat{border:1px solid var(--hairline);border-radius:var(--r-card);padding:26px;text-align:center;background:#fff}
.stat b{font-family:var(--fh);font-weight:800;font-size:38px;letter-spacing:-.02em;display:block;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:13.5px;color:var(--gray-6)}

/* ---------------- card grids ---------------- */
.grid{display:grid;gap:16px}
/* text + media side by side on desktop, stacked on phones.
   Replaces the inline grid-template-columns that never collapsed. */
.grid--split{grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.grid--split.is-flip{grid-template-columns:1fr 1.1fr}
@media(max-width:900px){
  .grid--split,.grid--split.is-flip{grid-template-columns:1fr;gap:28px}
}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--hairline);border-radius:var(--r-card);padding:28px;background:#fff;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(29,56,106,.28)}
.card h3{font-family:var(--fh);font-weight:600;font-size:17px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--gray-6)}
.card .who{margin-top:12px;font-size:12.5px;color:var(--gray-3);font-style:normal}
.card--media{padding:0;overflow:hidden}
.card--media .ph{aspect-ratio:16/10;overflow:hidden;background:#eef3fb}
.card--media .ph img,.card--media .ph video{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card--media:hover .ph img{transform:scale(1.04)}
.card--media .bd{padding:20px 22px}

/* ---------------- flow diagram (rule 19) ---------------- */
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;justify-content:center;margin-top:8px}
.flow__step{flex:1 1 180px;max-width:220px;border:1px solid var(--hairline);border-radius:18px;background:#fff;padding:20px;position:relative;margin:0 22px 22px 0}
.flow__step::after{content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  font-family:var(--fh);font-weight:700;color:var(--mc-teal);font-size:18px}
.flow__step:last-child::after{content:""}
.flow__step .n{font-family:var(--fh);font-weight:800;font-size:12px;color:#fff;background:var(--ink);
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.flow__step h4{font-family:var(--fh);font-weight:600;font-size:14.5px;margin-bottom:6px}
.flow__step p{font-size:12.5px;color:var(--gray-6);line-height:1.5}
@media(max-width:820px){
  .flow{flex-direction:column;align-items:stretch}
  .flow__step{max-width:none;margin:0 0 30px 0}
  .flow__step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%)}
  .flow__step:last-child::after{content:""}
}

/* ---------------- quotes ---------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.quote{border-left:3px solid;border-image:var(--grad) 1;background:#fff;border-radius:0 var(--r-card) var(--r-card) 0;
  padding:24px 26px;border-top:1px solid var(--hairline);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.quote p{font-family:var(--fq);font-size:18px;font-style:normal;color:var(--gray-7);margin-bottom:10px;line-height:1.6}
.quote span{font-family:var(--fh);font-weight:600;font-size:13px;color:var(--ink)}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--hairline)}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--fh);font-weight:600;font-size:16.5px;color:var(--ink);
  padding:20px 44px 20px 0;position:relative}
.faq__q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-weight:400;font-size:22px;color:var(--mc-teal);transition:transform .25s}
.faq__item.open .faq__q::after{transform:translateY(-50%) rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{padding:0 0 20px;color:var(--gray-6);font-size:15px;max-width:700px}

/* ---------------- page hero (inner pages) ---------------- */
.phero{padding:150px 0 56px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(95px);
  opacity:.3;background:var(--peri);top:-240px;left:-140px;pointer-events:none}
.phero::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(95px);
  opacity:.2;background:var(--mint);top:-200px;right:-160px;pointer-events:none}
.phero h1{font-family:var(--fh);font-weight:700;font-size:clamp(36px,5.4vw,64px);letter-spacing:-.028em;line-height:1.05;max-width:900px}
.phero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .sec__lede{margin-top:18px;margin-bottom:0}
.phero__banner{margin-top:44px}
.phero__banner .mcard{aspect-ratio:21/9}
/* banner holding a phone-portrait source: a wide band cuts the face off and
   upscales a 900px-wide file across 1090px. Use a real portrait card instead. */
.phero__banner--portrait{max-width:460px;margin-left:0}
.phero__banner--portrait .mcard{aspect-ratio:4/5}
.phero__banner--portrait .mcard img{object-position:50% 14%}
@media(max-width:820px){.phero{padding:120px 0 40px}.phero__banner .mcard{aspect-ratio:4/3}
  .phero__banner--portrait{max-width:100%}
  .phero__banner--portrait .mcard{aspect-ratio:4/5}}

/* ---------------- video wall (teaching) ---------------- */
.vwall{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.vwall .mcard{aspect-ratio:16/10}
.vwall .v-a{grid-column:span 7}
.vwall .v-b{grid-column:span 5}
.vwall .v-c{grid-column:span 5;aspect-ratio:4/5}
.vwall .v-d{grid-column:span 7;aspect-ratio:16/9}
@media(max-width:820px){.vwall .v-a,.vwall .v-b,.vwall .v-c,.vwall .v-d{grid-column:span 12}}

/* ---------------- CTA band ---------------- */
.cta-band{background:var(--ink);border-radius:var(--r-big);padding:64px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:8%;right:8%;top:0;height:3px;border-radius:999px;background:var(--grad)}
.cta-band h2{font-family:var(--fh);font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;margin-bottom:12px}
.cta-band p{color:#b9c3da;max-width:560px;margin:0 auto 28px;font-size:15.5px}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--hairline);padding:56px 0 40px;background:#fff}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.foot h4{font-family:var(--fa);font-weight:400;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3);margin-bottom:14px}
.foot a{display:block;text-decoration:none;color:var(--gray-7);font-size:14px;padding:4px 0;transition:color .2s}
.foot a:hover{color:var(--ink)}
.foot__brand{font-family:var(--fh);font-weight:800;font-size:18px;margin-bottom:10px}
.foot__tag{color:var(--gray-6);font-size:14px;max-width:280px}
.foot__base{border-top:1px solid var(--hairline);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--gray-3);font-size:12.5px}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}

/* ---------------- contact: details + form grid (collapses on mobile) ---------------- */
.contact__grid{grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:start}
@media(max-width:820px){
  .contact__grid{grid-template-columns:1fr;gap:28px}
}