/* Original Celsios Sans 1.0.0 from the approved brand package 2.0.0.
   Font data and OFL licence: /assets/fonts/celsios-sans-1.0.0/.
   Product worlds retain their own fonts; no root/global family overrides. */
@font-face{font-family:'Celsios Sans';src:url('/assets/fonts/celsios-sans-1.0.0/CelsiosSans-Variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Celsios Sans';src:url('/assets/fonts/celsios-sans-1.0.0/CelsiosSans-Italic-Variable.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
body[data-site=celsios]{--sans:'Celsios Sans',Arial,sans-serif;--serif:var(--sans);font-family:var(--sans);font-synthesis:none}
/* Include legacy font shorthands in headings, covers, tables and form controls. */
body[data-site=celsios] #app *{font-family:var(--sans)}
/* Sans has wider word shapes than the former serif. Keep the original hero's
   two deliberate lines, and let other German headings break within their cards. */
body[data-site=celsios] #app :is(h1,h2,h3,h4,h5,h6,.hub-cover>span){overflow-wrap:break-word;hyphens:auto}
body[data-site=celsios][data-view=umbrella] .experience-hero h1{font-size:clamp(36px,10.6vw,154px);line-height:1.04}
body[data-site=celsios] .experience-hero h1>em{white-space:nowrap;hyphens:none}
/* Corporate headings use the real italic face. Existing weight hierarchy is
   preserved; every requested weight is inside the font's actual 200–800 axis. */
body[data-site=celsios] #app :is(h1,h2,h3,h4,h5,h6,[role=heading],.hub-cover>span,.central-company-art>p,.central-work-result>strong,.central-floating-sheet b,.hub-home-image p,.central-hero-note p,.central-table thead th,.central-faq summary,.hub-footer-top nav span,.central-contact-steps b,.hub-editorial-note b,.central-source-docs b){font-style:italic}
body[data-site=celsios] #app :is(h1,h2,h3,h4,h5,h6,[role=heading]) *{font-style:inherit}
body[data-site=celsios] .central-source-docs b{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:720px){
 body[data-site=celsios] .central-company h1{font-size:clamp(40px,10vw,62px);line-height:1.08}
 body[data-site=celsios][data-view=umbrella] .experience-product h3{font-size:clamp(27px,7.7vw,38px)!important}
}
/* Preserve whole words where the adjusted heading size already fits them. */
body[data-site=celsios] :is(.central-company h1,.experience-product h3){hyphens:none}

/* Mobile reading sizes. Scoped to corporate pages so product worlds keep their fonts. */
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 body[data-site=celsios] #app :is(.hub-main,.case-hero,.before-after,.process-section,.example-section,.related-cases) .eyebrow,
 body[data-site=celsios] #app .experience-product-copy>.eyebrow{font-size:11px!important;line-height:1.6;letter-spacing:.07em}
 body[data-site=celsios] #app :is(.experience-hero-bottom>p,.experience-intro>div p,.central-task-copy>p:not(.eyebrow),.experience-product-copy>p:not(.eyebrow),.experience-company-panel p:not(.eyebrow),.hub-resource-card p,.hub-invitation p:not(.eyebrow),.hub-lead,.central-principles article p,.central-company-band p:not(.eyebrow),.central-platform-grid p,.central-platform-help p,.central-faq p,.central-contact-guidance p,.central-contact-success>p:not(.eyebrow),.case-hero-bottom>p,.before-after p:not(.eyebrow),.process-list p,.example-header>p,.case-card>p){font-size:16px!important;line-height:1.65}
 body[data-site=celsios] #app :is(.button,.hub-link,.back-link,.text-link,.central-contact-skip){font-size:14px;line-height:1.5;min-height:44px;max-width:100%;white-space:normal}
 body[data-site=celsios] #app :is(.experience-hero-bottom .button,.central-task-copy .button,.experience-product-copy .button,.experience-company-panel .button,.central-platform-grid .button,.central-form-shell .button){font-size:14px;padding:12px 15px;gap:14px}
 body[data-site=celsios] #app .experience-hero-bottom .hub-inline-actions{align-items:flex-start}
 body[data-site=celsios] #app .experience-scroll{font-size:12px;gap:12px}
 body[data-site=celsios] #app .experience-video-toggle{font-size:12px;min-height:44px}
 body[data-site=celsios] #app .central-task-tabs button{font-size:14px;line-height:1.4;padding-block:12px}
 body[data-site=celsios] #app :is(.central-small-note,.central-form-local,.central-form-shell small){font-size:13px;line-height:1.65}
 body[data-site=celsios] #app :is(.central-faq summary,.central-form-shell summary){font-size:15px;line-height:1.6}
 body[data-site=celsios] #app .central-form-shell label{font-size:14px;line-height:1.5}
 body[data-site=celsios] #app .central-form-shell :is(input:not([type=hidden]),select,textarea){font-size:16px;line-height:1.5;min-height:48px}
 body[data-site=celsios] #app .central-form-columns{grid-template-columns:1fr;gap:18px}
 body[data-site=celsios] #app .central-contact-steps b{font-size:16px}
 body[data-site=celsios] #app .central-contact-steps span{font-size:14px;line-height:1.65}
 body[data-site=celsios] #app .hub-footer-top>div p{font-size:15px;line-height:1.65}
 body[data-site=celsios] #app .hub-footer-top nav>div{font-size:14px;gap:10px}
 body[data-site=celsios] #app .hub-footer-top nav a{display:inline-flex;align-items:center;min-height:44px;line-height:1.5}
 body[data-site=celsios] #app .hub-footer-top nav span{font-size:12px;line-height:1.5}
 body[data-site=celsios] #app .hub-footer-bottom{font-size:12px;line-height:1.6}
 body[data-site=celsios] #app .hub-footer-bottom :is(a,button){min-height:44px;display:inline-flex;align-items:center;font-size:12px}
 body[data-site=celsios] #app .central-platforms>header h1{font-size:clamp(40px,11vw,56px);line-height:1.12;hyphens:none}
 body[data-site=celsios] #app .central-contact-layout h1{font-size:clamp(44px,12vw,60px);line-height:1.1}
 body[data-site=celsios] #app .case-hero h1{font-size:clamp(36px,10vw,48px);line-height:1.12;hyphens:auto;overflow-wrap:break-word}
 body[data-site=celsios] #app .central-table :is(th,td){font-size:12px;line-height:1.6;padding-inline:7px}
 body[data-site=celsios] #app .central-table thead th{font-size:22px}
 body[data-site=celsios] #app .central-table thead th:first-child{font-size:11px;width:23%}
 body[data-site=celsios] #app .central-table .hub-link{font-size:12px}
 /* Editorial summaries and navigation need the same reading size as article prose. */
 body[data-site=celsios] #app :is(.resource-hero>p:not(.eyebrow),.resource-feature>div>p:not(.eyebrow),.resource-card p,.resource-empty p,.resource-bottom>p:not(.eyebrow),.resource-skeleton p,.resource-archive-note){font-size:16px;line-height:1.65}
 body[data-site=celsios] #app :is(.resource-tabs a,.resource-read,.resource-back,.resource-home-links a,.resource-filters button,.resource-feature .button,.resource-report-gate a.button){font-size:14px;line-height:1.5;min-height:44px}
 body[data-site=celsios] #app :is(.resource-meta,.resource-byline,.resource-authors p,.resource-authors p span,.resource-collection-heading>p){font-size:12px;line-height:1.6}
 body[data-site=celsios] #app .resource-filters label{font-size:14px;line-height:1.5}
 body[data-site=celsios] #app .resource-filters :is(input,select){font-size:16px}
 body[data-site=celsios] #app .resource-article-header h1{font-size:clamp(31px,8.8vw,40px);line-height:1.16;hyphens:auto;overflow-wrap:break-word}
 body[data-site=celsios] #app .resource-event-facts p{font-size:15px;line-height:1.6}
 body[data-site=celsios] #app :is(.resource-sources,.resource-prose table){font-size:14px;line-height:1.65}
 body[data-site=celsios] #app .resource-prose table{width:100%;table-layout:fixed}
 body[data-site=celsios] #app .resource-prose :is(th,td){min-width:0;padding:10px;overflow-wrap:break-word;hyphens:auto}
}

/* Native use-case pages share a layout but retain each product's type family. */
body[data-site=energy][data-view=default]{--sans:'Celsios Flux',Arial,sans-serif}
body[data-site=energy][data-view=default] #app :is(h1,h2,h3,h4){font-family:'Celsios Energy Sans Regular Plus',sans-serif;font-weight:400;font-synthesis:none;line-height:1.3;letter-spacing:0;word-spacing:0}
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 body[data-view=default] #app :is(.case-hero-bottom>p,.before-after p:not(.eyebrow),.process-list p,.example-header>p,.case-card>p,.cta-section p:not(.eyebrow)){font-size:16px;line-height:1.65}
 body[data-view=default] #app :is(.case-hero,.before-after,.process-section,.example-section) .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.06em}
 body[data-view=default] #app .case-hero h1{font-size:clamp(32px,9vw,42px);line-height:1.15;overflow-wrap:break-word;hyphens:auto}
 body[data-site=energy][data-view=default] #app :is(.before-after h2,.process-section h2,.example-header h2){font-size:30px;line-height:1.3;overflow-wrap:break-word}
 body[data-view=default] #app :is(.button,.back-link,.text-link){font-size:14px;line-height:1.5;min-height:44px;max-width:100%;white-space:normal}
 body[data-view=default] #app .demo-tabs>button{font-size:13px;line-height:1.5;min-height:48px;overflow-wrap:anywhere}
 body[data-view=default] #app .demo-tabs>button>span{font-size:11px}
 body[data-view=default] #app :is(.demo-row,.demo-row b){font-size:12px;line-height:1.5;overflow-wrap:anywhere}
 body[data-view=default] #app :is(.demo-row small,.demo-label,.status,.demo-stats span,.demo-stats small,.demo-next,.demo-disclaimer){font-size:11px;line-height:1.5;white-space:normal}
 body[data-view=default] #app :is(.demo-callout b,.demo-callout p,.completion-list b,.completion-list small){font-size:12px;line-height:1.5}
 body[data-view=default] #app .demo-stats b.stat-text{font-size:14px;line-height:1.5}
 body[data-view=default] #app .footer-nav>div{font-size:14px;line-height:1.5}
 body[data-view=default] #app .footer-nav a{min-height:44px;display:inline-flex;align-items:center}
 body[data-view=default] #app .site-footer p{font-size:15px;line-height:1.6}
 body[data-view=default] #app .footer-bottom{font-size:12px;line-height:1.6}
}
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 body[data-site=celsios] #app .central-sheet-heading{font-size:10px;line-height:1.5;letter-spacing:.02em;align-items:flex-start}
 body[data-site=celsios] #app .central-sheet-heading>span:last-child{font-size:9px}
 body[data-site=celsios] #app .central-source-docs b{font-size:12px;line-height:1.5;min-height:54px}
 body[data-site=celsios] #app .central-source-docs span{font-size:10px;line-height:1.5}
 body[data-site=celsios] #app .central-work-action>p{font-size:14px;line-height:1.6}
 body[data-site=celsios] #app .central-work-result>span{font-size:12px;line-height:1.5}
 body[data-site=celsios] #app .business-contact .business-contact__intro{font-size:14px;line-height:1.6}
 body[data-site=celsios] #app .business-contact__hours{font-size:12px;line-height:1.6}
}
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 body[data-view=default] #app :is(.before-after>article,.process-section>div,.process-list>li>div,.example-header>div,.case-hero>*){min-width:0}
 body[data-view=default] #app :is(.before-after h2,.process-section h2,.example-header h2){overflow-wrap:anywhere;hyphens:auto}
 body[data-site=energy][data-view=default] #app .case-hero h1{font-size:clamp(26px,7.8vw,36px);line-height:1.2}
 body[data-site=energy][data-view=default] #app :is(.before-after h2,.process-section h2,.example-header h2){font-size:clamp(24px,7vw,30px);line-height:1.3}
 body[data-site=celsios] #app .resource-main .resource-article-header h1{font-size:clamp(28px,8.3vw,38px);line-height:1.18;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
 body[data-site=celsios] #app .central-company h1{font-size:clamp(36px,9.3vw,54px);line-height:1.12;hyphens:none}
}
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 body[data-view=default] #app main:has(.case-hero) :is(.section-heading,.cta-inner)>*{min-width:0;max-width:100%}
 body[data-view=default] #app main:has(.case-hero) :is(.section-heading h2,.cta-inner h2){font-size:clamp(30px,8.5vw,40px);line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
 body[data-site=energy][data-view=default] #app main:has(.case-hero) :is(.section-heading h2,.cta-inner h2){font-size:clamp(24px,7vw,30px);line-height:1.3}
 body[data-view=default] #app main:has(.case-hero) :is(.section-heading,.cta-inner) .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.06em}
 body[data-view=default] #app main:has(.case-hero) .section-heading>p{font-size:16px;line-height:1.65}
}
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 body[data-view=default] #app main:has(.case-hero) :is(h1,h2,h3,h4){overflow-wrap:anywhere;hyphens:auto}
 body[data-view=default] #app .related-cases .case-card h3{font-size:clamp(26px,7.5vw,32px);line-height:1.25;min-width:0;max-width:100%}
 body[data-site=energy][data-view=default] #app .related-cases .case-card h3{font-size:clamp(24px,7vw,30px);line-height:1.3}
}