/* ============================================
 * Home page — Michelle Chen portfolio
 * ============================================ */

/* ============ BRAND PALETTE ============
 * Every brand-coloured surface on the site resolves through these four
 * values, so the whole thing re-skins from this one block. Change all four
 * together — --brand-rgb must always match --brand, or the translucent
 * surfaces will tint a different hue from the solid ones.
 *
 * Blues trialled and rejected (white eyes / nav pill lost contrast):
 *   #00BFFF -> rgb 0, 191, 255   dark #0077A8  deep #0FA3D6
 *   #80DFFF -> rgb 128, 223, 255 dark #08536B  deep #29B6E8
 *
 * (assets/img/favicon.svg and thumbnail.svg carry the colour too — those are
 * standalone documents, so their hex is baked in and has to change with it.)
 */
:root {
  --brand: #2ecc71;
  --brand-rgb: 46, 204, 113;
  --brand-dark: #0e7c3f;
  --brand-deep: #27ae60;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--brand);
}

html:has(body.mc-home) {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

body.mc-home {
  font-family: 'Montserrat', sans-serif;
  color: #111511;
  -webkit-font-smoothing: antialiased;
  /* style.css locks body scroll for app-shell pages with #scroll-container */
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.mc-home a {
  color: #111511;
}

.mc-home a.mc-modal-link {
  color: var(--brand);
}

.mc-home a:hover {
  color: var(--brand-dark);
}

.mc-home a.mc-modal-link:hover {
  color: var(--brand);
}

.mc-home,
.mc-home *,
.mc-home *::before,
.mc-home *::after {
  box-sizing: border-box;
}

.mc-home ::selection {
  background: #111511;
  color: var(--brand);
}

@keyframes mc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mc-bubble-pop {
  0% { opacity: 0; transform: translateY(10px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-marquee-track { animation: none !important; }
  .mc-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============ SCROLL / ENTER REVEALS ============ */

.mc-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.mc-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.mc-reveal[data-plx] {
  transform: none;
}

.mc-reveal[data-plx].is-visible {
  transform: none;
}

/* cap the page at the same 1440px content width as the case pages */
.mc-root {
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
}

.mc-home-fold {
  height: 100dvh;
  height: 100vh;
  max-height: 100dvh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* ============ FLOATING PILL NAV ============ */

.mc-nav {
  position: fixed;
  top: 18px;
  /* track the capped 1440px content column, not the viewport edge */
  left: calc(max(0px, (100vw - 1440px) / 2) + 6vw);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(17, 21, 17, 0.1);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  box-shadow: none;
}

.mc-nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--brand);
  text-decoration: none;
}

.mc-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}

.mc-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: #111511;
  transition: background 0.15s ease;
}

.mc-nav-link:hover {
  background: rgba(var(--brand-rgb), 0.16);
  color: #111511;
}

.mc-nav-link.is-active {
  background: var(--brand);
  color: #111511;
}

/* Companion pill on the right of the header, holding the same links the intro
   row carries beside the name. Mirrors .mc-nav's own geometry so the two read
   as one header band. Revealed by initStickyNavActions() in home.js. */
.mc-nav-actions {
  position: fixed;
  top: 18px;
  /* Mirror of .mc-nav's left offset so both pills track the 1440px column.
     The trailing term cancels the scrollbar: 100vw counts it but `right`
     resolves against the content box, which would otherwise leave this pill
     sitting ~8px further in than the nav pill is from the left edge. */
  right: calc(max(0px, (100vw - 1440px) / 2) + 6vw - (100vw - 100%));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(17, 21, 17, 0.1);
  border-radius: 999px;
  padding: 7px 10px;
  opacity: 0;
  /* visibility (not just opacity) so the links leave the tab order while hidden */
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.mc-nav-actions.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Nudged down from the intro row's 34px to sit level with .mc-nav-link */
.mc-nav-actions .mc-icon-btn {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.mc-nav-actions .mc-pill-btn {
  height: 32px;
  padding: 0 16px;
  font-size: 11px;
}

/* Two pills side by side don't fit once the nav is near the viewport edges;
   below this the intro row keeps its own copy on its own line anyway. */
@media (max-width: 900px) {
  .mc-nav-actions {
    display: none;
  }
}

/* ============ EYES ============ */

[data-eye] {
  position: relative;
  display: inline-block;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  --mc-eye-lid: var(--brand);
}

[data-eye]::before,
[data-eye]::after {
  content: '';
  position: absolute;
  left: -6%;
  width: 112%;
  height: 50%;
  background: var(--mc-eye-lid);
  z-index: 2;
  pointer-events: none;
  transition: transform 0.14s ease;
}

/* Upper lid — flat edge meets center; curved dome faces upward */
[data-eye]::before {
  top: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(-105%);
}

/* Lower lid — flat edge meets center; curved dome faces downward */
[data-eye]::after {
  bottom: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translateY(105%);
}

[data-eye].is-blinking::before,
[data-eye].is-blinking::after,
[data-eye].is-winking::before,
[data-eye].is-winking::after {
  transform: translateY(0);
}

[data-pupil] {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  background: #111511;
  border-radius: 50%;
}

.mc-eye-nav {
  width: 10px;
  height: 12px;
  margin-right: 3px;
}

.mc-eye-nav:last-child {
  margin-right: 0;
}

.mc-eye-nav [data-pupil] {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
}

/* the eye pair (2 × 18vw + 4vw gap) tracks the viewport at ~40vw,
   locking only when the page itself hits its 1440px cap */
.mc-eye-hero {
  width: clamp(96px, 18vw, 260px);
  height: clamp(112px, 21vw, 303px);
  box-shadow: 0 24px 60px rgba(9, 60, 30, 0.22);
  cursor: pointer;
}

.mc-eye-hero [data-pupil] {
  width: 44%;
  height: 44%;
  margin: -22% 0 0 -22%;
  background: #0d0f0d;
}

/* ============ HERO ============ */

.mc-hero {
  position: relative;
  background: var(--brand);
  padding: clamp(72px, 10vh, 108px) 6vw 8px;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.mc-hero-title {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 72%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: #111511;
  max-width: 11em;
  will-change: transform;
}

.mc-home-fold .mc-hero {
  position: relative;
  z-index: 1;
}

.mc-home-fold .mc-panel--intro {
  z-index: 3;
}

.mc-home-fold.is-eyes-lifted {
  overflow: visible;
}

.mc-home-fold.is-eyes-lifted .mc-hero {
  overflow: visible;
}

.mc-hero-eyes {
  display: flex;
  justify-content: center;
  padding: clamp(4px, 1.5vh, 16px) 0 0;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mc-hero-eyes-parallax {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  will-change: transform;
  /* No transition here on purpose: this element's transform is rewritten every
     scroll frame by the parallax + nav-clamp logic in home.js. A transition on
     top of a value that already changes every frame makes the rendered
     position permanently lag its target, which was part of what let the eyes
     drift past their clamp during fast/large scrolls. */
}

.mc-hero.is-eyes-lifted .mc-hero-title {
  position: relative;
  z-index: 1;
}

.mc-hero.is-eyes-lifted .mc-hero-eyes {
  z-index: 2;
}

/* ============ INTRO + FEATURED WORK ============ */

.mc-panel {
  background: #f6f7f4;
  border-radius: 44px;
  margin: -28px 0 0;
  position: relative;
  z-index: 2;
  padding: clamp(72px, 9vw, 140px) 6vw clamp(96px, 7vw, 100px);
}

.mc-panel--intro {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
  padding: clamp(28px, 4vw, 44px) 6vw clamp(36px, 5vw, 52px);
  border-radius: 44px 44px 0 0;
}

.mc-panel.mc-panel--featured {
  margin-top: 0;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(100px, 12vw, 160px);
  border-radius: 0 0 44px 44px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 44px;
  border-bottom-right-radius: 44px;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

.mc-intro-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  border-bottom: none;
  padding-bottom: 0;
}

.mc-panel--intro .mc-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 16px 28px;
}

.mc-panel--intro .mc-intro-heading {
  grid-column: 1;
  grid-row: 1;
}

.mc-panel--intro .mc-intro-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.mc-panel--intro .mc-intro-copy {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 900px;
}

@media (max-width: 640px) {
  .mc-panel--intro .mc-intro-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .mc-panel--intro .mc-intro-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .mc-panel--intro .mc-intro-actions {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .mc-panel--intro .mc-intro-copy {
    grid-column: 1;
    grid-row: 3;
  }
}

.mc-panel--featured .mc-intro-row,
.mc-panel:not(.mc-panel--intro) .mc-intro-row {
  border-bottom: 1px solid rgba(17, 21, 17, 0.14);
  padding-bottom: 40px;
}

.mc-intro-heading {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 80%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: 0.01em;
}

.mc-intro-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 21, 17, 0.22);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  color: #111511;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mc-icon-btn:hover {
  background: #111511;
  color: var(--brand);
  border-color: #111511;
}

.mc-pill-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  border: 1px solid rgba(17, 21, 17, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111511;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mc-pill-btn:hover {
  background: #111511;
  color: var(--brand);
  border-color: #111511;
}

.mc-intro-copy {
  margin: 0;
  max-width: 900px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(17, 21, 17, 0.78);
}

.mc-featured {
  padding-top: 0;
}

.mc-panel--featured .mc-featured {
  padding-top: 0;
}

.mc-eyebrow {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 21, 17, 0.6);
}

.mc-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  display: inline-block;
}

.mc-section-title {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  font-family: 'Archivo', sans-serif;
  font-stretch: 76%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 14em;
}

.mc-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 52px);
  row-gap: clamp(64px, 7vw, 96px);
}

.mc-featured-grid .mc-card-media {
  aspect-ratio: 1 / 1;
  align-self: auto;
}

.mc-featured-grid .mc-card-media img,
.mc-featured-grid .mc-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Featured layout: one hero card + three equal cards below */
@media (min-width: 721px) {
  .mc-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 32px);
    row-gap: clamp(28px, 3vw, 44px);
    align-items: stretch;
  }

  .mc-featured-grid .mc-card {
    flex-direction: column;
    min-height: 0;
    border-radius: 22px;
  }

  .mc-featured-grid .mc-card-media {
    flex: none;
    width: 100%;
  }

  .mc-featured-grid .mc-card-body {
    flex: none;
    width: 100%;
    padding: 14px 16px 18px;
    min-height: 0;
  }

  .mc-featured-grid .mc-card:nth-child(1) {
    grid-column: 1 / -1;
  }

  .mc-featured-grid .mc-card:nth-child(1) .mc-card-media {
    aspect-ratio: 16 / 8;
  }

  .mc-featured-grid .mc-card:nth-child(n + 2) .mc-card-media {
    aspect-ratio: 1 / 1;
  }

  .mc-featured-grid .mc-card:nth-child(n + 2) .mc-card-title {
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.26;
  }

  .mc-featured-grid .mc-card:nth-child(n + 2) .mc-tag {
    font-size: 12px;
    padding: 6px 12px;
  }
}

@media (max-width: 720px) {
  .mc-featured-grid {
    grid-template-columns: 1fr;
  }
}

.mc-featured-grid .mc-card-body {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  /* fill the space under the media instead of forcing full card height —
     min-height:100% made media + body overflow the card and clipped the
     footer arrow */
  flex: 1 1 auto;
  min-height: 0;
}

.mc-featured-grid .mc-card-copy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.mc-featured-grid .mc-card-footer {
  justify-content: flex-end;
  margin-top: auto;
  flex-shrink: 0;
}

.mc-featured-grid .mc-card-title {
  display: block;
  margin-top: 8px;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.28;
}

.mc-featured-grid .mc-tag {
  font-size: 13px;
  padding: 7px 13px;
}

.mc-card {
  text-decoration: none;
  color: #111511;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid rgba(17, 21, 17, 0.1);
  border-radius: 26px;
  overflow: hidden;
  min-height: 196px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.mc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(10, 40, 20, 0.12);
  color: #111511;
}

.mc-card-media {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 8 1 0;
  min-width: 0;
  align-self: stretch;
}

.mc-card-media img,
.mc-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ Pic2Split live intro animation (JSON keyframes from Figma) ============ */
/* A fixed 1816x1000 stage scaled to cover the card media, so every layer uses the
   exact Figma frame coordinates. Three receipt images fly in over the static
   phone-in-hand foreground, matching the Figma motion timeline (3.809s, loop). */
.p2s-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1816px;
  height: 1000px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--p2s-scale, 0.5));
}

.p2s-stage img {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: fill;
  display: block;
}

.p2s-fg {
  left: 560px;
  top: 261px;
  width: 1256px;
  height: 739px;
}

.p2s-receipt {
  border-radius: 4px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.p2s-r1 {
  left: 1178.1px;
  top: 262.4px;
  width: 199.227px;
  height: 553.851px;
  rotate: 38.46deg;
  animation: p2s-r1 3.80945s linear infinite;
}

.p2s-r2 {
  left: 1095.8px;
  top: 312.5px;
  width: 199.515px;
  height: 331.55px;
  rotate: 33.45deg;
  animation: p2s-r2 3.80945s linear infinite;
}

.p2s-r3 {
  left: 1223.9px;
  top: 522.6px;
  width: 185.282px;
  height: 307.899px;
  rotate: 48.28deg;
  animation: p2s-r3 3.80945s linear infinite;
}

@keyframes p2s-r1 {
  0%, 4.587% { translate: 742.538px -734.554px; }
  16.047%, 100% { translate: 0 0; }
}

@keyframes p2s-r2 {
  0%, 2.935% { translate: 475px -671px; }
  13.316%, 100% { translate: 0 0; }
}

@keyframes p2s-r3 {
  0% { translate: 676px -602px; }
  10.964%, 100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p2s-receipt {
    animation: none !important;
    translate: 0 0 !important;
  }
}

.mc-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  flex: 4 1 0;
  min-width: 0;
  justify-content: space-between;
}

.mc-card-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-card-title {
  font-family: 'Archivo', sans-serif;
  font-stretch: 82%;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.mc-card-sub {
  display: block;
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.65;
  color: rgba(17, 21, 17, 0.62);
}

.mc-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
}

@media (max-width: 900px) {
  .mc-card {
    flex-direction: column;
    min-height: 0;
  }

  .mc-card-media {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .mc-card-body {
    flex: none;
    width: 100%;
  }

  .mc-featured-grid .mc-card-body {
    min-height: 0;
  }
}

.mc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mc-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(17, 21, 17, 0.2);
  border-radius: 999px;
  line-height: 1.2;
}

.mc-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--brand);
  color: #111511;
  font-size: 12px;
  flex: 0 0 32px;
}

.mc-card-arrow i {
  transform: rotate(45deg);
}

.mc-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: #111511;
  color: #ffffff;
}

/* ============ MORE WORK ============ */

/* Scroll-cover stack: each band sticks and slides over the section above */
.mc-more-work,
.mc-bring,
.mc-contact {
  position: sticky;
  top: 0;
  width: 100%;
}

.mc-cover-inner {
  will-change: transform;
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .mc-cover-inner { transform: none !important; }
}

.mc-more-work {
  background: var(--brand);
  z-index: 3;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(40px, 5vw, 56px);
  margin-top: -72px;
  isolation: isolate;
}

.mc-more-work::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #f6f7f4;
  border-radius: 0 0 44px 44px;
  pointer-events: none;
  z-index: 0;
}

.mc-more-work .mc-cover-inner {
  position: relative;
  z-index: 1;
}

.mc-more-work-head {
  padding: clamp(40px, 6vw, 72px) 6vw 0;
}

.mc-more-work-head h2 {
  margin: 0 0 12px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 76%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.01em;
  color: #111511;
}

.mc-more-work-head p {
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 460px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(17, 21, 17, 0.72);
}

.mc-marquee-viewport {
  overflow: hidden;
  width: 100%;
}

.mc-marquee-track {
  display: flex;
  gap: 34px;
  width: max-content;
  padding: 18px 0;
  animation: mc-marquee 36s linear infinite;
}

/* when every tile already fits, the carousel parks itself (set by home.js) */
.mc-marquee-track.is-static {
  animation: none;
  width: 100%;
  justify-content: center;
}

.mc-marquee-track.is-static .mc-marquee-tile[aria-hidden='true'] {
  display: none;
}

.mc-marquee-tile {
  display: block;
  flex: none;
  width: 260px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.mc-marquee-tile:hover,
.mc-marquee-tile:focus-visible {
  transform: rotate(0deg) scale(1.05);
}

.mc-marquee-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-marquee-tile--1 { transform: rotate(-4deg); }
.mc-marquee-tile--2 { transform: rotate(3deg); }
.mc-marquee-tile--3 { transform: rotate(-2.5deg); }
.mc-marquee-tile--4 { transform: rotate(3.5deg); }
.mc-marquee-tile--5 { transform: rotate(-3deg); }

/* ============ WHAT CAN I BRING ============ */

/* Sits UNDER the projects panel rather than over it, so the panel's rounded
   bottom cuts down into the green instead of the green's rounded top cutting
   up into the white. Square top on purpose: the first 44px are tucked behind
   the panel by the negative margin, and rounding them would leave an unpainted
   notch either side of the panel's curve. */
.mc-bring {
  background: var(--brand);
  margin-top: -44px;
  z-index: 0;
  isolation: isolate;
  padding: clamp(90px, 11vw, 160px) 6vw;
}

.mc-bring-title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: 'Archivo', sans-serif;
  font-stretch: 76%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.01em;
}

.mc-bring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.mc-bring-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mc-bring-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #111511;
  color: var(--brand);
  font-size: 20px;
}

.mc-bring-item h3 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 82%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.mc-bring-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(17, 21, 17, 0.75);
}

/* ============ ABOUT ============ */

.mc-about {
  background: #f6f7f4;
  border-radius: 44px 44px 0 0;
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: -44px;
  position: relative;
  z-index: 5;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 11vw, 160px) 6vw clamp(110px, 12vw, 180px);
}

.mc-about-title {
  margin: 0 0 clamp(16px, 2.5vw, 28px);
  font-family: 'Archivo', sans-serif;
  font-stretch: 76%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.01em;
}

.mc-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.mc-about-photo {
  margin: 0;
  position: sticky;
  top: 90px;
  max-width: 440px;
  width: 100%;
  justify-self: end;
  padding-right: 0;
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .mc-about-grid {
    grid-template-columns: 1fr;
  }

  .mc-about-photo {
    position: static !important;
    justify-self: start !important;
    margin-top: 8px;
    padding-right: 0;
    padding-bottom: 0;
    max-width: 360px;
  }
}

@media (max-width: 640px) {
  .mc-about-photo {
    display: none;
  }
}

.mc-about-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.mc-about-copy {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(17, 21, 17, 0.82);
  max-width: 620px;
}

.mc-about-copy p {
  margin: 0 0 16px;
  text-align: justify;
  text-justify: inter-word;
}

.mc-about-copy p:last-child {
  margin-bottom: 0;
}

.mc-about-copy a {
  font-weight: 700;
}

.mc-timeline {
  display: flex;
  flex-direction: column;
  max-width: 620px;
}

.mc-timeline h3 {
  margin: 0 0 4px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 82%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.mc-timeline-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(17, 21, 17, 0.14);
}

.mc-timeline-row--first {
  padding-top: 20px;
}

.mc-timeline-block:last-child .mc-timeline-row:last-child {
  border-bottom: 1px solid rgba(17, 21, 17, 0.14);
}

.mc-timeline-block + .mc-timeline-block h3 {
  margin-top: clamp(32px, 4vw, 52px);
}

.mc-timeline-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 21, 17, 0.55);
  padding-top: 3px;
}

.mc-timeline-row p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.mc-timeline-row p + p {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(17, 21, 17, 0.65);
  text-align: justify;
  text-justify: inter-word;
}

.mc-about-photo-frame {
  border-radius: 24px;
  overflow: visible;
  transform: none;
  box-shadow: none;
  border: 0;
}

.mc-about-photo-stack {
  position: relative;
  width: 100%;
  min-height: 400px;
  aspect-ratio: auto;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.mc-about-photo-slide {
  position: absolute;
  inset: auto;
  display: block;
  object-fit: cover;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease, filter 320ms ease;
  opacity: 1;
  filter: saturate(0.9);
  border-radius: 12px;
  border: 1px solid rgba(17, 21, 17, 0.1);
  box-shadow: none;
}

.mc-about-photo-slide.is-active {
  width: 300px;
  height: 376px;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(3deg);
  z-index: 5;
}

.mc-about-photo-slide.is-next {
  width: 196px;
  height: 246px;
  right: 266px;
  top: 18px;
  transform: rotate(-16deg);
  z-index: 1;
  filter: saturate(0.82);
}

.mc-about-photo-slide.is-back {
  width: 188px;
  height: 236px;
  right: 232px;
  bottom: 12px;
  transform: rotate(11deg);
  z-index: 2;
  filter: saturate(0.76);
}

@media (prefers-reduced-motion: no-preference) {
  .mc-about-photo-slide.is-active:hover,
  .mc-about-photo-slide.is-active:focus-visible {
    transform: translateY(-50%) rotate(5deg);
  }

  .mc-about-photo-slide.is-next:hover,
  .mc-about-photo-slide.is-next:focus-visible {
    transform: rotate(-19deg);
  }

  .mc-about-photo-slide.is-back:hover,
  .mc-about-photo-slide.is-back:focus-visible {
    transform: rotate(14deg);
  }
}

@media (max-width: 900px) {
  .mc-about-photo-stack {
    min-height: 320px;
  }

  .mc-about-photo-slide.is-active {
    width: 228px;
    height: 286px;
    right: 8px;
  }

  .mc-about-photo-slide.is-next {
    width: 148px;
    height: 186px;
    right: 190px;
    top: 12px;
  }

  .mc-about-photo-slide.is-back {
    width: 140px;
    height: 176px;
    right: 162px;
    bottom: 8px;
  }
}

/* ============ CONTACT / FOOTER ============ */

.mc-contact {
  background: var(--brand);
  margin-top: -44px;
  z-index: 6;
  border-radius: 44px 44px 0 0;
  overflow: hidden;
  padding: clamp(90px, 10vw, 150px) 6vw 0;
}

.mc-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

@media (max-width: 800px) {
  .mc-contact-grid {
    grid-template-columns: 1fr;
  }
}

.mc-contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mc-contact-title {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 76%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.01em;
}

.mc-contact-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-contact-eyes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-left: 2px;
}

.mc-eye-contact {
  width: 32px;
  height: 38px;
  flex-shrink: 0;
  cursor: pointer;
}

.mc-eye-contact [data-pupil] {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

.mc-icon-btn--lg {
  width: 38px;
  height: 38px;
  border: 1.5px solid #111511;
  font-size: 15px;
}

.mc-icon-btn--lg:hover {
  background: #111511;
  color: var(--brand);
}

.mc-pill-btn--lg {
  height: 38px;
  padding: 0 20px;
  border: 1.5px solid #111511;
}

.mc-pill-btn--lg:hover {
  background: #111511;
  color: var(--brand);
}

.mc-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mc-form-intro {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(17, 21, 17, 0.8);
}

.mc-form-sent {
  background: #ffffff;
  border: 2px solid #111511;
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 4px 4px 0 #111511;
}

.mc-form-sent p {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.mc-form-sent p:last-child {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(17, 21, 17, 0.7);
}

.mc-form-sent i {
  color: var(--brand);
  margin-right: 8px;
}

.mc-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mc-field input,
.mc-field textarea {
  padding: 0 16px;
  border: 1.5px solid rgba(17, 21, 17, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #111511;
  outline-color: #111511;
}

.mc-field input {
  height: 46px;
}

.mc-field textarea {
  padding: 14px 16px;
  resize: vertical;
}

.site-contact-word-count {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(17, 21, 17, 0.55);
  text-align: left;
}

.site-contact-word-count.is-over-limit {
  color: #7b241c;
  font-weight: 700;
}

.site-contact-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.site-contact-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #7b241c;
}

.mc-submit-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

.mc-submit-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  background: #111511;
  color: var(--brand);
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mc-submit-btn:hover {
  background: #000000;
}

.mc-submit-btn i {
  transform: rotate(45deg);
}

.mc-footer {
  border-top: 1px solid rgba(17, 21, 17, 0.2);
  padding: 22px 0 26px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(17, 21, 17, 0.7);
}

.mc-footer a {
  font-weight: 700;
}

/* ============ PROJECT POPUP MODAL ============ */

.mc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 20, 12, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mc-modal-overlay.is-open {
  display: flex;
}

.mc-modal {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  max-width: 520px;
  width: 100%;
  display: block;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .mc-modal-close {
    top: 12px;
    right: 12px;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
}

.mc-modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
}

.mc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(17, 21, 17, 0.2);
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  color: #111511;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.mc-modal-close:hover {
  background: #111511;
  color: var(--brand);
}

.mc-modal-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

.mc-modal-title {
  font-family: 'Archivo', sans-serif;
  font-stretch: 80%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
}

.mc-modal-desc {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(17, 21, 17, 0.75);
}

.mc-modal-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  background: #111511;
  color: var(--brand);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mc-modal-link:hover {
  background: #000000;
  color: var(--brand);
}

/* ============ HOVER TOOLTIP ============ */

.mc-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: #111511;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mc-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ MOBILE HOME LAYOUT ============ */

@media (max-width: 900px) {
  /* Normal document flow — no scroll-cover overlap */
  .mc-more-work,
  .mc-bring,
  .mc-contact {
    position: relative;
    top: auto;
  }

  .mc-more-work {
    margin-top: 0;
    padding-top: clamp(32px, 8vw, 48px);
  }

  .mc-more-work::before {
    display: none;
  }

  .mc-bring {
    margin-top: 0;
    padding-top: clamp(56px, 10vw, 80px);
    padding-bottom: calc(clamp(56px, 10vw, 80px) + 40px);
  }

  .mc-about {
    margin-top: -36px;
    padding-top: clamp(64px, 11vw, 88px);
  }

  .mc-contact {
    margin-top: 0;
  }

  .mc-cover-inner {
    transform: none !important;
  }

  .mc-panel.mc-panel--featured {
    overflow: visible;
    z-index: 2;
    margin-bottom: 0;
    padding-bottom: clamp(48px, 10vw, 72px);
  }

  .mc-more-work {
    z-index: 1;
  }

  /* Keep the panel-cuts-green order here too: featured is z-index 2 below, and
     an equal value would hand the boundary back to the green on DOM order. */
  .mc-bring {
    z-index: 0;
  }

  .mc-about {
    z-index: 3;
  }

  .mc-contact {
    z-index: 4;
  }

  /* Featured copy must stay visible (flex min-height + reveal) */
  .mc-panel--featured .mc-reveal {
    opacity: 1;
    transform: none;
  }

  .mc-marquee-tile {
    width: 168px;
  }

  .mc-marquee-track {
    gap: 18px;
    padding: 12px 0;
  }

  .mc-more-work .mc-tooltip {
    display: none !important;
  }
}

/* ============ AI PLAYGROUND BANNER ============ */

.mc-ai-banner {
  position: relative;
  z-index: 2;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: clamp(40px, 5vw, 64px);
  border-radius: 28px;
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(var(--brand-rgb), 0.16), transparent 70%), #07130d;
  color: #f6f7f4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
  border: 1px solid transparent;
}

.mc-ai-banner:hover {
  border-color: rgba(var(--brand-rgb), 0.4);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.15), 0 0 60px 8px rgba(var(--brand-rgb), 0.28), 0 30px 60px rgba(0, 0, 0, 0.35);
}

.mc-ai-banner:hover .mc-ai-banner-grid {
  opacity: 1;
}

.mc-ai-banner-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--brand-rgb), 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.12) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 30% 40%, #000 40%, transparent 88%);
  mask-image: radial-gradient(ellipse 70% 85% at 30% 40%, #000 40%, transparent 88%);
  opacity: 0.75;
  transition: opacity 0.35s ease;
}

.mc-ai-banner-copy-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.mc-ai-banner-bot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 24px);
}

.mc-ai-banner-bot-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-ai-banner-eyebrow {
  color: rgba(var(--brand-rgb), 0.85);
  justify-content: flex-start;
}

.mc-ai-banner-title {
  margin: 0 0 16px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 82%;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 14em;
}

.mc-ai-banner-title em {
  font-family: 'Archivo', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: var(--brand);
}

.mc-ai-banner-copy {
  margin: 0 0 clamp(24px, 3vw, 36px);
  max-width: 420px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(246, 247, 244, 0.72);
}

.mc-ai-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--brand);
  color: #08130d;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.mc-ai-banner-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* ---- Robot mascot ---- */

.mc-ai-banner-bot-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb), 0.16), transparent 70%);
  border: 1px solid rgba(var(--brand-rgb), 0.14);
}

.mc-ai-banner-bot-face {
  position: relative;
  width: 62%;
  aspect-ratio: 1 / 0.92;
  background: #0e2019;
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.mc-ai-banner-antenna {
  position: absolute;
  top: -22px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: rgba(var(--brand-rgb), 0.5);
  transform: translateX(-50%);
}

.mc-ai-banner-antenna::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateX(-50%);
}

.mc-ai-banner-ear {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 22px;
  border-radius: 6px;
  background: #0e2019;
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  transform: translateY(-50%);
}

.mc-ai-banner-ear--left { left: -11px; }
.mc-ai-banner-ear--right { right: -11px; }

.mc-ai-banner-eyes {
  display: flex;
  gap: clamp(18px, 3vw, 28px);
}

.mc-eye-bot {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-eye-bot [data-pupil] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  transition: transform 0.05s linear;
}

.mc-eye-bot.is-blinking [data-pupil],
.mc-eye-bot.is-winking [data-pupil] {
  transform: scaleY(0.1) !important;
}

.mc-ai-banner-mouth {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(246, 247, 244, 0.35);
}

.mc-ai-banner-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0e2019;
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.mc-ai-banner-status-bar {
  position: relative;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: rgba(246, 247, 244, 0.22);
  overflow: hidden;
}

.mc-ai-banner-status-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  background: var(--brand);
}

.mc-ai-banner-status em {
  margin-left: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(246, 247, 244, 0.75);
  transition: opacity 0.2s ease;
}

@media (max-width: 780px) {
  .mc-ai-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mc-ai-banner-copy-col {
    align-items: center;
    text-align: center;
  }

  .mc-ai-banner-copy {
    max-width: 100%;
  }

  .mc-ai-banner-bot {
    max-width: 200px;
    margin: 8px auto 0;
  }
}

@media (max-width: 720px) {
  .mc-ai-banner {
    margin: 40px 0 0;
    padding: 40px 24px;
    border-radius: 22px;
  }
}

/* ============ PROJECTS GRID (unified, 2-up) ============ */

.mc-proj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: clamp(48px, 5vw, 76px);
}

.mc-proj {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.mc-proj-media {
  position: relative;
  /* 16:9 matches the source thumbnails exactly, so object-fit:cover has
     nothing to trim. At 16:10 it was slicing 10% off both sides and eating
     the titles baked into the artwork. */
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #101418;
  display: grid;
  place-items: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mc-proj:hover .mc-proj-media,
.mc-proj:focus-visible .mc-proj-media {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(9, 60, 30, 0.2);
}

.mc-proj-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-proj-media-empty {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  padding: 0 28px;
  text-align: center;
}

/* Type pill sits top-LEFT: several of the cover images already carry their own
   category tag baked into the artwork at top-right, and the two would stack. */
.mc-proj-type {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #111511;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.mc-proj-type i { font-size: 12px; }

.mc-proj-type--ai i       { color: #6d28d9; }
.mc-proj-type--case i     { color: var(--brand-dark); }
.mc-proj-type--teardown i { color: #c2410c; }
.mc-proj-type--research i { color: #1d4ed8; }
.mc-proj-type--design i   { color: #be123c; }

.mc-proj-eyebrow {
  margin: 22px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 21, 17, 0.48);
}

.mc-proj-title {
  margin: 0 0 12px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 84%;
  font-weight: 700;
  font-size: clamp(19px, 1.65vw, 24px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: #111511;
}

.mc-proj-desc {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(17, 21, 17, 0.66);
}

.mc-proj-meta {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(17, 21, 17, 0.6);
}

.mc-proj-meta strong {
  font-weight: 700;
  color: #111511;
}

@media (max-width: 720px) {
  .mc-proj-grid {
    grid-template-columns: 1fr;
    row-gap: 44px;
  }

  .mc-proj-media { border-radius: 16px; }
  .mc-proj-type { top: 10px; left: 10px; padding: 7px 12px; font-size: 11px; }
}

/* [hidden] loses to the display rules on these elements unless stated */
.mc-modal-link[hidden] {
  display: none !important;
}

/* No write-up published yet: CTA stays visible but is plainly inert */
.mc-modal-link.is-disabled {
  background: rgba(17, 21, 17, 0.07);
  color: rgba(17, 21, 17, 0.45);
  pointer-events: none;
  cursor: default;
}