/* HJ UI v1 (2026-10-27) — loaded last on every page.
   1) readable text: anything set below 12px is raised to 12px (same selectors as the original rules, never smaller)
   2) one button system: same height, shape, type (16px) and colours for primary / secondary / WhatsApp buttons
   3) shorter footer on phones: link groups fold, contact details stay open
   4) layout fix: system-package topology section on desktop */

/* ---------- 1. minimum readable text size ---------- */
/* each rule only applies on pages that load the stylesheet it came from (same selector, same specificity) */
/* from hj-complete-pages.css */
:where(html:has(link[href*="/hj-complete-pages.css"])) .hj-full .hj-full-eyebrow{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-complete-pages.css"])) .hj-full-crumb{font-size:max(12px, 0.73rem)}
@media (max-width: 700px){:where(html:has(link[href*="/hj-complete-pages.css"])) .hj-full-crumb{font-size:max(12px, 0.68rem)}}
@media (max-width: 700px){:where(html:has(link[href*="/hj-complete-pages.css"])) .hj-full .hj-full-eyebrow{font-size:max(12px, 0.65rem)}}
/* from hj-detail-experience.css */
:where(html:has(link[href*="/hj-detail-experience.css"])) .sm-signal-label{font-size:max(12px, 0.62rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-service-page="detail"] .pc-jump-list a{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-service-page="detail"] .sm-diagnostics-flow .sm-process p{font-size:max(12px, 0.78rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) .sm-task-index{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-service-page="detail"] .sm-task-list li{font-size:max(12px, 0.76rem)}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) .sm-signal-label{font-size:max(12px, 0.55rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-service-page] .sm-mode-rail span{font-size:max(12px, 0.66rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-service-page="detail"] .sm-diagnostics-flow .sm-process p{font-size:max(12px, 0.72rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-service-page="detail"] .sm-task-list li{font-size:max(12px, 0.7rem)}}
:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .pc-hero-system .pc-boundary p{font-size:max(12px, 0.75rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .pc-jump-list a{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) .pc-card-index{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-detail-experience.css"])) .pc-proof-status{font-size:max(12px, 0.64rem)}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .pc-hero-system .pc-boundary p{font-size:max(12px, 0.71rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .pc-comparison td::before{font-size:max(12px, 0.61rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .hj-topology-nodes small{font-size:max(12px, 0.67rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .hj-topology-node-action{font-size:max(12px, 0.58rem)}}
/* from hj-established-canvas.css */
:where(html:has(link[href*="/hj-established-canvas.css"])) .hj-established-canvas-head span{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-established-canvas.css"])) .hj-established-canvas figcaption,:where(html:has(link[href*="/hj-established-canvas.css"])) .hj-established-canvas-caption{font-size:max(12px, 0.7rem)}
/* from hj-experience.css */
:where(html:has(link[href*="/hj-experience.css"])) .hj-mobile-subheading{font-size:max(12px, 0.69rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-footer-heading{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-axis-label{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-process-step::before{font-size:max(12px, 0.74rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-section-kicker{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-project-discipline{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-project-tags li{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-related-link span{font-size:max(12px, 0.74rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-solution-context-eyebrow{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-solution-context-copy > span{font-size:max(12px, 0.62rem)}
:where(html:has(link[href*="/hj-experience.css"])) .hj-solution-context-path > span{font-size:max(12px, 0.61rem)}
/* from hj-guide-support.css */
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-support-hero-copy :where(.eyebrow, .hj-section-kicker){font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-phase5-signal{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-phase5-node-list > :where(li, article, div, a) > span:first-child{font-size:max(12px, 0.65rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-phase5-guide-ledger > :where(li, article, a)::before{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-guide-toc :where(h2, h3, strong, .hj-guide-toc-title){font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-guide-toc a > span:first-child{font-size:max(12px, 0.58rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-guide-source-ledger::before{font-size:max(12px, 0.61rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-conversion-section form#enquiryForm label{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-legal-toc > span{font-size:max(12px, 0.64rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-legal-toc a > span:first-child{font-size:max(12px, 0.57rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-directions-panel::after{font-size:max(12px, 0.61rem)}
:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-directions-copy > span{font-size:max(12px, 0.65rem)}
@media (max-width: 640px){:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-support-hero-copy :where(.eyebrow, .hj-section-kicker){font-size:max(12px, 0.63rem)}}
@media (max-width: 640px){:where(html:has(link[href*="/hj-guide-support.css"])) body[data-hj-guide-support-version="phase5"] .hj-phase5-guide-ledger :where(p, small, time){font-size:max(12px, 0.72rem)}}
/* from hj-industry-scenarios.css */
:where(html:has(link[href*="/hj-industry-scenarios.css"])) .hj-industry-scenarios__eyebrow{font-size:max(12px, 0.72rem)}
/* from hj-installation-detail.css */
:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-signal-label{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-signal li{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-signal li span{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-signal li strong{font-size:max(12px, 0.76rem)}
:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-delivery-rail li{font-size:max(12px, 0.78rem)}
:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-delivery-rail span{font-size:max(12px, 0.66rem)}
@media (max-width: 619px){:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-signal li span{font-size:max(12px, 0.62rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-signal li strong{font-size:max(12px, 0.64rem)}}
@media (max-width: 619px){:where(html:has(link[href*="/hj-installation-detail.css"])) body[data-hj-installation-page="detail"] .hj-install-delivery-rail li{font-size:max(12px, 0.62rem)}}
/* from hj-master-entry-r3.css */
:where(html:has(link[href*="/hj-master-entry-r3.css"])) body[data-hj-master-entry][data-hj-entry-discipline] .me-section-kicker{font-size:max(12px, 0.73rem)}
:where(html:has(link[href*="/hj-master-entry-r3.css"])) body[data-hj-master-entry][data-hj-entry-discipline] .me-field-dossier article > span{font-size:max(12px, 0.72rem)}
/* from hj-master-entry-visuals.css */
:where(html:has(link[href*="/hj-master-entry-visuals.css"])) body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-head span{font-size:max(12px, 0.65rem)}
:where(html:has(link[href*="/hj-master-entry-visuals.css"])) body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram figcaption{font-size:max(12px, 0.72rem)}
@media (max-width: 640px){:where(html:has(link[href*="/hj-master-entry-visuals.css"])) body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram figcaption{font-size:max(12px, 0.7rem)}}
/* from hj-master-entry.css */
:where(html:has(link[href*="/hj-master-entry.css"])) .me-signal-head span{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-signal li span{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-facts dt{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-route-grid span,:where(html:has(link[href*="/hj-master-entry.css"])) .me-siblings span{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-directory-shortcut div > span{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-directory-head dt{font-size:max(12px, 0.64rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-directory-group > summary strong{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-directory-list span{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-master-entry.css"])) .me-directory-list small{font-size:max(12px, 0.63rem)}
/* from hj-master-hubs.css */
:where(html:has(link[href*="/hj-master-hubs.css"])) .hj-master-hub .hj-section-head::before{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) .hj-master-hub .hj-axis-label,:where(html:has(link[href*="/hj-master-hubs.css"])) .hj-master-hub .hj-section-kicker{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="home"] .hj-intent-number{font-size:max(12px, 0.64rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="home"] .hj-solution-item::before{font-size:max(12px, 0.6rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="home"] .hj-industry-item::before{font-size:max(12px, 0.57rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="home"] .hj-project-frame::before{font-size:max(12px, 0.54rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) .hj-master-visual-label{font-size:max(12px, 0.62rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="industries"] .hj-industry-item::before{font-size:max(12px, 0.56rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-customer-type-rail button strong{font-size:max(12px, 0.57rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-filter-field label,:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-discipline-filter legend{font-size:max(12px, 0.62rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-filter-status{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-project-frame::before{font-size:max(12px, 0.57rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-project-discipline{font-size:max(12px, 0.61rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-project-tags li{font-size:max(12px, 0.61rem)}
:where(html:has(link[href*="/hj-master-hubs.css"])) body[data-hj-section="projects"] .hj-project-facts dt{font-size:max(12px, 0.62rem)}
/* from hj-page-visual-coverage.css */
:where(html:has(link[href*="/hj-page-visual-coverage.css"])) .hj-page-visual-copy > span{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-page-visual-coverage.css"])) .hj-page-visual-legend li > span{font-size:max(12px, 0.67rem)}
/* from hj-product-classification.css */
:where(html:has(link[href*="/hj-product-classification.css"])) .pc-eyebrow{font-size:max(12px, 0.74rem)}
:where(html:has(link[href*="/hj-product-classification.css"])) .pc-installation-route-path > span:first-child{font-size:max(12px, 0.65rem)}
:where(html:has(link[href*="/hj-product-classification.css"])) .pc-tag{font-size:max(12px, 0.64rem)}
:where(html:has(link[href*="/hj-product-classification.css"])) .pc-facts dt{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-product-classification.css"])) .pc-comparison th{font-size:max(12px, 0.7rem)}
/* from hj-product-entry-visuals.css */
:where(html:has(link[href*="/hj-product-entry-visuals.css"])) body[data-hj-entry-type="product"][data-hj-product-visual-version="r6"] .me-product-concept-diagram figcaption{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-product-entry-visuals.css"])) body[data-hj-entry-type="product"][data-hj-product-art-direction="r7"] .pv-illustration-notes{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-product-entry-visuals.css"])) body[data-hj-entry-type="product"][data-hj-product-art-direction="r7"] .pv-illustration-notes p{font-size:max(12px, 0.66rem)}
/* from hj-service-canvas.css */
:where(html:has(link[href*="/hj-service-canvas.css"])) body[data-hj-service-page] .sm-service-canvas-head span{font-size:max(12px, 0.64rem)}
:where(html:has(link[href*="/hj-service-canvas.css"])) body[data-hj-service-page] .sm-service-canvas figcaption{font-size:max(12px, 0.7rem)}
@media (max-width: 640px){:where(html:has(link[href*="/hj-service-canvas.css"])) body[data-hj-service-page] .sm-service-canvas figcaption{font-size:max(12px, 0.66rem)}}
/* from hj-service-maintenance.css */
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-mode-rail span{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-axis-number{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-service-index{font-size:max(12px, 0.73rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-system-summary dt{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-process article::before{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-amc-model span{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-related-link span{font-size:max(12px, 0.65rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-mode-rail span{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-mode-rail span b{font-size:max(12px, 0.67rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-master-hero-visual figcaption{font-size:max(12px, 0.67rem)}
:where(html:has(link[href*="/hj-service-maintenance.css"])) .sm-master-directory .sm-search-label{font-size:max(12px, 0.7rem)}
/* from hj-service-title-visuals.css */
:where(html:has(link[href*="/hj-service-title-visuals.css"])) .sm-title-visual-head span{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-service-title-visuals.css"])) .sm-title-visual figcaption{font-size:max(12px, 0.7rem)}
@media (max-width: 640px){:where(html:has(link[href*="/hj-service-title-visuals.css"])) .sm-title-visual figcaption{font-size:max(12px, 0.66rem)}}
/* from hj-site-assessment-form.css */
:where(html:has(link[href*="/hj-site-assessment-form.css"])) .hj-system-search output{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-site-assessment-form.css"])) .hj-system-category small{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-site-assessment-form.css"])) .assessment-form-card .hj-system-suboptions legend{font-size:max(12px, 0.68rem) !important}
:where(html:has(link[href*="/hj-site-assessment-form.css"])) .hj-suboption span{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-site-assessment-form.css"])) .hj-system-controls > span{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-site-assessment-form.css"])) .hj-popular{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-site-assessment-form.css"])) body[data-hj-guide-support-version="phase5"] .hj-conversion-section .assessment-form-card form#enquiryForm .hj-suboption span{font-size:max(12px, 0.7rem) !important}
/* from hj-site-location.css */
:where(html:has(link[href*="/hj-site-location.css"])) .hj-site-location__result div span{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-site-location.css"])) .hj-site-location__result a{font-size:max(12px, 0.73rem)}
/* from hj-solution-guides.css */
:where(html:has(link[href*="/hj-solution-guides.css"])) .ref-scene-disclosure{font-size:max(12px, 0.65rem)}
/* from hj-system-topology.css */
:where(html:has(link[href*="/hj-system-topology.css"])) .hj-topology-center-copy span{font-size:max(12px, 0.68rem)}
:where(html:has(link[href*="/hj-system-topology.css"])) .hj-topology-legend span{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-system-topology.css"])) .hj-topology-legend strong{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-system-topology.css"])) .hj-topology-node-number{font-size:max(12px, 0.7rem)}
:where(html:has(link[href*="/hj-system-topology.css"])) .hj-topology-node-action{font-size:max(12px, 0.68rem)}
/* from hj-upgrade.css */
:where(html:has(link[href*="/hj-upgrade.css"])) .hj-up-path-index{font-size:max(12px, 13px)}
:where(html:has(link[href*="/hj-upgrade.css"])) .hj-up-path small{font-size:max(12px, 14px)}
:where(html:has(link[href*="/hj-upgrade.css"])) .hj-search-hit small{font-size:max(12px, 11px)}
@media (max-width: 1199px){:where(html:has(link[href*="/hj-upgrade.css"])) .hj-up-path small{font-size:max(12px, 13px)}}
@media (max-width: 767px){:where(html:has(link[href*="/hj-upgrade.css"])) .hj-up-path small{font-size:max(12px, 12px)}}
@media (max-width: 767px){:where(html:has(link[href*="/hj-upgrade.css"])) .hj-up-path-index{font-size:max(12px, 11px)}}
@media (max-width: 370px){:where(html:has(link[href*="/hj-upgrade.css"])) .hj-up-path small{font-size:max(12px, 11px)}}
:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="home"] .hj-up-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="products"] .hj-product-master-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="industries"] .hj-hub-hero--solutions::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="projects"] .hj-hub-hero--projects::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-page-canvas-key="project-delivery-journey"] .page-intro::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-service-page="master"] .sm-master-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-support-view="guide-hub"] .hj-support-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-support-view="company"] .hj-support-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-support-view="assessment"] .hj-support-hero::after{font-size:max(12px, 11px)}
:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="projects"] .hj-hub-hero--projects::after{font-size:max(12px, 12px)}
@media (max-width: 767px){:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="home"] .hj-up-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="products"] .hj-product-master-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-section="industries"] .hj-hub-hero--solutions::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-page-canvas-key="project-delivery-journey"] .page-intro::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-service-page="master"] .sm-master-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-support-view="guide-hub"] .hj-support-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-support-view="company"] .hj-support-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-support-view="assessment"] .hj-support-hero::after{font-size:max(12px, 10px)}}
:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-hero::after{font-size:max(12px, 11px)}
@media (max-width: 767px){:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-hero::after{font-size:max(12px, 10px)}}
:where(html:has(link[href*="/hj-upgrade.css"])) body[data-hj-archetype][data-hj-master] main :is(.me-hero, .pc-hero, .hj-install-hero, .hj-vertical-hero)::after,:where(html:has(link[href*="/hj-upgrade.css"])) body:is([data-hj-support-view="guide-detail"], [data-hj-support-view="contact"], [data-hj-support-view="service-area"]) .hj-support-hero::after,:where(html:has(link[href*="/hj-upgrade.css"])) body:is([data-hj-page-canvas-key="service-maintenance-lifecycle"], [data-hj-page-canvas-key="annual-maintenance-contract"]) .page-intro::after{font-size:max(12px, 10px)}
/* from hj-vertical-project-detail.css */
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-vertical-page="detail"] .breadcrumb,:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .breadcrumb{font-size:max(12px, 0.76rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-vertical-page="detail"] .hj-vertical-hero .eyebrow,:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-hero .eyebrow{font-size:max(12px, 0.69rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-hero .tag{font-size:max(12px, 0.66rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-vertical-page="detail"] .hj-vertical-scene-label,:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-evidence-label{font-size:max(12px, 0.65rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-vertical-page="detail"] .hj-vertical-scene-nodes li,:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-evidence-nodes li{font-size:max(12px, 0.61rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-vertical-page="detail"] .hj-vertical-scene-nodes span,:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-evidence-nodes span{font-size:max(12px, 0.55rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-evidence-key span{font-size:max(12px, 0.59rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-at-glance .card h3{font-size:max(12px, 0.72rem)}
:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-record-item h3{font-size:max(12px, 0.68rem)}
@media (max-width: 620px){:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-vertical-page="detail"] .breadcrumb,:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .breadcrumb{font-size:max(12px, 0.69rem)}}
@media (max-width: 620px){:where(html:has(link[href*="/hj-vertical-project-detail.css"])) body[data-hj-project-page="evidence-dossier"] .hj-project-evidence-key span{font-size:max(12px, 0.52rem)}}

/* ---------- 2. one button system ---------- */
/* 48px tall (46px on phones), 10px corners, 16px semibold text, three colour roles. "display" is left as each page set it,
   so buttons that a page hides stay hidden. Filter "Clear" buttons (button.pc-button) and search chips are not included. */
:is(a.pc-button,.me-button,.tp-button,.btn,.hj-full-button,.hj-action,.hj-up-button,.hj-industry-scenarios__button,a.ref-outline,.hj-cctv-actions>a){
  min-height:48px!important;padding:12px 22px!important;border-radius:10px!important;
  font-family:Inter,Arial,sans-serif!important;font-size:16px!important;font-weight:650!important;line-height:22px!important;
  letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;text-align:center;box-sizing:border-box;
  transition:background-color .15s,border-color .15s,color .15s,filter .15s}
:is(.pc-button--primary,.me-button--primary,.tp-button--primary,.btn-primary,.hj-full-button:not(.hj-full-button--outline),.hj-action:not(.hj-action--outline):not(.hj-action--whatsapp),.hj-up-button:not(.hj-up-button--secondary),.hj-industry-scenarios__button,.hj-cctv-actions>a:first-child){
  background:#55dcff!important;color:#04121c!important;border:1px solid #55dcff!important;box-shadow:none!important}
:is(a.pc-button:not(.pc-button--primary),.me-button--secondary,.tp-button:not(.tp-button--primary),.btn-outline,.hj-full-button--outline,.hj-action--outline,.hj-up-button--secondary,a.ref-outline,.hj-cctv-actions>a:not(:first-child)){
  background:rgba(85,220,255,.04)!important;color:#e5edf8!important;border:1px solid rgba(85,220,255,.45)!important;box-shadow:none!important}
:is(.btn.btn-whatsapp,.btn.btn-green,.hj-action--whatsapp){background:#25d366!important;color:#04121c!important;border:1px solid #25d366!important;box-shadow:none!important}
:is(.pc-button--primary,.me-button--primary,.tp-button--primary,.btn-primary,.hj-full-button:not(.hj-full-button--outline),.hj-action:not(.hj-action--outline):not(.hj-action--whatsapp),.hj-up-button:not(.hj-up-button--secondary),.hj-industry-scenarios__button,.hj-cctv-actions>a:first-child,.btn.btn-whatsapp,.btn.btn-green,.hj-action--whatsapp):is(:hover,:focus-visible){filter:brightness(1.08)}
:is(a.pc-button:not(.pc-button--primary),.me-button--secondary,.tp-button:not(.tp-button--primary),.btn-outline,.hj-full-button--outline,.hj-action--outline,.hj-up-button--secondary,a.ref-outline,.hj-cctv-actions>a:not(:first-child)):is(:hover,:focus-visible){border-color:#55dcff!important;color:#fff!important;background:rgba(85,220,255,.1)!important}
:is(a.pc-button,.me-button,.tp-button,.btn,.hj-full-button,.hj-action,.hj-up-button,.hj-industry-scenarios__button,a.ref-outline,.hj-cctv-actions>a) svg{flex:none}
@media (max-width:640px){
  :is(a.pc-button,.me-button,.tp-button,.btn,.hj-full-button,.hj-action,.hj-up-button,.hj-industry-scenarios__button,a.ref-outline,.hj-cctv-actions>a){min-height:46px!important;padding:11px 18px!important}
  .pc-actions{grid-template-columns:minmax(0,1fr)!important} /* one button per row, so labels are not squeezed onto two lines */
}
/* ---------- 3. footer ---------- */
/* the heading is now a <summary>; keep the exact look of the old <p class="hj-footer-heading"> (a site-wide rule gives summary "font:inherit") */
footer .hj-footer-fold>summary.hj-footer-heading{margin:0 0 12px;color:var(--hj-dim);font:700 max(12px, .72rem)/1 Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.hj-footer-fold>summary{list-style:none}
.hj-footer-fold>summary::-webkit-details-marker{display:none}
@media (min-width:641px){.hj-footer-fold>summary{pointer-events:none;cursor:default}}
@media (max-width:640px){
  .hj-footer-brand-row{padding-bottom:18px!important}
  .hj-footer-grid{gap:0!important;padding:8px 0 18px!important}
  .hj-footer-group{border-top:1px solid rgba(203,226,255,.13)}
  .hj-footer-group:first-child{border-top:0}
  .hj-footer-group:last-child{padding:14px 0 6px}
  .hj-footer-group:last-child>.hj-footer-heading{margin-top:0}
  footer .hj-footer-fold>summary.hj-footer-heading{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0!important;padding:6px 0!important;line-height:1.35}
  footer .hj-footer-fold>summary.hj-footer-heading::after{content:"+";font-family:Inter,Arial,sans-serif;font-size:20px;line-height:1;color:var(--hj-cyan,#55dcff)}
  footer .hj-footer-fold[open]>summary.hj-footer-heading::after{content:"\2212"}
  .hj-footer-fold>ul{margin:0!important;padding:0 0 14px!important}
  .hj-footer-fold>ul li{padding:4px 0}
  .hj-footer-bottom{padding-top:14px!important}
  footer nav[data-hj-discovery-links]{padding:10px 20px 18px!important;gap:6px 18px!important}
}

/* ---------- 4. layout fix: system-package topology on desktop ---------- */
/* the caption items already have grid areas (center / legend / instruction / nodes / note) but sat inside one narrow column */
@media (min-width:900px){
  :where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .hj-topology-figure>figcaption{display:contents}
  :where(html:has(link[href*="/hj-detail-experience.css"])) body[data-hj-archetype="package"] .hj-topology-figure .hj-topology-legend{grid-template-columns:minmax(0,1fr)}
}