/* ═════════════════════════════════════════════════════════════
   past-skin.css v7 — override on mirrored case studies.
   Correction: .section.hero-section-work wraps the ENTIRE page, not
   the hero alone. Target .hero-image-work directly for 16:9 crop.
   Avoid touching .section base — it breaks body layout.
   ═════════════════════════════════════════════════════════════ */

:root {
  --ink: #111;
  --red: #cc0000;
  --paper: #fafaf7;
  --mute: #8a8a85;
  --line: rgba(17,17,17,0.1);
  --larken: 'larken', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --past-gutter: clamp(20px, 3vw, 40px);
}

/* ═══ HIDE ANY STUDIOS CHROME + CURSOR ═══ */
.menu-wrapper,
.nav-menu,
.w-nav-overlay,
.cms-slider-wrap,
.section.is-footer,
._1440limiter.is-footer,
.footer-flex,
.logo_footer,
.subscribeboxfooter,
.cursor-wrapper,
.cursor,
.cursorcircle,
.cursor-circle,
.follow-us,
[class*="cursor-"],
[class*="custom-cursor"],
.w-condition-invisible,
.w-dyn-bind-empty { display: none !important; }

html, body, * { cursor: auto !important; }
a, button, [role="button"] { cursor: pointer !important; }

/* ═══ UN-BREAK WEBFLOW REVEAL ANIMATIONS ═══ */
[style*="opacity:0"],
[style*="opacity: 0"],
[style*="translate3d"] {
  opacity: 1 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

/* ═══ HERO — 16:9, three variants (past-hero swap, hero-image-work, hero-image-mobile) ═══
   Target individual media elements, NOT their section wrapper (which spans the whole page). */

/* Hero wrapper — the outer div that used to contain Vimeo iframe */
.bg-embed-wrap-work-page,
.bg-embed-wrap-work-page.past-hero-wrap {
  display: block !important;
  width: 100% !important;
  height: 56.25vw !important;
  max-height: 82vh !important;
  min-height: 320px !important;
  overflow: hidden !important;
  background: #e8e6e0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
.bg-embed-wrap-work-page iframe { display: none !important; }
.bg-embed-wrap-work-page > div { height: 100% !important; padding: 0 !important; }

.past-hero,
.hero-image-work {
  display: block !important;
  width: 100% !important;
  height: 56.25vw !important;
  max-height: 82vh !important;
  min-height: 320px !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #e8e6e0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.past-hero-empty { background: #e8e6e0 !important; }

.hero-image-mobile { display: none !important; }
@media (max-width: 768px) {
  .hero-image-mobile {
    display: block !important;
    width: 100% !important;
    height: 80vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .hero-image-work,
  .past-hero { display: none !important; }
}

/* ═══ COLOR OVERRIDE on title section — beat inline color:white ═══ */
.section.color-section,
.section.color-section *,
.work-contnet-grid,
.work-contnet-grid *,
[style*="color:white"],
[style*="color: white"],
[style*="color:#fff"] {
  color: var(--ink) !important;
}
/* H3/H4 stay mute grey */
.section.color-section h3,
.section.color-section h4,
.work-contnet-grid h3,
.work-contnet-grid h4 { color: var(--mute) !important; }

/* Kill the color-section dark background (originally dark for each project) */
.section.color-section { background-color: var(--paper) !important; }

/* ═══ COLLAPSE the 3-col title grid to editorial stack ═══ */
.work-contnet-grid {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 100% !important;
}
.work-contnet-grid > * + * { margin-top: 24px !important; }
.work-contnet-grid > h1 { margin-bottom: 32px !important; }

/* ═══ PAST TOP BAR — transparent, mix-blend ═══ */
.past-top {
  padding: 22px var(--past-gutter);
  display: flex; justify-content: space-between; align-items: baseline;
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.past-top a { color: #fff !important; text-decoration: none; border: 0; pointer-events: auto; }
.past-top a:hover { opacity: 0.7; }
.past-top .dot { color: var(--red) !important; }

/* ═══ BODY RESET ═══ */
body {
  font-family: var(--larken) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* ═══ TYPOGRAPHY ═══ */
h1 {
  font-family: var(--larken) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 4.6vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  max-width: 24ch !important;
  margin: 0 !important;
}
h2 {
  font-family: var(--larken) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
}
h3, h4 {
  font-family: var(--larken) !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.55 !important;
  color: var(--mute) !important;
  max-width: 58ch !important;
  margin: 0 !important;
}
h5, h6 {
  font-family: var(--mono) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mute) !important;
}
p {
  font-family: var(--larken) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}
a { color: inherit; text-decoration: none !important; }

/* ═══ KILL CTAs + social + contact ═══ */
.button,
.w-button,
[class*="cta-"],
[class*="social-"],
[class*="contact-block"],
[class*="signup"] { display: none !important; }

/* ═══ IMAGES — max width cap only ═══ */
img, video {
  max-width: 100% !important;
  height: auto;
}
/* Re-apply fixed 16:9 height to hero image (override the auto) */
.hero-image-work { height: 56.25vw !important; }