/* Compact reference mode stays independent from readable production geometry. */
html[data-view=reference] .site-header{height:44px;padding:0 10px}
html[data-view=reference] .brand{width:74px}
html[data-view=reference] .header-region{display:none}
html[data-view=reference] .header-actions{gap:6px}
html[data-view=reference] .header-contact{max-width:138px;gap:1px}
html[data-view=reference] .header-contact a{min-height:15px;gap:3px}
html[data-view=reference] .header-contact .icon{width:10px;height:10px}
html[data-view=reference] .header-phone{font-size:9px;line-height:11px}
html[data-view=reference] .header-email{font-size:8px;line-height:10px}
html[data-view=reference] .phone-button{width:auto;height:auto;min-height:15px;background:none;box-shadow:none;border-radius:0}
html[data-view=reference] .phone-button .icon{width:10px;height:10px;stroke-width:2}
html[data-view=reference] .menu-button{width:30px;height:30px;min-width:30px;min-height:30px}
html[data-view=reference] .menu-button .icon{width:20px;height:20px}
html[data-view=reference] .hero{height:343px}
html[data-view=reference] .hero-content{padding:12px 12px 0}
html[data-view=reference] .eyebrow{font-size:6.3px;line-height:8px;letter-spacing:1px}
html[data-view=reference] .hero h1{font-size:26px;line-height:25px;margin-top:8px;letter-spacing:-.45px}
html[data-view=reference] .hero-description{font-size:10.2px;line-height:12px;max-width:259px;margin-top:9px}
html[data-view=reference] .hero-cta{gap:6px;margin-top:9px}
html[data-view=reference] .hero-cta .button{height:32px;font-size:9px;padding:0 11px;gap:9px}
html[data-view=reference] .hero-cta .icon{width:12px;height:12px}
html[data-view=reference] .hero-note{top:38px;right:12px;font-size:6px;line-height:8px}
html[data-view=reference] .proof-strip{left:12px;right:12px;bottom:8px;height:42px}
html[data-view=reference] .proof{gap:9px}
html[data-view=reference] .proof .icon{width:23px;height:23px;stroke-width:2}
html[data-view=reference] .proof b{font-size:10.5px;line-height:12px}
html[data-view=reference] .proof-years{justify-content:flex-start;padding-left:13px;gap:6px}
html[data-view=reference] .proof-years strong{font-size:26px}
html[data-view=reference] .proof-years b{font-size:10px}
html[data-view=reference] .proof-years small{font-size:6px;line-height:8px}
html[data-view=reference] .page-section{padding:5px 12px 0}
html[data-view=reference] .section-heading{min-height:16px;margin-bottom:6px}
html[data-view=reference] .section-heading h2{font-size:14px;line-height:16px}
html[data-view=reference] .section-link{font-size:6.2px;line-height:8px;letter-spacing:.7px;gap:3px}
html[data-view=reference] .section-link .icon{width:8px;height:8px}
html[data-view=reference] .benefits-section{padding-top:8px}
html[data-view=reference] .benefits-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
html[data-view=reference] .benefit-card{padding:7px 5px 5px;min-height:70px}
html[data-view=reference] .benefit-top{gap:6px}
html[data-view=reference] .benefit-top .icon{width:23px;height:23px}
html[data-view=reference] .benefit-card h3{font-size:9.4px;line-height:11px}
html[data-view=reference] .benefit-card p{font-size:8.8px;line-height:11px;margin-top:6px}
html[data-view=reference] .services-section{padding-top:4px}
html[data-view=reference] .services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
html[data-view=reference] .service-card{min-height:132px}
html[data-view=reference] .service-card img{height:65px}
html[data-view=reference] .service-body{padding:5px 6px 6px;min-height:66px}
html[data-view=reference] .service-body h3{font-size:10px;line-height:11.5px}
html[data-view=reference] .service-body p{font-size:8.4px;line-height:10px;margin-top:4px}
html[data-view=reference] .card-arrow{height:12px;margin-top:2px}
html[data-view=reference] .card-arrow .icon{width:11px;height:11px}
html[data-view=reference] .cases-section{padding-top:5px}
html[data-view=reference] .cases-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html[data-view=reference] .case-card{min-height:91px}
html[data-view=reference] .case-card img{height:60px}
html[data-view=reference] .case-body{padding:4px 6px 5px}
html[data-view=reference] .case-body h3{font-size:9.4px;line-height:11px}
html[data-view=reference] .case-arrow{display:none}
html[data-view=reference] .process-section{padding-top:5px}
html[data-view=reference] .steps-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
html[data-view=reference] .step-card{min-height:38px;padding:5px 5px;gap:4px}
html[data-view=reference] .step-number{font-size:15px;line-height:20px}
html[data-view=reference] .step-card .icon{width:17px;height:17px}
html[data-view=reference] .step-card h3{font-size:8.2px;line-height:10px}
html[data-view=reference] .industries-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html[data-view=reference] .industry-card{min-height:38px;gap:10px;padding:6px 8px}
html[data-view=reference] .industry-card>.icon{width:29px;height:29px}
html[data-view=reference] .industry-card h3{font-size:8.8px;line-height:11px}
html[data-view=reference] .articles-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html[data-view=reference] .article-card{min-height:45px}
html[data-view=reference] .article-card a{padding:5px 6px}
html[data-view=reference] .article-card h3{font-size:9.3px;line-height:10.5px}
html[data-view=reference] .article-card p{font-size:7.1px;line-height:9px;margin-top:3px}
html[data-view=reference] .article-card .icon{width:10px;height:10px;margin-bottom:2px}
html[data-view=reference] .lead-footer{margin-top:0;padding:10px 10px 8px;min-height:0}
html[data-view=reference] .footer-inner{width:100%}
html[data-view=reference] .footer-lead{grid-template-columns:minmax(0,1fr) auto;min-height:0;margin-bottom:8px;gap:10px}
html[data-view=reference] .footer-kicker{font-size:6.5px;line-height:8px;letter-spacing:.7px;margin:0 0 4px}
html[data-view=reference] .footer-lead h2{font-size:12px;line-height:12px}
html[data-view=reference] .footer-lead p{font-size:6.7px;line-height:9px;margin-top:2px}
html[data-view=reference] .footer-lead .footer-kicker{font-size:6.5px;line-height:8px;letter-spacing:.7px;margin:0 0 4px}
html[data-view=reference] .footer-lead .button{width:auto;max-width:116px;height:26px;font-size:8px;padding:0 10px;gap:7px;justify-self:end}
html[data-view=reference] .footer-lead .icon{width:11px;height:11px}
html[data-view=reference] .footer-meta{grid-template-columns:minmax(120px,.9fr) minmax(0,1.5fr);gap:10px}
html[data-view=reference] .footer-brand{font-size:9px;line-height:11px}
html[data-view=reference] .footer-legal{font-size:7px;line-height:9px;margin-top:1px}
html[data-view=reference] .footer-address{font-size:7px;line-height:9px;margin-top:4px}
html[data-view=reference] .footer-links{gap:3px 7px;margin-top:5px}
html[data-view=reference] .footer-links a{font-size:6px;line-height:8px;letter-spacing:.1px}
html[data-view=reference] .footer-contacts{min-height:0;gap:4px;padding:7px 0 0}
html[data-view=reference] .footer-phone,html[data-view=reference] .footer-email{gap:4px;white-space:normal;min-width:0}
html[data-view=reference] .footer-phone>.icon,html[data-view=reference] .footer-email>.icon{width:14px;height:14px}
html[data-view=reference] .footer-phone strong,html[data-view=reference] .footer-email strong{font-size:8px;line-height:10px;overflow-wrap:anywhere}
html[data-view=reference] .footer-phone small,html[data-view=reference] .footer-email small{font-size:6px;line-height:8px}
html[data-view=reference] .footer-region{font-size:6.5px;line-height:8px;gap:4px;min-width:0}
html[data-view=reference] .footer-region>.icon{width:14px;height:14px;flex-shrink:0}
html[data-view=reference] .footer-region span{overflow-wrap:anywhere}
html[data-view=reference] .action-bar{position:relative;min-height:39px;gap:6px;padding:4px 6px}
html[data-view=reference] .action-bar>a,html[data-view=reference] .action-bar>button{min-height:30px;font-size:11px;gap:10px}
html[data-view=reference] .action-bar .icon{width:18px;height:18px}
@media(max-width:380px){html[data-view=reference] .header-region{font-size:7px;padding-left:5px;margin-left:6px}html[data-view=reference] .hero h1{font-size:24px;line-height:24px}html[data-view=reference] .section-link{font-size:5.5px}html[data-view=reference] .benefit-top{gap:3px}html[data-view=reference] .benefit-top .icon{width:19px;height:19px}html[data-view=reference] .benefit-card h3{font-size:8px}html[data-view=reference] .benefit-card p{font-size:7.7px}html[data-view=reference] .step-card{gap:2px;padding:4px 3px}html[data-view=reference] .step-card .icon{width:14px;height:14px}html[data-view=reference] .step-card h3{font-size:7px}html[data-view=reference] .footer-messengers{padding:0 4px;gap:4px}html[data-view=reference] .footer-messengers button span{display:none}}

/* Final geometry pass against the 448 × 1075 working reference. */
html[data-view=reference] .hero h1{font-size:25px}
html[data-view=reference] .benefit-card{min-height:71px}
html[data-view=reference] .services-section{padding-top:6px}
html[data-view=reference] .service-body{padding:4px 6px 5px;min-height:65px}
html[data-view=reference] .service-body h3{line-height:11px}
html[data-view=reference] .service-body p{font-size:8.2px;line-height:9.5px;margin-top:3px}
html[data-view=reference] .card-arrow{position:absolute;right:6px;bottom:5px;margin:0}
html[data-view=reference] .cases-section{padding-top:4px}
html[data-view=reference] .cases-section .section-heading{margin-bottom:5px}
html[data-view=reference] .case-body{padding:3px 6px 4px}
html[data-view=reference] .process-section{padding-top:6px}
html[data-view=reference] .industry-card{padding:5px 8px}
html[data-view=reference] .industry-card>.icon{width:28px;height:28px}
html[data-view=reference] .lead-footer{margin-top:0}

/* Reference mode keeps its approved 448px canvas while production mobile can expand at tablet widths. */
html[data-view=reference] .site-shell{width:100%;max-width:448px}