/* Navigation gets a calmer UI face without loading third-party font resources. */
.shared-site-header,
.shared-site-header .main-nav,
.shared-site-header .main-nav a,
.shared-site-header .menu-toggle,
.shared-site-header .header-quote {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.shared-site-header .main-nav > a,
.shared-site-header .main-nav .service-overview-link,
.shared-site-header .main-nav .supermenu-utilities a,
.shared-site-header .main-nav .supermenu-service-links strong,
.shared-site-header .header-quote,
.shared-site-header .menu-toggle { font-weight: 600; }
.shared-site-header .main-nav .supermenu-route-heading strong,
.shared-site-header .main-nav .supermenu-heading strong { font-weight: 650; }
.shared-site-header .main-nav small { font-weight: 600; }
/* Shared public-page scale. Only these display roles override legacy page sizes.
   Keep UI, form, dialog and article subheadings on their compact local scale.
   Important is intentional: page-specific styles also load inside later partials. */
:root {
    --tw-type-hero: clamp(2.5rem, 7.5vw, 5.125rem); /* 82px */
    --tw-type-section: clamp(2rem, 6vw, 4.125rem); /* 66px */
    --tw-type-cta: clamp(2.25rem, 6.75vw, 4.625rem); /* 74px */
    --tw-type-card: clamp(1.75rem, 3.5vw, 2.625rem); /* 42px */
    --tw-type-small-card: clamp(1.375rem, 2.5vw, 1.75rem); /* 28px */
}

/* Never split a word at an arbitrary letter. Dutch hyphenation keeps at least
   three letters on either side; manual soft hyphens remain valid fallbacks. */
body:has(.shared-site-header) :is(h1, h2, h3, h4) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 6 3 3;
    text-wrap: balance;
}

body :is(
    .hero-copy h1, .service-hero-copy h1, .services-hero h1,
    .contact-hero h1, .request-hero h1, .starter-copy h1, .starter-premium-hero h1,
    .why-hero h1, .package-hero h1, .care-package-hero h1, .solution-hero h1,
    .transfer-hero h1, .choice-hero h1, .method-hero h1, .support-hero h1,
    .incident-copy h1, .php-hero h1, .compliance-hero h1, .magazine-copy h1,
    .sitemap-hero h1, .information-hero h1, .upgrade-hero h1, .quote-hero h1,
    .action-hero h1, .commerce-hero h1, .detail-hero h1
) {
    font-size: var(--tw-type-hero) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em;
}

body :is(
    .section-heading h2, .section-intro h2, .explain h2,
    .home-routes-intro h2, .swipe-head h2, .layers h2, .web-head h2,
    .daily-head h2, .timeline-story .heading h2, .one-call-copy h2,
    .entrepreneur-focus h2, .process-intro h2, .technical-intro h2, .nerdy-intro h2,
    .services-heading h2, .services-route-intro h2, .services-specialisms-heading h2,
    .why-heading h2, .why-difference h2, .why-check h2, .why-faq h2,
    .care-model-heading h2, .included h2, .boundaries h2, .billing h2, .care-move-heading h2,
    .care-package-heading h2, .care-package-scope h2, .care-package-start h2,
    .solution-heading h2, .solution-process h2, .solution-value h2,
    .solution-carefree h2, .solution-continuity h2, .solution-positioning-head h2,
    .collaboration-audiences-heading h2, .collaboration-heading h2,
    .collaboration-freedom h2, .collaboration-faq-heading h2,
    .hosting-overview-bridge h2, .hosting-total-intro h3, .hosting-vps-intro h3,
    .hosting-package-group > header h3, .group-heading h3, .mqh-collaboration-callout h2,
    .domain-quick h2, .quick-inventory h2, .hosting-intro h2, .hosting-notes h2,
    .hosting-group-head h2, .existing-customer-band h2,
    .need-route h2, .first-response h2, .incident-heading h2, .incident-process h2, .incident-scope h2,
    .editorial-intro h2, .statement h2, .process-section h2, .detail-section h2,
    .detail-intro h2, .detail-dark-column h2, .care-levels > header h2, .choice-heading h2,
    .outcomes-heading h2, .premium-options header h2, .process-sidebar h2, .technical-proof header h2,
    .solution-paths > header h2, .commerce-map h2, .automation-example h2, .identity-showcase > header h2,
    .starter-journey h2, .starter-contents h2, .starter-choice h2,
    .starter-intro h2, .package h2, .starter-identity-copy h2,
    .ownership-teaser-copy h2, .choice-intro h2, .choice-routes h2, .choice-together h2,
    .choice-faq h2, .choice-direct-service h2,
    .transfer-heading h2, .contact-grid h2, .freedom-grid h2, .faq-grid h2,
    .method-fit h2, .method-phases h2, .method-certainty h2, .method-discovery h2,
    .support-heading h2, .mail-settings-intro h2, .mail-explain h2, .mail-faq h2,
    .signal-section h2, .php-basics h2, .php-heading h2, .route-section h2, .care-section h2, .php-faq h2,
    .compliance-heading h2, .consent-section h2, .cookie-section h2, .roles-section h2,
    .full-service-section h2, .compliance-faq h2, .source-section h2,
    .privacy-compliance-reference h2, .php-support-reference h2,
    .sitemap-intro h2, .contact-form-grid h2, .magazine-form-grid h2,
    .identity-applications__heading h2, .identity-download__copy h2,
    .webshop-expansions-head h2, .website-ai-panel h2, .update-consequence-copy h2,
    .example-master-head h2, .transfer-customer-copy h2,
    .journey-copy h2, .visibility-copy h2, .about-copy h2, .ai-sprint h2,
    .action-section-head h2, .action-proof-heading h2, .action-awards h2,
    .project-assurance h2, .magazine-reference h2, .support-request h2,
    .contact-form-title, .cleanup h2
) {
    font-size: var(--tw-type-section) !important;
    line-height: 1.06 !important;
    letter-spacing: -.045em;
}

/* Closing invitations have one deliberately larger display size. */
body :is(
    .contact h2, .package-cta h2, .services-contact h2, .carefree-contact h2,
    .solution-contact h2, .why-next h2, .transfer-cta h2, .choice-cta h2,
    .method-contact h2, .starter-contact h2, .support-contact h2,
    .incident-contact h2, .php-contact h2, .compliance-cta h2, .sitemap-contact h2,
    .closing-panel h2, .detail-contact h2, .service-conversion h2, .action-own h2
) {
    font-size: var(--tw-type-cta) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em;
}

/* Equal titles within and across the large service/card families.
   Title length must never silently select a smaller font for one neighbour. */
body :is(
    .rail-card h3, .home-route-card h3,
    .option-card h3, .service-tile-copy h3, .services-route-card h3,
    .package-card h3, .hosting-card h4, .hosting-package-card h3,
    .route h3, .route-choice h3, .choice-grid h3, .premium-option-grid h3,
    .care-package-grid h3, .care-move-grid h3, .care-start-paths h3,
    .collaboration-audience-grid h3, .collaboration-role-grid h3, .collaboration-route-grid h3,
    .recovery-grid h3, .situation-grid h3, .delivery h3, .starter-choice h3,
    .services-specialism-intro h3, .services-catalog-intro h3,
    .identity-piece__copy h3, .identity-showcase > aside h3,
    .time-copy h3, .old-school h3, .site-copy h3,
    .analytics-reference h2, .journey-navigation__heading h2,
    .okko-relationship-intro h3, .action-interest h2,
    .carefree-option-callout h3, .email-upgrade-entry h2,
    .request-contact__heading h2, .contact-fields h2
) {
    font-size: var(--tw-type-card) !important;
    line-height: 1.1 !important;
    letter-spacing: -.04em;
    white-space: normal !important;
    hyphens: auto !important;
}

body :is(
    .outcome-grid h3, .outcomes-grid h3, .service-card h3,
    .care-model-flow h3, .care-package-scope h3, .care-levels h3,
    .solution-path-grid h3, .solution-service-grid h3, .recognition-grid h3,
    .webshop-expansion-card h3, .why-signal-grid h3, .component-grid h3,
    .hosting-vps-pillars h4, .mqh-shared-inclusions h4
) {
    font-size: var(--tw-type-small-card) !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em;
}

/* Let headings wrap instead of forcing a desktop-only single line. */
.home-page .service-sheet h2 {
    font-size: clamp(2.25rem, 4.4vw, 3.625rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.05em;
}
.home-page .service-sheet .card-route-label {
    color: inherit;
}
.domain-quick-heading h2 { white-space: normal; }
.care-package-scope h2 > span { white-space: normal; hyphens: auto; }
.why-hero h1, .why-heading h2, .why-difference h2, .why-check h2,
.why-faq h2, .why-next h2 { font-weight: 700; }

/* Selected items may contain literal domain names rather than Dutch words.
   Give their title the full card width on phones instead of a narrow column. */
@media (max-width: 700px) {
    .request-item__heading { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .request-item__heading button { grid-column: 1; justify-self: start; }
    .request-item h2 { font-size: clamp(1rem, 4.5vw, 1.375rem) !important; }
}