/* Local typography variant. The original type settings remain in styles.css. */
:root {
  --display: 'Golos Text', sans-serif;
  --reading-size: 15px;
}

h1, h2 {
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
  overflow-wrap: normal;
}
h2 { font-size: clamp(32px, 3.1vw, 46px); }
h3 { letter-spacing: -.012em; }
.hero h1 {
  font-size: clamp(44px, 4.65vw, 68px);
  line-height: 1.12;
  letter-spacing: -.025em;
  white-space: normal;
}
.hero-description { font-size: 16px; line-height: 1.7; max-width: 48ch; }
.contact h2 { font-size: clamp(36px, 3.8vw, 54px); }

.section-intro > p:not(.eyebrow),
.section-heading > p,
.service-row p,
.approach-copy > p:not(.eyebrow):not(.large-copy),
.approach-notes article p,
.metric-grid p,
.start-steps p,
.faq-list details > p,
.contact-copy > p:not(.eyebrow) {
  font-size: var(--reading-size);
  line-height: 1.7;
}
.approach-copy .large-copy { font-size: 18px; line-height: 1.65; letter-spacing: 0; }
.service-row h3, .approach-notes h3, .start-steps h3 { font-size: 18px; }
.metric-grid h3 { font-size: 17px; }
.faq-list summary { font-size: 15px; }
.form-heading h3 { font-size: 21px; }

.main-nav { font-size: 13px; }
.button, .text-link { font-size: 13px; }
.hero .eyebrow { font-size: 10px; letter-spacing: .09em; }
.eyebrow { font-size: 11px; letter-spacing: .1em; }
.hero-art figcaption, .notes-brand span { font-size: 12px; }
.hero-bottom > p, .hero-price > span { font-size: 12px; }
.hero-price > strong, .selected-rate > strong,
.rate-amount, .rate-percent, .volume-value input {
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.hero-price > strong { font-size: 30px; }
.rate-volume { letter-spacing: -.01em; }
.volume-picker > label, .volume-value > span { font-size: 13px; }
.rate-table-head { font-size: 11px; line-height: 1.5; }
.pricing-note { font-size: 12px; }
.selected-rate > p:first-child, .selected-rate > p:last-child { font-size: 12px; }
.selected-rate > p:last-child span { display: block; margin-left: 0; }
.volume-picker > .button { font-size: 13px; }
.range-labels { font-size: 11px; }

.field label { font-size: 13px; }
.field label span { font-size: 11px; }
.field input, .field select, .field textarea { font-size: 14px; }
.form-note, .field-error { font-size: 12px; }
.brief-dialog > p:not(.eyebrow):not(.form-note), .brief-dialog pre { font-size: 14px; }
.footer-top > p { font-size: 18px; letter-spacing: -.01em; }
.footer-bottom { font-size: 11px; }

/* The b. / w. bubbles are part of the existing brand artwork. */
.mini-bubbles span { font-family: 'Onest', sans-serif; }

@media (max-width: 1100px) {
  .hero-description { font-size: 15px; }
  .hero-price { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-price > span br { display: none; }
  .section-heading > p { max-width: 340px; }
}

@media (max-width: 820px) {
  h2 { font-size: 32px; }
  .hero h1 { font-size: 5.2vw; }
  .hero-actions { gap: 14px; }
  .hero-actions > .button { min-width: 0; padding-inline: 20px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .07em; }
  .hero-art figcaption { font-size: 11px; gap: 10px; }
  .section-heading { gap: 30px; }
  .section-heading > p { max-width: 260px; }
  .rate-table-head { font-size: 10px; }
  .hero-price > strong { font-size: 26px; }
  .contact h2 { font-size: 35px; }
  .footer-top > p { font-size: 16px; margin-right: 0; }
  .field input, .field select, .field textarea { font-size: 16px; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(31px, 8.6vw, 44px); }
  h2 { font-size: 32px; }
  .contact h2 { font-size: 36px; }
  .hero-description { margin-top: 23px; }
  .hero-actions { gap: 16px; }
  .hero-actions > .button { font-size: 12px; min-width: 154px; padding-inline: 18px; }
  .hero-actions > .text-link { font-size: 12px; }
  .hero-art { margin-top: 18px; }
  .hero-art figcaption { gap: 18px; }
  .hero-price > span { font-size: 11px; max-width: none; }
  .hero-price > strong { font-size: 27px; }
  .hero-price > strong span { font-size: 18px; }
  .section-heading > p { max-width: 350px; }
  .metric-grid { gap: 30px 20px; }
  .metric-grid p { font-size: 14px; }
  .metric-grid h3 { font-size: 16px; }
  .rate-table-head { font-size: 10px; }
  .pricing-note { font-size: 12px; }
  .selected-rate > strong { font-size: 28px; }
  .selected-rate > p:first-child, .selected-rate > p:last-child { font-size: 11px; }
  .volume-picker > .button, .form-submit, .brief-dialog > .button { font-size: 13px; }
  .form-heading h3 { font-size: 20px; }
  .field input::placeholder, .field textarea::placeholder { font-size: 14px; }
  .footer-top .text-link { font-size: 12px; }
  .footer-bottom { font-size: 10px; }
}

@media (max-width: 360px) {
  h2 { font-size: 30px; }
  .hero .eyebrow { font-size: 8px; }
  .hero-actions > .button { min-width: 0; padding-inline: 14px; }
  .hero-actions > .text-link { font-size: 11px; }
  .contact h2 { font-size: 33px; }
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .rate-table-head { font-size: 9px; }
  .selected-rate > strong { font-size: 24px; }
  .footer-bottom { font-size: 9px; }
}