:root { --text:#4f4f4f; --logo:#434343; --accent:#ff7575; --line:#d9d9d9; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html, body { height:100%; }
  body { background:#fff; color:var(--text); font:14px/1.5 Asap, sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }

  /* left column */
  .side { position:fixed; top:0; left:0; bottom:0; width:300px; padding:120px 40px 40px; overflow-y:auto; z-index:2; background:#fff; }
  .logo { display:block; font:400 24px/1.1 "Source Sans 3", sans-serif; color:var(--logo); }
  .nav { margin-top:44px; }
  .nav a { display:block; line-height:21px; }
  .nav a.on { color:var(--accent); }

  form { margin-top:22px; display:grid; gap:10px; max-width:220px; }
  form input, form textarea { width:100%; font:inherit; font-size:13px; color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line); padding:5px 0; border-radius:0; outline:none; resize:none; }
  form textarea { height:66px; }
  form input:focus, form textarea:focus { border-bottom-color:var(--text); }
  form ::placeholder { color:#9a9a9a; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .send { justify-self:start; font:inherit; font-size:13px; color:var(--accent); background:none; border:0; padding:4px 0; cursor:pointer; }
  .send[disabled] { opacity:.5; cursor:default; }
  .note { font-size:11px; color:#9a9a9a; margin-top:-6px; }
  .msg { font-size:12px; min-height:18px; }
  .msg a { color:var(--accent); }

  .foot { margin-top:26px; font-size:10px; }
  .social { display:inline-block; margin-top:10px; color:var(--accent); width:20px; height:20px; }
  .social svg { width:20px; height:20px; display:block; }

  /* gallery: one row that scrolls sideways */
  .gallery { position:fixed; inset:0 0 0 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
  .row { display:flex; gap:20px; height:100%; padding:100px 40px 100px 300px; width:max-content; }
  .ph { height:100%; flex:none; background:#f3f3f3; }
  .ph img { height:100%; width:auto; display:block; }

  /* phone */
  .bar, .menu-btn { display:none; }
  @media (max-width: 767px) {
    .bar { display:flex; position:fixed; top:0; left:0; right:0; height:66px; align-items:center; justify-content:space-between; padding:0 16px 0 18px; background:#fff; z-index:3; }
    .bar .logo { font-size:15px; }
    .menu-btn { display:block; width:30px; height:30px; background:none; border:0; cursor:pointer; position:relative; }
    .menu-btn span { position:absolute; left:3px; right:3px; height:3px; border-radius:2px; background:var(--logo); transition:transform .25s, opacity .2s; }
    .menu-btn span:nth-child(1) { top:7px; } .menu-btn span:nth-child(2) { top:14px; } .menu-btn span:nth-child(3) { top:21px; }
    .open .menu-btn span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .open .menu-btn span:nth-child(2) { opacity:0; }
    .open .menu-btn span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .side { width:auto; right:0; top:66px; padding:24px 18px 40px; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
    .side .logo { display:none; }
    .side .nav { margin-top:0; }
    .open .side { opacity:1; visibility:visible; }
    form { max-width:none; }
    form input, form textarea { font-size:16px; }
    .row { padding:66px 10px 10px 10px; gap:10px; }
  }
.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; }
/* About page */
.page { overflow:auto; }
.about { padding:120px 40px 80px 340px; max-width:1040px; }
.about h1 { font:400 24px/1.1 "Source Sans 3", sans-serif; color:var(--logo); }
.about .lede { margin-top:14px; font-size:16px; color:var(--logo); }
.about p { margin-top:14px; max-width:560px; font-size:14px; line-height:1.7; }
.about .pics { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.about .pics img { width:100%; height:auto; display:block; background:#f3f3f3; }
@media (max-width: 767px) {
  .about { padding:90px 18px 60px; }
  .about .pics { grid-template-columns:1fr; gap:10px; }
}