/*
 * Bretzel: home-mix-e.css (draft, generated)
 * The styles of home-e's work, needs, closing card and footer, copied from the live
 * stylesheets they use and kept inside .mx-e, so they sit next to the lab sections
 * of the mix page without either affecting the other. Regenerate from home-e.
 */
.mx-e { --clr-dark: #080808; --clr-card: #111111; --clr-orange: #FF5C00; --clr-lime: #C8FF00; --clr-white: #FFFFFF; --clr-muted: rgba(255, 255, 255, 0.38); --clr-border: rgba(255, 255, 255, 0.07); --clr-orange-10: rgba(255, 92, 0, 0.10); --clr-orange-15: rgba(255, 92, 0, 0.15); --clr-orange-20: rgba(255, 92, 0, 0.20); --clr-lime-10: rgba(200, 255, 0, 0.10); --clr-lime-12: rgba(200, 255, 0, 0.12); --ff-hero: 'Archivo Black', system-ui, sans-serif; --ff-display: 'IBM Plex Sans', system-ui, sans-serif; --ff-body: 'IBM Plex Sans', system-ui, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --fs-10: 0.625rem; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-17: 1.0625rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-hero: clamp(52px, 7vw, 110px); --fs-section: clamp(40px, 5vw, 68px); --fs-cta: clamp(72px, 11vw, 160px); --fs-footer: clamp(80px, 14vw, 200px); --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 60px; --space-2xl: 80px; --space-3xl: 120px; --page-padding: 60px; --section-py: 120px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 100px; --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.6s ease; }
/* from /assets/css/base.css */
.mx-e *, .mx-e ::before, .mx-e ::after { margin: 0px; padding: 0px; box-sizing: border-box; }
.mx-e img, .mx-e video { display: block; max-width: 100%; }
.mx-e a { color: inherit; text-decoration: none; }
.mx-e ul, .mx-e ol { list-style: none; }
.mx-e .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-display); font-size: var(--fs-12); font-weight: var(--fw-extrabold); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 30px; border-radius: var(--radius-pill); border: none; cursor: pointer; text-decoration: none; transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast); }
.mx-e .btn-primary { background: var(--clr-orange); color: var(--clr-white); }
.mx-e .btn-primary:hover { background: rgb(224, 74, 0); transform: translateY(-2px); box-shadow: rgba(255, 92, 0, 0.3) 0px 12px 32px; }
.mx-e .btn svg { flex-shrink: 0; transition: transform var(--transition-fast); }
.mx-e .btn:hover svg { transform: translateX(3px); }
.mx-e section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.mx-e .section-inner { padding-left: var(--page-padding); padding-right: var(--page-padding); }
@keyframes marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.mx-e .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.75s, transform 0.75s; }
.mx-e .reveal.visible { opacity: 1; transform: translateY(0px); }
.mx-e .reveal-delay-1 { transition-delay: 0.1s; }
.mx-e .reveal-delay-2 { transition-delay: 0.2s; }
.mx-e .reveal-delay-3 { transition-delay: 0.3s; }
.mx-e .reveal-delay-4 { transition-delay: 0.4s; }
.mx-e .reveal-delay-5 { transition-delay: 0.5s; }
@keyframes fadeUp { 
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scroll-tick { 
  0% { left: -100%; }
  60%, 100% { left: 100%; }
}
.mx-e :focus-visible { outline: 2px solid var(--clr-orange); outline-offset: 3px; border-radius: 3px; }
.mx-e ::selection { background: var(--clr-orange); color: var(--clr-white); }
@media (max-width: 1024px) {
  .mx-e { --page-padding: 28px; --section-py: 80px; }
}
@media (max-width: 600px) {
  .mx-e { --page-padding: 20px; --section-py: 64px; }
}
/* from /assets/css/nav.css */
/* from /assets/css/footer.css */
.mx-e .site-footer { border-top: 1px solid var(--clr-orange); }
.mx-e .footer__nav-row { padding: 40px var(--page-padding) 0; max-width: 90vw; margin-left: auto; margin-right: auto; }
.mx-e .footer__nav { display: flex; justify-content: space-between; align-items: center; }
.mx-e .footer__nav a { font-family: var(--ff-display); font-size: clamp(18px, 2.2vw, 32px); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.85); text-decoration: none; letter-spacing: -0.01em; transition: opacity var(--transition-fast); }
.mx-e .footer__nav a:hover { opacity: 0.5; }
.mx-e .footer__info-row { padding: 24px var(--page-padding); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--clr-border); margin-top: 28px; max-width: 90vw; margin-left: auto; margin-right: auto; flex-wrap: wrap; gap: 16px; }
.mx-e .footer__contact { display: flex; flex-direction: column; gap: 4px; }
.mx-e .footer__contact a { font-family: var(--ff-display); font-size: var(--fs-13); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color var(--transition-fast); }
.mx-e .footer__contact a:hover { color: var(--clr-white); }
.mx-e .footer__social { display: flex; align-items: center; gap: 16px; }
.mx-e .footer__social a { color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color var(--transition-fast); display: flex; align-items: center; }
.mx-e .footer__social a:hover { color: var(--clr-white); }
.mx-e .footer__legal { display: flex; align-items: center; gap: 8px; }
.mx-e .footer__legal a, .mx-e .footer__legal span { font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color var(--transition-fast); }
.mx-e .footer__legal a:hover { color: var(--clr-white); }
.mx-e .footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mx-e .footer__legal-links { display: flex; align-items: center; gap: 8px; }
.mx-e .footer__copy-inline { font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.mx-e .footer__big-name-wrap { width: 100%; margin-top: 16px; overflow: hidden; height: 22vw; }
.mx-e .footer__big-logo { width: 100%; height: auto; display: block; opacity: 0.9; user-select: none; }
@media (max-width: 768px) {
  .mx-e .footer__nav { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .mx-e .footer__info-row { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .mx-e .footer__copy-inline { text-align: center; display: block; }
  .mx-e .footer__legal { justify-content: center; }
}
/* from /assets/css/home.css */
@keyframes hero-spin { 
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}
@keyframes hero-drift { 
  0% { right: -60px; }
  50% { right: calc(100% - 520px); }
  100% { right: -60px; }
}
@keyframes hero-bounce { 
  0% { top: 45%; }
  50% { top: 55%; }
  100% { top: 45%; }
}
@keyframes horizontal-spin { 
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
.mx-e .work-preview { position: relative; }
.mx-e .work-preview { padding-top: 0px; padding-bottom: 60px; }
.mx-e .work-preview { border-top: 1px solid var(--clr-border); position: relative; overflow: hidden; background: rgb(255, 255, 255); }
.mx-e .work-preview__glow { display: none; }
.mx-e .work-preview__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; padding-top: 60px; }
.mx-e .work-preview__link { font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-orange); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: gap 0.25s; padding-bottom: 4px; }
.mx-e .work-preview__link:hover { gap: 14px; }
.mx-e .work-preview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.mx-e .work-item--more { background: var(--clr-dark); border: 1px solid var(--clr-border); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.3s; position: relative; }
.mx-e .work-item--more:hover { background: var(--clr-orange); }
.mx-e .work-item__more-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--clr-white); text-align: center; }
.mx-e .work-item__more-label { font-family: var(--ff-display); font-size: var(--fs-13); font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); transition: color 0.3s; }
.mx-e .work-item--more:hover .work-item__more-label { color: rgba(255, 255, 255, 0.9); }
.mx-e .work-item--more svg { color: rgba(255, 255, 255, 0.4); transition: transform 0.3s, color 0.3s; }
.mx-e .work-item--more:hover svg { transform: translateX(6px); color: rgba(255, 255, 255, 0.9); }
.mx-e .work-item { position: relative; overflow: hidden; aspect-ratio: 16 / 9; display: block; text-decoration: none; }
.mx-e .work-item--more { display: flex; }
.mx-e .work-item__figure { width: 100%; height: 100%; margin: 0px; }
.mx-e .work-item__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s, filter 0.3s; filter: grayscale(25%) contrast(1.05); }
.mx-e .work-item:hover .work-item__figure img { transform: scale(1.07); filter: grayscale(0%) contrast(1); }
.mx-e .work-item__overlay { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(8, 8, 8, 0.9) 0%, transparent 55%); opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.mx-e .work-item:hover .work-item__overlay, .mx-e .work-item:focus .work-item__overlay { opacity: 1; }
.mx-e .work-item__name { font-family: var(--ff-display); font-size: var(--fs-20); font-weight: var(--fw-black); color: var(--clr-white); letter-spacing: -0.01em; line-height: 1.2; }
.mx-e .work-item__cat { font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--clr-orange); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 5px; }
/* a touch screen can't point: each project's name and what it is stay on, over a soft shade at the
   foot of its picture (the last tile, VIEW ALL PROJECTS, stays as it is) */
@media (hover: none) {
  .mx-e .work-item:not(.work-item--more) { aspect-ratio: auto; }
  .mx-e .work-item:not(.work-item--more) .work-item__figure { aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
  .mx-e .work-item__overlay { position: static; opacity: 1; background: var(--clr-dark, #080808); padding: 14px 16px 16px; }
}
.mx-e .final-cta { position: relative; background: var(--clr-dark); border-top: none; overflow: hidden; padding-top: 80px; padding-bottom: 80px; }
.mx-e .final-cta::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 60px 60px; }
@media (max-width: 1024px) {
  .mx-e .work-preview__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mx-e .work-preview__grid { grid-template-columns: 1fr; }
  .mx-e .work-preview__header { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* from /drafts/home-d.css */
.mx-e .needs { padding-top: 100px; padding-bottom: 100px; background: rgb(248, 246, 243); }
.mx-e .needs__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.mx-e .needs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mx-e .need { display: flex; flex-direction: column; padding: 40px 36px 36px; color: rgb(8, 8, 8); border: 2px solid rgb(8, 8, 8); border-radius: 22px; box-shadow: rgb(8, 8, 8) 6px 6px 0px; transition: transform 0.35s, box-shadow 0.35s; }
.mx-e .need:hover { transform: translate(-3px, -3px); box-shadow: rgb(8, 8, 8) 10px 10px 0px; }
.mx-e .need--orange { background: var(--clr-orange); }
.mx-e .need--lime { background: var(--clr-lime); }
.mx-e .need__lab { font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); }
.mx-e .need__title { font-family: var(--ff-hero); font-size: clamp(32px, 3.2vw, 50px); font-weight: 400; line-height: 0.95; letter-spacing: -0.035em; margin: 16px 0px 14px; }
.mx-e .need__list { margin: 24px 0px 32px; border-top: 2px solid rgb(8, 8, 8); }
.mx-e .need__list li { padding: 12px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.22); font-size: var(--fs-16); font-weight: var(--fw-medium); }
.mx-e .need__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 2px solid rgb(8, 8, 8); font-size: var(--fs-16); font-weight: var(--fw-bold); }
.mx-e .need__cta svg { transition: transform var(--transition-fast); }
.mx-e .need__cta:hover svg { transform: translateX(4px); }
@media (max-width: 1024px) {
  .mx-e .needs__intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .mx-e .needs__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
  .mx-e .needs { padding-top: 72px; padding-bottom: 72px; }
  .mx-e .need { padding: 32px 26px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-e .need, .mx-e .studio-card { transition: none; }
}
/* from /drafts/home-e.css */
.mx-e .e-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 22px; border: 2px solid currentcolor; border-radius: var(--radius-pill); font-family: var(--ff-display); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.mx-e .e-title { font-family: var(--ff-hero); font-size: clamp(44px, 6vw, 100px); font-weight: 400; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; }
.mx-e .e-dot { color: var(--clr-orange); }
.mx-e .scramble__l { display: inline-block; text-align: center; }
@keyframes e-drift { 
  100% { transform: translateX(-50%); }
}
@keyframes e-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes e-sway { 
  0%, 100% { transform: skewX(-4deg) scaleY(1); }
  50% { transform: skewX(3.5deg) scaleY(1.04); }
}
.mx-e .work-preview { border-top: 0px; background: rgb(8, 8, 8); }
.mx-e .work-preview .e-tag { color: rgba(255, 255, 255, 0.75); }
.mx-e .work-preview .e-title { color: var(--clr-white); }
.mx-e .work-preview .work-item--more { background: rgb(20, 20, 20); }
.mx-e .work-item__figure { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.mx-e .needs { background: rgb(246, 240, 230); }
.mx-e .needs .e-tag, .mx-e .needs .e-title { color: rgb(8, 8, 8); }
.mx-e .need--orange { --door: var(--clr-orange); }
.mx-e .need--lime { --door: var(--clr-lime); }
.mx-e .needs .need { position: relative; isolation: isolate; overflow: hidden; background: rgb(8, 8, 8); color: var(--clr-white); box-shadow: 6px 6px 0 var(--door); }
.mx-e .needs .need:hover { box-shadow: 10px 10px 0 var(--door); }
.mx-e .needs .need::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: var(--door); clip-path: circle(0% at 100% 100%); transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1); }
.mx-e .need__knot { position: absolute; top: -72px; right: -88px; z-index: -1; width: 290px; aspect-ratio: 1 / 1; background: var(--door); mask: url("/assets/lab/img/logo_bretzel-dibujo_negro.png") center center / contain no-repeat; opacity: 0.3; transform: rotate(-16deg); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s, opacity 0.4s; }
.mx-e .need__top { display: flex; align-items: baseline; gap: 14px; }
.mx-e .need__num { font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0.16em; }
.mx-e .need__lab, .mx-e .need__num { color: rgba(255, 255, 255, 0.6); }
.mx-e .needs .need__title { margin: 18px 0px 26px; font-size: clamp(30px, 3.3vw, 50px); letter-spacing: -0.03em; text-transform: uppercase; }
.mx-e .needs .need__list { display: grid; gap: 12px; margin: 0px 0px 34px; border-top: 0px; }
.mx-e .needs .need__list li { display: flex; align-items: baseline; gap: 12px; padding: 0px; border: 0px; font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1.35; }
.mx-e .needs .need__list li::before { content: "+"; font-family: var(--ff-display); font-weight: var(--fw-bold); color: var(--door); transition: color 0.4s; }
.mx-e .need__cta { border-bottom-color: var(--clr-white); }
.mx-e .need__lab, .mx-e .need__num, .mx-e .need__cta, .mx-e .need__proof p, .mx-e .need__proof span { transition: color 0.4s, border-color 0.4s; }
.mx-e .need__proof { display: flex; align-items: center; gap: 14px; margin: 0px 0px 30px; }
.mx-e .need__dots { display: flex; flex-shrink: 0; }
.mx-e .need__dots img { width: 40px; height: 40px; border: 2px solid rgb(8, 8, 8); border-radius: 50%; object-fit: cover; background: rgb(26, 26, 26); }
.mx-e .need__dots img + img { margin-left: -12px; }
.mx-e .need__proof p { font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.mx-e .need__proof p span { display: block; font-family: var(--ff-display); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.mx-e .need__proof a { white-space: nowrap; text-decoration: underline rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.mx-e .need__proof a:hover { text-decoration-color: currentcolor; }
@media (hover: hover) {
  .mx-e .needs .need:hover { color: rgb(8, 8, 8); box-shadow: rgb(8, 8, 8) 10px 10px 0px; }
  .mx-e .needs .need:hover::before { clip-path: circle(150% at 100% 100%); }
  .mx-e .needs .need:hover .need__knot { background-color: rgb(8, 8, 8); opacity: 0.16; transform: rotate(344deg); }
  .mx-e .needs .need:hover .need__lab, .mx-e .needs .need:hover .need__num { color: rgba(8, 8, 8, 0.6); }
  .mx-e .needs .need:hover .need__list li::before { color: rgb(8, 8, 8); }
  .mx-e .needs .need:hover .need__cta { border-bottom-color: rgb(8, 8, 8); }
  .mx-e .needs .need:hover .need__proof p { color: rgba(8, 8, 8, 0.85); }
  .mx-e .needs .need:hover .need__proof span { color: rgba(8, 8, 8, 0.55); }
  .mx-e .needs .need:hover .need__proof a { text-decoration-color: rgba(8, 8, 8, 0.4); }
}
.mx-e .need.reveal { transition: opacity 0.7s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s, color 0.4s; }
.mx-e .final-cta { padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(80px, 9vw, 130px); background: rgb(255, 255, 255); }
.mx-e .final-cta::before { display: none; }
.mx-e .e-close { container-type: inline-size; max-width: 1080px; margin: 0px auto; padding: clamp(48px, 7vw, 100px) clamp(24px, 6vw, 90px); text-align: center; background: rgb(8, 8, 8); color: var(--clr-white); border-radius: 22px; box-shadow: 10px 10px 0 var(--clr-orange); }
.mx-e .e-close .e-tag { color: rgba(255, 255, 255, 0.75); }
.mx-e .e-close__title { margin: 6px 0px 44px; font-family: var(--ff-hero); font-size: clamp(30px, 9.4cqi, 120px); font-weight: 400; line-height: 0.88; letter-spacing: -0.035em; text-transform: uppercase; }
.mx-e .e-close__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.mx-e .btn-lime { background: var(--clr-lime); color: rgb(8, 8, 8); }
.mx-e .btn-lime:hover { background: rgb(184, 235, 0); transform: translateY(-2px); box-shadow: rgba(200, 255, 0, 0.25) 0px 12px 32px; }
.mx-e .e-close__sub { font-size: var(--fs-16); color: rgba(255, 255, 255, 0.55); }
.mx-e .e-close__sub a { color: var(--clr-orange); text-decoration: underline; text-underline-offset: 3px; }
.mx-e .footer__nav a { font-family: var(--ff-hero); font-size: clamp(18px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.01em; text-transform: uppercase; color: var(--clr-white); transition: color var(--transition-fast); }
.mx-e .footer__nav a:hover { opacity: 1; color: var(--clr-orange); }
@media (max-width: 600px) {
  .mx-e .need__knot { width: 220px; top: -50px; right: -60px; }
}
.mx-e .rl-word { display: inline-block; white-space: nowrap; }
.mx-e .rl { display: inline-block; transform-origin: 50% 100%; }
.mx-e [data-roll].is-rollable .rl { opacity: 0; transform: perspective(600px) rotateX(-100deg) translateY(14%); transition-behavior: normal, normal; transition-duration: 0.4s, 0.9s; transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1); transition-property: opacity, transform; transition-delay: calc(var(--i) * 32ms); }
.mx-e [data-roll].is-rolled .rl { opacity: 1; transform: none; }
.e-portal { position: fixed; inset: 0px; z-index: 10001; pointer-events: none; }
.e-portal__layer { position: absolute; inset: 0px; clip-path: circle(0px at var(--x, 50%) var(--y, 50%)); transition: clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1); }
.e-portal__layer--lime { background: var(--clr-lime); }
.e-portal__layer--orange { background: var(--clr-orange); transition-delay: 0.08s; display: grid; place-items: center; }
.e-portal.is-open { pointer-events: auto; }
.e-portal.is-open .e-portal__layer { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); }
.e-portal__inner { padding: 0 var(--page-padding); text-align: center; color: rgb(8, 8, 8); opacity: 0; transform: rotate(-14deg) scale(0.7); transition: opacity 0.4s 0.3s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; }
.e-portal.is-open .e-portal__inner { opacity: 1; transform: none; }
.e-portal__icon { width: 64px; margin: 0px auto 24px; animation: 1.4s linear 0s infinite normal none running e-spin; }
.e-portal__name { font-family: var(--ff-hero); font-size: clamp(44px, 9vw, 160px); line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; max-width: 12ch; margin: 0px auto; }
.e-portal__cat { margin-top: 20px; font-family: var(--ff-display); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .mx-e .needs .need::before, .mx-e .need__knot { transition: none; }
  .mx-e [data-roll].is-rollable .rl { opacity: 1; transform: none; }
}
/* the need cards as post-its (labs-cards.css), home and Our Labs: their Recent work stack keeps
   clear of its label (a long label squeezed the stack under it, and the last cover's overlap took the gap) */
.mx-e .pb .pt-dots { flex: none; }
.mx-e .pb .pt-dots img:last-child { margin-right: 0; }