/* Still Grotesk: Mona Sans at width 104 with the a from Inter, built by
   tools/font/build_font.py. size-adjust brings its x-height to that of
   Neue Haas Grotesk Display (510 against 517 thousandths). */
@font-face {
  font-family: "Still Grotesk";
  src: url("/assets/fonts/StillGrotesk.woff2?v=c98a5d04") format("woff2-variations"),
       url("/assets/fonts/StillGrotesk.woff2?v=c98a5d04") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 98.6%;
}

/* still sound design — the page around the code blocks.
   Rebuilt from the Squarespace template and custom CSS of still.productions
   (values measured on the live site, October 2026). The code blocks bring
   their own styles, unchanged. */

:root {
  --font: "Still Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-button: "Still Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: #fcfcfc;
  color: #575757;
  font-family: var(--font);
  font-weight: 600;
  font-style: normal;
  font-size: 15px;
  line-height: 1.8em;
  position: relative;
}

body, button, input, select, textarea { color: #575757; }
input, textarea, select, button { font-family: var(--font); }

a, a:visited { color: #111; text-decoration: none; }
a:hover { color: #444; }
a:focus { outline: none; }

/* custom CSS: everything lowercase, except on wie and studio */
h1, h2, h3, h4, h5, h6, p, span, a, li, div { text-transform: lowercase !important; }
body.page-about h1, body.page-about h2, body.page-about h3, body.page-about h4, body.page-about h5, body.page-about h6,
body.page-about p, body.page-about span, body.page-about a, body.page-about li, body.page-about div,
body.page-studio h1, body.page-studio h2, body.page-studio h3, body.page-studio h4, body.page-studio h5, body.page-studio h6,
body.page-studio p, body.page-studio span, body.page-studio a, body.page-studio li, body.page-studio div { text-transform: none !important; }

h1, h2, h3, h4, h5, h6 { margin: 1em 0 .5em; }
h1 { font-weight: 900; line-height: 1.5em; font-size: 2em; letter-spacing: .06em; color: #222; }
h2 { font-weight: 900; line-height: 1.2em; font-size: 1.6em; letter-spacing: .06em; color: #222; }
h3 { font-weight: 500; line-height: 1.2em; font-size: 1.3em; letter-spacing: .06em; color: #d1d1d1; }
p { line-height: 1.8em; font-size: 15px; margin: 0 0 1em; }
b, strong { font-weight: bold; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* the grain sits over the page and multiplies into it */
#still-ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999 !important;
  opacity: .7;
  mix-blend-mode: multiply;
}
@supports (-webkit-touch-callout: none) {
  #still-ambient-bg { opacity: .9 !important; mix-blend-mode: multiply !important; }
}

/* ===== canvas ===== */
#canvas {
  max-width: 1200px;
  margin: 10px auto;
  padding: 75px;
  background-color: rgba(255,255,255,0);
}

#header { margin-bottom: 40px; }
#header::after, #page::after, #footer::after, .sqs-row::after, .fields::after { content: ""; display: table; clear: both; }

#logo { float: left; }
#logo h1.logo {
  margin: 0;
  display: inline-block;
  font-weight: 900;
  font-style: normal;
  font-size: 42px;
  line-height: 1.2em;
  letter-spacing: 1px;
}
#logo h1.logo a, #logo h1.logo a:visited { color: #222; }
#logo h1.logo a:hover { color: #444; }

#topNav { float: right; position: relative; z-index: 890; }
#topNav, #topNav nav, #topNav ul, #topNav li, #topNav a {
  font-weight: 700;
  font-style: normal;
  line-height: 1.6em;
  font-size: 13px;
  letter-spacing: 1.25px;
}
#topNav nav ul { list-style: none; margin: 0; padding: 0; }
#topNav nav li { float: left; position: relative; margin-right: 30px; }
#topNav nav li:last-child { margin-right: 0; }
#topNav nav li a { display: inline-block; line-height: 26px; padding: 12.2px 0; }
#topNav a, #topNav a:visited { color: #999; }
#topNav .active-link > a, #topNav a:hover { color: #111; }
#topNav .lang a + a::before, #mobileNav .lang a + a::before { content: none; }
#topNav .lang .sep { color: #999; }

#mobileMenuLink { display: none; }
#mobileNav { height: 0; overflow: hidden; transition: height .3s ease; }

#page { padding: 50px 0; position: relative; }
.page-header { }

#footer { margin-top: 50px; }
#footerBlock { min-height: 34px; width: 50%; float: left; }

/* ===== the 12-column grid ===== */
.sqs-row { margin: 0 -17px; }
.sqs-col .sqs-row { margin: 0; }
.sqs-col { float: left; box-sizing: border-box; }
.span-12 { width: 100%; }
.span-6 { width: 50%; }
.sqs-block { position: relative; padding: 17px; clear: both; }
.sqs-block.pad-x { padding: 0 17px; }
.sqs-block.pad-x-b { padding: 0 17px 17px; }
.sqs-block-html > *:first-child, .sqs-html-content > *:first-child { margin-top: 0; }
.sqs-block-html > *:last-child, .sqs-html-content > *:last-child { margin-bottom: 0; }
.page-title-block { margin-top: 50px; padding: 0 17px; }

/* ===== contact ===== */
.sqs-block-horizontalrule hr { border: none; color: #bbb; background-color: #bbb; height: 1px; margin: 15px 0; }

.map-wrap { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #2b2b2b; }
.sqs-block-map-wide { padding-top: 34px; }
.map-link { margin: 10px 0 0; font-size: 13px; }
.map-link a { color: #999; }
.map-link a:hover { color: #111; }
.map-wrap iframe {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  /* Squarespace's dark map style, from Google's own map */
  filter: grayscale(1) invert(.9) contrast(.92) brightness(.95);
}

.form-wrapper .field-list { line-height: normal; }
.form-wrapper fieldset, .form-wrapper legend { margin: 0; padding: 0; border: 0; }
.form-wrapper .fields { display: flex; flex-wrap: wrap; column-gap: 10px; }
.form-wrapper .fields legend { width: 100%; font-size: 15px; line-height: normal; }
.form-wrapper .fields legend span { display: block; }
.form-wrapper .fields .field { width: calc(50% - 5px); }
.form-wrapper .field { position: relative; margin: 0 0 18px; }
.form-wrapper .title { display: block; padding: 0 0 4px; font-size: 15px; line-height: normal; color: #575757; }
.form-wrapper .fields legend.title { padding: 0; }
.form-wrapper .title-text { display: inline-flex; align-items: flex-end; }
.form-wrapper .caption { display: flex; align-items: flex-end; height: 18px; }
.form-wrapper .caption-text { display: inline-flex; align-items: center; font-size: 12px; line-height: normal; }
.form-wrapper .description { font-size: 12px; opacity: .7; margin-left: .45em; }
.form-wrapper .caption .description { line-height: 12px; }
.form-wrapper .field-element {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  border: 1px solid #a9a9a9;
  border-radius: 0;
  background: #fafafa;
  color: #000;
  font-size: 15px;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}
.form-wrapper .field-element:focus { background: #fff; outline: none; transition: background .1s ease-in; }
.form-wrapper textarea.field-element { min-height: 100px; height: 100px; resize: vertical; }
.form-wrapper .form-button-wrapper { text-align: left; }
.form-wrapper button[type=submit] {
  display: inline-block;
  padding: 15px 37.5px;
  border: 0;
  border-radius: 0;
  background-color: #272727;
  color: #fff;
  font-family: var(--font-button);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.form-wrapper button[type=submit] span { line-height: 21px; }
.form-wrapper button[type=submit] span { text-transform: lowercase !important; }
.form-wrapper .form-submission-text { margin-top: 20px; }
.form-wrapper .hidden { display: none; }
.form-wrapper.is-sending .field-list { opacity: .7; }
.form-wrapper .bot { position: absolute; left: -9999px; }

/* ===== footer icons: the mute button sits with the others ===== */
.contact-icons button.ci {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.contact-icons .sound-toggle .off { display: none; }
.contact-icons .sound-toggle.is-off .on { display: none; }
.contact-icons .sound-toggle.is-off .off { display: inline; }

/* ===== phones (the template switches at 750px, the grid at 640px) ===== */
@media only screen and (max-width: 750px) {
  #canvas { margin: 0 auto; padding: 0 20px 20px; }
  #header { margin-bottom: 30px; }
  #logo { float: none; }
  #logo h1.logo { display: block; text-align: center; letter-spacing: normal; }
  #header #topNav { display: none; }

  #mobileNav { margin: 0 0 15px; }
  #mobileNav .wrapper { padding: 0 0 1em; border-bottom: 1px solid #ddd; }
  #mobileNav ul { list-style: none; margin: 0; padding: 0; }
  #mobileNav li { display: block; text-align: center; }
  #mobileNav a, #mobileNav a:visited {
    display: block;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.25px;
    color: rgba(153,153,153,.7);
    font-size: 16px;
    line-height: 2.5em;
  }
  #mobileNav .active-link a { color: #999; }
  #mobileNav .lang { display: flex; justify-content: center; align-items: baseline; }
  #mobileNav .lang a, #mobileNav .lang .sep { display: inline; font-size: 16px; line-height: 2.5em; letter-spacing: 1.25px; font-weight: 700; color: rgba(153,153,153,.7); }
  #mobileNav .lang .sep { padding: 0 .35em; }

  #mobileMenuLink {
    display: block;
    margin: 0 0 25px;
    padding: 0 0 15px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6em;
    letter-spacing: 1.25px;
  }
  #mobileMenuLink a { cursor: pointer; display: block; margin: 0; font-size: 16px !important; color: #999; }
}

@media only screen and (max-width: 640px) {
  .map-wrap { aspect-ratio: 4 / 3; }
  .sqs-col { float: none; width: 100%; }
  .sqs-block.pad-x, .sqs-block.pad-x-b { padding: 17px; }
}