/* Responsive corrections, loaded after each page's inline <style> so equal
   specificity rules here win without needing !important.

   Every page used to shrink the entire body to 75% on phones
   (transform: scale(0.75)). That made body text tiny, and because transforms
   do not affect layout it still let the hero overflow and clip mid-word.
   That hack is gone. Type scales with the viewport instead. */

/* Header */
.header-content { gap: clamp(0.5rem, 3vw, 1rem); }
.header-title { font-size: clamp(1.35rem, 6vw, 2rem); }
.header-subtitle { font-size: clamp(0.8rem, 3.2vw, 1rem); }
.header-image img {
    width: clamp(42px, 12vw, 60px);
    height: clamp(42px, 12vw, 60px);
}

/* Navigation wraps instead of running off the side of a phone */
.nav {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0 1rem;
}
@media (min-width: 700px) {
    .nav { gap: 1.5rem; }
}

/* Fluid type utilities */
.text-6xl { font-size: clamp(2rem, 7vw, 5rem); }
.text-4xl { font-size: clamp(1.6rem, 5.5vw, 3.75rem); }
.text-lg  { font-size: clamp(1rem, 3vw, 1.25rem); }

/* Hero */
.cta-section { padding: clamp(3rem, 11vw, 8rem) 1rem; }
.cta-section h2 { font-size: clamp(1.85rem, 6.5vw, 3.75rem); }
.cta-section p { font-size: clamp(0.95rem, 3vw, 1.25rem); }

/* The hero's hand-placed line breaks are sized for a desktop column. Below
   that, let the text wrap on its own rather than forcing two long lines. */
@media (max-width: 700px) {
    .cta-section h2 .block,
    .cta-section p .block { display: inline; }
}

/* Nothing should be able to push the page sideways */
.content img,
.content video,
.content iframe { max-width: 100%; height: auto; }

@media (max-width: 600px) {
    .container { max-width: 100%; padding: 0 1rem; }
}