@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/instrument-sans.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f6f8fa;
  --ink: #29343e;
  --slate: #5b6873;
  --line: #d9e0e5;
  --frame: #e5eaee;
  --gold: #edc76b;
  font-family: "Instrument Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; text-underline-offset: .22em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
p { font-size: 18px; line-height: 1.65; color: var(--slate); }
.page-width { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }

.masthead { display: flex; align-items: center; justify-content: space-between; padding-top: 34px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 58px; height: 58px; }
.brand span { font-size: 29px; font-weight: 600; letter-spacing: -.035em; }
.contact-link { font-size: 16px; text-decoration-thickness: 1px; }

.intro {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: end;
  gap: clamp(48px, 7vw, 100px);
  padding-block: 96px 62px;
}
h1 { font-size: clamp(46px, 4.6vw, 70px); line-height: 1.07; font-weight: 500; letter-spacing: -.055em; max-width: 11.4em; }
.intro p { max-width: 26em; padding-bottom: 4px; }
.studio { padding: 10px; border-radius: 15px; background: var(--frame); box-shadow: 0 24px 64px -38px #29343e60; }
.studio-image { display: block; border-radius: 7px; overflow: hidden; }
.studio-image img { width: 100%; height: auto; }

.applications { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(38px, 6vw, 85px); padding-block: 90px 110px; }
.applications h3 { font-size: 31px; font-weight: 500; letter-spacing: -.025em; margin-bottom: 19px; }
.applications p { max-width: 29em; }

.features { display: grid; grid-template-columns: 1fr 1.55fr; gap: clamp(48px, 9vw, 130px); padding-block: 68px 100px; border-top: 1px solid var(--line); }
.features h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.12; font-weight: 500; letter-spacing: -.045em; max-width: 7.5em; }
.feature-list { display: grid; gap: 38px; }
.feature-list h3 { font-size: 21px; line-height: 1.35; letter-spacing: -.015em; font-weight: 600; margin-bottom: 9px; }
.feature-list p { max-width: 39em; }
.deployment { border-top: 1px solid var(--line); padding-block: 44px 72px; }
.deployment p { color: var(--ink); font-size: clamp(23px, 2.3vw, 31px); line-height: 1.4; letter-spacing: -.02em; }
.footer { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-block: 36px 48px; font-size: 16px; scroll-margin-top: 30px; }
.footer a:first-child { text-decoration: none; font-weight: 600; letter-spacing: -.025em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 1700px) { .intro { padding-top: 116px; } }
@media (max-width: 1000px) {
  .page-width { width: calc(100% - 64px); }
  .intro { grid-template-columns: 1.4fr 1fr; gap: 40px; padding-top: 78px; }
  .intro p { font-size: 17px; }
  h1 { font-size: clamp(42px, 5.3vw, 58px); }
  .applications { gap: 32px; padding-block: 68px 80px; }
  .applications h3 { font-size: 27px; }
  .applications p { font-size: 17px; }
  .features { gap: 48px; }
}
@media (max-width: 680px) {
  .page-width { width: calc(100% - 44px); }
  .masthead { padding-top: 20px; }
  .brand { gap: 7px; }
  .brand img { width: 49px; height: 49px; }
  .brand span { font-size: 26px; }
  .contact-link { font-size: 15px; }
  .intro { grid-template-columns: 1fr; gap: 26px; padding-block: 62px 36px; }
  h1 { font-size: clamp(39px, 9.7vw, 58px); max-width: 11em; line-height: 1.08; }
  .intro p { font-size: 17px; max-width: 33em; }
  .studio { width: calc(100% - 24px); padding: 5px; border-radius: 8px; }
  .studio-image { border-radius: 4px; }
  .applications { grid-template-columns: 1fr; gap: 34px; padding-block: 57px 62px; }
  .applications h3 { margin-bottom: 10px; }
  .applications p { max-width: 34em; }
  .features { grid-template-columns: 1fr; gap: 36px; padding-block: 45px 60px; }
  .features h2 { max-width: none; font-size: 33px; }
  .feature-list { gap: 30px; }
  .feature-list h3 { font-size: 20px; }
  .feature-list p { font-size: 17px; }
  .footer { flex-wrap: wrap; padding-block: 27px 34px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }