/* Brawnd premium typography hierarchy
   Fraunces is the brand voice for major statements and rare editorial accents.
   Instrument Sans is the structural, body and interface voice.

   The pairing is intentionally disciplined: Fraunces appears only at high-value
   moments; Instrument Sans carries the rest of the experience with authority,
   clarity and a contemporary studio feel. */

:root {
  --headline: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --display: 'Instrument Sans Variable', Arial, sans-serif;
  --body: 'Instrument Sans Variable', Arial, sans-serif;
  --editorial: 'Fraunces Variable', Georgia, 'Times New Roman', serif;

  --type-hero: clamp(60px, 7.7vw, 116px);
  --type-section: clamp(38px, 4.4vw, 62px);
  --type-section-compact: clamp(38px, 4.2vw, 58px);
  --type-contact: clamp(44px, 5vw, 68px);
  --type-work: clamp(40px, 4.7vw, 68px);
}

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

body {
  font-weight: 400;
  letter-spacing: -0.009em;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-synthesis: none;
}

/* Brand headline voice --------------------------------------------------- */
.hero h1,
.hero-headline,
.section-head h2,
.growth-copy h2,
.about-grid h2,
.faq-grid h2,
.contact h2 {
  font-family: var(--headline);
  font-style: normal;
  font-weight: 700;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

.hero h1,
.hero-headline {
  font-size: var(--type-hero);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: .92;
}

.hero-static {
  font-family: var(--headline);
  font-style: normal;
  font-weight: 700;
}

.section-head h2,
.growth-copy h2,
.about-grid h2 {
  font-size: var(--type-section);
  letter-spacing: -0.023em;
  line-height: 1.01;
}

.faq-grid h2 {
  font-size: var(--type-section-compact);
  letter-spacing: -0.021em;
  line-height: 1.01;
}

.contact h2 {
  font-size: var(--type-contact);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: .98;
}

/* Rare editorial accents -------------------------------------------------
   Use the italic from the same Fraunces family instead of introducing a third
   typeface. This keeps the system coherent while preserving a little contrast. */
.hero-dynamic-text {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 550;
  letter-spacing: -0.034em;
  line-height: .95;
}

#conversion .section-head p:last-child {
  font-family: var(--editorial);
  font-size: clamp(18px, 1.35vw, 21px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.52;
  color: var(--text);
}

/* Structural display voice ----------------------------------------------
   Instrument Sans provides the authority underneath the expressive Fraunces
   headlines. It stays firm at structural levels and quieter in body copy. */
h3,
.card h3,
.service-card h3,
.work-card h3,
.growth-row strong,
.process-row strong,
summary,
.mobile-nav a,
.contact-card a.email {
  font-family: var(--display);
  font-style: normal;
  text-rendering: optimizeLegibility;
}

h3,
.card h3,
.service-card h3 {
  font-weight: 650;
  letter-spacing: -0.026em;
  line-height: 1.04;
}

.card h3 { font-size: 30px; }
.service-card h3 { font-size: 34px; }

.work-card h3 {
  font-size: var(--type-work);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: .96;
  max-width: 11ch;
}

.growth-row strong,
.process-row strong {
  font-weight: 650;
  letter-spacing: -0.021em;
  line-height: 1.08;
}

summary {
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

.mobile-nav a {
  font-weight: 650;
  letter-spacing: -0.026em;
  line-height: 1.05;
}

.contact-card a.email {
  font-weight: 650;
  letter-spacing: -0.024em;
  line-height: 1.06;
}

/* Body and interface ----------------------------------------------------- */
p,
li,
.project-field input,
.project-field textarea {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: -0.008em;
}

.hero-copy > p,
.section-head p,
.about-copy p,
.growth-copy p,
.card p,
.work-card p,
.process-row p,
.growth-row p,
details p,
.contact p,
.site-footer p {
  line-height: 1.68;
}

.hero-copy > p,
.section-head p,
.growth-copy p,
.about-copy p {
  letter-spacing: -0.01em;
}

.card p,
.work-card p,
.process-row p,
.growth-row p,
details p {
  letter-spacing: -0.006em;
}

.nav-links a,
.footer-links a,
.text-link {
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: -0.008em;
}

.btn {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.008em;
}

.eyebrow,
.label,
.tag,
.num,
.trust-items,
.project-field label,
.footer-bottom,
.brawnd-block-mark {
  font-family: var(--body);
  font-weight: 600;
  text-transform: uppercase;
}

.eyebrow,
.label {
  letter-spacing: .17em;
}

.tag,
.num,
.project-field label,
.footer-bottom,
.brawnd-block-mark {
  letter-spacing: .13em;
}

.trust-items {
  font-weight: 500;
  letter-spacing: .14em;
}

@media (max-width: 980px) {
  :root {
    --type-section: clamp(38px, 5.8vw, 58px);
    --type-section-compact: clamp(36px, 5.4vw, 54px);
    --type-contact: clamp(42px, 6.2vw, 62px);
    --type-work: clamp(40px, 5.8vw, 60px);
  }
}

@media (max-width: 640px) {
  :root {
    --type-hero: clamp(50px, 14.5vw, 74px);
    --type-section: clamp(34px, 9.5vw, 48px);
    --type-section-compact: clamp(34px, 9.2vw, 46px);
    --type-contact: clamp(38px, 10vw, 50px);
    --type-work: clamp(38px, 10.5vw, 48px);
  }

  .hero h1,
  .hero-headline {
    letter-spacing: -0.034em;
    line-height: .94;
  }

  .hero-dynamic-text {
    letter-spacing: -0.03em;
    line-height: .97;
  }

  .section-head h2,
  .growth-copy h2,
  .about-grid h2,
  .faq-grid h2,
  .contact h2 {
    letter-spacing: -0.019em;
    line-height: 1.02;
  }

  .card h3 { font-size: 28px; }
  .service-card h3 { font-size: 30px; }
  .work-card h3 { max-width: 12ch; }

  .hero-copy > p,
  .section-head p,
  .growth-copy p,
  .about-copy p,
  .card p,
  .work-card p,
  .process-row p,
  .growth-row p,
  details p {
    line-height: 1.66;
  }
}