:root {
  --paper:#eeeae2;
  --ink:#20211f;
  --muted:#59605a;
  --line:#cccfc3;
  --accent:#bac2a3}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6}
a {
  color:inherit;
  text-decoration:none}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
a:focus-visible {
  outline:3px solid #627a35;
  outline-offset:6px}
.skip {
  position:absolute;
  left:20px;
  top:-100px;
  padding:12px;
  background:white;
  z-index:5}
.skip:focus {
  top:10px}
header,main,footer {
  max-width:1440px;
  margin:auto}
header {
  min-height:118px;
  padding:28px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px}
.wordmark {
  font-size:26px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.1;
  display:inline-block}
.wordmark span {
  display:block;
  font-size:10px;
  font-weight:500;
  letter-spacing:.33em;
  margin-top:8px}
nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px}
.nav-contact {
  border-bottom:1px solid;
  padding-bottom:6px}
.nav-contact span {
  margin-left:20px}
.hero {
  padding:38px 6% 0}
.hero-top,.hero-bottom,.hero-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
.eyebrow,.category,.hero-foot {
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase}
.eyebrow {
  font-weight:bold;
  margin:0 0 25px}
.hero-top .eyebrow {
  margin:0}
h1,h2,h3,p {
  margin-top:0}
h1 {
  font-size:clamp(65px,8vw,116px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.05em;
  margin:38px 0 28px}
em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400}
h1 em {
  letter-spacing:-.045em}
.hero-bottom p {
  font-size:17px;
  margin:0;
  color:var(--muted)}
.button {
  display:flex;
  gap:35px;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  padding:16px 22px;
  font-size:14px}
.button span {
  font-size:24px}
.soundscape {
  height:245px;
  background:#26382f;
  position:relative;
  overflow:hidden;
  margin-top:48px}
.sun {
  position:absolute;
  width:310px;
  height:310px;
  border-radius:50%;
  background:var(--accent);
  top:35px;
  left:62%;
  box-shadow:0 0 80px #c8e68b22}
.lines {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 12px,#203128 13px,#203128 16px);
  transform:skew(-16deg) scale(1.2)}
.soundscape:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#17271ce8,transparent 80%)}
.soundscape>span {
  position:absolute;
  bottom:24px;
  left:28px;
  z-index:1;
  color:var(--paper);
  font-size:9px;
  letter-spacing:.18em}
.hero-foot {
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:9px;
  letter-spacing:.08em}
.section {
  padding:95px 6%;
  border-bottom:1px solid var(--line)}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px}
h2 {
  font-size:clamp(36px,4vw,54px);
  font-weight:400;
  line-height:1.13;
  letter-spacing:-.035em;
  margin-bottom:25px}
.body-copy {
  max-width:510px}
.body-copy p {
  color:var(--muted);
  font-size:16px}
.body-copy .large {
  font-size:24px;
  line-height:1.45;
  color:var(--ink)}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px}
.section-heading>p {
  font-size:16px;
  color:var(--muted);
  margin-bottom:28px}
.service-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:35px;
  margin-top:28px}
.service-grid .supplementary {
  grid-column:1 / -1;
  border-color:var(--line)}
.service-grid .supplementary .number {
  margin-bottom:14px}
.service-grid .supplementary p {
  max-width:680px}
.service-grid .supplementary .category {
  padding-top:10px}
.mixing-guidance {
  max-width:560px}
.contact-bottom>div {
  min-width:0}
.service-grid article {
  border-top:1px solid var(--ink);
  padding-top:20px;
  display:flex;
  flex-direction:column}
.number {
  font-size:11px;
  color:var(--muted);
  margin-bottom:35px}
h3 {
  font-size:23px;
  font-weight:400;
  letter-spacing:-.03em;
  margin-bottom:16px}
.service-grid p {
  font-size:16px;
  color:var(--muted);
  max-width:440px}
.category {
  font-size:9px;
  margin-top:auto;
  padding-top:26px}
.text-link {
  display:inline-block;
  font-size:14px;
  border-bottom:1px solid;
  padding-bottom:5px;
  margin-top:15px}
.text-link span {
  margin-left:20px}
.contact {
  background:var(--ink);
  color:var(--paper)}
.contact h2 {
  font-size:clamp(58px,7vw,94px);
  line-height:1.03}
.contact h2 em {
  color:var(--accent)}
.contact-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end;
  margin-top:35px}
.contact-bottom p {
  font-size:16px;
  color:#c3cbbf}
.email {
  font-size:clamp(17px,2.4vw,30px);
  border-bottom:1px solid #87917d;
  padding-bottom:10px;
  display:inline-block}
.email span {
  padding-left:22px}
.location {
  text-align:right;
  flex-shrink:0;
  margin:0}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:35px 6%}
footer .wordmark {
  font-size:19px}
footer .wordmark span {
  font-size:7px}
footer p,footer>a:not(.wordmark) {
  font-size:12px;
  color:var(--muted);
  margin:0}
@media(min-width:1441px) {
  body {
  padding:0 4%}
}
@media(max-width:760px) {
  header {
  padding:24px 6%;
  align-items:flex-start;
  flex-direction:column;
  gap:24px}
nav {
  gap:20px;
  flex-wrap:wrap;
  font-size:13px}
.hero {
  padding-top:24px}
h1 {
  font-size:clamp(55px,11vw,82px);
  margin-top:30px}
.hero-bottom {
  align-items:flex-start;
  flex-direction:column}
.hero-bottom p {
  font-size:15px}
.soundscape {
  height:200px;
  margin-top:30px}
.sun {
  left:45%;
  width:240px;
  height:240px}
.hero-foot {
  align-items:flex-start}
.hero-foot>span {
  max-width:190px}
.section {
  padding:58px 6%}
.split {
  grid-template-columns:1fr;
  gap:22px}
.section-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:0}
.service-grid {
  grid-template-columns:1fr;
  gap:32px;
  margin-top:6px}
.number {
  margin-bottom:14px}
.service-grid p {
  max-width:none}
.category {
  padding-top:10px}
.contact h2 {
  font-size:clamp(46px,9vw,68px)}
.contact-bottom {
  align-items:flex-start;
  flex-direction:column}
.location {
  text-align:left}
.email span {
  padding-left:8px}
footer {
  align-items:flex-start;
  flex-wrap:wrap}
footer p {
  width:100%;
  order:3}
.desktop {
  display:none}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}


.brand-icon {
  float:left;
  width:64px;
  height:64px;
  margin:-10px 16px -8px 0}
.projects>p:not(.eyebrow) {
  color:var(--muted)}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:40px}
.project-grid article {
  border-top:1px solid var(--line);
  padding-top:25px}
.project-grid img {
  display:block;
  max-width:100%;
  object-fit:contain;
  margin-bottom:25px}
.project-grid p {
  font-size:16px;
  color:var(--muted)}
.project-label {
  height:240px;
  display:flex;
  align-items:center;
  font-family:Georgia,serif;
  font-size:48px;
  line-height:1.1;
  letter-spacing:.06em;
  margin-bottom:25px}
.contact .eyebrow {
  color:var(--accent)}
@media(max-width:760px) {
  .project-grid {
  grid-template-columns:1fr}
.brand-icon {
  width:54px;
  height:54px;
  margin-right:12px}
.project-label {
  height:180px}
}


/* Refinements: readable controls, quiet mineral palette, stone-like silhouettes. */

nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px}

.hero-top .eyebrow,.hero-foot,.category {
  font-size:11px}

.soundscape {
  background:linear-gradient(125deg,#343832,#55594a 55%,#252d29)}

.sun {
  background:#c6c4b6;
  border-radius:46% 54% 40% 60%;
  width:280px;
  height:330px;
  top:35px;
  left:64%;
  transform:rotate(-14deg);
  box-shadow:inset -40px -20px 0 #aaa999,inset 15px 0 0 #d5d2c7}

.lines {
  inset:55px auto -60px 18%;
  width:250px;
  background:linear-gradient(110deg,#9c9d8c,#676f60);
  clip-path:polygon(25% 5%,73% 0,96% 97%,0 100%);
  transform:rotate(7deg)}

.soundscape:after {
  background:linear-gradient(0deg,#17271ccc,transparent 70%)}

address.location {
  font-style:normal;
  font-size:15px;
  line-height:1.7;
  color:#d3d8cc}

@media(max-width:760px) {
  nav {
  column-gap:20px;
  row-gap:2px}
.sun {
  left:56%;
  width:200px;
  height:265px}
.lines {
  left:10%;
  width:145px}
.hero-foot {
  font-size:10px}
}


.language {
  border:1px solid var(--line);
  padding:0 10px;
  font-size:13px}
.wordmark {
  flex-shrink:0}
header {
  flex-wrap:wrap}
nav {
  flex-wrap:wrap}
html[lang="fr-CA"] h1 {
  font-size:clamp(56px,7vw,100px)}


.reveal-email {
  font-family:inherit;
  background:none;
  color:inherit;
  border:0;
  padding:10px 0;
  cursor:pointer;
  text-align:left;
  min-height:44px}

.reveal-email:hover {
  text-decoration:underline;
  text-underline-offset:5px}

button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px}

[hidden] {
  display:none!important}


/* Keyboard destinations and comfortable secondary link targets. */
main:focus-visible {
  outline:3px solid #627a35;
  outline-offset:-3px}

.hero-foot>a,footer>a:not(.wordmark) {
  display:inline-flex;
  align-items:center;
  min-height:44px}

.text-link {
  min-height:44px;
  padding-top:9px}

.contact a:focus-visible {
  outline-color:var(--accent)}

.email {
  overflow-wrap:anywhere;
  max-width:100%}


/* Printing keeps the business identity and content, without large decorative blocks. */
@media print {
  html {
  scroll-behavior:auto}

  body {
  background:white;
  color:black;
  padding:0;
  font-size:11pt}

  header {
  min-height:0;
  padding:0 0 18pt}

  nav,.skip,.soundscape,.hero-foot,.button,.text-link,.reveal-email,footer>a {
  display:none!important}

  .hero,.section {
  padding:18pt 0}

  .split,.section-heading,.contact-bottom {
  display:block}

  .service-grid,.project-grid {
  gap:18pt}

  .contact {
  background:white;
  color:black}

  .contact h2 em,.contact .eyebrow,.contact-bottom p,address.location {
  color:black}

  h1,html[lang="fr-CA"] h1 {
  font-size:32pt}

  h2,.contact h2 {
  font-size:24pt}

  h3 {
  font-size:16pt}

  h1,h2,h3 {
  break-after:avoid}

  article,address {
  break-inside:avoid}

  .location {
  text-align:left;
  margin-top:18pt}

  .project-label {
  height:auto;
  font-size:24pt}

  .project-grid img {
  width:100px;
  height:100px}

  footer {
  padding:18pt 0}

}