*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#faf9f5;color:#191b19;font:17px/1.55 system-ui,sans-serif}header,main,footer{width:min(1160px,90%);margin:auto}header,nav{display:flex;align-items:center;gap:1.5rem}header{height:72px;border-bottom:1px solid #c8cac2;justify-content:space-between}a{color:inherit;text-underline-offset:5px}header a,nav a{text-decoration:none}b{font-size:21px}i{font-style:normal;color:#ed5f19}small,figcaption,footer,header a,.cta,.guide{font:600 13px/1.5 Consolas,monospace;letter-spacing:.06em}small{color:#496c61}.hero{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;min-height:min(740px,84vh)}figure{margin:0;text-align:center}canvas{width:100%;display:block}figcaption{color:#62675e;font-size:11px}h1{font-size:clamp(64px,7vw,100px);line-height:.91;letter-spacing:-.075em;margin:.3em 0}p{max-width:65ch;color:#4c514c}.cta,.guide{display:inline-block;margin:12px 8px 8px 0}.cta{background:#ff782c;padding:15px 19px;text-decoration:none}.guide{padding:10px 0}section{border-bottom:1px solid #c8cac2;padding:56px 0}h2{font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.055em;margin:15px 0 26px}details{border-top:1px solid #d3d6cd;padding:16px 0}summary{cursor:pointer;font-weight:650}footer{padding:30px 0}@media(max-width:740px){header{gap:8px}nav{gap:9px}header a{font-size:11px}.hero{grid-template-columns:1fr;gap:20px;padding-top:22px}.hero figure{max-width:340px;margin:auto}.hero article{grid-row:1}h1{font-size:65px}}@media(max-width:400px){nav a[href="#routes"]{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width: 767px) {
  header { flex-wrap: wrap; height: auto; padding: 13px 0 9px; gap: 5px 16px; }
  header nav { order: 1; width: 100%; justify-content: space-between; }
  header a { font-size: 13px; padding: 7px 0; }
  nav a[href="#routes"] { display: inline; }
  .hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; min-height: 0; padding: 58px 0; }
  .hero figure { position: absolute; z-index: -1; inset: 0 auto 0 -5vw; width: 78vw; max-width: 300px; margin: 0; opacity: .28; pointer-events: none; display: flex; align-items: flex-end; }
  .hero canvas { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .hero figcaption { display: none; }
  .hero article { grid-row: auto; }
  .hero h1 { font-size: clamp(56px, 15vw, 82px); }
  .hero p { max-width: 36ch; }
  .hero .guide { margin-left: 0; }
  section:not(.hero) { padding: 38px 0; }
}