/* ==========================================================================
   Mighty Minds case-study system
   Brand tokens lifted from the live Mighty Minds site (Webflow export):
   Inter, charcoal #282828, slate #5f6980, Untitled-UI greys, yellow #ffe143,
   generous rounding. Used across all case-study pages.
   ========================================================================== */

:root {
  --charcoal: #282828;
  --slate: #5f6980;
  --body: #444852;
  --muted: #7a828e;

  --bg: #ffffff;
  --bg-soft: #f9fafb;
  --bg-panel: #f2f4f7;
  --line: #eaecf0;
  --line-strong: #d0d5dd;

  --yellow: #ffe143;

  --green: #1f9d6b;
  --red: #e0533d;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;

  --shadow-sm: 0 1px 2px rgba(40, 40, 40, .06);
  --shadow-md: 0 12px 32px rgba(40, 40, 40, .10);
  --shadow-lg: 0 24px 60px rgba(40, 40, 40, .14);

  --container: 1360px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
img, canvas, iframe, svg { max-width: 100%; }

/* Robust containment: grid/flex children must be allowed to shrink so a wide
   image or chart can never blow out its column and push the layout sideways. */
.scrolly__inner > *, .case-hero__inner > *, .vsplit > * { min-width: 0; }
.sticky-frame, .shotframe, .chartcard, .video-wrap, .figure .frame { max-width: 100%; overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--charcoal);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0 0 1rem; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Top nav ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.wordmark {
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.wordmark span { box-shadow: inset 0 -0.5em 0 var(--yellow); }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  text-decoration: none;
  color: var(--slate);
  font-weight: 500;
  font-size: 15px;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--charcoal); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;
}
.btn-primary { background: var(--charcoal); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: #fff; color: var(--charcoal); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-soft); }

/* ---- Eyebrow + chips ---------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
}
.chip-solid { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

/* ---- Hero --------------------------------------------------------------- */
.hero { padding: 72px 0 40px; }
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin: 6px 0 16px;
}
.hero .lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--slate);
  max-width: 720px;
  line-height: 1.5;
}
.back-link {
  display: flex; width: fit-content; align-items: center; gap: 6px;
  color: var(--slate); text-decoration: none; font-weight: 600; font-size: 14px;
  margin-bottom: 14px;
}
.back-link:hover { color: var(--charcoal); }

/* ---- Metric row --------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 40px 0 8px;
}
.metric {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 15px 22px;
}
.metric .num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.metric .num small { font-size: 1.2rem; font-weight: 700; }
.metric .label { color: var(--slate); font-size: 14px; margin-top: 4px; }

/* ---- Sections ----------------------------------------------------------- */
section { padding: 30px 0; }
.section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--yellow);
}
.section h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 14px; }
.prose { max-width: 760px; }
.prose p { color: var(--body); }
.prose strong { color: var(--charcoal); }

/* Callout */
.callout {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius-s);
  padding: 20px 24px;
  margin: 20px 0;
  color: var(--charcoal);
}

/* Two-column feature list */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.feature h4 { font-size: 1.05rem; margin-bottom: 6px; }
.feature p { font-size: 15px; color: var(--slate); margin: 0; }

/* ---- Figures (screenshots / video) ------------------------------------- */
.figure {
  margin: 22px 0 8px;
}
.figure .frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
}
.figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 760px) { .figure-grid { grid-template-columns: 1fr; } }

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.video-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Tech tags */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.taglist .tag {
  font-size: 13px; font-weight: 600; color: var(--charcoal);
  background: var(--bg-panel); border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 999px;
}

/* Role list */
.role-list { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.role-list li {
  position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line);
  color: var(--body);
}
.role-list li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 9px; height: 9px; border-radius: 3px; background: var(--yellow);
}

/* Divider note */
.note {
  font-size: 14px; color: var(--muted); font-style: italic; margin-top: 10px;
}

/* ---- CTA / footer ------------------------------------------------------- */
.cta {
  margin-top: 40px;
  background: var(--charcoal);
  color: #fff;
  border-radius: var(--radius-l);
  padding: 48px 40px;
  text-align: center;
}
.cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }
.cta p { color: #c9ccd2; max-width: 540px; margin: 0 auto 24px; }
.cta .btn-primary { background: var(--yellow); color: var(--charcoal); }
.cta .btn-ghost { background: transparent; color: #fff; border-color: #4a4a4a; }
.cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding: 28px 0;
  color: var(--muted);
  font-size: 14px;
}
footer.site .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---- Work index --------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.work-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.work-card .thumb {
  aspect-ratio: 16 / 10;
  background: var(--bg-panel) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.work-card .body { padding: 22px 24px; }
.work-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
.work-card p { color: var(--slate); font-size: 15px; margin: 0 0 12px; }
.work-card .metricline { color: var(--charcoal); font-weight: 700; font-size: 14px; }

@media (max-width: 600px) {
  .nav-links { gap: 16px; }
  .nav-links a.hide-sm { display: none; }
  .hero { padding: 48px 0 28px; }
}

/* ---- Scrollytelling: flowing editorial narrative + big pinned media ---- */
.scrolly { padding: 14px 0 8px; }
.scrolly > .container { max-width: var(--container); }
.scrolly__lead { max-width: 760px; margin-bottom: 8px; }

.step { padding: 3.5vh 0; scroll-margin-top: 88px; }
.step h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); margin-bottom: 12px; }
.step p { color: var(--body); max-width: 440px; margin: 0 0 0.9rem; }
.step p:last-child { margin-bottom: 0; }
.step p strong { color: var(--charcoal); }
.step ul.tight { margin: 4px 0 0; padding-left: 18px; max-width: 440px; }
.step ul.tight li { margin-bottom: 8px; color: var(--body); }
.step__media-inline { margin-top: 18px; }

.scrolly__sticky { display: none; }

@media (min-width: 920px) {
  .scrolly__inner {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    column-gap: 52px;
    align-items: start;
  }
  /* Each scene is tall enough to reach (and dwell at) the vertical center,
     so its image gets centered before the next scene takes over. Content is
     centered in the scene so the text lines up with the centered image. */
  .scrolly__steps .step {
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .scrolly__steps .step:first-child { min-height: 88vh; }
  .scrolly__steps .step:last-child { padding-bottom: 10vh; }
  /* Trailing room so the final scene's text can reach vertical center while the
     pinned image is still centered (the sticky aside unpins at container end). */
  .scrolly__steps .tour-tail { height: 40vh; }
  .step__media-inline { display: none; }

  /* Pinned media sits in the vertical center of the window, not the top */
  .scrolly__sticky {
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .sticky-frame {
    position: relative; width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .sticky-frame .shot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
  .sticky-frame .shot.is-active { opacity: 1; }
  .sticky-frame .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  /* For screenshots that are not 16:10 (e.g. a square tooth chart), show the
     whole image inside the frame instead of cropping it. */
  .sticky-frame .shot.shot-contain img { object-fit: contain; object-position: center; padding: 14px; }
  .sticky-cap { margin-top: 14px; min-height: 20px; color: var(--muted); font-size: 14px; text-align: center; transition: opacity .3s ease; }
  .sticky-rail { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
  .sticky-rail span { width: 28px; height: 4px; border-radius: 99px; background: var(--line-strong); transition: background .3s ease; }
  .sticky-rail span.is-active { background: var(--yellow); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-frame .shot { transition: none; }
}

/* ---- Split hero (text + product shot above the fold) ------------------- */
.case-hero { padding: 40px 0 32px; }
.case-hero__inner { display: block; }
.hero-top { margin-bottom: 18px; }
.hero-rest .chips { margin-top: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hero-media { margin: 24px 0 6px; }

/* Browser-chrome frame for product screenshots */
.shotframe {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.shotframe__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.shotframe__bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong); display: inline-block;
}
.shotframe__bar .u {
  margin-left: 10px; font-size: 12px; color: var(--muted);
  background: var(--bg-panel); border-radius: 99px; padding: 4px 14px;
}
.shotframe img { display: block; width: 100%; height: auto; }

@media (min-width: 920px) {
  .case-hero { padding: 28px 0 36px; }
  .case-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-areas: "top media" "rest media";
    column-gap: 56px;
    align-items: center;
  }
  .hero-top { grid-area: top; align-self: end; margin-bottom: 14px; }
  .hero-rest { grid-area: rest; align-self: start; }
  .hero-media { grid-area: media; align-self: center; margin: 0; }
  .case-hero .metrics { margin: 16px 0 0; grid-template-columns: repeat(2, 1fr); }
}

/* ---- Interactive insight chart (hero) ---------------------------------- */
.chartcard { padding: 16px 18px 18px; background: #fff; }
.chartcard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.cc-title { font-weight: 700; color: var(--charcoal); font-size: 1rem; }
.cc-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cc-kpis { display: flex; gap: 18px; }
.cc-kpi b { display: block; font-size: 1.15rem; color: var(--charcoal); font-weight: 800; line-height: 1.1; }
.cc-kpi span { font-size: 11px; color: var(--slate); }
.cc-legend { display: flex; gap: 16px; margin: 2px 0 10px; }
.cc-legend .lg { font-size: 12px; color: var(--slate); display: inline-flex; align-items: center; gap: 7px; }
.cc-legend .lg::before { content: ""; width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cc-legend .lg-coll::before { background: #4f46e5; }
.cc-legend .lg-exp::before { background: #e7eaf0; }
.cc-canvas { position: relative; height: 230px; }
@media (min-width: 920px) { .cc-canvas { height: 300px; } }

/* ---- Hero copilot answer card (AI-forward hero) ------------------------ */
.copilot-card { padding: 18px 18px 16px; background: #fff; font-size: 15px; }
.cop-q {
  width: fit-content; max-width: 82%; margin: 0 0 16px auto;
  background: #2563eb; color: #fff; font-weight: 600; font-size: 14px;
  padding: 9px 15px; border-radius: 16px 16px 4px 16px;
}
.cop-a { display: flex; gap: 12px; align-items: flex-start; }
.cop-a__avatar {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: #eef2ff; color: #2563eb; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cop-a__body { min-width: 0; flex: 1; }
.cop-a__body > p { margin: 2px 0 12px; color: var(--charcoal); line-height: 1.55; }
.cop-cite { color: #2563eb; font-weight: 600; }
.cop-cases { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.cop-cases__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.cop-cases__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cop-chip { display: inline-flex; align-items: center; gap: 9px; background: #eef2ff; border: 1px solid #dbe3fb; border-radius: 999px; padding: 5px 12px; }
.cop-chip b { color: #2563eb; font-weight: 700; font-size: 13px; }
.cop-chip span { color: var(--slate); font-size: 12px; }
.cop-imgbtn { font-size: 12px; color: var(--slate); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.cop-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.cop-foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }

/* ---- Video split hero (scrolling narrative + pinned video) ------------- */
.vsplit__media { margin: 24px 0 10px; }
@media (min-width: 920px) {
  .vsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "top media" "body media";
    column-gap: 52px;
    align-items: start;
  }
  .vsplit__top { grid-area: top; }
  .vsplit__body { grid-area: body; margin-top: 30px; }
  .vsplit__media {
    grid-area: media; margin: 0;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .vsplit__body section:first-child { padding-top: 0; }
}