:root{
  --bg:#F8F9FB;
  --text:#1E1E1E;

  --footer-text:#1E1E1E;
  --footer-link:#1E1E1E;

  --route-dur: 520ms;
  --route-ease: cubic-bezier(.2,.8,.2,1);

  --line-color:#0b0b0b;
  --line-alpha:0.18;
  --line: rgba(11,11,11,var(--line-alpha));

  --card-color:#ECEEF3;
  --card-alpha:0.70;

  --hover-color:#FF5C5C;
  --hover-alpha:1;

  --tile-a-color:#1E1E1E;
  --tile-a-alpha:0;

  --fs:15px;
  --lh:1.45;

  --cols:12;
  --rows:8;

  --inset-x: clamp(14px, 1.4vw, 44px);
  --inset-y: clamp(12px, 1.2vh, 34px);

  --radius:0px 0px 32px 0px;

  
  --page-x: 0px;

  
  --logo-col-start:1;
  --logo-col-end:3;
  --logo-row-start:1;
  --logo-row-end:3;
  --logo-x:0px;
  --logo-y:0px;

  --arch-col-start:11;
  --arch-col-end:12;
  --arch-row-start:2;
  --arch-row-end:3;
  --arch-x:0px;
  --arch-y:0px;

  --intro-col-start:3;
  --intro-col-end:8;
  --intro-row-start:3;
  --intro-row-end:5;
  --intro-x:0px;
  --intro-y:0px;

  --card-col-start:1;
  --card-col-end:9;
  --card-row-start:5;
  --card-row-end:7;

  --arrow-col-start:1;
  --arrow-col-end:3;
  --arrow-row-start:5;
  --arrow-row-end:7;
  --arrow-x:0px;
  --arrow-y:0px;
  --arrow-size:96px;

  --content-col-start:3;
  --content-col-end:8;
  --content-row-start:5;
  --content-row-end:7;
  --content-x:0px;
  --content-y:0px;

  --foot-col-start:3;
  --foot-col-end:6;
  --foot-row-start:7;
  --foot-row-end:8;
  --foot-x:0px;
  --foot-y:0px;

  --tile-a-col-start:4;
  --tile-a-col-end:6;
  --tile-a-row-start:7;
  --tile-a-row-end:8;

  
  --app-w: 100vw;
  --app-h: 100vh;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  
  width: var(--app-w);
  height: var(--app-h);
  min-height: var(--app-h);

  display:grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}


.grid{
  position:fixed;
  inset:0;
  width: var(--app-w);
  height: var(--app-h);
  pointer-events:none;
  z-index:0;
}

.top{ display: contents; }
.main{ display: contents; }

.brand, .archive, .intro, .card-bg, .card-arrow, .card-content, .footer, .tile{
  position:relative;
  z-index:2;
}


.brand{
  grid-column: var(--logo-col-start) / var(--logo-col-end);
  grid-row: var(--logo-row-start) / var(--logo-row-end);
  justify-self: center;
  align-self: center;
  transform: translate(var(--logo-x), var(--logo-y));
}
.brand img{ height:18px; width:auto; display:block; }

.archive{
  grid-column: var(--arch-col-start) / var(--arch-col-end);
  grid-row: var(--arch-row-start) / var(--arch-row-end);
  justify-self: center;
  align-self: center;

  
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  white-space: nowrap;

  font-size:12px;
  letter-spacing:.12em;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid transparent;

  
  transform: translate(var(--arch-x), var(--arch-y)) translate3d(var(--page-x),0,0);
}


.intro{
  grid-column: var(--intro-col-start) / var(--intro-col-end);
  grid-row: var(--intro-row-start) / var(--intro-row-end);
  justify-self: start;
  align-self: center;

  max-width:760px;
  transform: translate(var(--intro-x), var(--intro-y)) translate3d(var(--page-x),0,0);
}
.intro__text{ margin:0; font-size:var(--fs); line-height:var(--lh); }


.client,
.mail,
.archive{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent; 
  padding: 0;          
  border-radius: 0;    
  background: transparent; 
  transition: border-color .15s ease, color .15s ease;
}

.client{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.mail{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.client:hover,
.mail:hover,
.archive:hover{
  background-color: rgba(255,92,92,var(--hover-alpha));
  border-bottom-color: var(--line);
}


.ext{
  display:inline-block;
  margin-left:6px;
  opacity:.7;
  transform-origin: 50% 60%;
  transition: transform .18s ease, opacity .18s ease;
}
.client:hover + .ext{
  transform: rotate(270deg) translate(1px,-1px);
  opacity: 1;
}


.card-bg{
  grid-column: var(--card-col-start) / var(--card-col-end);
  grid-row: var(--card-row-start) / var(--card-row-end);
  align-self: stretch;
  justify-self: stretch;

  background: var(--card-color);
  opacity: var(--card-alpha);
  border-radius: var(--radius);

  transform: translate3d(var(--page-x),0,0);
  z-index:1;
}


.card-arrow{
  grid-column: var(--arrow-col-start) / var(--arrow-col-end);
  grid-row: var(--arrow-row-start) / var(--arrow-row-end);
  justify-self: center;
  align-self: center;

  padding-left: var(--inset-x);
  transform: translate(var(--arrow-x), var(--arrow-y)) translate3d(var(--page-x),0,0);
  z-index:2;
}
.card-arrow img{ width: var(--arrow-size); height:auto; display:block; opacity:.92; }


.card-content{
  grid-column: var(--content-col-start) / var(--content-col-end);
  grid-row: var(--content-row-start) / var(--content-row-end);
  justify-self: var(--content-justify, start);
  align-self:  var(--content-align, center);

  padding: var(--content-pad-top, 0px)
           var(--content-pad-right, 0px)
           var(--content-pad-bottom, 0px)
           var(--content-pad-left, 0px);

  transform: translate(var(--content-x), var(--content-y)) translate3d(var(--page-x),0,0);
  z-index:2;
}
.card__title{ margin:0 0 22px 0; font-size:var(--fs); line-height:var(--lh); }
.clients{ font-size:var(--fs); line-height:1.75; letter-spacing:.02em; word-spacing:.16em; }
.clients .ext{ margin-right:18px; }
.many{ margin:18px 0 0 0; font-size:var(--fs); line-height:var(--lh); }


.tile{
  grid-column: var(--tile-a-col-start) / var(--tile-a-col-end);
  grid-row: var(--tile-a-row-start) / var(--tile-a-row-end);

  background: var(--tile-a-color);
  opacity: var(--tile-a-alpha);
  border-radius: var(--radius);

  transform: translate3d(var(--page-x),0,0);
  z-index:1;
}


.footer{
  grid-column: var(--foot-col-start) / var(--foot-col-end);
  grid-row: var(--foot-row-start) / var(--foot-row-end);
  justify-self: start;
  align-self: center;

  font-size:var(--fs);
  line-height:var(--lh);

  color: var(--footer-text);
  transform: translate(var(--foot-x), var(--foot-y)) translate3d(var(--page-x),0,0);
}
.footer .mail{ color: var(--footer-link); border-bottom-color: transparent; }


.page-anim, .archive{
  transition:
    transform var(--route-dur) var(--route-ease),
    opacity   var(--route-dur) var(--route-ease);
  will-change: transform, opacity;
}


body.is-leaving.to-archive{ --page-x: -80px; }
body.is-leaving.to-index{  --page-x:  80px; }

body.is-leaving .page-anim,
body.is-leaving .archive{
  opacity: 0;
}


body.is-entering.from-left{  --page-x: -80px; }
body.is-entering.from-right{ --page-x:  80px; }

body.is-entering .page-anim,
body.is-entering .archive{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .grid{ display:none; }
  .page-anim, .archive{ transition:none !important; }
}


@media (max-width: 900px){
  :root{
    --cols: 5;
    --rows: 11;
    --fs: 13px;
    --inset-x: 14px;
    --inset-y: 12px;

    
    --logo-col-start:1;
    --logo-col-end:4;
    --logo-row-start:1;
    --logo-row-end:3;

    --arch-col-start:5;
    --arch-col-end:6;
    --arch-row-start:2;
    --arch-row-end:3;

    --intro-col-start:2;
    --intro-col-end:5;
    --intro-row-start:3;
    --intro-row-end:5;

    --card-col-start:1;
    --card-col-end:5;
    --card-row-start:5;
    --card-row-end:9;

    --arrow-col-start:1;
    --arrow-col-end:2;
    --arrow-row-start:6;
    --arrow-row-end:7;

    --content-col-start:2;
    --content-col-end:5;
    --content-row-start:5;
    --content-row-end:9;

    --content-justify: start;
    --content-align: center;
    --content-pad-top: 0px;
    --content-pad-right: 24px;
    --content-pad-bottom: 0px;
    --content-pad-left: 0px;

    --foot-col-start:2;
    --foot-col-end:5;
    --foot-row-start:10;
    --foot-row-end:11;

    --tile-a-col-start:2;
    --tile-a-col-end:5;
    --tile-a-row-start:10;
    --tile-a-row-end:11;
    --tile-a-alpha:1; 





    --radius: 0px 0px 28px 0px;
  }

  .brand img{
    height: 12px; 
  }
  
  body{
    display:grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
  }

  
  .archive,
  .archive .word{ white-space: nowrap; }



  
  .footer{
    justify-self: center;
    align-self: center;
    width: 100%;
    text-align: center;
    color: #fff;
  }
  .footer .mail{ color:#fff; }

  
  .card-arrow{ display:none; }
}



.archive{
  position: relative;
  display: inline-grid;
  place-items: center;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}


.archive .word{
  grid-area: 1 / 1;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  transition: transform 420ms var(--route-ease), opacity 420ms var(--route-ease);
  will-change: transform, opacity;
}


body.page-index .word--archive{ opacity: 1; transform: translate3d(0,0,0); }
body.page-index .word--back{ opacity: 0; transform: translate3d(10px,0,0); }


body.page-archive .word--archive{ opacity: 0; transform: translate3d(-10px,0,0); }
body.page-archive .word--back{ opacity: 1; transform: translate3d(0,0,0); }

.archive{
  opacity: 1 !important;
  transform: translate(var(--arch-x), var(--arch-y)) !important;
}
body.is-leaving .archive,
body.is-entering .archive{
  opacity: 1 !important;
  transform: translate(var(--arch-x), var(--arch-y)) !important;
}


.mail:hover{
  background-color: transparent;
  border-bottom-color: #FF5C5C; 
}

.mail{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  font: inherit;
  color: var(--text);
  cursor: pointer;

  border-bottom: 1px solid transparent; 
}

.mail:hover{
  border-bottom-color: #FF5C5C; 
}

.mail:focus-visible{
  outline: 2px solid rgba(255,92,92,.35);
  outline-offset: 4px;
}

.copy-ico{
  display:inline-block;
  margin-left: 6px;
  opacity: .55;
  transform: translateY(-1px);
  transition: transform .18s ease, opacity .18s ease;
}

.mail:hover .copy-ico{
  opacity: .9;
  transform: translateY(-1px) scale(1.05);
}


.mail.is-copied .copy-ico{
  opacity: 1;
  transform: translateY(-1px) rotate(-8deg);
}