/* Mistos — mistos.com · interim identity 25-081-MIS-BR-0001 REV D
   Text sets only in Ink or Graphite (WCAG AAA); Oxide marks, never letters. */

@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url(/assets/fonts/PlexSans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url(/assets/fonts/PlexSans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url(/assets/fonts/PlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;
  src:url(/assets/fonts/PlexMono-500.woff2) format('woff2')}

:root{
  --ink:#101417; --paper:#F7F7F5; --rule:#D3D8DA;
  --steel:#909CA3; --graphite:#4C555B; --oxide:#B4642A;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font:400 16px/1.65 var(--sans);
  color:var(--ink);
  background:var(--paper);
  min-height:100dvh;
}

/* the drawing-sheet frame */
.sheet{
  position:fixed;inset:14px;
  border:1px solid var(--rule);
  pointer-events:none;z-index:10;
}
@media (max-width:640px){.sheet{inset:10px}}

.top{
  display:flex;justify-content:space-between;align-items:center;
  max-width:960px;margin:0 auto;
  padding:44px 32px 0;
}
.mark{display:block;width:104px;height:auto}
.loc{
  font:600 11px/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--graphite);
}

main{max-width:960px;margin:0 auto;padding:0 32px}

/* hero */
.hero{padding:15vh 0 12vh}
h1{
  font:600 clamp(30px,5vw,42px)/1.18 var(--sans);
  letter-spacing:-.01em;
  max-width:21ch;
  text-wrap:balance;
}
.sub{
  margin-top:22px;
  max-width:58ch;
  color:var(--graphite);
  font-size:17px;
}

.sld{
  display:block;width:min(680px,100%);height:auto;
  margin:52px 0 0;
}
.sld .p{stroke:var(--steel);stroke-width:1.6;stroke-linecap:round}
.sld .bus{stroke-width:2.4}
.sld .node{fill:var(--oxide)}

.cta{
  display:inline-block;margin-top:52px;
  font:600 16px/1 var(--sans);
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--oxide);
  padding-bottom:6px;
}
.cta .arr{display:inline-block;margin-left:6px;transition:transform .2s ease}
.cta:hover .arr{transform:translateY(3px)}
.cta:focus-visible{outline:2px solid var(--oxide);outline-offset:4px}

/* contact */
.contact{padding:10vh 0 12vh;border-top:1px solid var(--rule)}
h2{
  font:600 12px/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:34px;
  display:flex;align-items:center;gap:14px;
}
h2 .bar{width:22px;border-top:2px solid var(--oxide)}

.grid{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:56px}
@media (max-width:720px){.grid{grid-template-columns:1fr;gap:28px}}

.field{margin-bottom:18px}
label{
  display:block;
  font:600 11px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:8px;
}
input[type=text],input[type=email],textarea{
  width:100%;
  font:400 16px/1.5 var(--sans);
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:0;
  padding:11px 12px;
}
textarea{resize:vertical;min-height:120px}
input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--oxide);outline-offset:-1px;border-color:var(--oxide);
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

button{
  font:600 15px/1 var(--sans);
  color:var(--paper);
  background:var(--ink);
  border:none;border-radius:0;
  padding:14px 26px;
  cursor:pointer;
}
button:hover{background:#000}
button:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}

.form-error{
  color:var(--ink);
  background:#fff;
  border:1px solid var(--oxide);
  border-left:4px solid var(--oxide);
  padding:10px 14px;
  font-size:14px;margin-bottom:16px;
}

.form-success .lead{font:600 22px/1.3 var(--sans)}
.form-success .note{color:var(--graphite);margin:8px 0 20px}
.form-success .again{
  background:none;color:var(--ink);
  border:1px solid var(--ink);
  padding:12px 22px;
}
.form-success .again:hover{background:var(--ink);color:var(--paper)}

aside p{
  color:var(--graphite);
  font-size:15px;
  max-width:26ch;
  border-left:2px solid var(--rule);
  padding-left:18px;
}

footer{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  max-width:960px;margin:0 auto;
  padding:0 32px 46px;
  color:var(--graphite);
  font-size:13px;
}
footer .doc{font:500 11px/1 var(--mono);letter-spacing:.06em}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.6,.2,1) forwards}
  .r1{animation-delay:.05s}.r2{animation-delay:.18s}.r3{animation-delay:.34s}.r4{animation-delay:.5s}
  @keyframes rise{to{opacity:1;transform:none}}

  .sld .p{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:draw 1.1s ease forwards;
  }
  .sld .p1{animation-delay:.45s}.sld .p2{animation-delay:.6s}.sld .p3{animation-delay:.7s}
  .sld .p4{animation-delay:.85s}.sld .p5{animation-delay:.95s}.sld .p6{animation-delay:1.05s}
  .sld .p7{animation-delay:1.15s}.sld .p8{animation-delay:1.25s}.sld .p9{animation-delay:1.4s}
  .sld .p10{animation-delay:1.5s}.sld .p11{animation-delay:1.56s}.sld .p12{animation-delay:1.62s}
  .sld .p13{animation-delay:1.72s}
  @keyframes draw{to{stroke-dashoffset:0}}
  .sld .node{opacity:0;animation:appear .4s ease 1.45s forwards}
  @keyframes appear{to{opacity:1}}
}