/* Sitewide fixes layered over the Framer export. Linked from every page's <head>,
   so the rules apply whichever page a visitor lands on first. */

/* Case-study TL;DR: a CSS speech bubble (three rounded corners, one square) instead
   of text laid over the bubble PNG, so the box grows with its text at every width. */
.framer-3a8ER .framer-1mq2bw2,
.framer-3a8ER .framer-1qr4bnj,
.framer-3a8ER .framer-m0yja0,
.framer-bNn11 .framer-idifov,
.framer-n0UUw .framer-1lh9vdl,
.framer-QrRzv .framer-ktrt6r,
.framer-V3esn .framer-bf2oks,
.framer-3pWYv .framer-1ezln7k,
.framer-nrWUd .framer-vueigm,
.framer-H1yvJ .framer-169sof9,
.framer-wrLkW .framer-pa4684,
.framer-xWtL7 .framer-3womze {
  aspect-ratio: auto !important;
  height: auto !important;
  background-color: rgb(223, 234, 248);
  border: 2px solid #222;
  border-radius: 25px 25px 25px 0;
  box-shadow: 4px 4px 0 #00000040;
}
.framer-3a8ER .framer-1mq2bw2 > [data-framer-background-image-wrapper],
.framer-3a8ER .framer-1qr4bnj > [data-framer-background-image-wrapper],
.framer-3a8ER .framer-m0yja0 > [data-framer-background-image-wrapper],
.framer-bNn11 .framer-idifov > [data-framer-background-image-wrapper],
.framer-n0UUw .framer-1lh9vdl > [data-framer-background-image-wrapper],
.framer-QrRzv .framer-ktrt6r > [data-framer-background-image-wrapper],
.framer-V3esn .framer-bf2oks > [data-framer-background-image-wrapper],
.framer-3pWYv .framer-1ezln7k > [data-framer-background-image-wrapper],
.framer-nrWUd .framer-vueigm > [data-framer-background-image-wrapper],
.framer-H1yvJ .framer-169sof9 > [data-framer-background-image-wrapper],
.framer-wrLkW .framer-pa4684 > [data-framer-background-image-wrapper],
.framer-xWtL7 .framer-3womze > [data-framer-background-image-wrapper] {
  display: none !important;
}
.framer-3a8ER .framer-1tt2v9d,
.framer-3a8ER .framer-1mt7lcr,
.framer-3a8ER .framer-1wh0p0n,
.framer-bNn11 .framer-17w20qm,
.framer-n0UUw .framer-1t97tgf,
.framer-QrRzv .framer-1th6l9f,
.framer-V3esn .framer-3yqbql,
.framer-3pWYv .framer-w7rdff,
.framer-nrWUd .framer-1rm70a3,
.framer-H1yvJ .framer-vdu31m,
.framer-wrLkW .framer-1f0kewv,
.framer-xWtL7 .framer-xse5jn {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  padding: 24px 28px !important;
}
@media (max-width: 809.98px) {
.framer-3a8ER .framer-1tt2v9d,
.framer-3a8ER .framer-1mt7lcr,
.framer-3a8ER .framer-1wh0p0n,
.framer-bNn11 .framer-17w20qm,
.framer-n0UUw .framer-1t97tgf,
.framer-QrRzv .framer-1th6l9f,
.framer-V3esn .framer-3yqbql,
.framer-3pWYv .framer-w7rdff,
.framer-nrWUd .framer-1rm70a3,
.framer-H1yvJ .framer-vdu31m,
.framer-wrLkW .framer-1f0kewv,
.framer-xWtL7 .framer-xse5jn {
    padding: 18px 20px !important;
  }
}

/* Home hero: the two "Currently" pills share one row (like the "Previously" pills),
   so adding the Figma Campus Leader pill doesn't make the hero taller. */
.cs-currently-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* About: "Currently" before "Previously", then the closing line (.cs-about-cta, added in
   the About HTML and page module). The parent is a flex column, so order is enough. */
.framer-yofr6x { order: 1; }
.framer-6zvcjb { order: 2; }
.cs-about-cta {
  order: 3;
  width: 100%;
  display: grid;
  gap: 8px;
  padding-top: 24px;
  border-top: 1.5px solid rgba(16, 32, 31, 0.14);
  font-family: "Inter", "Inter Placeholder", sans-serif;
  color: #10201f;
}
.cs-about-cta p { margin: 0; }
.cs-about-cta-line {
  font-family: "National Park", "National Park Placeholder", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.cs-about-cta-links { font-size: 16px; color: #4d605e; }
.cs-about-cta-links a { color: rgb(0, 127, 128); font-weight: 600; text-decoration: none; }
.cs-about-cta-links a:hover { text-decoration: underline; }
.cs-about-cta-email { color: #10201f; user-select: all; }

/* About on phones. Framer's phone variant kept the desktop rows, so the intro squeezed its
   first answer into a 105px column beside the portrait, the photo grid shrank to thumbnails
   under their captions, and the role/date rows ran off the edge. */
@media (max-width: 809.98px) {
  /* Intro: portrait above the first question and answer, which match the bubbles below. */
  .framer-l4wD3 .framer-po2de9 { flex-direction: column; gap: 24px; }
  .framer-l4wD3 .framer-cex251 { flex: none; width: 180px; }
  .framer-l4wD3 .framer-7vmb1p { flex: none; width: 100%; }
  .framer-l4wD3 .framer-wq1um9 { width: 75% !important; }

  /* Photos: one column, each at a readable size, with the caption kept to one corner. */
  .framer-l4wD3 .framer-35hglj-container > div,
  .framer-l4wD3 .framer-35hglj-container > div > div { height: auto !important; }
  .framer-l4wD3 .framer-35hglj-container [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 16px !important;
  }
  .framer-l4wD3 .framer-35hglj-container [style*="grid-template-columns"] > div {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 3 / 2;
  }
  .framer-l4wD3 .framer-35hglj-container [style*="grid-template-columns"] > div:nth-child(2) { aspect-ratio: 4 / 5; }
  .framer-l4wD3 .framer-35hglj-container [style*="grid-template-columns"] > div > div {
    max-width: calc(100% - 16px);
    font-size: 10px !important;
    line-height: 1.4;
  }

  /* Roles: the date drops under the title, and long titles wrap. */
  .framer-l4wD3 :is(.framer-1nqfkm5, .framer-7vcja1, .framer-1yh2kke, .framer-utlqc9, .framer-1b2wa7m, .framer-jirjrb) {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .framer-l4wD3 :is(.framer-sopich, .framer-1y5rnmn) { gap: 16px !important; }
  .framer-l4wD3 :is(.framer-1tkuhaf, .framer-1418pgk, .framer-c9fqr4, .framer-iso3kh, .framer-j2ntyl, .framer-5cftjq) { width: 100%; }
  .framer-l4wD3 :is(.framer-1bs8hnz, .framer-1rtzlsc, .framer-17qvjai, .framer-1ryggk, .framer-1edi6ug, .framer-195ipz8) {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
}

/* Lenovo: the three-stage summary replaces the blurred NDA grid and its sticker.
   The originals stay in the DOM (hidden) so hydration still matches. */
.framer-3pWYv .framer-puo9tt { display: none !important; }
.cs-stages { width: 100%; display: grid; gap: 14px; font-family: "Inter", "Inter Placeholder", sans-serif; color: #10201f; }
.cs-stages-note { margin: 0; font-size: 15px; color: #4d605e; }
.cs-stages-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-stage {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 20px;
  border: 1.5px solid #222;
  border-radius: 25px 25px 25px 0;
}
.cs-stage p { margin: 0; }
.cs-stage-k { font-family: "Necto Mono", ui-monospace, monospace; font-size: 13px; }
.cs-stage-t { font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
/* Same stage colors as the User Journey above it, so each concept maps to its failure point. */
.cs-stage-1 { background: var(--token-be1232a8-1715-4df8-86d1-674fc284e53c, #e3c7bf); }
.cs-stage-2 { background: var(--token-245f347d-8b04-425a-8fc2-d61c7ca04098, #496362); color: #fff; }
.cs-stage-3 { background: var(--token-89b41be7-b719-4c36-a4d4-d6e433bef571, #aee7e5); }
@media (max-width: 809.98px) {
  .cs-stages-list { grid-template-columns: 1fr; }
}

/* PhysioVaping: the "Talk button vs. proximity" slider gets the full card width,
   with the decision text below it. */
.framer-xWtL7 .framer-13n4nmp { flex-direction: column !important; align-items: stretch !important; }
.framer-xWtL7 .framer-13j7gwl,
.framer-xWtL7 .framer-yfhuen-container,
.framer-xWtL7 .framer-1qdokx4 { width: 100% !important; flex: none !important; }
/* Its two screenshots have different shapes (portrait vs landscape); fill the frame
   so both sides line up instead of letterboxing differently. */
.framer-xWtL7 .framer-yfhuen-container img { object-fit: cover !important; }

/* Some Framer sections run ~18px past the window (Encore! on every nav, from the
   original export), which lets the page scroll sideways. clip (not hidden) keeps
   position: sticky working. */
html, body { overflow-x: clip; }