/* Roboto throughout, with bold headings. */
:root {
    --sans: 'Roboto', Arial, sans-serif;
    --heading: var(--sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading);
    font-weight: 700;
    font-style: normal;
    font-synthesis: none;
    letter-spacing: 0;
    line-height: 1.2;
    padding-bottom: 0;
    overflow-wrap: anywhere;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    font-style: normal;
    font-weight: inherit;
}

.eyebrow { font-weight: 700; }

.hero h1 {
    font-size: clamp(32px, 4.2vw, 64px);
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 24px;
}

.hero h1 em {
    white-space: normal;
}

.display-title {
    font-size: clamp(32px, 4.3vw, 58px);
    line-height: 1.2;
    letter-spacing: 0;
}

.section-heading,
.section-top .section-heading,
.story-content .section-heading,
.trade-section .section-heading,
.cta-panel .section-heading,
.truffle-guide .section-heading,
.product-detail .section-heading {
    font-size: clamp(26px, 2.7vw, 38px);
    line-height: 1.2;
    letter-spacing: 0;
}

.product-info h3,
.catalog-grid .product-info h3 {
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: 0;
}

.approach-item h3,
.feature-row h3,
.contact-form h2 {
    font-size: 24px;
    line-height: 1.25;
}

.guide-row h3,
.empty-results h2 {
    font-size: 28px;
    line-height: 1.25;
}

.footer-motto {
    font-family: var(--heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    padding-bottom: 0;
}

.contact-large,
.image-index > span:last-child,
.guide-row div:first-child p,
.approach-item > span,
.feature-number {
    font-family: var(--sans);
    letter-spacing: 0;
}

.contact-large { font-size: clamp(22px, 2.2vw, 30px); }
.image-index > span:last-child { font-style: normal; font-size: 13px; }
.guide-row div:first-child p { font-size: 15px; }

@media (min-width: 576px) and (max-width: 991.98px) {
    .hero h1 { font-size: clamp(25px, 4vw, 38px); }
    .story-content .section-heading { font-size: clamp(23px, 3vw, 28px); }
}

@media (max-width: 575.98px) {
    .hero h1 {
        font-size: clamp(28px, 8vw, 43px);
        margin-bottom: 26px;
    }

    .display-title { font-size: clamp(28px, 7.3vw, 38px); }

    .section-heading,
    .section-top .section-heading,
    .story-content .section-heading,
    .trade-section .section-heading,
    .cta-panel .section-heading,
    .truffle-guide .section-heading,
    .product-detail .section-heading {
        font-size: clamp(24px, 6.3vw, 31px);
    }

    .product-info h3,
    .catalog-grid .product-info h3 {
        font-size: clamp(15px, 4.1vw, 19px);
        line-height: 1.3;
    }

    .approach-item h3,
    .feature-row h3,
    .contact-form h2,
    .guide-row h3,
    .empty-results h2 { font-size: 23px; }

    .footer-motto { font-size: 23px; }
    .image-index > span:last-child { font-size: 10px; }
}

@media print {
    .display-title { font-size: 30px; }
    .product-info h3,
    .catalog-grid .product-info h3 { font-size: 16px; }
}