/* Final shared sizing rules. Preserve section palettes and component-specific animations. */
.energy-site{font-size:17px;line-height:1.85}
.energy-site .wrap{width:min(1280px,calc(100% - clamp(32px,6vw,96px)))}
.energy-site :where(main,section,article,aside,form,fieldset,.portal-content,.panel,.field,.auth-panel,.brief-form){min-width:0}
.energy-site :where(.prose,.panel,.form-result,.notification-row,.comment,.file-row,.footer-contacts,.business-details,.example-copy){overflow-wrap:anywhere}
.energy-site .btn,.energy-site .btn.small,.energy-site .portal-layout .btn.small,.energy-site .file-row .btn,.energy-site .management-table .btn{max-width:100%;min-height:48px;font-size:16px;line-height:1.8;gap:12px;white-space:normal;text-align:center;font-weight:600}
.energy-site .btn>svg{flex-shrink:0}
.energy-site .action-row,.energy-site .panel-head,.energy-site .portal-heading{flex-wrap:wrap;gap:14px}
.energy-site .action-row>.btn{flex:0 1 auto}
.energy-site .panel-head>h2,.energy-site .portal-heading>div{min-width:0}
.energy-site .field{font-size:17px;font-weight:600;line-height:1.85}
.energy-site .field input,.energy-site .field select,.energy-site .field textarea{min-width:0;max-width:100%;width:100%;font:inherit;font-weight:400;font-size:17px;line-height:1.8;box-sizing:border-box}
.energy-site .field input,.energy-site .field select{min-height:54px}
.energy-site .field textarea{min-height:150px;resize:vertical}
.energy-site .field small,.energy-site .form-note,.energy-site .form-result,.energy-site .auth-switch,.energy-site .auth-panel>p,.energy-site .checkbox{font-size:16px;line-height:1.95}
.energy-site .checkbox{min-height:44px;padding-block:8px;font-weight:400;cursor:pointer}
.energy-site .checkbox input{min-width:20px;min-height:20px;accent-color:var(--accent-strong)}
.energy-site .intake-optional summary,.energy-site .history-row summary{min-height:48px;line-height:1.9;padding-block:10px;font-size:17px}
.energy-site .pagination{flex-wrap:wrap;gap:12px;font-size:16px;line-height:1.8}
.energy-site .pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;text-underline-offset:4px}
.energy-site .notification-row p,.energy-site .notification-row strong,.energy-site .management-summary,.energy-site .operation-checks li{font-size:16px;line-height:1.95}
.energy-site .history-row pre{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.energy-site .management-table{font-size:16px;line-height:1.9}
.energy-site .table-scroll-hint{display:none}
.energy-site .table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.energy-site .table-scroll:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}
.energy-site .portal-layout{grid-template-columns:225px minmax(0,1fr)}
.energy-site .portal-content{min-width:0}
.energy-site .file-row{flex-wrap:wrap;gap:12px}
.energy-site .file-row>div{flex:1 1 180px;min-width:0}
.energy-site .file-row>svg{flex-shrink:0}
.energy-site .file-row .btn{flex:0 1 auto}
.energy-site .project-row{flex-wrap:wrap;gap:12px}
.energy-site .project-row>div{flex:1 1 180px;min-width:0}
.energy-site .sidebar nav>a,.energy-site .sidebar .portal-extra-links a{font-size:16px;min-height:48px;line-height:1.8}
.energy-site .auth-story>p{font-size:18px;line-height:2;color:#f1f1e8}
.energy-site footer a:not(.brand),.energy-site .breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;line-height:1.85}
.energy-site .footer-top>div>a:not(.brand){font-size:16px}
.energy-site .brand-band{overflow-wrap:anywhere}
.energy-site .download-link,.energy-site .inline-button,.energy-site .logout,.energy-site .login-link,.energy-site .auth-switch a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;line-height:1.85}
.energy-site .light-switch{width:64px;height:44px;min-height:44px;padding:5px}
.energy-site .light-switch>span{width:32px;height:32px}
.energy-site .light-switch[aria-pressed=true]>span{transform:translateX(-20px)}
.motion-paused .light-switch>span{transition:none}
@media(prefers-reduced-motion:reduce){.energy-site .light-switch>span{transition:none}}
.energy-site .empty p,.energy-site .project-title>p{font-size:18px;line-height:2}
.energy-site .mini-file{font-size:16px;line-height:1.85;flex-wrap:wrap;gap:12px}
.energy-site .mini-file small,.energy-site .badge{font-size:15px;line-height:1.85}
.energy-site .mini-file>div{min-width:0;overflow-wrap:anywhere}
.energy-site input[type=file]{font-size:16px;max-width:100%;min-height:54px}
.energy-site input[type=file]::file-selector-button{font-family:inherit;font-size:16px;min-height:44px;padding:8px 12px;margin-inline-end:10px}
.energy-site #toast{font-size:16px;line-height:1.9;overflow-wrap:anywhere;left:16px;max-width:min(440px,calc(100vw - 32px));padding:16px 20px;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px))}
@media(max-width:1180px){
 .energy-site .nav{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:16px;height:auto;min-height:94px;padding-block:12px;align-items:center}
 .energy-site .nav>.brand{grid-column:1;grid-row:1;justify-self:start;min-width:0;padding-inline-end:24px}
 .energy-site .nav>.nav-actions{grid-column:2;grid-row:1;min-width:0;gap:10px}
 .energy-site .nav>.menu-toggle{grid-column:3;grid-row:1;display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:10px;border:1px solid var(--accent-border);border-radius:5px;color:var(--signal)}
 .energy-site .nav nav#nav-links{display:none;position:absolute;top:100%;inset-inline:0;width:auto;max-height:min(70dvh,calc(100dvh - 110px));overflow-y:auto;overscroll-behavior-y:contain;background:var(--night);border:2px solid var(--accent-border);border-radius:6px;padding:12px;z-index:40;box-shadow:0 12px 28px #0004;visibility:visible;opacity:1;transform:none}
 .energy-site .nav nav#nav-links.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .energy-site .nav nav#nav-links>a{display:flex;align-items:center;white-space:normal;min-height:48px;font-size:17px;padding:10px 14px;line-height:1.8}
 
 
 
 .energy-site .portal-layout{grid-template-columns:190px minmax(0,1fr)}
}
@media(max-width:900px){
 .energy-site .table-scroll-hint{display:block;font-size:16px;line-height:1.9;margin-block:12px;color:var(--accent-strong)}
 .energy-site .portal-layout{grid-template-columns:minmax(0,1fr)}
 .energy-site .portal-content{padding:24px}
 .energy-site .sidebar{min-width:0}
 .energy-site .sidebar nav,.energy-site .sidebar .portal-extra-links{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding-block:8px;overscroll-behavior-inline:contain}
 .energy-site .sidebar nav>a,.energy-site .sidebar .portal-extra-links a{flex:0 0 auto;white-space:nowrap;padding:10px 14px}
 .energy-site .form-two-col,.energy-site .contact-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:680px){
 .energy-site .nav{grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;min-height:86px}
 .energy-site .nav>.brand{font-size:34px;letter-spacing:-1px;line-height:1.2}
 .energy-site .nav>.brand small{font-size:12px;line-height:1.65;margin-top:5px;white-space:normal}
 .energy-site .nav>.brand .brand-mark{font-size:20px}
 .energy-site .nav>.menu-toggle{width:44px;height:48px}
 .energy-site .nav-actions .login-link{display:none}
 .energy-site .nav-actions>.btn{font-size:15px;min-height:48px;padding:10px 12px;gap:0}
 .energy-site .nav-actions>.btn>svg{display:none}
 .energy-site .section{padding-block:56px}.energy-site .section.compact{padding-block:32px}
 .energy-site .energy-services-section,.energy-site .content-priority-section,.energy-site .energy-process,.energy-site .energy-faq{padding-block:56px}
 .energy-site .energy-section-heading{gap:24px;margin-bottom:28px}
 .energy-site .energy-hero h1{font-size:clamp(48px,15vw,72px);line-height:1.45}
 .energy-site .catalog-head h1,.energy-site .maintenance-hero-layout h1,.energy-site .page-head h1{font-size:clamp(32px,8.5vw,46px);line-height:1.65;overflow-wrap:anywhere}
 .energy-site .energy-section-heading h2,.energy-site .content-priority-section h2,.energy-site .energy-service-detail h2{font-size:clamp(29px,7.5vw,40px);line-height:1.65}
 .energy-site .energy-lead,.energy-site .catalog-head>p,.energy-site .maintenance-hero-layout>div>p{font-size:18px;line-height:1.95}
 .energy-site .hero-service-tags{flex-wrap:wrap;gap:10px}
 .energy-site .energy-hero-actions,.energy-site .energy-cta .action-row{display:flex;flex-wrap:wrap;gap:12px}
 .energy-site .energy-hero-actions>.btn,.energy-site .energy-cta .action-row>.btn{flex:1 1 180px;min-width:0}
 .energy-site .hero-bottom{align-items:flex-start;gap:16px}
 .energy-site .visual-topline,.energy-site .visual-bottomline{gap:10px}
 .energy-site .sign-demo-controls,.energy-site .demo-top{flex-wrap:wrap;gap:12px}
 .energy-site .sign-demo-controls>div{min-width:0;flex:1 1 180px}
 .energy-site .sign-demo-controls .light-switch{flex-shrink:0}
 .energy-site .portal-content{padding:20px 16px}
 .energy-site .panel,.energy-site .form-card{padding:22px 18px}
 .energy-site .panel-head{align-items:flex-start}
 .energy-site .panel-head h2{font-size:23px;line-height:1.8}
 .energy-site .portal-heading>.btn{font-size:16px;min-height:48px}
 .energy-site .auth-panel{width:calc(100% - 32px);max-width:480px;padding-block:40px 56px}
 .energy-site .auth-panel h1{font-size:32px;line-height:1.65}
 .energy-site .auth-main{grid-template-columns:minmax(0,1fr)}
 .energy-site .notice{font-size:16px;line-height:1.95;overflow-wrap:anywhere}
 .energy-site .search-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
 .energy-site .search-bar>.field{min-width:0}
 .energy-site .operation-checks li{flex-wrap:wrap}
 .energy-site .footer-top{gap:28px 20px;padding-bottom:36px}
 .energy-site .footer-bottom{gap:16px;padding-block:24px}
 .energy-site .footer-bottom>div{gap:8px 20px}
 .energy-site .preview-strip{font-size:14px;line-height:1.8;padding:10px 16px;flex-wrap:wrap;gap:4px 8px;text-align:center}
}
@media(max-width:380px){.energy-site .nav-actions>.btn{padding-inline:8px;font-size:14px}.energy-site .nav>.brand{font-size:32px}.energy-site .nav>.brand small{font-size:11px}.energy-site .footer-top{grid-template-columns:minmax(0,1fr)}.energy-site .footer-top>div{grid-column:auto}}
@media print{.energy-site .nav nav#nav-links{display:none}.energy-site .table-scroll{overflow:visible}}

/* Keep Arabic button labels at their full width while the background unfolds. */
.energy-site .visual-bottomline{padding-block:16px;gap:12px;align-items:center}
.energy-site .visual-bottomline>span:first-child{font-size:clamp(19px,2vw,25px);font-weight:700;color:var(--signal);line-height:1.8}
.energy-site .visual-bottomline>span[dir=ltr]{font-size:13px}
.marquee-person{display:inline-block;width:25px;height:52px;object-fit:contain;flex-shrink:0;filter:brightness(0);vertical-align:middle}
.simulation-person{display:inline-block;width:48px;height:auto;max-height:110px;object-fit:contain;vertical-align:middle;margin-inline-end:12px}
.store-fascia .illuminated-word{vertical-align:middle}
@media(max-width:680px){.simulation-person{width:35px;max-height:82px;margin-inline-end:6px}.energy-site .visual-bottomline>span:first-child{font-size:20px}.marquee-person{width:22px;height:46px}}

/* The simulation uses the exact complete lockup, never independent body/text sizes. */
.simulation-lockup{display:block;position:relative;width:min(88%,320px);aspect-ratio:1354.28673/555;flex:0 0 auto;margin:0 auto}
.simulation-lockup .simulation-logo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .32s ease}
.simulation-on{opacity:0}.sign-is-lit .simulation-on{opacity:1}.sign-is-lit .simulation-off{opacity:0}
@media(prefers-reduced-motion:reduce){.simulation-lockup .simulation-logo{transition:none}}

.motion-paused .simulation-lockup .simulation-logo{transition:none!important}

/* The facade, awning and shop window occupy separate rows, never overlap the logo. */
.energy-site .store-simulation{height:auto;display:grid;grid-template-rows:auto 6px 110px;overflow:hidden}
.energy-site .store-fascia{height:auto;min-height:0;padding:22px 16px 16px;gap:10px;box-sizing:border-box}
.energy-site .store-fascia .simulation-lockup{width:min(100%,320px);flex:none}
.energy-site .store-fascia .fascia-sub{font-size:14px;line-height:1.8;letter-spacing:0;text-align:center}
.energy-site .store-awning{position:relative;inset:auto;height:6px;grid-row:2}
.energy-site .store-front{position:relative;inset:auto;height:110px;grid-row:3;box-sizing:border-box}
@media(max-width:680px){.energy-site .store-simulation{grid-template-rows:auto 6px 90px}.energy-site .store-front{height:90px}.energy-site .store-fascia{padding:18px 12px 14px}}

/* Both electrical states share one exact box; illumination cannot resize the mark. */
.energy-site .simulation-lockup .simulation-logo{transform:none;scale:1;object-position:center;max-width:none;max-height:none}

/* Measured text contrast on pale panels and dark interactive controls. */
.energy-site.portal-body .page-head .breadcrumbs{color:#52623f}
.energy-site.portal-body .page-head .breadcrumbs a:hover{color:#334b16}
.energy-site .maintenance-copy h2>span{color:#425d0d}
.energy-site .maintenance-request-strip>div>span,.energy-site .fault-grid article>span{color:#52623f}
.energy-site .energy-project-preview :is(.mock-project-id,.mock-timeline,.mock-note){color:#52623f}
.energy-site .lab-controls .field{color:#f1f1e8}
.energy-site .lab-controls .field :is(input,select,textarea){color:#15151b}
.energy-site .auth-panel .back-link{display:inline-flex;align-items:center;min-height:44px}

/* Keep the approved two-line hero stable while the Arabic fonts load. Custom longer CMS titles still wrap normally. */
.energy-hero .hero-fixed-lines{white-space:nowrap;block-size:2lh}

/* Stable service-tag rows: font swapping must not change their row count. */
.energy-site .hero-service-tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.energy-site .hero-service-tags>span{width:100%;min-width:0;min-height:52.8px;box-sizing:border-box}
.energy-site .hero-service-tags .sabk-open-box-copy{white-space:nowrap}
@media(max-width:1100px){.energy-site .hero-service-tags{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.energy-site .hero-service-tags{grid-template-columns:minmax(0,1fr)}}
/* The first screen is complete at first paint; entrance and ambient motion remain in later sections. */
.energy-hero .hero-lime:after{animation:none;transform:scaleX(1)}
.energy-hero .hero-image-frame>img,.energy-hero .hero-burst{animation:none}
.energy-hero .hero-visual{animation:none;opacity:1;transform:rotate(-1.4deg)}

/* Immediate first screen; short, one-time entrances only as later content enters view. */
.energy-hero *,.energy-hero *::before,.energy-hero *::after,.header *,.header *::before,.header *::after{animation:none!important}
@keyframes ank-scroll-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sabk-open-box.sabk-surface-entering,.sabk-universal-card.sabk-surface-entering,.sabk-crafted-card.sabk-surface-entering{clip-path:none;animation:ank-scroll-enter .3s ease-out both}
.sabk-open-box.sabk-surface-entering .sabk-open-box-copy,.sabk-universal-card.sabk-surface-entering>*,.sabk-crafted-card.sabk-surface-entering>*{opacity:1;animation:none}
.ank-frame-arrived .ank-frame-surface{animation:ank-frame-reveal .3s ease-out both}
.ank-frame-arrived .ank-frame-label{animation:sabk-box-copy .3s ease-out both}
@media(prefers-reduced-motion:reduce){.sabk-surface-entering,.ank-frame-arrived .ank-frame-surface,.ank-frame-arrived .ank-frame-label{animation:none!important}}

/* Reserve the loaded introductory paragraph height while the same font streams in. */
@media(max-width:1100px){.energy-hero .energy-lead{min-block-size:3lh}}
/* Keep the introductory text and its actions from changing rows during font loading. */
@media(max-width:680px){.energy-hero .energy-lead{min-block-size:4lh}.energy-site .energy-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:403px){.energy-site .energy-hero-actions{grid-template-columns:minmax(0,1fr)}}
@media(min-width:681px){.energy-site .nav-actions>.ank-frame-cta{inline-size:149px;flex-shrink:0}}
/* Preserve the final button row heights before the webfont is ready. */
.energy-hero .energy-lead{min-block-size:3lh}
.energy-site .energy-hero-actions>.btn{min-block-size:59px}
@media(min-width:404px) and (max-width:680px){.energy-site .energy-hero-actions>.btn{min-block-size:84px}}
@media(max-width:680px){.energy-hero .energy-lead{min-block-size:4lh}}