@font-face {
  font-family: "JE CAI";
  src: url("./fonts/JECAI.woff2") format("woff2"),
       url("./fonts/JECAI.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#FFFCF8;
  --ink:#111111;
  --muted:rgba(17,17,17,.55);
  --visual-viewport-height:100svh;

  --pad:50px;
  --gutter:28px;
  --font:"acumin-pro", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html{
  font-size:12px;
  -webkit-tap-highlight-color: transparent;
}

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.45;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button,
summary,
a{
  -webkit-tap-highlight-color: transparent;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible){
  outline:none;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.u{ text-decoration: underline; text-underline-offset: 3px; }

@media (hover:hover) and (pointer:fine){
  html,
  body,
  a,
  button,
  summary,
  .menu__item,
  .menu__subitem,
  .carousel,
  .moodboard-piece{
    cursor:none !important;
  }

  .custom-cursor{
    position:fixed;
    top:0;
    left:0;
    width:14px;
    height:14px;
    pointer-events:none;
    z-index:9999;
    border-radius:50%;
    background-color:var(--ink);
    background-position:center;
    background-repeat:no-repeat;
    background-size:0 0;
    transform:translate(-50%, -50%);
    transition:opacity 120ms ease;
  }

  .custom-cursor.is-hidden{
    opacity:0;
  }

  .custom-cursor.is-text{
    width:10px;
    height:10px;
  }

  .custom-cursor.is-hover{
    width:24px;
    height:24px;
    border-radius:0;
    background-color:transparent;
    background-image:url("./assets/cursors/cursor_hover_black.svg");
    background-size:24px 24px;
  }
}

/* -----------------------
   BRAND
------------------------ */

.brand{
  position:fixed;
  top:var(--pad);
  left:var(--pad);
  z-index:10;
}

.brand__name{
  font-family:"JE CAI";
  font-size:1.5rem;     /* ≈18px */
  letter-spacing:.08em;
  line-height:1;
  text-align: left;
}

/* -----------------------
   MENU
------------------------ */

.menu{
  position:fixed;
  left:var(--pad);
  bottom:var(--pad);
  z-index:10;
}

.menu__nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.menu__item{
  width:fit-content;
}

.menu__item.is-active{
  text-decoration: underline;
  text-underline-offset:3px;
}

.menu__details[open] > .menu__item{
  text-decoration: underline;
  text-underline-offset:3px;
}

.menu__details summary{
  list-style:none;
  cursor:pointer;
}

.menu__details summary::-webkit-details-marker{
  display:none;
}

.menu__sub{
  margin-left:18px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.menu__subitem.is-active{
  text-decoration: underline;
  text-underline-offset:3px;
}

/* -----------------------
   PAGE
------------------------ */

.page{
  min-height:100vh;
  padding: calc(var(--pad) * 2) var(--pad) var(--pad);
}

.home-image{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  pointer-events:none; /* no interfiere con el menú */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.home-image img{
  width:50vw;
  height:auto;
  display:block;
}

.home-caption{
  margin-top: 8px;
  text-align: right;
  font-size: 0.75rem;
}

/* -----------------------
   GRID
------------------------ */

.grid{
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding-top:100px;

  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);

  /* 🔥 NUEVO: FILAS REALES */
  grid-template-rows: auto 1fr;
  row-gap: 44px;  /* aire entre números y contenido */

  align-items:start;
}

/* -----------------------
   NUMBERS (01–05)
------------------------ */

.grid__marker{
  grid-row:1;
  align-self:end;
  font-size:0.9rem;   /* ≈10.8px */
  letter-spacing:.05em;
  color:var(--ink);
}

/* cada número alineado a su columna */
.m1{ grid-column: 1 / span 2; }
.m2{ grid-column: 3 / span 3; }
.m3{ grid-column: 6 / span 4; }
.m4{ grid-column: 10 / span 2; }
.m5{ grid-column: 12 / span 1; }

/* -----------------------
   CONTENIDO
------------------------ */

/* TODO el contenido empieza en fila 2 */
.col{
  grid-row:2;
  align-self: start;
}

/* Column mapping */
.col--title{ grid-column: 1 / span 2; }
.col--text{  grid-column: 3 / span 3; }
.col--image{
  align-self: start;
  grid-column: 6 / span 4;
  width: 100%;
  justify-self: stretch;
  min-width: 0;
}
.col--metaA{ grid-column: 10 / span 2; }
.col--metaB{ grid-column: 12 / span 1; }
.col--contact{
  grid-column: 1 / span 2;
  grid-row: 3;
}

.carousel{
  position: relative;
  width: 100%;
}

.carousel__track{
  position: relative;
  aspect-ratio: 4 / 5; /* ajusta según tus imágenes */
  overflow: hidden;
}

.carousel__track img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;

  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 900ms ease-in-out;
}

.carousel__track img.is-active{
  opacity: 1;
  z-index: 1;
}

.collectable-space .col--image{
  display: flex;
  justify-content: center;
}

.collectable-space .carousel{
  width: 80%;
}

.collectable-space .carousel__track img{
  width: 80%;
  margin: 0 auto;
}

.poem{
  grid-row: 3;
  z-index: 2;
}

.col--info-image{
  grid-row: 2;
  grid-column: 6 / span 6;
}

.col--info-image img{
  width: 25%;
  height: auto;
  display: block;
}

.project-info-toggle{
  display:none;
}

.project-info-panel[hidden]{
  display:none;
}

.project-info-panel__meta{
  margin-bottom: 2rem;
}

.project-info-panel__meta-item{
  margin:0 0 .15rem;
  line-height:1.25;
}

.project-info-panel__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.8rem;
}

.project-info-panel__action{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* -----------------------
   MAPOI CREATIVE PROCESS
------------------------ */

.project-process-page{
  min-height:100vh;
  position:relative;
  background:#fffdfa;
}

.project-process-page .brand{
  z-index:20;
}

.project-process-page .page{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 var(--pad);
}

.creative-process{
  width:100%;
  margin:0 auto;
}

.creative-process__back{
  display:block;
  position:fixed;
  right: var(--pad);
  bottom: var(--pad);
  z-index:25;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.creative-process__stage{
  position:relative;
  width:100%;
  margin:0 auto;
  aspect-ratio:16 / 9;
  isolation:isolate;
}

/* Keep the collage on the original artboard, but scale it up slightly for more presence. */
.creative-process__canvas{
  position:absolute;
  top:50%;
  left:50%;
  height:100%;
  aspect-ratio:3508 / 2480;
  transform:translate(-50%, -50%) scale(1.08);
}

.moodboard-piece{
  position:absolute;
  margin:0;
  opacity:0;
  transform-origin:center center;
  will-change:opacity, transform, filter;
  filter:drop-shadow(0 18px 34px rgba(17,17,17,.06));
  transform:
    translate3d(var(--enter-x, 0px), var(--enter-y, 26px), 0)
    rotate(var(--piece-rotation, 0deg))
    scale(.955);
  transition:
    opacity 1080ms cubic-bezier(.22,1,.36,1),
    transform 1240ms cubic-bezier(.22,1,.36,1),
    filter 450ms ease;
}

.moodboard-piece img{
  display:block;
  width:100%;
  height:auto;
}

.moodboard-piece.is-visible{
  opacity:1;
  transform:
    translate3d(0, 0, 0)
    rotate(var(--piece-rotation, 0deg))
    scale(1);
}

.creative-process__stage.is-instant .moodboard-piece{
  transition-duration:0ms;
}

@media (hover:hover) and (pointer:fine){
  .project-info-panel__action:hover{
    opacity:.68;
  }

  .creative-process__back:hover{
    opacity:.68;
  }
}

/* Desktop composition: edit top / left / width here to retune the collage. */
.piece--bag{
  top:10.5%;
  left:2.4%;
  width:28.8%;
  z-index:6;
  --piece-rotation:-14deg;
  --enter-x:-28px;
  --enter-y:36px;
}

.piece--note{
  top:15.2%;
  left:43.5%;
  width:10.4%;
  z-index:7;
  --enter-y:-24px;
}

.piece--woven{
  top:5.8%;
  left:59.5%;
  width:25.1%;
  z-index:3;
  --enter-y:-28px;
}

.piece--candle{
  top:58.3%;
  left:7.5%;
  width:10.1%;
  z-index:4;
  --enter-y:28px;
}

.piece--pattern{
  top:61.7%;
  left:22.9%;
  width:48.3%;
  z-index:1;
  --enter-y:26px;
}

.piece--cauliflower{
  top:24.2%;
  left:25.2%;
  width:43.8%;
  z-index:5;
  --enter-y:34px;
}

.piece--red{
  top:63.6%;
  left:67.2%;
  width:27.6%;
  z-index:4;
  --enter-x:24px;
  --enter-y:16px;
}

/* Habitat Inhabitado composition */
.habitat-piece--flower-large{
  top:3.5%;
  left:1%;
  width:22%;
  z-index:7;
  --piece-rotation:-8deg;
  --enter-x:-26px;
  --enter-y:-14px;
}

.habitat-piece--flower-small{
  top:13.2%;
  left:15.8%;
  width:6.2%;
  z-index:8;
  --piece-rotation:-18deg;
  --enter-y:-18px;
}

.habitat-piece--pods{
  top:5.5%;
  left:27.5%;
  width:26%;
  z-index:5;
  --piece-rotation:-5deg;
  --enter-y:-20px;
}

.habitat-piece--squares{
  top:18.8%;
  left:18.5%;
  width:22%;
  z-index:2;
  --enter-y:18px;
}

.habitat-piece--collage{
  top:18.2%;
  left:35.2%;
  width:24%;
  z-index:3;
  --enter-y:22px;
}

.habitat-piece--green-plate{
  top:37%;
  left:8.5%;
  width:31%;
  z-index:4;
  --enter-x:-18px;
  --enter-y:26px;
}

.habitat-piece--red-plate{
  top:42%;
  left:50.8%;
  width:29.5%;
  z-index:4;
  --enter-y:26px;
}

.habitat-piece--chair{
  top:31.5%;
  left:72.4%;
  width:15.5%;
  z-index:6;
  --enter-x:18px;
  --enter-y:18px;
}

.habitat-piece--amber{
  top:13.5%;
  left:66.8%;
  width:10.6%;
  z-index:7;
  --enter-y:-20px;
}

.habitat-piece--textile{
  top:42.6%;
  left:83.7%;
  width:16.4%;
  z-index:1;
  --enter-x:24px;
  --enter-y:18px;
}

.habitat-piece--pomegranate{
  top:63.2%;
  left:29%;
  width:11.8%;
  z-index:7;
  --enter-y:16px;
}

.habitat-piece--lips{
  top:58.8%;
  left:44.2%;
  width:11%;
  z-index:7;
  --enter-y:16px;
}

.habitat-piece--shell{
  top:58.2%;
  left:74.7%;
  width:9%;
  z-index:8;
  --piece-rotation:6deg;
  --enter-x:14px;
  --enter-y:16px;
}

/* Collectable Space composition */
.collectable-process-page{
  background:#fcfaf5;
}

.collectable-piece--panel{
  top:16.2%;
  left:34.2%;
  width:29.8%;
  z-index:4;
  --piece-rotation:-1deg;
  --enter-y:-18px;
}

.collectable-piece--fill{
  top:0;
  left:0;
  width:100%;
  z-index:0;
  --enter-y:0px;
}

.collectable-piece--textile-frame{
  top:17.8%;
  left:35%;
  width:28.7%;
  z-index:5;
  --piece-rotation:-2deg;
  --enter-y:-14px;
}

.collectable-piece--portrait{
  top:44.6%;
  left:46.1%;
  width:10.4%;
  z-index:7;
  --piece-rotation:-1deg;
  --enter-y:12px;
}

.collectable-piece--chair-slim{
  top:1.2%;
  left:60.6%;
  width:19.2%;
  z-index:10;
  --piece-rotation:28deg;
  --enter-x:20px;
  --enter-y:-24px;
}

.collectable-piece--chair-heavy{
  top:60.4%;
  left:19.4%;
  width:16.7%;
  z-index:6;
  --piece-rotation:-28deg;
  --enter-x:-20px;
  --enter-y:18px;
}

.collectable-piece--pot{
  top:56.3%;
  left:38.2%;
  width:28.5%;
  z-index:9;
  --enter-y:28px;
}

.collectable-piece--leg-right{
  top:38.9%;
  left:58.2%;
  width:31%;
  z-index:3;
  --enter-x:18px;
  --enter-y:12px;
}

.collectable-piece--leg-left{
  top:35.9%;
  left:7.2%;
  width:35.2%;
  z-index:3;
  --enter-x:-18px;
  --enter-y:12px;
}

.collectable-piece--clock{
  top:36.4%;
  left:47.4%;
  width:6%;
  z-index:8;
  --piece-rotation:-5deg;
  --enter-y:-18px;
}

.contact-page .grid{
  padding-top: 0;
  row-gap: 24px;
}

.contact-page .col--contact{
  grid-column: 1 / span 2;
  grid-row: 1;
  align-self: start;
}

.contact-page .col--text{
  grid-column: 3 / span 4;
  grid-row: 1;
}

.contact-page .col--info-image{
  grid-column: 7 / span 2;
  grid-row: 1;
  align-self:start;
  justify-self:start;
  width:min(100%, 132px);
  margin:0;
}

.contact-page .col--info-image img{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center 22%;
}

/* m2 */
.p1{
  grid-column: 3 / span 3;
}

/* m3 */
.p2{
  grid-column: 6 / span 4;
}

/* m4 */
.p3{
  grid-column: 10 / span 2;
}

/* -----------------------
   TYPOGRAPHY
------------------------ */

.col__title{
  margin:0;
  font-size:1rem;  /* ≈15.6px */
  font-weight:400;
}

.col__p{
  margin:0 0 1.2rem;
  max-width:42ch;
  line-height:1.5;
}

.col--contact .col__p{
  margin-bottom:0;
}

.col__label{
  margin-bottom:10px;
}

.meta{
  line-height:1.45;
}

.meta__k{
  color:var(--muted);
  margin-bottom:6px;
}

/* -----------------------
   IMAGE
------------------------ */

.figure{
  margin:0;
}

.figure__img{
  width:100%;
  height:auto;
  display:block;
  max-width: none;
}

/* -----------------------
   RESPONSIVE
------------------------ */

@media (max-width:1100px){

  :root{
    --pad:36px;
    --gutter:20px;
  }

  .grid{
    padding-top:0;
    grid-template-columns:1fr;
    grid-template-rows:none;
    row-gap:28px;
  }

  .page{
    padding: calc(var(--pad) * 2) var(--pad) 132px;
  }

  .grid__marker{
    display:none;
  }

  .col--title,
  .col--contact,
  .col--text,
  .col--image,
  .col--metaA,
  .col--metaB,
  .col--info-image{
    grid-column:1 / -1;
    grid-row:auto;
  }

  .col__p{
    max-width:none;
  }

  .col--info-image img{
    width:min(100%, 260px);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px){

  :root{
    --pad:18px;
    --gutter:16px;
  }

  html{
    font-size:14px;
  }

  body{
    min-height:100svh;
  }

  .brand{
    top: 50px;
    left: 50px;
    right: 50px;
    width: auto;
  }

  .brand__name{
    display:block;
    width:100%;
    text-align:right;
  }

  .grid{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
  }

  .col{
    width:100%;
  }

  .col--title{
    order:1;
  }

  .col--contact{
    order:2;
  }

  .col--image,
  .col--info-image{
    order:3;
  }

  .col--text{
    order:4;
  }

  .col--metaA{
    order:5;
  }

  .col--metaB{
    order:6;
  }

  .page{
    padding: 84px var(--pad) 172px;
  }

  .menu{
    left: var(--pad);
    right: var(--pad);
    bottom: var(--pad);
    width: auto;
    max-width: 320px;
  }

  .menu__nav{
    gap:4px;
    padding:12px 14px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
  }

  .menu__sub{
    margin-left:18px;
    margin-top:6px;
    gap:4px;
  }

  .home-image{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    min-height:100svh;
    padding:84px var(--pad) 172px;
    justify-content:center;
    align-items:center;
  }

  .home-image img{
    width:min(100%, 82vw);
    max-width:460px;
  }

  .home-caption{
    width:100%;
    text-align:center;
  }

  .carousel__track{
    aspect-ratio:3 / 4;
  }

  .carousel__track img{
    height:100%;
    object-fit:contain;
    object-position:center;
  }

  .collectable-space .col--image{
    justify-content:flex-start;
  }

  .collectable-space .carousel{
    width:100%;
  }

  .collectable-space .carousel__track img{
    width:100%;
  }

  .col--info-image img{
    width:min(100%, 320px);
  }

  .habitat-inhabitado .menu,
  .mapoi-project .menu,
  .project-process-page .menu,
  .collectable-space-project .menu,
  .novia-robot-project .menu{
    left:0;
    right:0;
    bottom:0;
    width:auto;
    max-width:none;
    padding:16px 0 22px;
    background:transparent;
    overflow:visible;
    isolation:isolate;
    pointer-events:none;
  }

  .habitat-inhabitado .menu::after,
  .mapoi-project .menu::after,
  .project-process-page .menu::after,
  .collectable-space-project .menu::after,
  .novia-robot-project .menu::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-88px;
    bottom:0;
    background:rgba(255,255,255,.12);
    backdrop-filter:saturate(150%) blur(16px);
    -webkit-backdrop-filter:saturate(150%) blur(16px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 36px, #000 88px, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 36px, #000 88px, #000 100%);
    pointer-events:none;
    z-index:0;
  }

  .habitat-inhabitado .menu__nav,
  .mapoi-project .menu__nav,
  .project-process-page .menu__nav,
  .collectable-space-project .menu__nav,
  .novia-robot-project .menu__nav{
    position:relative;
    z-index:1;
    width:fit-content;
    margin-left:var(--pad);
    pointer-events:auto;
  }

  .habitat-inhabitado,
  .mapoi-project,
  .collectable-space-project,
  .novia-robot-project{
    --project-viewport-height: var(--visual-viewport-height, 100svh);
    --project-stack-min-height: calc(var(--project-viewport-height) * 0.78);
    --project-image-max-height: calc(var(--project-viewport-height) * 0.62);
    --project-scroll-padding-top: calc(var(--project-viewport-height) * 0.14);
    --project-scroll-padding-bottom: calc(var(--project-viewport-height) * 0.18);
  }

  .collectable-space-project{
    --project-stack-min-height: calc(var(--project-viewport-height) * 0.86);
    --project-image-max-height: calc(var(--project-viewport-height) * 0.68);
  }

  .habitat-inhabitado{
    height: var(--project-viewport-height);
    overflow: hidden;
  }

  .habitat-inhabitado .brand{
    z-index: 24;
  }

  .habitat-inhabitado .project-info-toggle{
    display:block;
    position:fixed;
    right: var(--pad);
    bottom: var(--pad);
    z-index: 25;
    padding:12px 14px;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    cursor:pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .habitat-inhabitado .project-info-toggle__close{
    display:none;
  }

  .habitat-inhabitado .project-info-panel{
    position:fixed;
    inset:0;
    z-index: 18;
    padding: 104px 18px 32px 32px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(8px);
    overflow-y:auto;
  }

  .habitat-inhabitado .project-info-panel__inner{
    width:min(100%, 360px);
    margin-right:auto;
  }

  .habitat-inhabitado .project-info-panel__text{
    margin:0 0 1.2rem;
    line-height:1.5;
  }

  .habitat-inhabitado .page{
    padding: 82px 8px 172px;
    height: var(--project-viewport-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--project-scroll-padding-top);
    scroll-padding-bottom: var(--project-scroll-padding-bottom);
  }

  .habitat-inhabitado .grid{
    display:flex;
    flex-direction:column;
    width:min(100%, 430px);
    max-width:none;
    margin:0 auto;
    gap: 28px;
    align-items: stretch;
  }

  .habitat-inhabitado .col--title,
  .habitat-inhabitado .col--metaA,
  .habitat-inhabitado .col--metaB{
    display:none;
  }

  .habitat-inhabitado .col--image{
    order:1;
    width: min(100%, 380px);
    margin: 0 auto;
  }

  .habitat-inhabitado .col--text{
    display:none;
  }

  .habitat-inhabitado .carousel{
    width:100%;
    max-width: none;
    margin: 0;
  }

  .habitat-inhabitado .carousel__track{
    aspect-ratio: auto;
    display:flex;
    flex-direction:column;
    gap: 0;
    overflow: visible;
  }

  .habitat-inhabitado .stack-image{
    min-height: var(--project-stack-min-height);
    margin: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .habitat-inhabitado .carousel__track img{
    position: static;
    inset: auto;
    display:block;
    width:min(100%, 360px);
    height:auto;
    max-height: var(--project-image-max-height);
    max-width:100%;
    margin: 0 auto;
    opacity:1;
    z-index:auto;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    transform-origin:center center;
    -webkit-transform-origin:center center;
    backface-visibility:visible;
    will-change:auto;
    transition:none;
    object-fit:contain;
    object-position: center center;
    align-self:center;
  }

  .habitat-inhabitado.info-open .page{
    overflow: hidden;
  }

  .habitat-inhabitado.info-open .project-info-toggle__close{
    display:inline;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .habitat-inhabitado.info-open .project-info-toggle{
    text-decoration: none;
  }

  .habitat-inhabitado.info-open .project-info-toggle__label{
    display:none;
  }

  .mapoi-project{
    height: var(--project-viewport-height);
    overflow: hidden;
  }

  .mapoi-project .brand{
    z-index: 24;
  }

  .mapoi-project .project-info-toggle{
    display:block;
    position:fixed;
    right: var(--pad);
    bottom: var(--pad);
    z-index: 25;
    padding:12px 14px;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    cursor:pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mapoi-project .project-info-toggle__close{
    display:none;
  }

  .mapoi-project .project-info-panel{
    position:fixed;
    inset:0;
    z-index: 18;
    padding: 104px 18px 32px 32px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(8px);
    overflow-y:auto;
  }

  .mapoi-project .project-info-panel__inner{
    width:min(100%, 360px);
    margin-right:auto;
  }

  .mapoi-project .project-info-panel__text{
    margin:0 0 1.2rem;
    line-height:1.5;
  }

  .mapoi-project .page{
    padding: 82px 8px 172px;
    height: var(--project-viewport-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--project-scroll-padding-top);
    scroll-padding-bottom: var(--project-scroll-padding-bottom);
  }

  .mapoi-project .grid{
    display:flex;
    flex-direction:column;
    width:min(100%, 430px);
    max-width:none;
    margin:0 auto;
    gap: 28px;
    align-items: stretch;
  }

  .mapoi-project .col--title,
  .mapoi-project .col--metaA,
  .mapoi-project .col--metaB{
    display:none;
  }

  .mapoi-project .col--image{
    order:1;
    width: min(100%, 380px);
    margin: 0 auto;
  }

  .mapoi-project .col--text{
    display:none;
  }

  .mapoi-project .carousel{
    width:100%;
    max-width: none;
    margin: 0;
  }

  .mapoi-project .carousel__track{
    aspect-ratio: auto;
    display:flex;
    flex-direction:column;
    gap: 0;
    overflow: visible;
  }

  .mapoi-project .stack-image{
    min-height: var(--project-stack-min-height);
    margin: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .mapoi-project .carousel__track img{
    position: static;
    inset: auto;
    display:block;
    width:min(100%, 360px);
    height:auto;
    max-height: var(--project-image-max-height);
    max-width:100%;
    margin: 0 auto;
    opacity:1;
    z-index:auto;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    transform-origin:center center;
    -webkit-transform-origin:center center;
    backface-visibility:visible;
    will-change:auto;
    transition:none;
    object-fit:contain;
    object-position: center center;
    align-self:center;
  }

  .mapoi-project.info-open .page{
    overflow: hidden;
  }

  .mapoi-project.info-open .project-info-toggle__close{
    display:inline;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mapoi-project.info-open .project-info-toggle{
    text-decoration: none;
  }

  .mapoi-project.info-open .project-info-toggle__label{
    display:none;
  }

  .collectable-space-project{
    height: var(--project-viewport-height);
    overflow: hidden;
  }

  .collectable-space-project .brand{
    z-index: 24;
  }

  .collectable-space-project .project-info-toggle{
    display:block;
    position:fixed;
    right: var(--pad);
    bottom: var(--pad);
    z-index: 25;
    padding:12px 14px;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    cursor:pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .collectable-space-project .project-info-toggle__close{
    display:none;
  }

  .collectable-space-project .project-info-panel{
    position:fixed;
    inset:0;
    z-index: 18;
    padding: 104px 18px 32px 32px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(8px);
    overflow-y:auto;
  }

  .collectable-space-project .project-info-panel__inner{
    width:min(100%, 360px);
    margin-right:auto;
  }

  .collectable-space-project .project-info-panel__text{
    margin:0 0 1.2rem;
    line-height:1.5;
  }

  .collectable-space-project .page{
    padding: 82px 8px 172px;
    height: var(--project-viewport-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--project-scroll-padding-top);
    scroll-padding-bottom: var(--project-scroll-padding-bottom);
  }

  .collectable-space-project .grid{
    display:flex;
    flex-direction:column;
    width:min(100%, 430px);
    max-width:none;
    margin:0 auto;
    gap: 28px;
    align-items: stretch;
  }

  .collectable-space-project .col--title,
  .collectable-space-project .col--metaA,
  .collectable-space-project .col--metaB{
    display:none;
  }

  .collectable-space-project .col--image{
    order:1;
    width: min(100%, 340px);
    margin: 0 auto;
    justify-content: initial;
  }

  .collectable-space-project .col--text{
    display:none;
  }

  .collectable-space-project .carousel{
    width:100%;
    max-width: none;
    margin: 0;
  }

  .collectable-space-project .carousel__track{
    aspect-ratio: auto;
    display:flex;
    flex-direction:column;
    gap: 0;
    overflow: visible;
  }

  .collectable-space-project .stack-image{
    min-height: var(--project-stack-min-height);
    margin: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .collectable-space-project .carousel__track img{
    position: static;
    inset: auto;
    display:block;
    width:min(100%, 300px);
    height:auto;
    max-height: var(--project-image-max-height);
    max-width:100%;
    margin: 0 auto;
    opacity:1;
    z-index:auto;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    transform-origin:center center;
    -webkit-transform-origin:center center;
    backface-visibility:visible;
    will-change:auto;
    transition:none;
    object-fit:contain;
    object-position: center center;
    align-self:center;
  }

  .collectable-space-project.info-open .page{
    overflow: hidden;
  }

  .collectable-space-project.info-open .project-info-toggle__close{
    display:inline;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .collectable-space-project.info-open .project-info-toggle{
    text-decoration: none;
  }

  .collectable-space-project.info-open .project-info-toggle__label{
    display:none;
  }

  .novia-robot-project{
    height: var(--project-viewport-height);
    overflow: hidden;
  }

  .novia-robot-project .brand{
    z-index: 24;
  }

  .novia-robot-project .project-info-toggle{
    display:block;
    position:fixed;
    right: var(--pad);
    bottom: var(--pad);
    z-index: 25;
    padding:12px 14px;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    cursor:pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .novia-robot-project .project-info-toggle__close{
    display:none;
  }

  .novia-robot-project .project-info-panel{
    position:fixed;
    inset:0;
    z-index: 18;
    padding: 104px 18px 32px 32px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(8px);
    overflow-y:auto;
  }

  .novia-robot-project .project-info-panel__inner{
    width:min(100%, 360px);
    margin-right:auto;
  }

  .novia-robot-project .project-info-panel__text{
    margin:0 0 1.2rem;
    line-height:1.5;
  }

  .novia-robot-project .page{
    padding: 82px 8px 172px;
    height: var(--project-viewport-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--project-scroll-padding-top);
    scroll-padding-bottom: var(--project-scroll-padding-bottom);
  }

  .novia-robot-project .grid{
    display:flex;
    flex-direction:column;
    width:min(100%, 430px);
    max-width:none;
    margin:0 auto;
    gap: 28px;
    align-items: stretch;
  }

  .novia-robot-project .col--title,
  .novia-robot-project .col--metaA,
  .novia-robot-project .col--metaB{
    display:none;
  }

  .novia-robot-project .col--image{
    order:1;
    width: min(100%, 380px);
    margin: 0 auto;
  }

  .novia-robot-project .col--text{
    display:none;
  }

  .novia-robot-project .carousel{
    width:100%;
    max-width: none;
    margin: 0;
  }

  .novia-robot-project .carousel__track{
    aspect-ratio: auto;
    display:flex;
    flex-direction:column;
    gap: 0;
    overflow: visible;
  }

  .novia-robot-project .stack-image{
    min-height: var(--project-stack-min-height);
    margin: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .novia-robot-project .carousel__track img{
    position: static;
    inset: auto;
    display:block;
    width:min(100%, 360px);
    height:auto;
    max-height: var(--project-image-max-height);
    max-width:100%;
    margin: 0 auto;
    opacity:1;
    z-index:auto;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    transform-origin:center center;
    -webkit-transform-origin:center center;
    backface-visibility:visible;
    will-change:auto;
    transition:none;
    object-fit:contain;
    object-position: center center;
    align-self:center;
  }

  .novia-robot-project.info-open .page{
    overflow: hidden;
  }

  .novia-robot-project.info-open .project-info-toggle__close{
    display:inline;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .novia-robot-project.info-open .project-info-toggle{
    text-decoration: none;
  }

  .novia-robot-project.info-open .project-info-toggle__label{
    display:none;
  }

  .contact-page .page{
    padding: 82px 18px 172px;
  }

  .contact-page .menu{
    left:0;
    right:0;
    bottom:0;
    width:auto;
    max-width:none;
    padding:16px 0 22px;
    background:transparent;
    overflow:visible;
    isolation:isolate;
  }

  .contact-page .menu::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-88px;
    bottom:0;
    background:rgba(255,255,255,.12);
    backdrop-filter:saturate(150%) blur(16px);
    -webkit-backdrop-filter:saturate(150%) blur(16px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 36px, #000 88px, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 36px, #000 88px, #000 100%);
    pointer-events:none;
    z-index:0;
  }

  .contact-page .menu__nav{
    position:relative;
    z-index:1;
    width:fit-content;
    margin-left:var(--pad);
    padding:12px 14px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
  }

  .contact-page .grid{
    display:flex;
    flex-direction:column;
    width:min(100%, 420px);
    max-width:none;
    margin:0 auto;
    gap: 24px;
    align-items: stretch;
  }

  .contact-page .col--title,
  .contact-page .col--contact,
  .contact-page .col--text,
  .contact-page .col--info-image{
    width:100%;
    grid-column:auto;
    grid-row:auto;
  }

  .contact-page .col--title{
    order:1;
  }

  .contact-page .col--contact{
    order:3;
  }

  .contact-page .col--info-image{
    order:5;
  }

  .contact-page .col--text{
    order:4;
  }

  .contact-page .col__title{
    margin-bottom: .5rem;
  }

  .contact-page .col--contact .col__p{
    margin-bottom:0;
  }

  .contact-page .col--info-image{
    display:flex;
    justify-content:flex-start;
    width:min(100%, 136px);
  }

  .contact-page .col--info-image img{
    width:100%;
    aspect-ratio:3 / 4;
    object-fit:cover;
    object-position:center 20%;
  }

}

@media (max-width: 900px){

  .project-process-page .page{
    padding: 0 var(--pad);
  }

  .creative-process{
    width:100%;
  }
}