/* ECM design polish — comfortable Manrope typography, full-width industrial hero, purposeful motion. */
:root{--ecm-syne:'Manrope',system-ui,sans-serif}
body.ecm-blueprint-site h1,
body.ecm-blueprint-site h2,
body.ecm-blueprint-site h3,
body.ecm-blueprint-site h4{
 font-family:'Manrope',system-ui,sans-serif;
 font-weight:800;
 font-stretch:normal;
 letter-spacing:-.027em;
 line-height:1.22;
 overflow-wrap:break-word;
}
body.ecm-blueprint-site h1{font-size:clamp(2.8rem,5vw,5rem);line-height:1.13}
body.ecm-blueprint-site h2{font-size:clamp(2rem,3.4vw,3.45rem);line-height:1.2}
body.ecm-blueprint-site h3{line-height:1.25}
.ecm-section-head h2{max-width:790px;letter-spacing:-.027em}
.ecm-step h3{font-size:clamp(1.18rem,1.5vw,1.42rem);letter-spacing:-.02em;margin:20px 0 12px}
.ecm-cat-copy h3{font-size:clamp(1.45rem,1.95vw,2.12rem);line-height:1.27}
.ecm-feature-copy h2,.ecm-about-grid h2{line-height:1.2}
.ecm-product-summary h2{font-size:clamp(2rem,3vw,3.4rem);line-height:1.23}
.ecm-page-head h1{font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:1.14}
.ecm-blog-post h2{font-size:clamp(1.45rem,2vw,2rem);line-height:1.27}
.ecm-cta-band h2{font-size:clamp(2.1rem,3.3vw,3.3rem);line-height:1.2}
.ecm-contact-card h2{font-size:clamp(1.9rem,2.6vw,2.8rem);line-height:1.24}
.ecm-footer-about h3{letter-spacing:0;line-height:1.32}
.ecm-stats .ecm-stat strong{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.03em}
.ecm-about-stats strong{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.03em}
/* Photograph is an actual full-bleed background, not a tiny floating preview. */
.ecm-hero{
 isolation:isolate;
 position:relative;
 overflow:hidden;
 background:#15364f url('https://excelconstructionmaterials.com/wp-content/uploads/2026/09/ecm-hero-e1788421458432.webp') center 48%/cover no-repeat;
 color:#fff;
}
.ecm-hero::before{
 content:'';
 position:absolute;
 z-index:-2;
 inset:-2.5%;
 background-image:url('https://excelconstructionmaterials.com/wp-content/uploads/2026/09/ecm-hero-e1788421458432.webp');
 background-size:cover;
 background-position:center 48%;
 background-repeat:no-repeat;
 transform:scale(1.025);
 animation:ecm-hero-drift 21s ease-in-out infinite alternate;
 will-change:transform;
}
.ecm-hero::after{
 content:'';
 position:absolute;
 z-index:-1;
 inset:0;
 background:linear-gradient(90deg,rgba(8,28,49,.94) 0%,rgba(9,34,58,.89) 32%,rgba(13,42,64,.61) 65%,rgba(14,43,67,.28) 100%),
            linear-gradient(0deg,rgba(8,24,42,.35),transparent 58%);
 pointer-events:none;
}
.ecm-hero .ecm-blueprint-grid{
 z-index:0;
 opacity:.26;
 background-image:linear-gradient(rgba(215,236,251,.3) 1px,transparent 1px),
 linear-gradient(90deg,rgba(215,236,251,.3) 1px,transparent 1px);
 mask-image:linear-gradient(to right,black,transparent 73%);
}
.ecm-hero .ecm-hero-inner{
 display:flex;
 align-items:center;
 justify-content:flex-start;
 position:relative;
 z-index:1;
 min-height:clamp(600px,74vh,790px);
 gap:0;
 padding:85px 0 98px;
}
.ecm-hero .ecm-hero-copy{
 position:relative;
 max-width:850px;
 width:100%;
 animation:ecm-hero-intro .85s cubic-bezier(.21,.8,.26,1) both;
}
.ecm-hero .ecm-hero-copy>.ecm-kicker{color:#C5E7F9;letter-spacing:.16em}
.ecm-hero .ecm-hero-copy>.ecm-kicker::before{color:#FF9354}
.ecm-hero h1{
 color:#fff;
 font-family:'Manrope',system-ui,sans-serif;
 font-size:clamp(3.2rem,5.5vw,5.75rem);
 font-weight:800;
 line-height:1.105;
 letter-spacing:-.045em;
 margin:19px 0 23px;
 max-width:850px;
 text-wrap:balance;
}
.ecm-hero h1 em{color:#95D5FF;position:relative;font-style:normal}
.ecm-hero h1 em::after{
 content:'';
 position:absolute;
 left:1%;
 right:1%;
 bottom:-.075em;
 height:4px;
 border-radius:2px;
 background:var(--ecm-orange);
 transform-origin:left;
 animation:ecm-hero-underline 1.2s .65s ease both;
}
.ecm-hero .ecm-hero-copy>p{
 color:#EEF5FC;
 max-width:650px;
 font-size:clamp(15px,1.25vw,18px);
 line-height:1.85;
 text-shadow:0 2px 12px rgba(0,0,0,.12);
}
.ecm-hero .ecm-hero-actions{margin-top:29px}
.ecm-hero .ecm-button-blue{background:#fff;color:var(--ecm-deep)!important}
.ecm-hero .ecm-button-blue:hover{background:#E4F2FD}
.ecm-hero .ecm-button-orange{box-shadow:0 8px 25px rgba(12,25,43,.2)}
.ecm-hero .ecm-hero-features{
 display:flex;
 align-items:center;
 max-width:max-content;
 flex-wrap:wrap;
 gap:9px 23px;
 margin-top:38px;
 padding:14px 18px;
 border:1px solid rgba(230,244,255,.25);
 border-left:3px solid var(--ecm-orange);
 background:rgba(6,30,52,.36);
 backdrop-filter:blur(5px);
 color:#E2EEFA;
 font-size:11px;
}
.ecm-hero .ecm-hero-features span::before{color:#FF965C}
.ecm-hero-scroll-cue{
 position:absolute;
 right:0;
 bottom:35px;
 display:flex;
 align-items:center;
 gap:13px;
 color:#D9EAF6;
 font:600 10px/1.4 var(--ecm-mono);
 letter-spacing:.13em;
}
.ecm-scroll-arrow{
 display:inline-flex;
 width:33px;height:33px;align-items:center;justify-content:center;
 border:1px solid rgba(255,255,255,.55);border-radius:50%;
 font-size:20px;
 animation:ecm-scroll-bob 1.9s ease-in-out infinite;
}
@keyframes ecm-hero-drift{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.085) translate3d(-.4%,0,0)}}
@keyframes ecm-hero-intro{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes ecm-hero-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ecm-scroll-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* Clean but noticeable editorial motion across the site. */
.ecm-motion-reveal{
 opacity:0;
 transform:translate3d(0,29px,0);
 transition:opacity .75s cubic-bezier(.23,.72,.31,1),transform .75s cubic-bezier(.23,.72,.31,1);
 transition-delay:var(--ecm-reveal-delay,0ms);
}
.ecm-motion-reveal.ecm-motion-visible{opacity:1;transform:translate3d(0,0,0)}
.ecm-cat-card,.ecm-product-card,.ecm-step,.ecm-contact-card,.ecm-video-card{
 transition:transform .32s cubic-bezier(.2,.73,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.ecm-cat-card:hover,.ecm-product-card:hover,.ecm-step:hover,.ecm-video-card:hover{
 transform:translateY(-6px);
 box-shadow:0 18px 35px rgba(20,58,92,.13);
 border-color:#A9C8E0;
}
.ecm-cat-photo img,.ecm-product-photo img,.ecm-feature-media img{
 transition:transform .55s cubic-bezier(.22,.8,.28,1),filter .5s ease;
}
.ecm-cat-card:hover img,.ecm-product-card:hover img{transform:scale(1.055)}
.ecm-feature-media:hover img{transform:scale(1.025)}
.ecm-button{transition:transform .23s ease,background-color .23s ease,box-shadow .23s ease}
.ecm-button:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(15,48,79,.18)}
.ecm-section-head .ecm-kicker::before{color:var(--ecm-orange)}
.ecm-stat strong[data-ecm-count]{display:block;min-width:2ch}
@media(max-width:960px){
 .ecm-hero .ecm-hero-inner{min-height:630px;padding:75px 0 100px}
 .ecm-hero::after{background:linear-gradient(90deg,rgba(8,28,49,.93),rgba(8,29,49,.76) 62%,rgba(8,27,45,.53))}
 .ecm-hero h1{max-width:760px;font-size:clamp(3rem,7vw,5.25rem)}
}
@media(max-width:700px){
 .ecm-hero .ecm-hero-inner{min-height:640px;padding:65px 0 90px;align-items:center}
 .ecm-hero::before{background-position:61% center}
 .ecm-hero::after{background:linear-gradient(90deg,rgba(7,26,44,.93),rgba(9,31,53,.83) 55%,rgba(11,33,55,.69))}
 .ecm-hero h1{font-size:clamp(2.55rem,9vw,3.7rem);line-height:1.13;letter-spacing:-.04em}
 .ecm-hero .ecm-hero-copy>p{font-size:15px;line-height:1.78}
 .ecm-hero .ecm-hero-features{gap:8px 12px;padding:12px;margin-top:26px;font-size:10px}
 .ecm-hero-scroll-cue{bottom:22px;right:0;font-size:9px}
 .ecm-hero .ecm-button{min-height:46px}
 .ecm-section-head h2{font-size:clamp(1.95rem,7vw,2.7rem)}
 .ecm-page-head h1{font-size:clamp(2.2rem,8.4vw,3.6rem)}
 .ecm-cat-copy h3{font-size:1.6rem}
 .ecm-step h3{font-size:1.24rem}
 .ecm-product-summary h2{font-size:clamp(2rem,8vw,2.8rem)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
 .ecm-motion-reveal{opacity:1!important;transform:none!important}
 .ecm-hero::before{transform:none!important}
}