/*
  Prototype notes:
  Mars Extended Regular is loaded from assets/.
*/
@font-face {
  font-family: 'Mars Extended';
  src:
    url('/assets/MarsExtended-Regular-Trial.woff') format('woff'),
    url('/assets/MarsExtended-Regular-Trial.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root{
  --footerCutExtra: 90px;
  --red:#ef000d;
  --black:#000;
  --footerH:calc(100svh + var(--footerCutExtra));
  --visibleLogoH:72px;
  --logoW:min(96vw, 1180px);
  --pad:24px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#000;overflow:hidden;cursor:none}
body{font-family:'Mars Extended', Helvetica, Arial, sans-serif;color:var(--red);font-weight:400}
a,button,textarea{cursor:none}
.site{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden}
.stage{position:absolute;inset:0;z-index:2;will-change:transform}
.panel{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-start;padding:18px 24px 150px;opacity:0;visibility:hidden;pointer-events:none}
.panel.active{opacity:1;visibility:visible;pointer-events:auto}
.copy{max-width:1120px;font-size:clamp(22px,3.02vw,45px);line-height:.96;letter-spacing:-.07em}
.copy.intro{font-size:clamp(24px,3.2vw,50px)}
.copy p{margin:0 0 .82em}
.copy a,.image-hover,.person-link{color:inherit;text-decoration:underline;text-decoration-thickness:.065em;text-underline-offset:.09em}
.copy.intro a{text-decoration:underline;text-decoration-thickness:.065em;text-underline-offset:.09em}
.back-arrow{position:fixed;right:25px;top:25px;z-index:20;border:0;background:transparent;color:var(--red);font:inherit;font-size:60px;line-height:1;padding:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, visibility .25s ease}
.back-arrow.visible{opacity:1;visibility:visible;pointer-events:auto}
.image-hover{display:inline-block}
.contact-panel{display:none!important;padding:24px 24px 150px}
.contact-form{position:relative;width:calc(100vw - 48px);height:56vh;background:#171717;border-radius:28px;color:var(--red);font-size:clamp(24px,3.28vw,50px);line-height:.95;letter-spacing:-.07em;padding:28px 32px}
.contact-form label{display:block;position:absolute;left:32px;top:25px;pointer-events:none}
.contact-form textarea{position:absolute;left:32px;right:25px;top:25px;bottom:32px;width:calc(100% - 64px);height:auto;background:transparent;border:0;outline:0;color:var(--red);font:inherit;resize:none;caret-color:var(--red);overflow:hidden}
.contact-form button{position:absolute;right:0;top:calc(56vh + 36px);border:0;background:transparent;color:var(--red);font:inherit;padding:0;text-decoration:none}
.footer-drawer{position:absolute;left:0;right:0;bottom:0;height:var(--footerH);z-index:5;background:transparent;color:#000;overflow:hidden;will-change:transform;transform:translateY(100%)}
.footer-bg{position:absolute;left:0;right:0;top:var(--visibleLogoH);bottom:0;background:var(--red);z-index:0}
.footer-logo-button{position:absolute;top:0;left:50%;width:calc(100vw - 50px);padding:0;margin:0;border:0;background:transparent;transform:translateX(-50%);line-height:0;display:block;z-index:2}
.footer-logo-button img{width:100%;height:auto;display:block;pointer-events:none}
.footer-content{position:absolute;left:24px;bottom:24px;font-size:clamp(17px,2.24vw,34px);line-height:1.05;letter-spacing:-.065em;max-width:760px;z-index:2}
.footer-text p{margin:0 0 .65em}
.footer-text a{color:inherit;text-decoration:none}
.cursor{position:fixed;left:0;top:0;width:25px;height:25px;border-radius:999px;background:var(--red);mix-blend-mode:difference;z-index:1000;pointer-events:none;transform:translate(-50%,-50%)}
.cursor-image{position:fixed;left:0;top:0;width:440px;height:auto;z-index:999;pointer-events:none;opacity:0;transform:scale(.92);transform-origin:top left;display:block;will-change:opacity,transform}
body.image-cursor .cursor{opacity:0}
@media (min-width:1025px){
  .cursor{display:block}
  .cursor-image{display:block}
}
@media(max-width:700px){
  :root{
  --footerCutExtra: 150px;--visibleLogoH:58px}
  .panel{padding:16px 18px 100px}
  .copy{font-size:clamp(18px,5.1vw,30px);letter-spacing:-.065em}
  .cursor,.cursor-image{display:none}
  html,body,a,button,textarea{cursor:auto}
}

.intro-option{color:inherit;text-decoration:underline;text-decoration-thickness:.065em;text-underline-offset:.09em}

/* Mobile / tablet layers. Kept outside desktop flow unless media queries enable them. */
.mobile-trail-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:30;pointer-events:none;mix-blend-mode:difference;filter:saturate(1.25) contrast(1.04);display:none}
.mobile-logo-fade{display:none}
.flip-device{display:none}
.mobile-dna-media{display:none}

@media (max-width:1024px), (pointer:coarse){
  html,body{cursor:auto;touch-action:pan-y}
  a,button,textarea{cursor:auto}
  .site{height:100svh;min-height:100svh}
  .mobile-trail-canvas{display:block}
  .mobile-logo-fade{display:block;position:fixed;left:0;right:0;bottom:0;height:32vh;z-index:4;pointer-events:none;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.88) 58%, rgba(0,0,0,1))}
  .panel{padding:22px 22px 120px;overflow:hidden}
  .copy{font-size:clamp(21px,6.2vw,42px);line-height:.91;letter-spacing:-.075em;max-width:100%}
  .copy p{margin:0 0 .86em}
  .copy.intro{font-size:clamp(24px,6.8vw,48px)}
  .back-arrow{right:22px;top:auto;bottom:calc(var(--visibleLogoH) + 18px);font-size:56px}
  .footer-drawer{z-index:5}
  .footer-logo-button{width:calc(100vw - 24px)}
  .footer-content{
    left:22px;
    right:22px;
    top:calc(var(--visibleLogoH) + 24px);
    bottom:calc(26px + var(--footerCutExtra) - (var(--visibleLogoH) * 1.02));
    font-size:clamp(15px,4.2vw,26px);
    line-height:.9;
    letter-spacing:-.075em;
    max-width:calc(100vw - 44px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
  }
  .footer-text p{margin:0 0 .42em}
  .footer-content a,
  .footer-content a:visited,
  .footer-content a:hover,
  .footer-content a:active{
    color:#000;
    text-decoration-color:#000;
    -webkit-text-fill-color:#000;
  }
  .cursor,.cursor-image{display:none!important}

  .mobile-dna-media{display:block;position:relative;width:100%;height:0;overflow:hidden;opacity:0;margin:0 0 0 0;flex:0 0 auto}
  .mobile-dna-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transform:translateY(-32%)}
  .mobile-dna-media.visible{height:min(43svh, 430px);opacity:1;margin-bottom:22px}
  .panel[data-key$="-dna"],
  .panel[data-key$="-carla"],
  .panel[data-key$="-cris"]{flex-direction:column;align-items:stretch}
  .panel[data-key$="-dna"] .copy,
  .panel[data-key$="-carla"] .copy,
  .panel[data-key$="-cris"] .copy{position:relative;z-index:1}
}

@media (min-width:1025px){
  .cursor{display:block!important}
  .cursor-image{display:block!important}
}

@media (min-width:701px) and (max-width:1180px) and (pointer:coarse){
  :root{--footerCutExtra:190px}
  .panel{padding:30px 30px 140px}
  .copy{font-size:clamp(34px,5.2vw,58px);line-height:.91}
  .footer-content{
    left:30px;
    right:30px;
    top:calc(var(--visibleLogoH) + 30px);
    bottom:calc(30px + var(--footerCutExtra) - (var(--visibleLogoH) * 1.02));
    font-size:clamp(22px,3.2vw,38px);
    max-width:calc(100vw - 60px);
  }
  .mobile-dna-media.visible{height:min(44svh, 520px);margin-bottom:26px}
}

@media (min-width:701px) and (orientation:landscape) and (pointer:coarse){
  .mobile-dna-media.visible{height:50svh;width:calc(100vw - 60px);max-width:none}
  .mobile-dna-media img{object-position:center center;transform:translateY(-18%)}
}

@media (max-width:900px) and (max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .site,.mobile-trail-canvas,.mobile-logo-fade{display:none!important}
  .flip-device{display:flex;position:fixed;inset:0;z-index:9999;background:#000;color:var(--red);align-items:center;justify-content:center;text-align:center;overflow:hidden}
  .flip-text{font-size:clamp(38px,8vw,76px);line-height:1.05;letter-spacing:-.07em;position:relative;z-index:2}
  .flip-logo-crop{position:absolute;left:12px;right:12px;bottom:-7.4vw;height:9.2vw;min-height:40px;overflow:hidden;line-height:0}
  .flip-logo-crop img{width:100%;height:auto;display:block}
}


@media (max-width:1024px), (pointer:coarse){
  .mobile-dna-media img{width:100%;height:auto;object-fit:contain;}
  .mobile-dna-media{margin-bottom:20px;}
  .panel[data-key$="dna"] .copy p,
  .panel[data-key$="-carla"] .copy p,
  .panel[data-key$="-cris"] .copy p{margin-bottom:20px;}
}
@media (min-width:768px) and (max-width:1024px){
  .mobile-dna-media img{
    max-height:65vh;
    width:auto;
    max-width:100%;
    display:block;
    margin:0 auto;
  }
}


/* FINAL responsive DNA image fix: no crop, no dead gap */
@media (max-width:1024px), (pointer:coarse){
  .panel[data-key$="-dna"],
  .panel[data-key$="-carla"],
  .panel[data-key$="-cris"]{
    flex-direction:column;
    align-items:stretch;
    overflow:hidden;
  }
  .mobile-dna-media{
    display:block;
    position:relative;
    width:100%;
    height:0;
    overflow:hidden;
    opacity:0;
    margin:0;
    flex:0 0 auto;
    line-height:0;
  }
  .mobile-dna-media.visible{
    margin-bottom:20px!important;
  }
  .mobile-dna-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
  .mobile-dna-media.badass-crop img{
    object-fit:cover!important;
    object-position:center 18%!important;
  }
  .panel[data-key$="-dna"] .copy,
  .panel[data-key$="-carla"] .copy,
  .panel[data-key$="-cris"] .copy{
    margin-top:0!important;
  }
}

@media (min-width:701px) and (pointer:coarse){
  .mobile-dna-media{
    width:calc(100vw - 60px);
    max-width:calc(100vw - 60px);
  }
  .mobile-dna-media.visible{
    margin-bottom:20px!important;
  }
  .mobile-dna-media img{
    width:100%;
    height:100%;
    object-fit:contain!important;
  }
}


/* v5 minimal changes */
.copy,
.copy.intro,
.copy p,
.copy a,
.image-hover,
.person-link,
.contact-form,
.footer-content,
.flip-text,
.back-arrow,
.contact-form button,
.contact-form label,
.contact-form textarea{
  letter-spacing:0!important;
  line-height:1!important;
}

@media (max-width:1024px), (pointer:coarse){
  .contact-panel{display:none!important;}
}