@font-face {
  font-family: 'Unbounded';
  src: url('fonts/unbounded.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('fonts/golos-text.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
:root { font-family: 'Golos Text', system-ui, sans-serif; }
h1, h2, h3 { font-family: 'Unbounded', sans-serif; }
.intro h1 {
  font-size: clamp(48px, 5.7vw, 82px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.052em;
}
h2 { font-size: clamp(30px, 3.1vw, 44px); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; }
.service h3 { font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -.04em; min-height: 2.7em; }
.service p, .steps p, .section-heading > p { font-size: 16px; }
.steps h3 { font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.04em; }
.contact h2 { font-size: clamp(32px, 3.9vw, 55px); line-height: 1.2; }
.pills span { font-size: 12px; }
.eyebrow, .cover-meta, .cover-bottom { font-size: 13px; }
dialog h2 { font-size: 28px; }

/* Every surface receives coordinates from the same light in viewport space. */
.glass-card { --light-x: 50%; --light-y: -700px; --light-strength: 0; isolation: isolate; }
.glass-card::before {
  z-index: 2;
  background: radial-gradient(600px circle at var(--light-x) var(--light-y),
    rgba(133,239,255,.19), rgba(0,219,232,.085) 36%, transparent 76%);
  opacity: var(--light-strength);
  transition: opacity .35s ease;
}
.glass-card::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--light-x) var(--light-y),
    #d2fbff 0%, rgba(60,227,244,.8) 28%, rgba(0,219,232,.24) 55%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--light-strength);
  transition: opacity .35s ease;
}
.service:hover { transform: translateY(-3px); }
@media (max-width: 1050px) {
  .masthead nav { gap: 20px; font-size: 13px; }
  .intro h1 { font-size: clamp(44px, 5.7vw, 60px); }
}
@media (max-width: 760px) {
  .intro h1 { font-size: clamp(32px, 5.7vw, 45px); letter-spacing: -.055em; line-height: 1.2; }
  .intro-work { display: flex; margin-left: 0; width: max-content; font-size: 14px; }
  h2 { font-size: 30px; }
  .service h3 { font-size: 23px; min-height: 0; }
  .contact h2 { font-size: clamp(30px, 6vw, 40px); }
}
@media (max-width: 440px) {
  .intro h1 { font-size: 7.6vw; }
  .masthead .brand { width: 148px; }
  .nav-contact { font-size: 12px; padding-inline: 10px; }
}