/*
Theme Name: ESS
Theme URI: https://esnds.com.bd/
Author: devloper @Hasibulon
Description: Design-first premium one-page corporate WordPress theme for ESS Engineering.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ess-engineering
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root{--orange:#ff7b16;--orange2:#ff9a2e;--black:#080a0c;--dark:#101215;--ink:#101215;--ink-soft:#68717d;--ink-mute:#9ba2aa;--muted:#68717d;--line:#e4e5e6;--soft:#f5f5f2;--white:#fff;--max:1280px;--radius:22px;--bg:#fff;--bg-soft:#f5f5f2;--bg-alt:#f6f6f4;--bg-dark:#080a0c;--card-bg:#fff;--header-bg:rgba(255,255,255,.86);--header-line:#e4e5e6;--input-bg:#fff;--input-border:#e0e1df;--hero-overlay-1:rgba(4,5,6,.88);--hero-overlay-2:rgba(4,5,6,.55);--hero-overlay-3:rgba(4,5,6,.25)}
[data-theme="dark"]{--ink:#f2f3f4;--ink-soft:#aeb4bc;--ink-mute:#8a929b;--muted:#aeb4bc;--line:#2a2d32;--soft:#101215;--bg:#0a0b0d;--bg-soft:#101215;--bg-alt:#15171b;--bg-dark:#000;--card-bg:#15171b;--header-bg:rgba(10,11,13,.86);--header-line:#25282d;--input-bg:#1a1c20;--input-border:#2e3136;--hero-overlay-1:rgba(0,0,0,.92);--hero-overlay-2:rgba(0,0,0,.7);--hero-overlay-3:rgba(0,0,0,.4)}
html{transition:background-color .3s}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);transition:background-color .3s,color .3s}body,button,input,textarea,select{font-synthesis:none}a{text-decoration:none;color:inherit}img{display:block;max-width:100%;height:auto}.container{width:min(var(--max),calc(100% - 72px));margin:auto}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);font-weight:800}.section{padding:86px 0}.section h2,.dark-section h2{font-size:clamp(34px,4.1vw,58px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 0;color:var(--ink)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:15px 22px;font-size:14px;font-weight:800;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-orange{background:var(--orange);color:#0b0b0b}.btn-outline{border:1px solid #5d6167;color:#fff}.btn-white{background:#fff;color:#17191d}.text-link{font-size:14px;font-weight:800;color:var(--ink)}.text-link span{font-size:18px;margin-left:8px}.text-link.light{color:#fff}
.theme-toggle{border:1px solid var(--header-line);background:transparent;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:15px;margin-right:6px;flex:none}.theme-toggle span{display:none}.theme-toggle .icon-auto{display:block}[data-theme-pref="light"] .theme-toggle .icon-auto,[data-theme-pref="dark"] .theme-toggle .icon-auto{display:none}[data-theme-pref="light"] .theme-toggle .icon-sun,[data-theme-pref="dark"] .theme-toggle .icon-moon{display:block}
.site-header{height:74px;position:fixed;top:0;left:0;right:0;z-index:100;background:var(--header-bg);border-bottom:1px solid var(--header-line);backdrop-filter:blur(14px)}.site-header.scrolled{background:var(--header-bg)}.nav-wrap{height:100%;display:flex;align-items:center;gap:20px}.site-brand{flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;color:var(--ink)}.site-brand .custom-logo{max-height:52px;width:auto;object-fit:contain}.brand-ess{font-size:34px;line-height:1;font-weight:950;font-style:italic;letter-spacing:-.08em;color:var(--ink)}.brand-ess:first-letter{color:var(--orange)}.brand-sub{font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em;color:var(--ink-soft);max-width:none;margin-top:2px}.main-nav{flex:1;display:flex;align-items:center;justify-content:center;gap:27px;color:var(--ink)}.main-nav>a,.main-nav>.has-dropdown>a{font-size:16px;font-weight:750;color:var(--ink);position:relative;padding:29px 0}.main-nav>a:not(.nav-quote):after,.main-nav>.has-dropdown>a:not(.nav-quote):after{content:"";position:absolute;left:0;bottom:18px;width:0;height:2px;background:var(--orange);transition:.2s}.main-nav>a:hover:after,.main-nav>a.active:after,.main-nav>.has-dropdown>a:hover:after,.main-nav>.has-dropdown>a.active:after{width:100%}.main-nav>a.active,.main-nav>.has-dropdown>a.active{color:var(--orange)}.nav-quote{background:var(--orange);color:#111!important;border-radius:999px;padding:14px 22px!important}.nav-quote:after{display:none}.nav-toggle{display:none;border:0;background:none;padding:8px}.nav-toggle span{display:block;width:25px;height:2px;background:var(--ink);margin:5px}
.has-dropdown{position:relative}.has-dropdown>a:after{content:"▾";display:inline-block;font-size:10px;margin-left:6px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.has-dropdown:hover>a:after,.has-dropdown:focus-within>a:after{transform:rotate(180deg)}.has-dropdown .dropdown{display:flex;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transition:all .3s cubic-bezier(.4,0,.2,1);position:absolute;top:calc(100% + 5px);left:-10px;min-width:230px;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--header-line);border-radius:14px;padding:10px;flex-direction:column;gap:4px;box-shadow:0 20px 40px rgba(0,0,0,.12);z-index:60}[data-theme="dark"] .has-dropdown .dropdown{box-shadow:0 20px 40px rgba(0,0,0,.5)}.dropdown .has-dropdown>a:after{content:"›";float:right;margin-left:14px;transition:transform .2s}.dropdown .has-dropdown:hover>a:after{transform:translateX(4px)}.dropdown .has-dropdown{position:relative}.dropdown .has-dropdown .dropdown{top:-10px;left:100%}.has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.has-dropdown .dropdown a{padding:11px 15px;font-size:15px;font-weight:700;color:var(--ink);border-radius:10px;white-space:nowrap;transition:all .2s;position:relative;overflow:hidden}.has-dropdown .dropdown a:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);border-radius:3px;opacity:0;transform:translateX(-100%);transition:.2s}.has-dropdown .dropdown a:hover{background:var(--bg-alt);color:var(--orange);padding-left:22px}.has-dropdown .dropdown a:hover:before{opacity:1;transform:translateX(0)}
.hero-section{position:relative;min-height:100vh;min-height:100svh;background:var(--bg-dark);color:#fff;overflow:hidden;padding-top:74px}.hero-bg-grid{position:absolute;inset:0;background:radial-gradient(circle at 72% 44%,#25292e 0,#111419 35%,#07090b 72%);opacity:.95}.hero-bg-grid:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1) 58%,rgba(0,0,0,.35)),repeating-linear-gradient(90deg,transparent 0 90px,rgba(255,255,255,.018) 91px 92px)}.hero-photo{position:absolute;inset:0;top:74px;width:100%;height:calc(100vh - 74px);height:calc(100svh - 74px);overflow:hidden;background:#0c0f13}.hero-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--hero-overlay-1) 0%,var(--hero-overlay-2) 32%,var(--hero-overlay-3) 58%,var(--hero-overlay-2) 100%),linear-gradient(180deg,rgba(4,5,6,.2) 0%,rgba(4,5,6,.05) 30%,rgba(4,5,6,.2) 55%,rgba(4,5,6,.85) 100%)}.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-slide{opacity:0;transition:opacity 1.1s ease;z-index:0}.hero-slide.active{opacity:1;z-index:1}
.hero-slide-dots{position:absolute;right:24px;bottom:24px;z-index:3;display:flex;gap:8px}.hero-slide-dots button{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:.2s}.hero-slide-dots button.active{background:var(--orange);border-color:var(--orange);width:22px;border-radius:5px}

.hero-video-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero-video-wrap iframe{position:absolute;top:50%;left:50%;width:100%;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0}.hero-inner{position:relative;z-index:2;min-height:calc(100vh - 74px);min-height:calc(100svh - 74px);display:flex;align-items:center;justify-content:space-between}.hero-copy{max-width:720px;padding-top:18px}.hero-copy h1{font-size:clamp(54px,6.2vw,88px);line-height:.91;letter-spacing:-.065em;margin:18px 0 26px;color:#fff}.hero-copy h1 span{color:var(--orange)}.hero-copy>p{font-size:16px;line-height:1.7;color:#d0d4d8;max-width:640px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 36px}.play{width:20px;height:20px;border:1px solid var(--orange);color:var(--orange);border-radius:50%;display:grid;place-items:center;font-size:8px}.hero-features{display:flex;max-width:690px;background:rgba(20,22,25,.75);border:1px solid #2b2e33;border-radius:16px;overflow:hidden;backdrop-filter:blur(10px)}.hero-features span{display:flex;gap:10px;align-items:center;padding:14px 17px;font-size:17px;color:var(--orange);border-right:1px solid #30343a}.hero-features span:last-child{border:0}.hero-features b{font-size:12px;line-height:1.35;color:#fff;font-weight:700}.hero-proof{width:150px;background:rgba(16,18,21,.82);border:1px solid #3a3e43;border-radius:20px;padding:22px 18px;align-self:center;margin:70px 0 0 20px;backdrop-filter:blur(12px)}.hero-proof div+div{border-top:1px solid #3b3e43;margin-top:17px;padding-top:17px}.hero-proof small{display:block;color:var(--orange);font-size:11px;font-weight:800;margin-bottom:5px}.hero-proof strong{display:block;font-size:29px;line-height:1;color:#fff}.hero-proof span{font-size:11px;color:#b8bdc4}.floating-actions a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--orange);color:#111;font-weight:900;box-shadow:0 10px 30px #0004}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:25px}.services-section{background:var(--bg)}.service-slider,.project-slider,.testimonial-slider{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:34px;padding:2px 2px 16px}.service-slider::-webkit-scrollbar,.project-slider::-webkit-scrollbar,.testimonial-slider::-webkit-scrollbar{display:none}.service-card{flex:0 0 calc(25% - 14px);min-width:260px;border:1px solid var(--line);border-radius:20px;padding:18px;min-height:250px;display:grid;grid-template-columns:1fr 112px;grid-template-rows:auto 1fr;gap:10px;box-shadow:0 12px 30px #00000008;scroll-snap-align:start;overflow:hidden;background:var(--card-bg)}.service-icon{width:40px;height:40px;border-radius:50%;background:#fff0df;color:#c65d00;display:grid;place-items:center;font-weight:900}.service-content h3{font-size:18px;margin:3px 0 9px;grid-column:1/2;color:var(--ink)}.service-content p{font-size:14px;line-height:1.55;color:var(--ink-soft)}.service-visual{grid-column:2;grid-row:1/3;border-radius:15px;background:linear-gradient(135deg,#22272d,#777 42%,#20242a);position:relative;overflow:hidden}.service-visual:after{content:"";position:absolute;left:25%;right:25%;top:12%;height:76%;border:2px solid #ddd6c9;border-radius:5px;box-shadow:0 0 18px #ff9b4422}.service-visual.has-photo{background:none}.service-visual.has-photo:after{display:none}.service-visual img{width:100%;height:100%;object-fit:cover}.slider-controls{display:flex;gap:8px;margin-top:4px}.slider-controls button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card-bg);color:var(--ink);cursor:pointer;font-size:17px}.stats-section{background:var(--bg);color:var(--ink);padding:22px 0}.stat-bar{display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;overflow:hidden}.stat-bar>div{padding:24px 25px;border-right:1px solid var(--line)}.stat-bar>div:last-child{border:0}.stat-bar strong{display:block;color:var(--orange);font-size:30px}.stat-bar span{font-size:12px;color:var(--ink-soft)}.about-section{padding-top:92px;background:var(--bg)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px 70px}.about-media{position:relative}.about-image{height:470px;border-radius:25px;background:linear-gradient(145deg,#2a2e34,#111419);position:relative;overflow:hidden}.about-image img,.contact-photo img{width:100%;height:100%;object-fit:cover}.about-image.has-photo,.contact-photo.has-photo{background:none}.lift-cabin{position:absolute;left:25%;top:12%;width:50%;height:78%;border:3px solid #b9b8af;border-radius:7px;background:linear-gradient(90deg,#1a1d21,#3c4147 48%,#17191d 52%);box-shadow:0 0 40px #ff8b2322}.lift-cabin div{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#70757a}.lift-cabin span{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-weight:900;color:#fff4;font-size:35px}.glass-lift{position:absolute;left:18%;top:12%;width:64%;height:78%;border:3px solid #d5d5d0;background:linear-gradient(90deg,#bfc6cb33,#ffffff55,#aab2b733);box-shadow:0 0 30px #fff4}.glass-lift span{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-weight:900;font-size:35px;color:#1113}.cert-badge{position:absolute;right:20px;bottom:-22px;background:var(--card-bg);border-radius:13px;box-shadow:0 15px 35px #0002;padding:15px;display:flex;gap:10px;align-items:center}.cert-badge b{width:42px;height:42px;background:var(--orange);border-radius:9px;display:grid;place-items:center}.cert-badge span{font-size:11px;color:var(--ink-soft)}.cert-badge strong{color:var(--ink)}.about-copy h2,.products-feature h2{color:var(--ink)}.about-copy h2 span,.products-feature h2 span{color:var(--orange)}.about-copy p,.products-feature p{font-size:15px;line-height:1.7;color:var(--ink-soft)}.check-list{list-style:none;padding:0;margin:20px 0 24px}.check-list li{font-size:14px;font-weight:750;margin:11px 0;color:var(--ink)}.check-list li:before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--orange);margin-right:10px;font-size:11px}.products-feature ul{list-style:none;padding:0}.products-feature li{font-size:14px;margin:12px 0;color:var(--ink)}.products-feature li:before{content:"›";color:var(--orange);font-size:18px;margin-right:9px}
.products-section{background:var(--bg-soft)}.products-section .section-head{align-items:center}.product-search-wrap{display:flex;width:min(600px,100%);background:var(--input-bg);border:1px solid var(--input-border);border-radius:999px;overflow:hidden}.product-search-wrap input{border:0;outline:0;padding:15px 18px;flex:1;font:inherit;background:transparent;color:var(--ink)}.product-search-wrap button{width:55px;border:0;background:var(--ink);color:var(--bg);font-size:20px}.product-pills{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.product-pills button{border:1px solid var(--input-border);background:var(--input-bg);color:var(--ink);padding:9px 15px;border-radius:999px;font-weight:750;cursor:pointer;font-size:13px}.product-pills button.active,.product-pills button:hover{background:var(--ink);color:var(--bg)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:var(--card-bg);border:1px solid var(--line);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.product-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}.product-thumb{aspect-ratio:1.3;background:#ddd;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:cover}.product-placeholder,.project-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#dfe2e5,#777e84);display:grid;place-items:center}.product-placeholder span{font-weight:900;color:#fff8;font-size:40px}.product-card-body{padding:17px}.product-card-body small{color:#c55c00;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.product-card h3{font-size:16px;margin:7px 0;color:var(--ink)}.product-card p{font-size:13px;line-height:1.55;color:var(--ink-soft);min-height:34px}.product-card-body a{font-size:13px;font-weight:850;color:var(--orange)}.empty-state{grid-column:1/-1;padding:45px;border:1px dashed var(--line);border-radius:20px;display:flex;flex-direction:column;gap:8px}.empty-state span{color:var(--ink-soft)}
.dark-section{background:var(--bg);color:var(--ink);padding:40px 0}.dark-section+.dark-section{padding-top:0}.dark-head{align-items:flex-start}.dark-head h2{font-size:clamp(28px,3vw,42px)}.dark-head p{max-width:330px;color:var(--ink-soft);font-size:14px;line-height:1.6}.clients-section{padding-top:80px;padding-bottom:60px}.logo-window{margin-top:50px;overflow:hidden;position:relative;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);padding:10px 0;display:flex;flex-direction:column;gap:20px}.logo-track{display:flex;width:max-content;gap:20px;animation:marquee 45s linear infinite;padding:10px}.logo-track.reverse{animation:marquee-reverse 40s linear infinite}.logo-track:hover,.logo-track.reverse:hover{animation-play-state:paused}.client-logo{width:220px;height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:15px 20px;background:var(--card-bg);border:1px solid var(--line);border-radius:16px;color:var(--ink);font-size:13px;line-height:1.4;font-weight:700;text-align:center;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px rgba(0,0,0,.03)}.client-logo:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.08);border-color:var(--orange);color:var(--orange)}[data-theme="dark"] .client-logo{box-shadow:0 4px 15px rgba(0,0,0,.2)}[data-theme="dark"] .client-logo:hover{box-shadow:0 15px 35px rgba(0,0,0,.4)}.client-logo img{max-width:140px;max-height:50px;object-fit:contain;filter:grayscale(100%) opacity(.7);transition:.3s}.client-logo:hover img{filter:grayscale(0%) opacity(1)}.placeholder-logo{font-size:28px;margin-bottom:2px;transition:.3s}.client-logo:hover .placeholder-logo{transform:scale(1.1)}.dots{display:flex;justify-content:center;gap:7px;margin:12px 0}.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.dots i.active{background:var(--orange);width:20px;border-radius:5px}@keyframes marquee{to{transform:translateX(calc(-50% - 10px))}}@keyframes marquee-reverse{from{transform:translateX(calc(-50% - 10px))}to{transform:translateX(0)}}
.projects-section{padding-top:28px;padding-bottom:42px}.project-card{flex:0 0 calc(20% - 14px);min-width:210px;background:var(--card-bg);color:var(--ink);border:1px solid var(--line);border-radius:11px;overflow:hidden;scroll-snap-align:start}.project-thumb{height:130px}.project-info{padding:11px 12px}.project-info h3{font-size:14px;margin:0 0 5px}.project-info span{font-size:11px;color:var(--ink-soft)}.dark-controls{margin-top:5px}.dark-controls button{background:var(--card-bg);color:var(--ink);border-color:var(--line)}.testimonials-section{padding-top:25px;padding-bottom:48px}.testimonial-card{flex:0 0 calc(33.333% - 12px);min-width:280px;background:var(--card-bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:20px;scroll-snap-align:start}.quote-mark{font-size:30px;color:var(--orange)}.testimonial-card p{font-size:14px;line-height:1.65;min-height:58px}.person{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:13px}.person img,.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#ddd;display:grid;place-items:center}.person strong{display:block;font-size:12px;color:var(--ink)}.person small{font-size:11px;color:var(--ink-soft)}
.cta-section{background:var(--bg);padding:32px 0}.cta-box{background:var(--bg-soft);border-radius:18px;padding:25px 30px;display:flex;justify-content:space-between;align-items:center;gap:25px}.cta-box h2{font-size:25px;margin:0 0 6px;color:var(--ink)}.cta-box p{margin:0;font-size:14px;color:var(--ink-soft)}.cta-actions{display:flex;gap:10px;flex-wrap:wrap}.contact-section{background:var(--bg-soft);padding:58px 0}.contact-grid{display:grid;grid-template-columns:.8fr 1.05fr .5fr;gap:35px;align-items:stretch}.contact-info h2{font-size:34px;letter-spacing:-.04em;margin:8px 0;color:var(--ink)}.contact-info>p{font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:360px}.contact-item{display:flex;gap:16px;margin:24px 0}.contact-item>b{font-size:28px;color:var(--ink);margin-top:2px}.contact-item span{font-size:18px;font-weight:800;color:var(--ink)}.contact-item small{display:block;font-size:15px;color:var(--ink-soft);margin-top:6px}.contact-form-wrap{background:var(--card-bg);border-radius:12px;padding:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.ess-contact-form input,.ess-contact-form select,.ess-contact-form textarea{width:100%;border:1px solid var(--input-border);border-radius:5px;padding:11px;font:inherit;font-size:14px;outline:0;background:var(--input-bg);color:var(--ink)}.ess-contact-form input:focus,.ess-contact-form select:focus,.ess-contact-form textarea:focus{border-color:var(--orange)}.ess-contact-form textarea{min-height:85px;resize:vertical}.ess-contact-form .full{grid-column:1/-1}.hp{position:absolute!important;left:-9999px!important}.contact-form-wrap .btn{margin-top:10px;border:0;cursor:pointer}.contact-photo{border-radius:13px;overflow:hidden;min-height:100%;background:linear-gradient(145deg,#d9d9d3,#8d918e)}.office-scene{height:100%;min-height:310px;position:relative;background:linear-gradient(150deg,#ece8dc,#aeb2af 58%,#686d70)}.ceiling{position:absolute;inset:0 0 68% 0;background:repeating-linear-gradient(90deg,#fff 0 25px,#c7c8c2 26px 29px);opacity:.55}.office-lift{position:absolute;left:26%;top:18%;width:48%;height:72%;border:4px solid #d2d2ca;background:linear-gradient(90deg,#8b9398,#dfe4e6 48%,#7d868b 52%,#e2e6e8);box-shadow:0 20px 30px #0002}.office-lift:after{content:"ESS";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:32px;font-weight:900;color:#1112}
.site-footer{background:var(--bg);color:var(--ink);padding:42px 0 18px;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1.2fr;gap:30px}.footer-brand p{font-size:13px;line-height:1.7;color:var(--ink-soft);max-width:290px}.footer-grid h4{font-size:13px;margin:2px 0 15px;color:var(--ink)}.footer-grid>div:not(.footer-brand)>a,.footer-grid>div:not(.footer-brand)>span{display:block;color:var(--ink-soft);font-size:13px;margin:9px 0;line-height:1.5}.socials{display:flex;gap:8px;margin-top:15px}.socials a{width:27px;height:27px;border:1px solid var(--line);color:var(--ink);border-radius:50%;display:grid;place-items:center;font-size:10px}.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:14px;color:var(--ink-soft);font-size:12px;display:flex;justify-content:space-between}.footer-bottom a{color:var(--ink-soft)}.floating-actions{position:fixed;right:18px;bottom:18px;z-index:90;display:grid;gap:8px}
.section-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:10px}
.section-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--header-line);background:var(--header-bg);backdrop-filter:blur(8px);color:var(--ink);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.section-nav button:hover{background:var(--orange);border-color:var(--orange);color:#111}
main>section{scroll-margin-top:74px}.floating-actions a{width:46px;height:46px}.float-wa{font-size:14px}
.section,.stats-section,.dark-section,.cta-section,.contact-section{opacity:1;transform:none;min-height:100vh;min-height:100svh;display:flex;align-items:center}.is-visible{opacity:1}
.generic-page{padding:150px 0 100px;max-width:820px;color:var(--ink)}.generic-page h1{font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.03em;margin:0 0 24px;color:var(--ink)}
.post-cat-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.post-cat-badges a{background:var(--soft);color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:20px;text-decoration:none}.post-cat-badges a:hover{background:var(--orange);color:#fff}.generic-page .page-content,.generic-page .page-content p{font-size:15px;line-height:1.8;color:var(--ink-soft)}.generic-page .page-content img{border-radius:14px;margin:20px 0}.generic-page.error-404{text-align:center;max-width:600px}.generic-page.error-404 p{font-size:15px;color:var(--ink-soft);line-height:1.7}.post-navigation{display:flex;justify-content:space-between;gap:20px;margin-top:50px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;font-weight:800}.post-navigation a{color:var(--orange)}.archive-description{font-size:13px;color:var(--ink-soft);margin:-10px 0 30px}.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:20px}.archive-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card-bg)}.archive-card-thumb img{aspect-ratio:16/10;object-fit:cover}.archive-card h2{font-size:16px;margin:16px 16px 8px;line-height:1.3}.archive-card h2 a{color:var(--ink)}.archive-excerpt{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 16px 18px}
.comments-area{margin-top:60px;padding-top:40px;border-top:1px solid var(--line)}.comments-title{font-size:22px;margin:0 0 24px;letter-spacing:-.02em}.comment-list{list-style:none;margin:0 0 20px;padding:0}.comment-list .children{list-style:none;margin:0;padding-left:48px}.comment-list li{margin-bottom:22px}.comment-body{display:flex;gap:14px}.comment-body .avatar{border-radius:50%;flex:none}.comment-meta{margin-bottom:6px}.comment-author .fn{font-weight:800;font-size:14px;font-style:normal}.comment-metadata{font-size:12px;color:var(--ink-mute)}.comment-metadata a{color:inherit}.comment-content p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:6px 0}.comment-reply-link{font-size:12px;font-weight:800;color:var(--orange)}.comment-awaiting-moderation{font-size:12px;color:#b06a00;font-style:italic}.no-comments{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.comment-respond{margin-top:20px}.comment-reply-title{font-size:18px;margin:0 0 16px}.comment-form p{margin:0 0 16px}.comment-form label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid var(--input-border);border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;background:var(--input-bg);color:var(--ink)}.comment-form textarea{min-height:120px;resize:vertical}.comment-form .required{color:var(--orange)}.comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}.comment-form-cookies-consent input{width:auto}
@media(max-width:1100px){.container{width:min(var(--max),calc(100% - 44px))}.main-nav{gap:17px}.main-nav>a,.main-nav>.has-dropdown>a{font-size:14px}.hero-copy h1{font-size:66px}.hero-proof{margin-left:0}.service-card{flex-basis:calc(33.333% - 12px)}.product-grid{grid-template-columns:repeat(2,1fr)}.project-card{flex-basis:calc(33.333% - 12px)}.footer-grid{grid-template-columns:1.5fr 1fr 1fr;row-gap:25px}.contact-grid{grid-template-columns:1fr 1.25fr}.contact-photo{display:none}}
@media(max-width:800px){.site-header{height:66px}.nav-wrap{position:relative;justify-content:space-between}.main-nav{display:none;position:absolute;left:-22px;right:-22px;top:66px;background:var(--bg);border-top:1px solid var(--header-line);padding:14px 22px 20px;flex-direction:column;align-items:flex-start;gap:0}.main-nav.open{display:flex}.main-nav>a,.main-nav>.has-dropdown>a{width:100%;padding:12px 0}.main-nav>a:not(.nav-quote):after,.main-nav>.has-dropdown>a:not(.nav-quote):after{bottom:6px}.has-dropdown{position:static}.has-dropdown:hover>a:after,.has-dropdown:focus-within>a:after{transform:none}.has-dropdown .dropdown{display:none;opacity:1;visibility:visible;transform:none;position:static;box-shadow:none;border:0;background:none;padding:0 0 4px 14px;margin-top:2px;backdrop-filter:none;-webkit-backdrop-filter:none}.has-dropdown.open>.dropdown{display:flex}.has-dropdown>a:after{transition:transform .2s}.has-dropdown.open>a:after{transform:rotate(180deg)}.dropdown .has-dropdown .dropdown{padding-left:14px}.has-dropdown .dropdown a{padding:8px 0;font-size:12px;color:var(--ink-soft);width:auto}.has-dropdown .dropdown a:before{display:none}.has-dropdown .dropdown a:hover{padding-left:8px;background:none}.nav-quote{width:auto!important;padding:12px 20px!important;margin-top:8px}.nav-toggle{display:block}.hero-section{min-height:100vh;min-height:100svh}.hero-inner{min-height:calc(100vh - 74px);min-height:calc(100svh - 74px);align-items:flex-start;padding-top:100px}.hero-copy{max-width:100%}.hero-proof{position:absolute;right:0;bottom:120px;width:130px}.hero-copy h1{font-size:56px}.hero-features{max-width:100%;overflow-x:auto}.hero-features span{min-width:145px}.section-head{align-items:flex-start;flex-direction:column}.service-card{flex-basis:calc(50% - 9px)}.about-grid{grid-template-columns:1fr;gap:50px}.contact-grid{grid-template-columns:1fr}.contact-photo{display:block;min-height:280px}.stat-bar{grid-template-columns:repeat(3,1fr)}.stat-bar>div:nth-child(3){border-right:0}.stat-bar>div:nth-child(n+4){border-top:1px solid var(--line)}.footer-grid{grid-template-columns:1fr 1fr}main>section{scroll-margin-top:66px}.section-nav{right:12px;gap:8px}.section-nav button{width:38px;height:38px;font-size:14px}.hero-slide-dots{left:0;right:0;bottom:16px;justify-content:center}.generic-page{padding:110px 0 60px}.archive-grid{grid-template-columns:1fr}.comment-list .children{padding-left:24px}.products-section .section-head{align-items:stretch;gap:15px}.product-search-wrap{width:100%}.product-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;-ms-overflow-style:none}.product-pills::-webkit-scrollbar{display:none}.product-pills button{white-space:nowrap}}
@media(max-width:560px){.container{width:calc(100% - 28px)}.hero-copy h1{font-size:45px}.hero-copy>p{font-size:14px}.hero-proof{display:none}.hero-features{display:grid;grid-template-columns:1fr 1fr}.hero-features span{border-bottom:1px solid #30343a}.hero-features span:nth-child(odd){border-right:1px solid #30343a}.service-card{flex-basis:85%}.stat-bar{grid-template-columns:1fr 1fr}.stat-bar>div{border-right:1px solid var(--line)!important}.stat-bar>div:nth-child(even){border-right:0!important}.stat-bar>div:nth-child(n+3){border-top:1px solid var(--line)}.about-image{height:350px}.product-grid{grid-template-columns:1fr;gap:14px}.product-card{display:flex;align-items:stretch;height:120px}.product-thumb{width:115px;height:100%;flex-shrink:0;aspect-ratio:auto}.product-card-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;justify-content:center}.product-card h3{font-size:15px;margin:2px 0 4px}.product-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:auto;margin:0 0 6px;font-size:12px}.project-card{flex-basis:75%}.testimonial-card{flex-basis:90%}.cta-box{display:block}.cta-actions{margin-top:18px}.form-grid{grid-template-columns:1fr}.ess-contact-form .full{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr;gap:35px 15px}.footer-brand,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{display:block;line-height:1.8}.footer-bottom span{display:block;margin-top:6px}}
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(5px); }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-box { background: var(--card-bg); padding: 35px 30px; border-radius: 20px; max-width: 400px; width: 90%; text-align: center; position: relative; transform: translateY(20px); transition: 0.3s; box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.modal-overlay.show .modal-box { transform: translateY(0); }
.modal-close { position: absolute; right: 15px; top: 15px; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--ink-soft); }
.modal-close:hover { color: var(--orange); }
.modal-content h3 { font-size: 20px; margin: 0 0 10px; color: var(--ink); }
.modal-content p { font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.modal-icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 15px; font-size: 24px; color: #fff; }
.modal-icon.mail { background: #4caf50; }
.modal-icon.wa { background: #25d366; }
.modal-icon.call { background: var(--orange); }
.client-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; }
.placeholder-logo { font-size: 24px; margin-bottom: -4px; }

/* Theme mode hero section adjustments */
[data-theme="light"] .hero-video-wrap { display: none !important; }
[data-theme="dark"] .hero-slide,
[data-theme="dark"] .hero-slide-dots { display: none !important; }

/* Day mode smooth sky blue text for hero section */
[data-theme="light"] .hero-copy h1,
[data-theme="light"] .hero-copy p,
[data-theme="light"] .hero-features b,
[data-theme="light"] .hero-proof strong {
  color: var(--hero-day-color, #87CEEB) !important;
}
[data-theme="dark"] .hero-copy h1,
[data-theme="dark"] .hero-copy p,
[data-theme="dark"] .hero-features b,
[data-theme="dark"] .hero-proof strong {
  color: #ffffff !important;
}

/* Testimonial Marquee Styles */
.testimonials-section {
  padding-top: 60px;
  padding-bottom: 70px;
}
.testimonial-window {
  background: transparent;
  margin-top: 40px;
  overflow: hidden;
  padding: 20px 0;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.testimonial-track {
  display: flex;
  width: max-content;
  gap: 25px;
  animation: marquee 50s linear infinite;
  padding: 10px;
}
.testimonial-track:hover {
  animation-play-state: paused;
}
.testimonial-card {
  flex: 0 0 380px;
  min-width: unset;
  scroll-snap-align: none;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border-color: var(--orange);
}
[data-theme="dark"] .testimonial-card {
  background: linear-gradient(145deg, #16181c, #111215);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
[data-theme="dark"] .testimonial-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.card-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity: 0;
  transition: 0.6s;
  pointer-events: none;
  border-radius: 50%;
}
.testimonial-card:hover .card-glow {
  opacity: 0.15;
}
.quote-mark {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 80px;
  color: var(--orange);
  opacity: 0.1;
  line-height: 1;
  font-family: Georgia, serif;
  transition: 0.4s;
}
.testimonial-card:hover .quote-mark {
  transform: scale(1.1) rotate(10deg);
  opacity: 0.2;
}
.stars {
  color: #f5b301;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
.testimonial-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 25px 0;
  flex: 1;
  position: relative;
  z-index: 2;
}
.person {
  display: flex;
  gap: 15px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  position: relative;
  z-index: 2;
}
.person img, .person .avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--orange);
  font-size: 18px;
  border: 2px solid var(--line);
}
.person strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 3px;
}
.person small {
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
@media (max-width: 768px) {
  .testimonial-track .testimonial-card {
    flex: 0 0 320px;
  }
}
@media (max-width: 480px) {
  .testimonial-track .testimonial-card {
    flex: 0 0 280px;
  }
}

/* Project Marquee Styles */
.project-window {
  background: transparent;
  margin-top: 34px;
  overflow: hidden;
  padding: 10px 0;
  width: 100%;
}
.project-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: marquee 50s linear infinite;
}
.project-track:hover {
  animation-play-state: paused;
}
.project-track .project-card {
  flex: 0 0 240px;
  min-width: unset;
  scroll-snap-align: none;
}

/* Redesigned Contact Section */
.redesigned-contact {
  grid-template-columns: 1fr 1.3fr !important;
  gap: 50px !important;
  align-items: center;
}
.redesigned-contact .contact-form-wrap {
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
[data-theme="dark"] .redesigned-contact .contact-form-wrap {
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.modern-form .form-grid {
  gap: 20px;
}
.modern-form .input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modern-form .input-group.full {
  grid-column: 1 / -1;
}
.modern-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.modern-form input, .modern-form select, .modern-form textarea {
  padding: 14px 16px !important;
  border-radius: 8px !important;
  border: 1px solid var(--input-border) !important;
  background: var(--input-bg) !important;
  transition: all 0.3s;
}
.modern-form input:focus, .modern-form select:focus, .modern-form textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 123, 22, 0.15) !important;
  outline: none;
}
.modern-form textarea {
  min-height: 120px !important;
}
.modern-form .btn-full {
  width: 100%;
  padding: 18px;
  font-size: 16px;
  margin-top: 15px;
}
@media (max-width: 992px) {
  .redesigned-contact {
    gap: 30px !important;
  }
  .redesigned-contact .contact-form-wrap {
    padding: 30px;
  }
}
@media (max-width: 800px) {
  .redesigned-contact {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .modern-form .form-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  .redesigned-contact .contact-form-wrap {
    padding: 22px;
    border-radius: 16px;
  }
  .contact-info h2 {
    font-size: 28px;
  }
  .contact-info > p {
    font-size: 14px;
  }
  .modern-form input, .modern-form select, .modern-form textarea {
    padding: 12px 14px !important;
  }
  .contact-item {
    margin: 18px 0;
  }
  .contact-item > b {
    font-size: 22px;
  }
  .contact-item span {
    font-size: 16px;
  }
}

/* Redesigned CTA Section */
.redesigned-cta {
  padding: 80px 0;
  background: var(--bg);
}
.cta-box-modern {
  position: relative;
  background: linear-gradient(135deg, var(--card-bg), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 60px 40px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
[data-theme="dark"] .cta-box-modern {
  background: linear-gradient(135deg, #15171b, #101215);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.cta-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  padding-bottom: 70%;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity: 0.15;
  filter: blur(60px);
  pointer-events: none;
}
[data-theme="dark"] .cta-glow {
  opacity: 0.2;
}
.cta-box-modern .cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}
.cta-box-modern h2 {
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: var(--ink);
}
.cta-box-modern p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.cta-box-modern .cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-outline-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 800;
  border: 2px solid var(--line);
  color: var(--ink);
  background: transparent;
  transition: 0.3s;
}
.btn-outline-modern:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}
.btn-orange.modern-btn {
  padding: 15px 26px;
  font-size: 15px;
  box-shadow: 0 10px 20px rgba(255, 123, 22, 0.3);
}
.btn-orange.modern-btn:hover {
  box-shadow: 0 15px 25px rgba(255, 123, 22, 0.4);
}
@media (max-width: 600px) {
  .cta-box-modern {
    padding: 40px 20px;
  }
  .cta-box-modern .cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .btn-outline-modern, .btn-orange.modern-btn {
    width: 100%;
  }
}

/* Redesigned Stats Section */
.stats-section-new {
  background: var(--bg-alt);
  padding: 100px 0;
}
.stat-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 25px;
}
.stat-card-modern {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 35px 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
[data-theme="dark"] .stat-card-modern {
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.stat-card-modern:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.stat-icon {
  font-size: 36px;
  margin-bottom: 15px;
  color: var(--orange);
  opacity: 0.9;
}
.stat-card-modern strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  font-weight: 900;
  margin-bottom: 8px;
}
.stat-card-modern span {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .stat-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .stat-grid-modern {
    grid-template-columns: 1fr;
  }
}

/* Single Product Page Styles */
.single-product-page {
  padding-top: 74px;
  background: var(--bg);
}
.product-hero {
  background: var(--bg-soft);
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.product-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.product-gallery .main-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  object-fit: cover;
}
.product-gallery .main-image.placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #eee, #ccc);
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 60px;
  font-weight: 900;
  color: #fff;
}
[data-theme="dark"] .product-gallery .main-image img {
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.product-categories {
  margin-bottom: 15px;
  display: flex;
  gap: 8px;
}
.cat-badge {
  background: rgba(255, 123, 34, 0.1);
  color: var(--orange);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  color: var(--ink);
}
.product-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 25px;
}
.product-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-highlights li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-highlights li b {
  color: var(--orange);
}
.product-actions {
  display: flex;
  gap: 15px;
}
.dark-outline {
  border-color: var(--line);
  color: var(--ink);
}
.dark-outline:hover {
  background: var(--line);
}

.product-details {
  padding: 60px 0;
}
.details-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
}
.section-title {
  font-size: 28px;
  margin: 0 0 30px;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
  padding-bottom: 15px;
}
.content-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.content-body h2, .content-body h3, .content-body h4 {
  color: var(--ink);
  margin: 1.5em 0 0.5em;
}
.content-body ul, .content-body ol {
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}
.content-body li {
  margin-bottom: 8px;
}
.content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 14px;
}
.content-body th, .content-body td {
  border: 1px solid var(--line);
  padding: 12px 15px;
  text-align: left;
}
.content-body th {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 700;
}
.product-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.sidebar-widget {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
}
.support-widget {
  background: linear-gradient(135deg, var(--orange), #d96300);
  color: #fff;
  border: none;
}
.support-widget h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #fff;
}
.support-widget p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
  color: rgba(255,255,255,0.9);
}
.specs-widget h3 {
  font-size: 18px;
  margin: 0 0 15px;
  color: var(--ink);
}
.specs-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.specs-widget li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}
.specs-widget li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.specs-widget li::before {
  content: "✦";
  color: var(--orange);
  margin-right: 8px;
}

@media (max-width: 900px) {
  .product-hero-grid, .details-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 600px) {
  .product-highlights {
    grid-template-columns: 1fr;
  }
  .product-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   GLOBAL RESPONSIVE POLISH & ALL-DEVICE FRIENDLINESS
   ========================================================================== */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Base structural fixes for smaller screens */
@media (max-width: 1200px) {
  .hero-copy h1 { font-size: clamp(48px, 6vw, 76px); }
}

@media (max-width: 992px) {
  .section, .stats-section-new, .redesigned-cta, .contact-section, .about-section, .products-section { padding: 65px 0; }
  .cta-box-modern { padding: 45px 30px; }
  .stat-card-modern { padding: 25px 15px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); row-gap: 35px; }
  .contact-info h2 { font-size: 28px; }
}

@media (max-width: 768px) {
  /* Hero Section Mobile-Friendly Centering */
  .hero-inner { flex-direction: column; justify-content: center; padding-top: 90px; text-align: center; }
  .hero-copy { max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .hero-actions { justify-content: center; width: 100%; }
  
  /* Make the floating proof box behave normally on tablet */
  .hero-proof { position: relative !important; right: auto !important; bottom: auto !important; margin: 30px auto 0 !important; width: 100% !important; max-width: 400px; display: flex !important; flex-direction: row; justify-content: space-around; gap: 15px; }
  .hero-proof div+div { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; border-left: 1px solid #3b3e43; padding-left: 15px; }
  
  /* Sections Centered Layout */
  .section-head { flex-direction: column; text-align: center; align-items: center; }
  .section-head p { margin: 15px auto 0; }
  
  /* Grids to 1 column */
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .about-media { margin-bottom: 20px; }
  .check-list, .products-feature ul { display: inline-block; text-align: left; }
  
  /* Redesigned Contact spacing */
  .redesigned-contact { gap: 30px !important; }
  .contact-item { justify-content: center; }
  
  /* Service Slider */
  .service-card { flex-basis: calc(50% - 9px); min-width: 200px; }
}

@media (max-width: 576px) {
  /* Tighten padding on phones */
  .section, .stats-section-new, .redesigned-cta, .contact-section { padding: 45px 0; }
  .hero-inner { padding-top: 70px; }
  
  /* Hero Typography & Elements */
  .hero-copy h1 { font-size: clamp(34px, 10vw, 48px); }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; }
  
  .hero-features { flex-direction: column; text-align: left; width: 100%; }
  .hero-features span { border-right: none !important; border-bottom: 1px solid #30343a !important; width: 100%; padding: 12px 15px; }
  .hero-features span:last-child { border-bottom: none !important; }
  
  .hero-proof { flex-direction: column; width: 100%; max-width: 300px; text-align: center; }
  .hero-proof div+div { border-left: none !important; border-top: 1px solid #3b3e43 !important; padding-left: 0 !important; margin-top: 15px !important; padding-top: 15px !important; }
  
  /* Grids & Cards */
  .stat-grid-modern { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .service-card { flex-basis: 100%; min-width: 100%; }
  .project-track .project-card { flex: 0 0 280px; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; text-align: center; }
  .footer-brand { align-items: center; display: flex; flex-direction: column; }
  .footer-brand p { margin: 0 auto; }
  .socials { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  
  /* CTA Box */
  .cta-box-modern { padding: 35px 20px; }
  .cta-box-modern h2 { font-size: 26px; }
  .btn-outline-modern, .btn-orange.modern-btn { width: 100%; justify-content: center; }
}