:root{--ink:#1f1b18;--muted:#6f665e;--paper:#f7f2eb;--paper-2:#eee4d8;--gold:#bd9868;--gold-dark:#8b6d48;--line:rgba(64,49,37,.18);--dark:#1e1b19;--white:#fff;--shadow:0 18px 50px rgba(33,26,20,.14);--radius:16px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Cairo",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.container{width:min(1180px,calc(100% - 36px));margin-inline:auto}.skip-link{position:fixed;inset-inline-start:16px;top:-60px;background:#fff;padding:10px 16px;z-index:9999;border-radius:8px}.skip-link:focus{top:16px} .site-header{position:absolute;top:0;inset-inline:0;z-index:100;color:#fff;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.06));transition:.35s}.site-header.scrolled{position:fixed;background:rgba(25,21,18,.88);backdrop-filter:blur(14px);box-shadow:0 10px 35px rgba(0,0,0,.18)}.header-inner{min-height:82px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}.brand{display:flex;flex-direction:column;align-items:center;line-height:1}.brand-mark{font-size:34px;letter-spacing:3px}.brand-sub{font-size:12px;margin-top:7px}.main-nav{display:flex;align-items:center;justify-content:center;gap:28px;font-size:14px}.main-nav a{position:relative;padding:29px 0 25px;transition:color .25s}.main-nav a::after{content:"";position:absolute;inset-inline:0;bottom:14px;height:2px;background:var(--gold);transform:scaleX(0);transition:.3s}.main-nav a:hover{color:#e2c49c}.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)} .lang-toggle{min-width:86px;height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:13px;transition:color .3s,background .3s,border-color .3s,transform .3s,box-shadow .3s}.lang-toggle:hover,.lang-toggle:focus-visible{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(189,152,104,.28)}.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:9px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:#fff;margin:6px 0;border-radius:2px;transition:.3s} .hero{position:relative;height:min(750px,88vh);min-height:620px;color:#fff;overflow:hidden;background:#17130f}.hero-slider,.hero-slide{position:absolute;inset:0}.hero-slide{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}.hero-slide.is-active{opacity:1;visibility:visible;z-index:2}.hero-media{position:absolute;inset:-3%;background:url('../assets/images/reference.jpeg') center/cover no-repeat;transform:scale(1.08);transition:transform 7.5s ease}.hero-slide.is-active .hero-media{transform:scale(1)}.hero-media-one{background-position:center 47%}.hero-media-two{background-position:36% 52%;filter:saturate(.8)}.hero-media-three{background-position:72% 48%;filter:contrast(1.04)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.2),rgba(10,8,6,.72) 70%,rgba(10,8,6,.84)),linear-gradient(to top,rgba(11,8,6,.58),transparent 55%)}.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:132px;padding-bottom:74px;max-width:1180px}.eyebrow{font-size:13px;letter-spacing:2.2px;margin:0 0 14px;color:#f1e0c8}.hero h1,.hero-title{font-size:clamp(48px,6.4vw,82px);line-height:1.12;margin:0 0 18px;max-width:760px;font-weight:800}.hero-copy{max-width:650px;font-size:18px;color:rgba(255,255,255,.88);margin:0 0 30px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.hero-animate{opacity:0;transform:translateX(85px);filter:blur(3px)}.hero-slide.is-active .hero-animate{animation:heroTextIn .85s cubic-bezier(.2,.75,.25,1) forwards}.hero-slide.is-active .eyebrow{animation-delay:.15s}.hero-slide.is-active h1,.hero-slide.is-active .hero-title{animation-delay:.29s}.hero-slide.is-active .hero-copy{animation-delay:.43s}.hero-slide.is-active .hero-actions{animation-delay:.57s}@keyframes heroTextIn{to{opacity:1;transform:translateX(0);filter:blur(0)}} .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:3px;border:1px solid transparent;font-weight:700;transition:.3s}.btn::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.14);transform:translateX(105%) skewX(-18deg);transition:.45s}.btn:hover::before{transform:translateX(-105%) skewX(-18deg)}.btn-primary{background:var(--gold);color:#fff;box-shadow:0 12px 25px rgba(150,111,63,.22)}.btn-primary:hover{background:var(--gold-dark);transform:translateY(-3px)}.btn-outline{border-color:rgba(255,255,255,.72);color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(4px)}.btn-outline:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}.btn-light{border-color:var(--gold);color:var(--gold-dark);background:rgba(255,255,255,.55)} .slider-arrow{position:absolute;top:56%;z-index:8;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:rgba(15,12,10,.28);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.15)}.slider-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.slider-prev{left:32px}.slider-next{right:32px}.slider-arrow:hover{background:var(--gold);border-color:var(--gold);transform:scale(1.08);box-shadow:0 14px 30px rgba(189,152,104,.3)} .slider-pagination{position:absolute;z-index:8;right:72px;bottom:96px;display:flex;flex-direction:column;align-items:center;gap:0}.slider-pagination::before,.slider-pagination::after{content:"";width:1px;height:31px;background:rgba(255,255,255,.54)}.slider-dot{width:18px;height:18px;border:0;background:transparent;position:relative;cursor:pointer;padding:0}.slider-dot::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);inset:50%;transform:translate(-50%,-50%);transition:.3s}.slider-dot.is-active::before{width:9px;height:9px;background:var(--gold);box-shadow:0 0 0 4px rgba(255,255,255,.22)}.hero-badge{position:absolute;bottom:30px;right:75px;z-index:8;font-family:Georgia,serif;font-size:34px;letter-spacing:3px}.hero-scroll{position:absolute;bottom:22px;left:50%;z-index:8;width:22px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:15px;transform:translateX(-50%)}.hero-scroll span{position:absolute;width:3px;height:8px;background:#fff;border-radius:2px;left:50%;top:8px;transform:translateX(-50%);animation:scrollDrop 1.8s infinite}@keyframes scrollDrop{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,17px)}} .features-section{position:relative;z-index:10;margin-top:-1px;background:linear-gradient(90deg,#f0e8de,#fbf7f1);border-bottom:1px solid var(--line);padding-top:6px}.features-curve{position:absolute;left:-5%;right:-5%;top:-34px;height:48px;background:linear-gradient(90deg,#f0e8de,#fbf7f1);border-radius:50% 50% 0 0/100% 100% 0 0}.features-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);padding:20px 0 34px}.feature-card{text-align:center;padding:12px 20px;border-inline-start:1px solid var(--line);transition:.35s}.feature-card:last-child{border:0}.feature-card:hover{transform:translateY(-8px)}.feature-card .icon{display:block;font-size:31px;color:var(--gold);margin-bottom:6px;transition:.5s}.feature-card:hover .icon{transform:rotateY(180deg) scale(1.12)}.feature-card h3{font-size:16px;margin:0 0 4px}.feature-card p{font-size:12px;color:var(--muted);margin:0} .section{padding:68px 0}.section-heading{text-align:center;margin-bottom:30px}.section-heading h2{font-size:34px;margin:0}.section-heading span{display:block;width:46px;height:3px;background:var(--gold);margin:9px auto 0}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.service-card{position:relative;min-height:330px;border-radius:8px;overflow:hidden;background-size:cover;background-position:center;box-shadow:var(--shadow);transition:.45s}.service-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.95),rgba(10,9,8,.08));transition:.45s}.service-card:hover{transform:translateY(-10px)}.service-card:hover::before{background:linear-gradient(to top,rgba(10,9,8,.96),rgba(10,9,8,.2))}.service-content{position:absolute;inset:auto 22px 23px;color:#fff;text-align:center}.service-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#f4eee7;color:var(--gold-dark);font-size:27px;margin:0 auto 12px;transition:.4s}.service-card:hover .service-icon{transform:translateY(-6px) rotate(6deg)}.service-content h3{font-size:22px;margin:0 0 5px}.service-content p{font-size:13px;color:rgba(255,255,255,.82);margin:0 0 14px}.service-content a{font-size:13px;color:#d4b58b}.service-transport{background-image:url('../assets/images/reference.jpeg');background-position:92% 48%}.service-excavation{background-image:url('../assets/images/reference.jpeg');background-position:69% 40%}.service-materials{background-image:url('../assets/images/reference.jpeg');background-position:34% 64%}.service-stone{background-image:url('../assets/images/reference.jpeg');background-position:10% 58%} .products-section{background:#f4eee6}.product-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.products-section .product-card{aspect-ratio:.78;border-radius:5px;position:relative;overflow:hidden;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.6);transition:.35s}.products-section .product-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 15px 28px rgba(0,0,0,.16)}.products-section .product-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.68),transparent 58%)}.products-section .product-card span{position:absolute;z-index:2;bottom:8px;inset-inline:6px;text-align:center;color:#fff;font-size:11px}.products-section .p2{filter:brightness(1.1)}.products-section .p3{filter:contrast(1.2)}.products-section .p4{filter:saturate(.5)}.products-section .p5{filter:brightness(.8)}.products-section .p6{filter:sepia(.25)}.products-section .p7{filter:contrast(.8)} .projects-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.project-card{height:190px;margin:0;background-image:url('../assets/images/reference.jpeg');background-size:cover;position:relative;overflow:hidden;transition:.4s}.project-card:hover{transform:scale(1.025);z-index:2}.project-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%);opacity:0;transition:.3s}.project-card figcaption{position:absolute;z-index:2;inset:auto 14px 12px;color:#fff;transform:translateY(18px);opacity:0;transition:.3s}.project-card:hover::after,.project-card:hover figcaption{opacity:1;transform:none}.project-1{background-position:3% 82%}.project-2{background-position:23% 74%}.project-3{background-position:46% 82%}.project-4{background-position:67% 74%}.project-5{background-position:91% 82%}.center{text-align:center;margin-top:18px} .stats-section{background:linear-gradient(rgba(24,20,17,.92),rgba(24,20,17,.92)),url('../assets/images/reference.jpeg') center/cover;color:#dcc09a;padding:30px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stats-grid article{text-align:center;border-inline-start:1px solid rgba(255,255,255,.13)}.stats-grid article:last-child{border:0}.stats-grid strong{display:block;font-size:36px}.stats-grid span{font-size:14px;color:#f2e9df}.site-footer{background:#eee5da}.footer-grid{padding:46px 0;display:grid;grid-template-columns:1.2fr 1.5fr .8fr .8fr 1.1fr;gap:30px}.footer-grid section{padding-inline-start:20px;border-inline-start:1px solid var(--line)}.footer-grid section:first-child{border:0}.footer-grid h3{margin:0 0 14px;font-size:17px}.footer-grid p,.footer-grid li{font-size:13px;color:#5d554e}.footer-grid ul{padding:0;list-style:none;margin:0}.footer-grid li{margin:5px 0}.footer-logo{font-family:serif;font-size:43px;line-height:1;margin-top:14px}.footer-logo small{display:block;font-family:"Cairo";font-size:12px}.map-card{height:130px;border-radius:8px;background:linear-gradient(135deg,#dce4d3,#f8f5e9);display:grid;place-items:center;align-content:center}.map-card span{font-size:34px}.map-card small{color:#777}.socials{display:flex;gap:8px;margin-top:15px}.socials a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-size:12px;transition:.3s}.socials a:hover{transform:translateY(-4px);background:var(--gold-dark)}.copyright{text-align:center;background:#201d1a;color:#cfc5b9;padding:12px;font-size:12px}.whatsapp{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#21b954;color:#fff;font-size:26px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:waPulse 2.2s infinite}@keyframes waPulse{50%{box-shadow:0 0 0 10px rgba(33,185,84,0),0 10px 30px rgba(0,0,0,.25)}}.back-to-top{position:fixed;left:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow);cursor:pointer;opacity:0;pointer-events:none;transition:.25s}.back-to-top.show{opacity:1;pointer-events:auto}.reveal{opacity:0;transform:translateY(45px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none} @media(max-width:1050px){.main-nav{gap:16px;font-size:12px}.features-grid{grid-template-columns:repeat(3,1fr)}.feature-card:nth-child(4){border-inline-start:0}.services-grid{grid-template-columns:repeat(2,1fr)}.product-strip{overflow-x:auto;grid-template-columns:repeat(9,130px);padding-bottom:8px}.projects-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.site-header{position:fixed;background:rgba(25,21,18,.94)}.header-inner{grid-template-columns:auto 1fr auto;min-height:68px}.menu-toggle{display:block;order:3}.brand{order:1}.lang-toggle{order:2;margin-inline-start:auto}.main-nav{position:fixed;top:68px;inset-inline:0;background:#211d1a;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 24px;transform:translateY(-130%);transition:.3s;z-index:-1}.main-nav.open{transform:none}.main-nav a{padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}.hero{height:650px;min-height:650px}.hero-content{padding-top:112px;padding-bottom:60px;align-items:flex-start}.hero h1,.hero-title{font-size:45px}.hero-copy{font-size:16px}.slider-arrow{width:44px;height:44px;top:auto;bottom:76px}.slider-prev{left:18px}.slider-next{right:18px}.slider-pagination{right:29px;bottom:130px}.hero-badge{right:25px;bottom:28px}.hero-scroll{display:none}.features-curve{top:-24px;height:36px}.features-grid{grid-template-columns:repeat(2,1fr)}.feature-card:nth-child(odd){border-inline-start:0}.services-grid{grid-template-columns:1fr}.projects-grid{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr;gap:20px}.stats-grid article:nth-child(odd){border:0}.footer-grid{grid-template-columns:1fr}.footer-grid section{border:0;border-bottom:1px solid var(--line);padding:0 0 18px}.footer-grid section:last-child{border:0}.section{padding:48px 0}} @media(max-width:460px){.container{width:min(100% - 24px,1180px)}.hero h1,.hero-title{font-size:38px}.hero-actions .btn{width:100%}.features-grid{grid-template-columns:1fr}.feature-card{border:0;border-bottom:1px solid var(--line)}.projects-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}.stats-grid article{border:0}.slider-pagination{display:none}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}} /* ===== Requested polish: centered slider controls, counters and animated footer ===== */ .slider-pagination{ right:auto; left:50%; bottom:72px; transform:translateX(-50%); flex-direction:row; gap:7px; } .slider-pagination::before,.slider-pagination::after{display:none} .slider-dot{width:17px;height:17px} .slider-dot::before{width:6px;height:6px} .slider-dot.is-active::before{width:10px;height:10px;box-shadow:0 0 0 5px rgba(255,255,255,.2)} .hero-scroll{bottom:15px} .hero-badge{bottom:28px} .projects-cta{ position:relative; overflow:hidden; border-color:var(--gold); color:var(--gold-dark); background:transparent; transition:color .35s ease,background .35s ease,transform .35s ease,box-shadow .35s ease; } .projects-cta::before{ content:""; position:absolute; inset:0; background:var(--gold); transform:translateY(102%); transition:transform .35s cubic-bezier(.2,.75,.25,1); z-index:-1; } .projects-cta:hover,.projects-cta:focus-visible{ color:#fff; transform:translateY(-3px); box-shadow:0 12px 28px rgba(189,152,104,.3); } .projects-cta:hover::before,.projects-cta:focus-visible::before{transform:translateY(0)} .stats-grid article{position:relative;overflow:hidden;transition:transform .35s ease,background .35s ease} .stats-grid article::after{content:"";position:absolute;inset:auto 20% 0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .45s ease} .stats-grid article:hover{transform:translateY(-5px);background:rgba(255,255,255,.025)} .stats-grid article:hover::after{transform:scaleX(1)} .stats-grid strong{font-variant-numeric:tabular-nums;min-height:50px;text-shadow:0 5px 24px rgba(189,152,104,.22)} .counter.is-counting{animation:counterGlow .9s ease both} @keyframes counterGlow{50%{transform:scale(1.08);text-shadow:0 0 24px rgba(220,192,154,.55)}} .site-footer{position:relative;overflow:hidden} .site-footer::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(189,152,104,.15),transparent 68%);top:-240px;right:-180px;pointer-events:none} .footer-grid section{position:relative;transition:transform .35s ease,background .35s ease,box-shadow .35s ease;opacity:0;transform:translateY(24px)} .footer-grid.is-visible section{animation:footerSectionIn .65s cubic-bezier(.2,.75,.25,1) forwards} .footer-grid.is-visible section:nth-child(2){animation-delay:.08s}.footer-grid.is-visible section:nth-child(3){animation-delay:.16s}.footer-grid.is-visible section:nth-child(4){animation-delay:.24s}.footer-grid.is-visible section:nth-child(5){animation-delay:.32s} @keyframes footerSectionIn{to{opacity:1;transform:translateY(0)}} .footer-grid section:hover{transform:translateY(-5px)} .footer-grid h3{position:relative;display:inline-block} .footer-grid h3::after{content:"";position:absolute;right:0;bottom:-6px;width:24px;height:2px;background:var(--gold);transition:width .35s ease} .footer-grid section:hover h3::after{width:100%} .footer-links a{position:relative;display:inline-flex;align-items:center;color:#5d554e;padding:3px 0;transition:color .28s ease,transform .28s ease} .footer-links a::before{content:"←";font-size:12px;color:var(--gold);opacity:0;transform:translateX(8px);transition:.28s ease;margin-left:7px} .footer-links a:hover,.footer-links a:focus-visible{color:var(--gold-dark);transform:translateX(-4px)} .footer-links a:hover::before,.footer-links a:focus-visible::before{opacity:1;transform:translateX(0)} .contact-list li{transition:color .28s ease,transform .28s ease} .contact-list li:hover{color:var(--gold-dark);transform:translateX(-5px)} .map-card{transition:transform .4s ease,box-shadow .4s ease} .map-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 32px rgba(91,70,45,.14)} .footer-logo{transition:letter-spacing .4s ease,color .4s ease} .footer-grid section:hover .footer-logo{letter-spacing:5px;color:var(--gold-dark)} .socials{gap:10px} .socials a{width:36px;height:36px;position:relative;overflow:hidden;border:1px solid transparent} .socials a::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scale(0);transition:transform .3s ease} .socials a:hover,.socials a:focus-visible{transform:translateY(-5px) rotate(-4deg);background:var(--gold-dark);border-color:rgba(255,255,255,.7);box-shadow:0 10px 22px rgba(126,91,50,.25)} .socials a:hover::before,.socials a:focus-visible::before{transform:scale(.78)} .socials svg{position:relative;z-index:1;width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.8;transition:color .3s ease,transform .3s ease} .socials a:hover svg,.socials a:focus-visible svg{color:var(--gold-dark);transform:scale(1.05)} .socials svg rect,.socials svg circle{fill:none}.socials svg .fill-dot,.socials svg .fill-play{fill:currentColor;stroke:none} .copyright{position:relative;background:linear-gradient(90deg,#181512,#29231e,#181512);background-size:200% 100%;animation:copyrightGlow 8s linear infinite} @keyframes copyrightGlow{to{background-position:-200% 0}} @media(max-width:760px){ .slider-pagination{right:auto;left:50%;bottom:70px;transform:translateX(-50%);display:flex} .hero-badge{bottom:26px} } @media(max-width:460px){ .slider-pagination{display:flex;bottom:68px} } /* ========================================================= Premium construction imagery set – v4 Remote previews are loaded from Pexels and optimized by CDN. ========================================================= */ .hero-media-one{ background-image:url('https://images.pexels.com/photos/29506742/pexels-photo-29506742.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-position:center 52%; } .hero-media-two{ background-image:url('https://images.pexels.com/photos/36506004/pexels-photo-36506004.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-position:center 48%; filter:saturate(.88) contrast(1.05); } .hero-media-three{ background-image:url('https://images.pexels.com/photos/35177799/pexels-photo-35177799.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-position:center 60%; filter:saturate(.9) contrast(1.06); } .service-transport{ background-image:url('https://images.pexels.com/photos/15325401/pexels-photo-15325401.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .service-excavation{ background-image:url('https://images.pexels.com/photos/34703864/pexels-photo-34703864.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center 48%; } .service-materials{ background-image:url('https://images.pexels.com/photos/3089685/pexels-photo-3089685.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .service-stone{ background-image:url('https://images.pexels.com/photos/29506754/pexels-photo-29506754.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .product-card{ background-size:cover; background-position:center; } .p1{background-image:url('https://images.pexels.com/photos/36346038/pexels-photo-36346038.jpeg?auto=compress&cs=tinysrgb&w=700');filter:brightness(.82)} .p2{background-image:url('https://images.pexels.com/photos/36235847/pexels-photo-36235847.jpeg?auto=compress&cs=tinysrgb&w=700');filter:brightness(.9)} .p3{background-image:url('https://images.pexels.com/photos/34016347/pexels-photo-34016347.jpeg?auto=compress&cs=tinysrgb&w=700');filter:contrast(1.08)} .p4{background-image:url('https://images.pexels.com/photos/8748248/pexels-photo-8748248.jpeg?auto=compress&cs=tinysrgb&w=700');filter:saturate(.72)} .p5{background-image:url('https://images.pexels.com/photos/10921738/pexels-photo-10921738.jpeg?auto=compress&cs=tinysrgb&w=700');filter:brightness(.78)} .p6{background-image:url('https://images.pexels.com/photos/9608836/pexels-photo-9608836.jpeg?auto=compress&cs=tinysrgb&w=700');filter:sepia(.18)} .p7{background-image:url('https://images.pexels.com/photos/7911655/pexels-photo-7911655.jpeg?auto=compress&cs=tinysrgb&w=700');filter:contrast(.92)} .p8{background-image:url('https://images.pexels.com/photos/17268238/pexels-photo-17268238.jpeg?auto=compress&cs=tinysrgb&w=700');filter:saturate(.92)} .p9{background-image:url('https://images.pexels.com/photos/11540801/pexels-photo-11540801.jpeg?auto=compress&cs=tinysrgb&w=700');filter:brightness(1.08)} .project-1{ background-image:url('https://images.pexels.com/photos/10546026/pexels-photo-10546026.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .project-2{ background-image:url('https://images.pexels.com/photos/5668963/pexels-photo-5668963.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .project-3{ background-image:url('https://images.pexels.com/photos/4302083/pexels-photo-4302083.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .project-4{ background-image:url('https://images.pexels.com/photos/188679/pexels-photo-188679.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .project-5{ background-image:url('https://images.pexels.com/photos/15439962/pexels-photo-15439962.jpeg?auto=compress&cs=tinysrgb&w=1000'); background-position:center; } .stats-section{ background-image:linear-gradient(rgba(24,20,17,.9),rgba(24,20,17,.94)),url('https://images.pexels.com/photos/14484391/pexels-photo-14484391.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-position:center; background-size:cover; } @media (max-width: 700px){ .hero-media-one{background-position:62% center} .hero-media-two{background-position:58% center} .hero-media-three{background-position:60% center} } /* ===== Footer contact icons + premium WhatsApp (v5) ===== */ .contact-list{display:grid;gap:9px} .contact-list li{display:flex;align-items:center;gap:9px;margin:0!important} .contact-list a,.contact-list span{color:inherit;text-decoration:none} .contact-icon{width:21px;height:21px;flex:0 0 21px;display:grid;place-items:center;color:var(--gold-dark);transition:transform .28s ease,color .28s ease} .contact-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .contact-icon.whatsapp-mini{color:#20a955} .contact-icon.whatsapp-mini svg{fill:currentColor;stroke:none;width:19px;height:19px} .contact-list li:hover .contact-icon{transform:translateY(-2px) scale(1.12);color:var(--gold)} .contact-list li:hover .whatsapp-mini{color:#18b957} .socials a[aria-label="Facebook"]:hover{background:#1877f2} .socials a[aria-label="LinkedIn"]:hover{background:#0a66c2} .socials a[aria-label="YouTube"]:hover{background:#ff0000} .socials a[aria-label="Instagram"]:hover{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)} .socials a:hover svg,.socials a:focus-visible svg{color:#fff} .socials a:hover::before,.socials a:focus-visible::before{transform:scale(0)} .whatsapp{isolation:isolate;overflow:visible;background:linear-gradient(145deg,#2ee66b,#12a947);box-shadow:0 12px 30px rgba(18,169,71,.38),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .28s ease,box-shadow .28s ease;animation:whatsappFloat 3.6s ease-in-out infinite} .whatsapp svg{position:relative;z-index:2;width:31px;height:31px;fill:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));transition:transform .28s ease} .whatsapp-ripple,.whatsapp::before,.whatsapp::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;border:2px solid rgba(37,211,102,.72);animation:whatsappRipple 2.2s ease-out infinite} .whatsapp::after{animation-delay:1.1s} .whatsapp-ripple{border:0;background:rgba(37,211,102,.22);animation:whatsappGlow 2.2s ease-in-out infinite} .whatsapp:hover,.whatsapp:focus-visible{transform:translateY(-5px) scale(1.09);box-shadow:0 18px 38px rgba(18,169,71,.5),0 0 0 8px rgba(37,211,102,.12)} .whatsapp:hover svg{transform:rotate(-8deg) scale(1.08)} @keyframes whatsappRipple{0%{transform:scale(.86);opacity:.75}75%,100%{transform:scale(1.72);opacity:0}} @keyframes whatsappGlow{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.24);opacity:.08}} @keyframes whatsappFloat{0%,100%{translate:0 0}50%{translate:0 -5px}} @media (prefers-reduced-motion:reduce){.whatsapp,.whatsapp::before,.whatsapp::after,.whatsapp-ripple{animation:none}} /* ===== Services dropdown + Twitter polish (v6) ===== */ .nav-dropdown{position:relative;display:flex;align-items:stretch} .nav-dropdown-toggle{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;padding:29px 0 25px;position:relative;transition:color .25s} .nav-dropdown-toggle::after{content:"";position:absolute;inset-inline:0;bottom:14px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s ease} .nav-dropdown-toggle:hover,.nav-dropdown.is-open .nav-dropdown-toggle{color:#e2c49c} .nav-dropdown-toggle:hover::after,.nav-dropdown.is-open .nav-dropdown-toggle::after{transform:scaleX(1)} .nav-dropdown-arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.75,.25,1)} .nav-dropdown.is-open .nav-dropdown-arrow{transform:rotate(180deg)} .nav-dropdown-menu{position:absolute;top:calc(100% - 5px);right:50%;width:235px;padding:9px;background:rgba(28,24,21,.96);border:1px solid rgba(189,152,104,.38);border-radius:4px;box-shadow:0 20px 48px rgba(0,0,0,.3);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translate(50%,12px);transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:120} .nav-dropdown-menu::before{content:"";position:absolute;top:-6px;right:50%;width:11px;height:11px;background:rgba(28,24,21,.96);border-top:1px solid rgba(189,152,104,.38);border-right:1px solid rgba(189,152,104,.38);transform:translateX(50%) rotate(-45deg)} .nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(50%,0)} .nav-dropdown-menu a{display:flex!important;justify-content:space-between;align-items:center;padding:12px 13px!important;border-radius:3px;border-bottom:1px solid rgba(255,255,255,.07);color:#f5efe7;transition:background .24s ease,color .24s ease,padding .24s ease} .nav-dropdown-menu a:last-child{border-bottom:0} .nav-dropdown-menu a::after{display:none!important} .nav-dropdown-menu a b{font-size:13px;color:var(--gold);opacity:0;transform:translateX(8px);transition:.24s ease} .nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:var(--gold);color:#fff;padding-inline-start:17px!important} .nav-dropdown-menu a:hover b,.nav-dropdown-menu a:focus-visible b{opacity:1;transform:none;color:#fff} @media (hover:hover) and (min-width:761px){ .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(50%,0)} .nav-dropdown:hover .nav-dropdown-arrow{transform:rotate(180deg)} } .socials a[aria-label="Twitter"]:hover{background:#1da1f2} @media(max-width:760px){ .nav-dropdown{display:block;width:100%} .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)} .nav-dropdown-toggle::after{display:none} .nav-dropdown-menu{position:static;width:100%;padding:0 12px;background:rgba(255,255,255,.035);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none!important;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease} .nav-dropdown-menu::before{display:none} .nav-dropdown.is-open .nav-dropdown-menu{max-height:240px;padding-top:5px;padding-bottom:7px} .nav-dropdown-menu a{padding:10px 15px!important;font-size:13px;color:#ddd;border-bottom:1px solid rgba(255,255,255,.06)} .nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{padding-inline-start:20px!important} } /* ===== Premium About Page ===== */ .about-page{background:#f4eee5;color:#2b2723} .about-hero{height:640px;position:relative;display:flex;align-items:center;overflow:hidden;background:url('https://images.pexels.com/photos/257636/pexels-photo-257636.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat} .about-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,15,13,.35),rgba(18,15,13,.82))} .about-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 45%,rgba(0,0,0,.22))} .about-hero-content{position:relative;z-index:2;color:#fff;padding-top:70px;animation:aboutIntro 1s ease both} .about-hero-content h1{font-size:clamp(46px,6vw,86px);line-height:1.15;margin:14px 0 22px;max-width:850px} .about-hero-content>p:last-of-type{max-width:690px;font-size:19px;line-height:2;color:#eee} .breadcrumb{display:flex;gap:12px;align-items:center;margin-top:32px;font-size:14px}.breadcrumb a{color:#fff}.breadcrumb span{color:var(--gold)}.breadcrumb strong{color:#e1bd8d} .about-hero-line{position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,transparent,var(--gold),transparent)} @keyframes aboutIntro{from{opacity:0;transform:translateX(65px)}to{opacity:1;transform:none}} .about-split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.about-media-stack{min-height:560px;position:relative}.about-image{position:absolute;background-size:cover;background-position:center;box-shadow:0 24px 60px rgba(32,25,19,.18)}.about-image-main{inset:0 0 55px 90px;background-image:url('https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1200')}.about-image-small{width:260px;height:235px;bottom:0;left:0;border:10px solid #f4eee5;background-image:url('https://images.pexels.com/photos/585419/pexels-photo-585419.jpeg?auto=compress&cs=tinysrgb&w=700')}.experience-seal{position:absolute;right:-35px;bottom:30px;width:150px;height:150px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#201b17;color:#fff;border:6px solid #f4eee5;box-shadow:0 15px 35px rgba(0,0,0,.2)}.experience-seal strong{font-size:38px;color:#d9ad72}.experience-seal span{font-size:13px}.section-kicker{display:inline-block;color:#a3743e;font-weight:700;letter-spacing:1px;margin-bottom:14px}.about-copy-block h2,.why-copy h2{font-size:clamp(32px,4vw,52px);line-height:1.35;margin:0 0 22px}.about-copy-block p{line-height:2;color:#6d6258}.about-copy-block .lead{font-size:18px;color:#3a342f}.about-checks{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:28px 0}.about-checks span{font-weight:600}.about-checks span::before{content:'✓';display:inline-grid;place-items:center;width:24px;height:24px;margin-left:9px;border-radius:50%;background:#c69b64;color:#fff} .vision-section{padding:0 0 100px}.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.vision-card{position:relative;padding:48px 35px;min-height:320px;background:#fff;border:1px solid rgba(150,112,68,.15);overflow:hidden;transition:.4s}.vision-card.featured{background:#211c18;color:#fff;transform:translateY(25px)}.vision-card:hover{transform:translateY(-10px);box-shadow:0 25px 55px rgba(58,43,29,.14)}.vision-card.featured:hover{transform:translateY(15px)}.vision-number{position:absolute;top:20px;left:24px;font-size:54px;font-weight:800;color:rgba(184,140,88,.12)}.vision-icon{font-size:34px;color:#bd8f57;margin-bottom:28px}.vision-card h3{font-size:27px}.vision-card p{line-height:2;color:#756a60}.vision-card.featured p{color:#d5cec7} .values-section{background:#eee5d9}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(110,80,48,.16)}.values-grid article{position:relative;background:#f7f1e9;padding:40px 28px;text-align:center;transition:.35s}.values-grid article:hover{background:#211c18;color:#fff;transform:translateY(-8px)}.values-grid b{position:absolute;top:14px;left:18px;color:#c19a6a;opacity:.55}.value-symbol{width:68px;height:68px;display:grid;place-items:center;margin:0 auto 22px;border:1px solid #c49a65;border-radius:50%;font-size:27px;color:#ac7b42;transition:.35s}.values-grid article:hover .value-symbol{background:#c49a65;color:#fff;transform:rotate(12deg)}.values-grid p{color:#776b61;line-height:1.8}.values-grid article:hover p{color:#d7d0c8} .about-stats{padding:62px 0;background:linear-gradient(rgba(24,20,17,.91),rgba(24,20,17,.91)),url('https://images.pexels.com/photos/159358/construction-site-build-construction-work-159358.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover fixed;color:#fff}.about-stats .stats-grid article{border-color:rgba(255,255,255,.14)} .why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:start}.why-copy{position:sticky;top:130px}.why-copy p{line-height:2;color:#75695f}.text-link{display:inline-flex;gap:10px;color:#9d6c35;font-weight:700;margin-top:18px}.text-link span{transition:.25s}.text-link:hover span{transform:translateX(-7px)}.why-list{border-top:1px solid #d8c7b3}.why-list article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:28px 5px;border-bottom:1px solid #d8c7b3;transition:.3s}.why-list article:hover{padding-inline:18px;background:rgba(255,255,255,.5)}.why-list>article>span{font-size:30px;color:#c49a65;font-weight:700}.why-list h3{margin:0 0 8px;font-size:22px}.why-list p{margin:0;color:#776b61} .about-cta{position:relative;padding:100px 0;background:url('https://images.pexels.com/photos/162568/architecture-construction-build-building-162568.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover}.about-cta-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,19,15,.75),rgba(24,19,15,.92))}.about-cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;color:#fff}.about-cta-inner span{color:#d5a96f}.about-cta-inner h2{font-size:clamp(30px,4vw,50px);max-width:760px;margin:10px 0 0} @media(max-width:900px){.about-hero{height:560px}.about-split,.why-grid{grid-template-columns:1fr;gap:55px}.about-media-stack{min-height:480px}.vision-grid{grid-template-columns:1fr}.vision-card.featured{transform:none}.values-grid{grid-template-columns:1fr 1fr}.why-copy{position:static}.about-cta-inner{flex-direction:column;align-items:flex-start;gap:28px}} @media(max-width:600px){.about-hero{height:520px}.about-hero-content h1{font-size:42px}.about-media-stack{min-height:400px}.about-image-main{left:35px}.about-image-small{width:190px;height:170px}.experience-seal{width:120px;height:120px;right:-5px}.about-checks,.values-grid{grid-template-columns:1fr}.about-cta{padding:72px 0}.vision-card{min-height:auto}.footer-grid{grid-template-columns:1fr}} /* ===== Premium Service Details Page ===== */ .service-page{background:#f4eee5;color:#2b2723} .service-hero{height:650px;position:relative;display:flex;align-items:center;overflow:hidden;background-image:url('https://images.pexels.com/photos/585418/pexels-photo-585418.jpeg?auto=compress&cs=tinysrgb&w=1920');background-size:cover;background-position:center} .service-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,13,.28),rgba(20,16,13,.86))} .service-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 45%,rgba(0,0,0,.28))} .service-hero-content{position:relative;z-index:2;color:#fff;padding-top:80px;animation:serviceIntro 1s ease both} .service-hero-content h1{font-size:clamp(54px,7vw,96px);line-height:1.08;margin:16px 0 24px;max-width:900px} .service-hero-content>p:last-of-type{max-width:760px;font-size:19px;line-height:2;color:#eee} .service-scroll-cue{position:absolute;z-index:3;bottom:34px;left:50%;width:34px;height:58px;border:1px solid rgba(255,255,255,.65);border-radius:22px;transform:translateX(-50%)} .service-scroll-cue span{position:absolute;top:12px;left:50%;width:4px;height:10px;border-radius:4px;background:#fff;transform:translateX(-50%);animation:scrollCue 1.6s infinite} @keyframes serviceIntro{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}} @keyframes scrollCue{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,22px)}} .service-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center} .service-copy h2,.service-features-copy h2{font-size:clamp(32px,4vw,52px);line-height:1.35;margin:0 0 22px} .service-copy p{line-height:2;color:#6f645a}.service-copy .lead{font-size:18px;color:#38312b} .service-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}.service-benefits span{font-weight:600}.service-benefits span::before{content:'✓';display:inline-grid;place-items:center;width:24px;height:24px;margin-left:9px;border-radius:50%;background:#c39a67;color:#fff} .service-showcase{min-height:560px;position:relative}.service-main-image{position:absolute;inset:0 75px 30px 0;background:center/cover no-repeat;box-shadow:0 25px 70px rgba(43,33,24,.2)} .service-thumbnail{position:absolute;width:235px;height:210px;bottom:0;left:0;border:10px solid #f4eee5;background:center/cover no-repeat;box-shadow:0 15px 40px rgba(0,0,0,.15)} .service-floating-card{position:absolute;z-index:2;right:0;bottom:55px;width:150px;height:150px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#201b17;color:#fff;border:6px solid #f4eee5;box-shadow:0 15px 35px rgba(0,0,0,.2)} .service-floating-card strong{font-size:34px;color:#d6aa73}.service-floating-card span{font-size:12px} .service-process{padding:100px 0;background:#eae0d3}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(111,80,50,.18)} .process-grid article{position:relative;padding:42px 28px;background:#f7f1e9;transition:.35s}.process-grid article:hover{background:#211c18;color:#fff;transform:translateY(-8px)} .process-grid b{position:absolute;top:14px;left:18px;color:#c39a67;opacity:.65}.process-icon{width:64px;height:64px;display:grid;place-items:center;border:1px solid #c49a65;border-radius:50%;font-size:26px;color:#a7733b;margin-bottom:22px;transition:.35s} .process-grid article:hover .process-icon{background:#c49a65;color:#fff;transform:rotate(10deg)}.process-grid h3{font-size:22px}.process-grid p{color:#75695f;line-height:1.8}.process-grid article:hover p{color:#d7d0c8} .service-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.service-features-image{min-height:600px;background:center/cover no-repeat;box-shadow:0 25px 70px rgba(39,31,25,.17)} .feature-accordion{border-top:1px solid #d7c7b4}.feature-accordion details{border-bottom:1px solid #d7c7b4;padding:20px 0}.feature-accordion summary{cursor:pointer;font-size:19px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}.feature-accordion summary::after{content:'+';color:#b4834d;font-size:28px;transition:.25s}.feature-accordion details[open] summary::after{transform:rotate(45deg)}.feature-accordion p{color:#74685e;line-height:1.9;padding-left:30px} .service-stats{padding:65px 0;background:linear-gradient(rgba(24,20,17,.92),rgba(24,20,17,.92)),url('https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover fixed;color:#fff}.service-stats .stats-grid article{border-color:rgba(255,255,255,.14)} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.related-card{position:relative;min-height:400px;background:center/cover no-repeat;overflow:hidden;color:#fff}.related-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 18%,rgba(18,15,13,.9));transition:.4s}.related-card>div{position:absolute;z-index:2;inset:auto 30px 30px}.related-card span{color:#dcb27d}.related-card h3{font-size:29px;margin:8px 0}.related-card p{color:#ddd;line-height:1.8}.related-card b{display:inline-block;color:#d9aa70;transition:.3s}.related-card:hover::before{background:linear-gradient(180deg,rgba(171,121,65,.15),rgba(18,15,13,.95))}.related-card:hover b{transform:translateX(-8px);color:#fff}.related-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(41,31,22,.2)} .related-materials{background-image:url('https://images.pexels.com/photos/2760242/pexels-photo-2760242.jpeg?auto=compress&cs=tinysrgb&w=900')}.related-excavation{background-image:url('https://images.pexels.com/photos/1078884/pexels-photo-1078884.jpeg?auto=compress&cs=tinysrgb&w=900')}.related-transport{background-image:url('https://images.pexels.com/photos/2199293/pexels-photo-2199293.jpeg?auto=compress&cs=tinysrgb&w=900')} .service-cta{position:relative;padding:100px 0;background:url('https://images.pexels.com/photos/159306/construction-site-build-construction-work-159306.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover}.service-cta-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,19,15,.72),rgba(24,19,15,.94))}.service-cta-inner{position:relative;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:40px}.service-cta-inner span{color:#d5a96f}.service-cta-inner h2{font-size:clamp(30px,4vw,50px);margin:8px 0}.service-cta-inner p{color:#ddd}.service-cta-actions{display:flex;gap:12px;flex-wrap:wrap}.service-cta .btn-outline{border-color:rgba(255,255,255,.75);color:#fff} @media(max-width:900px){.service-hero{height:570px}.service-overview-grid,.service-features-grid{grid-template-columns:1fr;gap:55px}.service-showcase{min-height:500px}.process-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr}.service-cta-inner{flex-direction:column;align-items:flex-start}} @media(max-width:600px){.service-hero{height:520px}.service-hero-content h1{font-size:45px}.service-showcase{min-height:410px}.service-main-image{left:35px}.service-thumbnail{width:180px;height:155px}.service-floating-card{width:120px;height:120px}.service-benefits,.process-grid{grid-template-columns:1fr}.service-features-image{min-height:430px}.service-cta{padding:75px 0}} /* Products page */ .products-hero{min-height:72vh;position:relative;display:flex;align-items:center;background:url('https://images.pexels.com/photos/2760242/pexels-photo-2760242.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat;color:#fff;overflow:hidden} .products-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,12,10,.25),rgba(15,12,10,.82));z-index:0} .products-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 48%,rgba(0,0,0,.48));z-index:0} .products-hero-content{position:relative;z-index:2;padding-top:110px;max-width:820px;margin-right:auto;margin-left:8%} .products-hero .eyebrow{letter-spacing:.16em;color:#e7c48a;font-weight:700;margin-bottom:18px} .products-hero h1{font-size:clamp(3rem,6.5vw,6.4rem);line-height:1.08;margin:0 0 24px;font-weight:800} .products-hero-content>p:not(.eyebrow){font-size:1.15rem;line-height:2;max-width:690px;color:rgba(255,255,255,.88)} .products-hero .breadcrumb{margin-top:30px} .product-intro{background:#f4eee5} .product-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;align-items:center} .product-intro h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.35;margin:.7rem 0} .product-intro .lead{font-size:1.08rem;line-height:2;color:#5b5148} .product-trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#9e713d;font-weight:700} .product-catalog{background:#fbf8f2} .catalog-toolbar{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:40px} .catalog-title{margin:0;text-align:right} .product-filters{display:flex;flex-wrap:wrap;gap:10px} .product-filters button{border:1px solid #d8c8b5;background:transparent;color:#433a33;padding:11px 20px;font-family:inherit;font-weight:700;cursor:pointer;transition:.3s;border-radius:2px} .product-filters button:hover,.product-filters button.is-active{background:#b98a50;border-color:#b98a50;color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(115,77,37,.18)} .products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .product-card{background:#fff;border:1px solid #eadfD1;box-shadow:0 12px 35px rgba(62,45,29,.07);transition:.45s;overflow:hidden} .product-card[hidden]{display:none} .product-card:hover{transform:translateY(-9px);box-shadow:0 24px 55px rgba(62,45,29,.15)} .product-image{height:285px;background-size:cover;background-position:center;position:relative;overflow:hidden} .product-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(16,13,11,.72));transition:.45s} .product-card:hover .product-image{background-size:112%} .product-image>span{position:absolute;top:18px;right:18px;z-index:2;background:rgba(248,243,235,.92);color:#805b34;padding:7px 13px;font-size:.78rem;font-weight:700} .product-view{position:absolute;left:18px;bottom:18px;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(25,20,16,.45);color:#fff;font-size:1.35rem;cursor:pointer;transition:.3s;backdrop-filter:blur(7px)} .product-view:hover{background:#bd8d52;border-color:#bd8d52;transform:rotate(45deg) scale(1.08)} .product-card-body{padding:24px} .product-card-body small{letter-spacing:.14em;color:#ad7e45;font-weight:700} .product-card-body h3{font-size:1.35rem;margin:8px 0 10px} .product-card-body p{color:#70665e;line-height:1.85;min-height:66px} .product-card-body>div{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eee3d6;padding-top:17px;margin-top:16px;gap:12px} .product-card-body b{font-size:.82rem;color:#7f7165} .product-card-body a{font-weight:700;color:#a46f35;transition:.3s} .product-card-body a:hover{color:#241b15;transform:translateX(-4px)} .products-empty{text-align:center;padding:50px;color:#766b62} .featured-product{display:grid;grid-template-columns:1.15fr .85fr;min-height:620px;background:#221c17;color:#fff} .featured-product-media{background:url('https://images.pexels.com/photos/585419/pexels-photo-585419.jpeg?auto=compress&cs=tinysrgb&w=1400') center/cover no-repeat;position:relative} .featured-product-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,28,23,.6),transparent)} .featured-product-copy{padding:8vw 7vw;display:flex;flex-direction:column;justify-content:center} .featured-product-copy h2{font-size:clamp(2.2rem,4.2vw,4.2rem);margin:12px 0 18px} .featured-product-copy p{line-height:2;color:rgba(255,255,255,.75)} .featured-product-copy ul{list-style:none;padding:0;margin:24px 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:14px} .featured-product-copy li::before{content:"✓";color:#d2a66c;margin-left:10px} .supply-process{background:#f3eadf} .supply-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d7c6b2;border:1px solid #d7c6b2} .supply-steps article{background:#f8f3ec;padding:38px 28px;transition:.35s;position:relative} .supply-steps article:hover{background:#2a221c;color:#fff;transform:translateY(-7px)} .supply-steps b{font-size:2.2rem;color:#bc8b50;opacity:.55} .supply-steps h3{margin:20px 0 10px} .supply-steps p{line-height:1.8;color:#776c62} .supply-steps article:hover p{color:rgba(255,255,255,.68)} .product-quote{position:relative;background:url('https://images.pexels.com/photos/1078884/pexels-photo-1078884.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat;color:#fff;padding:90px 0} .product-quote-overlay{position:absolute;inset:0;background:rgba(24,19,15,.86)} .product-quote-grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;align-items:center} .product-quote h2{font-size:clamp(2.2rem,4vw,4rem);margin:12px 0} .product-quote p{line-height:2;color:rgba(255,255,255,.75)} .quote-form{background:#f5eee5;color:#2a221c;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px} .quote-form label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:.9rem} .quote-form label:last-of-type{grid-column:1/-1} .quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #d8c7b3;background:#fff;padding:13px 14px;font:inherit;outline:none;transition:.3s} .quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#b98a50;box-shadow:0 0 0 3px rgba(185,138,80,.13)} .quote-form button{grid-column:1/-1;border:0;font-family:inherit;cursor:pointer} .product-modal{position:fixed;inset:0;background:rgba(12,9,7,.86);z-index:9999;display:grid;place-items:center;padding:25px;opacity:0;visibility:hidden;transition:.35s;backdrop-filter:blur(8px)} .product-modal.is-open{opacity:1;visibility:visible} .product-modal-card{width:min(900px,95vw);background:#f6efe6;display:grid;grid-template-columns:1.15fr .85fr;box-shadow:0 30px 100px rgba(0,0,0,.45);transform:translateY(25px) scale(.97);transition:.35s} .product-modal.is-open .product-modal-card{transform:none} .product-modal-image{min-height:500px;background-size:cover;background-position:center} .product-modal-card>div:last-child{padding:55px 40px;display:flex;flex-direction:column;justify-content:center} .product-modal-card h2{font-size:2.5rem;margin:10px 0 18px} .product-modal-card p{line-height:1.9;color:#6d6258;margin-bottom:28px} .product-modal-close{position:absolute;top:25px;left:30px;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.8rem;cursor:pointer;transition:.3s} .product-modal-close:hover{background:#bd8d52;border-color:#bd8d52;transform:rotate(90deg)} body.modal-open{overflow:hidden} @media (max-width:980px){.products-grid{grid-template-columns:repeat(2,1fr)}.product-intro-grid,.product-quote-grid{grid-template-columns:1fr}.featured-product{grid-template-columns:1fr}.featured-product-media{min-height:480px}.supply-steps{grid-template-columns:repeat(2,1fr)}.catalog-toolbar{align-items:flex-start;flex-direction:column}.products-hero-content{margin:0}.product-modal-card{grid-template-columns:1fr}.product-modal-image{min-height:330px}} @media (max-width:640px){.products-hero{min-height:78vh}.products-hero-content{padding-top:130px}.products-hero h1{font-size:3rem}.products-grid{grid-template-columns:1fr}.product-filters{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}.product-filters button{white-space:nowrap}.featured-product-copy{padding:55px 25px}.featured-product-copy ul{grid-template-columns:1fr}.supply-steps{grid-template-columns:1fr}.quote-form{grid-template-columns:1fr;padding:23px}.quote-form label,.quote-form label:last-of-type,.quote-form button{grid-column:1}.product-modal-card>div:last-child{padding:32px 24px}.product-modal-image{min-height:260px}} /* ===== V10 product page polish, unified footer and CTA fixes ===== */ .products-hero{ min-height:76vh; background-image:url('https://loremflickr.com/1920/1080/aggregate,quarry,construction?lock=90'); background-position:center 46%; } .products-hero::before{background:linear-gradient(90deg,rgba(14,11,9,.18) 0%,rgba(14,11,9,.72) 52%,rgba(14,11,9,.91) 100%)} .products-hero-content{ max-width:760px; margin-right:8%; margin-left:auto; padding-top:120px; text-align:right; } .products-hero h1{ max-width:720px; font-size:clamp(3.2rem,5.8vw,5.8rem); line-height:1.08; letter-spacing:-.035em; text-wrap:balance; } .products-hero h1 span{color:#f4e7d4} .products-hero-content>p:not(.eyebrow){max-width:650px;font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.95} .products-hero .breadcrumb{justify-content:flex-start} .product-catalog{position:relative} .catalog-toolbar{padding:28px 30px;background:#fff;border:1px solid #eadfD1;box-shadow:0 15px 45px rgba(62,45,29,.07);align-items:center} .catalog-title h2{margin:0;font-size:clamp(2rem,3vw,3rem)} .products-grid{align-items:stretch} .product-card{display:flex;flex-direction:column;border-radius:5px;min-height:100%;background:linear-gradient(180deg,#fff,#fbf7f1)} .product-image{ height:auto; aspect-ratio:4/3; background-size:cover; background-position:center; flex:0 0 auto; } .product-card:hover .product-image{background-size:108%} .product-card-body{display:flex;flex-direction:column;flex:1;padding:26px} .product-card-body p{min-height:0;flex:1} .product-card-body>div{margin-top:auto} .product-image::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%);z-index:1;pointer-events:none} /* Keep the social block identical on every page */ .socials{direction:ltr;justify-content:flex-start;align-items:center} .socials a{width:40px;height:40px;background:#c69659;color:#fff;border:1px solid rgba(255,255,255,.3)} .socials a svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:0} .socials a[aria-label="Instagram"] svg{fill:none;stroke:currentColor;stroke-width:1.8} .socials a[aria-label="Instagram"] .fill-dot{fill:currentColor;stroke:none} .socials a:hover{color:#fff;transform:translateY(-5px) scale(1.06)} .socials a[aria-label="Facebook"]:hover{background:#1877f2} .socials a[aria-label="Twitter"]:hover{background:#1da1f2} .socials a[aria-label="Instagram"]:hover{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)} .socials a[aria-label="LinkedIn"]:hover{background:#0a66c2} /* The WhatsApp CTA must remain visible on its dark image background */ .service-cta .service-cta-actions .btn-outline{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.78); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .service-cta .service-cta-actions .btn-outline:hover, .service-cta .service-cta-actions .btn-outline:focus-visible{ color:#241b15; background:#d0a066; border-color:#d0a066; box-shadow:0 12px 30px rgba(208,160,102,.3); transform:translateY(-3px); } @media(max-width:980px){ .products-hero-content{margin:0;padding-inline:5%;max-width:760px} .catalog-toolbar{padding:22px;align-items:flex-start} } @media(max-width:640px){ .products-hero{min-height:690px;background-position:center} .products-hero-content{padding-top:150px} .products-hero h1{font-size:clamp(2.65rem,13vw,4rem)} .catalog-toolbar{padding:18px} .product-image{aspect-ratio:16/11} .socials a{width:38px;height:38px} } /* ===== V11 final visual fixes ===== */ /* Restore dependable building-material photography on the homepage strip */ .products-section .p1{background-image:url('https://images.pexels.com/photos/585419/pexels-photo-585419.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p2{background-image:url('https://images.pexels.com/photos/2760242/pexels-photo-2760242.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p3{background-image:url('https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p4{background-image:url('https://images.pexels.com/photos/159358/construction-site-build-construction-work-159358.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p5{background-image:url('https://images.pexels.com/photos/1078884/pexels-photo-1078884.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p6{background-image:url('https://images.pexels.com/photos/257636/pexels-photo-257636.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p7{background-image:url('https://images.pexels.com/photos/2199293/pexels-photo-2199293.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p8{background-image:url('https://images.pexels.com/photos/159306/construction-site-build-construction-work-159306.jpeg?auto=compress&cs=tinysrgb&w=900')} .products-section .p9{background-image:url('https://images.pexels.com/photos/162568/architecture-construction-build-building-162568.jpeg?auto=compress&cs=tinysrgb&w=900')} /* Stronger, premium hover interaction in Why TAC */ .why-list article{position:relative;overflow:hidden;cursor:default} .why-list article::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#231c17,#34271d);transform:translateX(104%);transition:transform .42s ease;z-index:-1} .why-list article:hover{padding-inline:22px;background:transparent;color:#fff;transform:translateX(-7px);box-shadow:0 14px 34px rgba(45,33,23,.13)} .why-list article:hover::before{transform:translateX(0)} .why-list article:hover h3{color:#fff} .why-list article:hover p{color:rgba(255,255,255,.72)} .why-list article:hover>span{color:#e1b77d;transform:rotate(90deg)} .why-list>article>span{transition:.35s} /* Equal CTA button geometry */ .service-cta-actions{align-items:stretch} .service-cta-actions .btn{width:220px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:16px 22px} /* Product page cards: warm site palette and no homepage style collision */ .products-page .product-catalog{background:linear-gradient(180deg,#f5eee5 0%,#efe4d6 100%)} .products-page .product-card{aspect-ratio:auto;background:#f8f1e8;border:1px solid #dcc7ad;border-radius:8px;overflow:hidden;box-shadow:0 12px 32px rgba(63,43,25,.09)} .products-page .product-card::after{display:none} .products-page .product-image{aspect-ratio:4/3;min-height:260px;background-size:cover!important;background-position:center!important} .products-page .product-image::after{background:linear-gradient(180deg,rgba(20,15,11,.03) 30%,rgba(20,15,11,.72) 100%)} .products-page .product-image>span{top:18px;right:18px;bottom:auto;left:auto;inset-inline:auto;display:inline-flex;width:auto;height:auto;background:rgba(248,241,232,.94);color:#754f2b;border:1px solid rgba(177,128,72,.25);padding:8px 14px;border-radius:999px;font-size:.8rem;line-height:1.2;box-shadow:0 8px 22px rgba(0,0,0,.08)} .products-page .product-card-body{background:linear-gradient(180deg,#fbf7f1,#f2e7d9);color:#2a211a} .products-page .product-card-body p{color:#685b50} /* Product lightbox: visible product photo, refined warm card and proper close control */ .product-modal{background:rgba(17,12,9,.9)} .product-modal-card{position:relative;background:#f4eadf;border:1px solid rgba(218,184,143,.35);border-radius:10px;overflow:hidden} .product-modal-image{background-color:#d9c6b0;min-height:520px} .product-modal-card>div:last-child{background:linear-gradient(145deg,#f7f0e7,#eadbc9)} .product-modal-close{position:fixed;top:24px;right:28px;left:auto;width:54px;height:54px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.75);background:rgba(28,21,16,.78);color:transparent;border-radius:50%;font-size:0;backdrop-filter:blur(8px);box-shadow:0 12px 32px rgba(0,0,0,.25)} .product-modal-close::before,.product-modal-close::after{content:"";position:absolute;width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s} .product-modal-close::before{transform:rotate(45deg)} .product-modal-close::after{transform:rotate(-45deg)} .product-modal-close:hover{background:#bd8d52;border-color:#bd8d52;transform:rotate(90deg) scale(1.06)} @media(max-width:640px){ .service-cta-actions{width:100%} .service-cta-actions .btn{width:100%} .product-modal-close{top:14px;right:14px;width:48px;height:48px} .products-page .product-image{min-height:230px} } /* Projects page */ .projects-page{background:#f5efe5}.projects-hero{min-height:760px;position:relative;display:flex;align-items:center;background:url('https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat;color:#fff;overflow:hidden}.projects-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,10,.3),rgba(16,13,10,.88))}.projects-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.28))}.projects-hero-content{position:relative;z-index:2;padding-top:100px;max-width:1200px}.projects-hero-content .eyebrow{letter-spacing:.2em;color:#d7af78;font-weight:800}.projects-hero-content h1{font-size:clamp(3.6rem,7vw,7.4rem);line-height:.96;margin:22px 0;max-width:900px}.projects-hero-content h1 span{color:#d2a568}.projects-hero-content>p:not(.eyebrow){font-size:1.25rem;line-height:2;max-width:720px;margin-bottom:28px}.projects-hero-content .breadcrumb{margin-top:34px}.projects-stats{background:#17130f;color:#fff}.projects-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.projects-stats article{text-align:center;padding:34px 18px;border-left:1px solid rgba(255,255,255,.12)}.projects-stats article:last-child{border-left:0}.projects-stats strong{display:block;color:#d7af78;font-size:2.7rem}.projects-stats span{font-weight:700}.projects-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}.projects-intro h2{font-size:clamp(2rem,4vw,4.2rem);line-height:1.25}.projects-catalog{background:#fbf7f0}.projects-toolbar{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}.project-filters{display:flex;flex-wrap:wrap;gap:10px}.project-filters button{border:1px solid #d9c2a4;background:transparent;padding:13px 22px;font:inherit;font-weight:700;cursor:pointer;transition:.3s}.project-filters button:hover,.project-filters button.is-active{background:#bd8d4f;color:#fff;border-color:#bd8d4f;transform:translateY(-2px)}.projects-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.project-card{background:#fff;border:1px solid #e5d8c6;box-shadow:0 14px 45px rgba(50,39,27,.08);transition:.45s;overflow:hidden}.project-card:hover{transform:translateY(-10px);box-shadow:0 26px 60px rgba(50,39,27,.16)}.project-card[hidden]{display:none}.project-card-image{height:300px;background-size:cover;background-position:center;position:relative;overflow:hidden}.project-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(13,11,9,.75));transition:.4s}.project-card:hover .project-card-image{background-size:110%}.project-card-image span{position:absolute;right:20px;top:18px;z-index:2;background:rgba(255,255,255,.9);padding:8px 13px;color:#805c31;font-weight:800}.project-open{cursor:pointer}.project-card-image .project-open{position:absolute;left:18px;bottom:18px;z-index:3;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(20,17,13,.6);color:#fff;font-size:1.4rem;transition:.3s}.project-card:hover .project-card-image .project-open{background:#bd8d4f;transform:rotate(45deg)}.project-card-body{padding:28px}.project-card-body small{color:#9d743f;font-weight:800;letter-spacing:.06em}.project-card-body h3{font-size:1.5rem;margin:10px 0}.project-card-body p{color:#71685e;line-height:1.8;min-height:84px}.project-details-link{border:0;background:transparent;padding:0;font:inherit;font-weight:800;color:#33291f}.project-details-link b{display:inline-block;margin-right:5px;transition:.3s}.project-details-link:hover{color:#bd8d4f}.project-details-link:hover b{transform:translateX(-6px)}.featured-project{position:relative;background:url('https://images.pexels.com/photos/257636/pexels-photo-257636.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover;color:#fff;padding:110px 0}.featured-project-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,10,.42),rgba(15,13,10,.9))}.featured-project-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:80px;align-items:center}.featured-project-grid>div:first-child{max-width:780px}.featured-project-grid span{color:#d7af78;font-weight:800}.featured-project h2{font-size:clamp(2.2rem,4.5vw,4.8rem);line-height:1.2;margin:15px 0}.featured-project p{font-size:1.15rem;line-height:2}.featured-project-facts{display:flex;gap:16px;margin:28px 0}.featured-project-facts b{border:1px solid rgba(255,255,255,.25);padding:12px 18px}.featured-project-badge{width:170px;height:170px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-content:center;text-align:center;backdrop-filter:blur(10px)}.featured-project-badge strong{font-size:2.2rem}.timeline-track{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:55px}.timeline-track:before{content:"";position:absolute;top:22px;right:5%;left:5%;height:2px;background:#c99b60}.timeline-track article{position:relative;padding:55px 20px 20px;text-align:center}.timeline-track article:before{content:"";position:absolute;top:13px;right:calc(50% - 10px);width:20px;height:20px;border-radius:50%;background:#bd8d4f;border:5px solid #f5efe5;box-shadow:0 0 0 1px #bd8d4f}.timeline-track b{font-size:1.8rem;color:#9b6e37}.timeline-track h3{margin:8px 0}.timeline-track p{color:#73695f}.project-gallery{background:#1b1713;color:#fff}.project-masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px}.project-masonry figure{margin:0;background-size:cover;background-position:center;position:relative;overflow:hidden}.project-masonry figure.wide{grid-column:span 2}.project-masonry figure.tall{grid-row:span 2}.project-masonry figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));transition:.4s}.project-masonry figure:hover{background-size:110%}.project-masonry figcaption{position:absolute;right:18px;bottom:16px;z-index:2;font-weight:800}.projects-cta{position:relative;background:url('https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover;color:#fff;padding:100px 0}.projects-cta-overlay{position:absolute;inset:0;background:rgba(18,14,11,.82)}.projects-cta-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}.projects-cta h2{font-size:clamp(2rem,4vw,4.2rem);margin:8px 0}.projects-cta p{max-width:700px}.projects-cta-actions{display:grid;gap:12px;min-width:240px}.project-whatsapp-btn{border:1px solid #fff;color:#fff;background:transparent;text-align:center}.project-whatsapp-btn:hover{background:#25d366;border-color:#25d366;color:#fff}.project-modal{position:fixed;inset:0;background:rgba(12,10,8,.9);z-index:2000;display:grid;place-items:center;padding:30px;opacity:0;visibility:hidden;transition:.35s}.project-modal.is-open{opacity:1;visibility:visible}.project-modal-card{width:min(1120px,94vw);max-height:88vh;overflow:auto;background:#f6efe4;display:grid;grid-template-columns:1.1fr 1fr;box-shadow:0 30px 100px rgba(0,0,0,.5)}.project-modal-image{min-height:600px;background-size:cover;background-position:center}.project-modal-content{padding:55px}.project-modal-tag{color:#a8783d;font-weight:800}.project-modal-content h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1.2}.project-modal-desc{line-height:1.9;color:#685f56}.project-modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.project-modal-meta div{border:1px solid #ddcdb9;padding:13px}.project-modal-meta dt{font-size:.8rem;color:#98703d}.project-modal-meta dd{margin:4px 0 0;font-weight:800}.project-modal-actions{display:flex;gap:12px}.project-modal-close{position:fixed;top:26px;left:26px;z-index:2001;width:58px;height:58px;border-radius:50%;border:1px solid #fff;background:#bd8d4f;color:#fff;font-size:2rem;cursor:pointer;transition:.3s}.project-modal-close:hover{transform:rotate(90deg) scale(1.08);background:#fff;color:#231b14}.modal-open{overflow:hidden} @media(max-width:1000px){.projects-page-grid{grid-template-columns:repeat(2,1fr)}.projects-stats-grid{grid-template-columns:repeat(2,1fr)}.projects-intro-grid,.featured-project-grid,.projects-cta-grid{grid-template-columns:1fr}.featured-project-badge{display:none}.timeline-track{grid-template-columns:1fr}.timeline-track:before{right:22px;left:auto;top:0;bottom:0;width:2px;height:auto}.timeline-track article{text-align:right;padding:15px 55px 25px 10px}.timeline-track article:before{right:13px;top:17px}.project-modal-card{grid-template-columns:1fr}.project-modal-image{min-height:320px}.project-masonry{grid-template-columns:repeat(2,1fr)}} @media(max-width:650px){.projects-hero{min-height:650px}.projects-hero-content h1{font-size:3.2rem}.projects-page-grid{grid-template-columns:1fr}.projects-toolbar{align-items:stretch;flex-direction:column}.project-filters{display:grid;grid-template-columns:1fr 1fr}.projects-stats article{padding:24px 10px}.projects-stats strong{font-size:2rem}.project-masonry{grid-template-columns:1fr;grid-auto-rows:220px}.project-masonry figure.wide{grid-column:span 1}.project-masonry figure.tall{grid-row:span 1}.project-modal{padding:12px}.project-modal-content{padding:28px 20px}.project-modal-meta{grid-template-columns:1fr}.project-modal-actions{flex-direction:column}.project-modal-close{top:12px;left:12px;width:48px;height:48px}.projects-cta-actions{min-width:0}} /* ===== V13 requested fixes ===== */ /* Restore the original homepage material and project photography as local assets */ .products-section .p1{background-image:url('../assets/images/home/sub-base.jpg')!important;filter:none!important} .products-section .p2{background-image:url('../assets/images/home/base-course.jpg')!important;filter:none!important} .products-section .p3{background-image:url('../assets/images/home/gravel-38.jpg')!important;filter:none!important} .products-section .p4{background-image:url('../assets/images/home/gravel-34.jpg')!important;filter:none!important} .products-section .p5{background-image:url('../assets/images/home/gravel-zero.jpg')!important;filter:none!important} .products-section .p6{background-image:url('../assets/images/home/gravel-1.jpg')!important;filter:none!important} .products-section .p7{background-image:url('../assets/images/home/gravel-15.jpg')!important;filter:none!important} .products-section .p8{background-image:url('../assets/images/home/red-sand.jpg')!important;filter:none!important} .products-section .p9{background-image:url('../assets/images/home/white-sand.jpg')!important;filter:none!important} .projects-section .project-1{background-image:url('../assets/images/home/project-admin-building.jpg')!important} .projects-section .project-2{background-image:url('../assets/images/home/project-external-yards.jpg')!important} .projects-section .project-3{background-image:url('../assets/images/home/project-regional-road.jpg')!important} .projects-section .project-4{background-image:url('../assets/images/home/project-stone-supply.jpg')!important} .projects-section .project-5{background-image:url('../assets/images/home/project-construction.jpg')!important} /* Service details accordion hover: background and title clearly change */ .feature-accordion details{position:relative;overflow:hidden;padding:0;transition:.35s} .feature-accordion summary{padding:22px 18px;transition:.35s} .feature-accordion details p{margin:0;padding:0 18px 22px;transition:.35s} .feature-accordion details:hover,.feature-accordion details[open]{background:linear-gradient(110deg,#241d18,#3a2b20);box-shadow:0 12px 30px rgba(48,34,23,.12);transform:translateX(-7px)} .feature-accordion details:hover summary,.feature-accordion details[open] summary{color:#e7bb7e;padding-inline:25px} .feature-accordion details:hover p,.feature-accordion details[open] p{color:rgba(255,255,255,.76);padding-inline:25px} .feature-accordion details:hover summary::after,.feature-accordion details[open] summary::after{color:#fff} /* Project statistics: visible counters and premium hover cards */ .projects-stats article{position:relative;overflow:hidden;transition:.38s;background:transparent} .projects-stats article::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#bd8d4f,#8e6234);transform:translateY(102%);transition:.38s;z-index:0} .projects-stats article>*{position:relative;z-index:1} .projects-stats article:hover{transform:translateY(-8px);box-shadow:0 18px 42px rgba(0,0,0,.25)} .projects-stats article:hover::before{transform:translateY(0)} .projects-stats article:hover strong{color:#fff;transform:scale(1.08)} .projects-stats article:hover span{color:#fff} .projects-stats strong{min-height:1.2em;transition:.35s} .projects-stats span{transition:.35s} /* Quote form city field */ .quote-form .city-field{grid-column:auto} @media(max-width:700px){.quote-form .city-field{grid-column:1/-1}} /* Careers page */ .careers-page{background:#f4ede3;color:#2d2824} .careers-hero{position:relative;min-height:780px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(13,12,11,.42),rgba(13,12,11,.15)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=92') center/cover no-repeat;color:#fff;overflow:hidden} .careers-hero::after{content:"";position:absolute;inset:auto 0 0;height:100px;background:#f4ede3;clip-path:ellipse(70% 55% at 50% 100%)} .careers-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,8,7,.92) 0%,rgba(17,14,12,.68) 48%,rgba(17,14,12,.28) 100%)} .careers-hero-content{position:relative;z-index:2;padding-top:110px;max-width:920px;margin-right:8%} .careers-hero .eyebrow{color:#d4a363;letter-spacing:.16em;font-weight:800} .careers-hero h1{font-size:clamp(48px,6vw,92px);line-height:1.1;margin:18px 0 24px;max-width:920px} .careers-hero h1 span{color:#d9aa6a} .careers-hero-content>p:not(.eyebrow){font-size:21px;line-height:2;max-width:730px;color:rgba(255,255,255,.82)} .careers-hero-actions{display:flex;gap:14px;margin:30px 0}.careers-hero .btn-outline{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.04)}.careers-hero .btn-outline:hover{background:#fff;color:#2a211b} .career-intro-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:80px;align-items:center}.career-intro-copy h2{font-size:clamp(38px,4.2vw,66px);line-height:1.2;margin:12px 0 25px}.career-intro-copy p{line-height:2;color:#74675c}.career-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.career-highlights span{padding:14px 16px;border:1px solid #dccbb7;background:#fbf7f1;font-weight:700;transition:.3s}.career-highlights span:hover{background:#2f2924;color:#e5b879;transform:translateY(-4px)} .career-intro-media{position:relative;min-height:610px}.career-main-photo,.career-side-photo{position:absolute;background-size:cover;background-position:center;box-shadow:0 25px 50px rgba(52,39,28,.18)}.career-main-photo{inset:0 0 80px 95px;background-image:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1800&q=92');background-position:center}.career-side-photo{width:47%;height:42%;right:0;bottom:0;border:12px solid #f4ede3;background-image:url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1200&q=92');background-position:center}.career-badge{position:absolute;left:0;bottom:30px;width:180px;height:180px;border-radius:50%;background:#c89b61;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 20px 40px rgba(103,73,39,.25)}.career-badge strong{font-size:52px;line-height:1}.career-badge span{font-weight:700;max-width:120px} .career-values{background:#eee3d5}.career-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d8c7b3;border:1px solid #d8c7b3}.career-values-grid article{position:relative;background:#f8f2e9;padding:42px 30px;min-height:300px;overflow:hidden;transition:.4s}.career-values-grid article::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#2a2420,#463326);transform:translateY(102%);transition:.4s}.career-values-grid article>*{position:relative;z-index:1}.career-values-grid article b{color:#b88a50}.career-value-icon{font-size:34px;color:#bd8d4f;margin:30px 0}.career-values-grid h3{font-size:23px}.career-values-grid p{color:#786b60;line-height:1.8}.career-values-grid article:hover{transform:translateY(-10px);box-shadow:0 20px 38px rgba(62,43,29,.18)}.career-values-grid article:hover::before{transform:translateY(0)}.career-values-grid article:hover h3,.career-values-grid article:hover p{color:#fff}.career-values-grid article:hover .career-value-icon,.career-values-grid article:hover b{color:#e6bd85} .career-stats{background:#171310;color:#fff}.career-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.career-stats article{text-align:center;padding:48px 20px;border-left:1px solid rgba(255,255,255,.12);transition:.35s}.career-stats article:last-child{border-left:0}.career-stats strong{display:block;font-size:50px;color:#d7a96b;transition:.35s}.career-stats span{font-weight:700}.career-stats article:hover{background:#bd8d4f;transform:translateY(-7px)}.career-stats article:hover strong{color:#fff;transform:scale(1.08)} .jobs-toolbar{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.jobs-toolbar h2{font-size:48px;margin:8px 0}.job-filters{display:flex;gap:8px;flex-wrap:wrap}.job-filters button{border:1px solid #d7c3aa;background:transparent;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;transition:.3s}.job-filters button:hover,.job-filters button.is-active{background:#bd8d4f;color:#fff;border-color:#bd8d4f}.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.job-card{background:#fbf7f0;border:1px solid #dfcfbd;padding:30px;min-height:330px;display:flex;flex-direction:column;transition:.38s;position:relative;overflow:hidden}.job-card::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#2c2520,#453326);transform:translateY(102%);transition:.38s}.job-card>*{position:relative;z-index:1}.job-card-top{display:flex;justify-content:space-between;color:#9b6c38;font-weight:700}.job-card h3{font-size:27px;margin:30px 0 14px}.job-card p{color:#74675d;line-height:1.8}.job-card ul{list-style:none;padding:0;margin:auto 0 25px;display:flex;gap:10px;flex-wrap:wrap}.job-card li{font-size:13px;background:#eee1d1;padding:7px 10px}.job-apply{display:flex;justify-content:space-between;border-top:1px solid #dbc8b2;padding-top:18px;font-weight:800;color:#9a6835}.job-card:hover{transform:translateY(-9px);box-shadow:0 22px 45px rgba(51,36,24,.16)}.job-card:hover::before{transform:translateY(0)}.job-card:hover h3,.job-card:hover p,.job-card:hover .job-card-top,.job-card:hover .job-apply{color:#fff}.job-card:hover li{background:rgba(255,255,255,.12);color:#fff}.job-card[hidden]{display:none}.jobs-empty{text-align:center;padding:50px;border:1px dashed #cdb79d;color:#806b59} .career-process{background:#2a2420;color:#fff}.career-process .section-heading h2{color:#fff}.career-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.career-process-grid article{padding:35px 30px;border-left:1px solid rgba(255,255,255,.12);transition:.35s}.career-process-grid span{display:inline-grid;place-items:center;width:58px;height:58px;border:1px solid #cfa064;border-radius:50%;color:#d8ab70;font-weight:800}.career-process-grid h3{font-size:22px;margin:24px 0 12px}.career-process-grid p{color:rgba(255,255,255,.62);line-height:1.8}.career-process-grid article:hover{background:#bd8d4f;transform:translateY(-8px)}.career-process-grid article:hover span{background:#fff;color:#a8753d;border-color:#fff}.career-process-grid article:hover p{color:#fff} .career-application{position:relative;padding:110px 0;background:url('../assets/images/home/project-regional-road.jpg') center/cover fixed;color:#fff}.career-application-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,11,.96),rgba(28,22,18,.72))}.career-application-grid{position:relative;z-index:1;display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}.career-application-copy{padding-top:30px}.career-application-copy span{color:#d8a96a;font-weight:800}.career-application-copy h2{font-size:clamp(42px,5vw,70px);line-height:1.25;margin:18px 0}.career-application-copy p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.9}.career-form{background:#f5ede2;color:#2f2924;padding:38px;box-shadow:0 24px 65px rgba(0,0,0,.25)}.career-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.career-form label{display:flex;flex-direction:column;gap:9px;font-weight:700;margin-bottom:18px}.career-form input,.career-form select,.career-form textarea{width:100%;border:1px solid #d9c5ad;background:#fff;padding:15px 16px;font:inherit;color:#372f28;outline:none;transition:.25s}.career-form input:focus,.career-form select:focus,.career-form textarea:focus{border-color:#b98245;box-shadow:0 0 0 3px rgba(185,130,69,.14)}.file-field span{font-size:12px;color:#847365;font-weight:500}.consent-field{flex-direction:row!important;align-items:center}.consent-field input{width:auto}.career-form .btn{width:100%;border:0;cursor:pointer}.career-form-status{text-align:center;color:#3e7d4d;font-weight:800;margin:15px 0 0} @media(max-width:1050px){.career-intro-grid,.career-application-grid{grid-template-columns:1fr}.career-intro-media{order:-1}.career-values-grid,.career-stats-grid,.career-process-grid{grid-template-columns:repeat(2,1fr)}.jobs-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.careers-hero{min-height:720px}.careers-hero-content{margin:0;padding-top:130px}.careers-hero-actions{flex-direction:column}.career-intro-media{min-height:460px}.career-main-photo{inset:0 0 70px 35px}.career-badge{width:135px;height:135px}.career-badge strong{font-size:40px}.career-highlights,.career-values-grid,.career-stats-grid,.jobs-grid,.career-process-grid,.career-form .form-row{grid-template-columns:1fr}.jobs-toolbar{align-items:stretch;flex-direction:column}.job-filters{display:grid;grid-template-columns:1fr 1fr}.career-stats article,.career-process-grid article{border-left:0;border-bottom:1px solid rgba(255,255,255,.12)}.career-form{padding:25px 18px}.career-application{padding:75px 0;background-attachment:scroll}} /* Careers v15 polish */ .careers-hero{background-position:center 42%} .career-intro-media::after{content:"";position:absolute;inset:20px 30px 95px 115px;border:1px solid rgba(194,145,82,.35);pointer-events:none;z-index:2} .file-field{grid-column:auto} .file-upload-box{position:relative;min-height:185px;border:1.5px dashed #c59a65;background:linear-gradient(145deg,#fff,#f8efe3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px;text-align:center;cursor:pointer;overflow:hidden;transition:.35s ease} .file-upload-box::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(202,157,99,.12),transparent);transform:translateX(110%);transition:.6s} .file-upload-box:hover::before,.file-upload-box.is-dragging::before{transform:translateX(-110%)} .file-upload-box:hover,.file-upload-box:focus,.file-upload-box.is-dragging{border-color:#a56f34;background:#fff8ef;box-shadow:0 14px 30px rgba(77,52,29,.12);transform:translateY(-3px);outline:none} .file-upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0;border:0} .file-upload-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#c89b61;color:#fff;box-shadow:0 10px 24px rgba(176,124,62,.28);transition:.35s} .file-upload-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .file-upload-box:hover .file-upload-icon,.file-upload-box.is-dragging .file-upload-icon{transform:translateY(-4px) scale(1.08)} .file-upload-box strong{font-size:17px;color:#332a23} .file-upload-or{font-size:13px;color:#8a7766;font-weight:600} .file-upload-box small{font-size:12px;color:#9b8877} .file-upload-name{margin-top:4px;max-width:100%;font-size:13px;color:#6d5c4d;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .file-upload-box.has-file{border-style:solid;border-color:#4c8a5a;background:#f4fbf5} .file-upload-box.has-file .file-upload-icon{background:#4c8a5a} .file-upload-box.has-file .file-upload-name{color:#347044} @media(max-width:700px){.file-upload-box{min-height:165px}.career-intro-media::after{inset:15px 20px 85px 48px}} /* v16: careers hero scale + projects section polish */ .careers-hero{min-height:720px} .careers-hero-content{padding-top:96px;max-width:860px} .careers-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.02;max-width:820px;margin:14px 0 20px} .careers-hero-content>p:not(.eyebrow){font-size:19px;line-height:1.85;max-width:700px} .careers-hero .breadcrumb{margin-top:20px;position:relative;z-index:4} .projects-intro-heading{position:relative} .projects-intro .section-kicker{display:inline-block;position:relative;padding-bottom:13px} .projects-intro .section-kicker::after{content:"";position:absolute;right:0;bottom:0;width:68px;height:2px;background:#bd8d4f} .projects-intro-dots{display:flex;gap:7px;margin:14px 0 18px;align-items:center} .projects-intro-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#bd8d4f;box-shadow:0 0 0 5px rgba(189,141,79,.10);transition:.35s} .projects-intro-dots i:nth-child(2){width:11px;height:11px} .projects-intro:hover .projects-intro-dots i{transform:translateY(-3px);background:#8d6234} .timeline-track article{border-radius:14px;transition:transform .38s ease,background-color .38s ease,box-shadow .38s ease,color .38s ease} .timeline-track article b,.timeline-track article h3,.timeline-track article p{transition:color .35s ease,transform .35s ease} .timeline-track article:hover{background:#fffaf3;transform:translateY(-10px);box-shadow:0 22px 55px rgba(67,48,29,.14)} .timeline-track article:hover b{color:#bd8d4f;transform:scale(1.08)} .timeline-track article:hover h3{color:#9b6e37} .timeline-track article:hover p{color:#3e342b} .timeline-track article:hover::before{background:#2d241c;box-shadow:0 0 0 5px rgba(189,141,79,.22),0 0 0 1px #bd8d4f;transform:scale(1.2)} .timeline-track article::before{transition:.35s} @media(max-width:900px){ .careers-hero{min-height:680px} .careers-hero-content{padding-top:120px;margin-right:0} .careers-hero h1{font-size:clamp(38px,9vw,56px)} .careers-hero-content>p:not(.eyebrow){font-size:17px} } @media(max-width:560px){ .careers-hero h1{font-size:38px;line-height:1.08} .careers-hero .breadcrumb{margin-top:14px} .projects-intro-dots{justify-content:flex-start} } /* v17 - Project intro trust points aligned with product catalog */ .projects-intro-copy{align-self:end} .projects-trust-row{margin-top:26px;gap:22px} .projects-trust-row span{display:inline-flex;align-items:center;gap:7px;padding:9px 0;transition:.3s ease} .projects-trust-row span:hover{color:#6f4924;transform:translateY(-3px)} @media(max-width:1000px){ .projects-intro-copy{align-self:auto} .projects-trust-row{justify-content:flex-start} } @media(max-width:640px){ .projects-trust-row{gap:10px 16px;font-size:.92rem} } /* v19 - Careers hero mobile layout aligned with projects page */ @media (max-width: 700px) { .careers-hero { min-height: 720px; align-items: flex-start; background-position: 56% center; } .careers-hero::after { height: 64px; clip-path: ellipse(82% 50% at 50% 100%); } .careers-hero-overlay { background: linear-gradient(180deg, rgba(10, 9, 8, .72) 0%, rgba(14, 12, 10, .6) 48%, rgba(12, 10, 9, .84) 100%); } .careers-hero-content { width: 100%; max-width: none; margin: 0; padding: 118px 22px 92px; text-align: right; } .careers-hero .eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .12em; margin-bottom: 10px; } .careers-hero h1 { max-width: 520px; margin: 8px 0 16px; font-size: clamp(31px, 9vw, 42px); line-height: 1.12; letter-spacing: -.02em; } .careers-hero h1 br { display: none; } .careers-hero h1 span { display: block; margin-top: 4px; } .careers-hero-content > p:not(.eyebrow) { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.9); } .careers-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 520px; margin: 24px 0 16px; } .careers-hero-actions .btn { width: 100%; min-height: 54px; padding: 14px 18px; } .careers-hero .breadcrumb { display: flex; align-items: center; justify-content: flex-start; gap: 9px; margin-top: 10px; padding-bottom: 22px; font-size: 13px; } .careers-hero .service-scroll-cue { bottom: 18px; transform: translateX(-50%) scale(.82); } } @media (max-width: 390px) { .careers-hero { min-height: 690px; } .careers-hero-content { padding-right: 18px; padding-left: 18px; } .careers-hero h1 { font-size: 29px; } .careers-hero-content > p:not(.eyebrow) { font-size: 14px; } } /* Project details page */ .project-details-page{background:#f6efe5;color:#241e19}.project-detail-hero{min-height:760px;position:relative;display:flex;align-items:flex-end;background-size:cover;background-position:center;color:#fff;padding:170px 0 90px}.project-detail-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,9,.92) 0%,rgba(20,16,13,.66) 48%,rgba(20,16,13,.3) 100%)}.project-detail-hero-content{position:relative;z-index:2}.project-detail-hero .eyebrow{color:#d6a35f;letter-spacing:3px;font-weight:800}.project-detail-hero h1{font-size:clamp(3.3rem,7vw,7.5rem);line-height:1.05;max-width:950px;margin:20px 0}.project-detail-hero-content>p:not(.eyebrow){font-size:1.2rem;line-height:2;max-width:760px;color:rgba(255,255,255,.82)}.project-detail-hero .breadcrumb{margin-top:34px}.project-detail-facts{background:#191511;color:#fff}.project-detail-facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}.project-detail-facts article{padding:35px;border-left:1px solid rgba(255,255,255,.12);transition:.35s;position:relative;overflow:hidden}.project-detail-facts article:before{content:"";position:absolute;inset:0;background:#bd8d4f;transform:translateY(101%);transition:.35s}.project-detail-facts article>*{position:relative;z-index:1}.project-detail-facts article:hover:before{transform:translateY(0)}.project-detail-facts article:hover{transform:translateY(-6px)}.project-detail-facts span{display:block;color:#c8b9a9;font-size:.85rem}.project-detail-facts strong{display:block;margin-top:8px;font-size:1.25rem}.project-story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}.project-story-copy h2{font-size:clamp(2.4rem,4vw,4.8rem);line-height:1.25;margin:15px 0 25px}.project-story-copy .lead{color:#6f6257;line-height:2}.project-story-points{margin-top:35px}.project-story-points>div{display:grid;grid-template-columns:55px 1fr;gap:15px;padding:20px 0;border-bottom:1px solid #dfcfbc}.project-story-points b{color:#bd8d4f;font-size:1.3rem}.project-story-points strong,.project-story-points small{display:block}.project-story-points small{color:#766b61;margin-top:5px}.project-story-image{min-height:650px;background-size:cover;background-position:center;position:relative;box-shadow:0 28px 70px rgba(58,42,26,.18)}.project-story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,11,8,.55))}.project-story-badge{position:absolute;right:-35px;bottom:45px;z-index:2;width:170px;height:170px;border-radius:50%;background:#bd8d4f;color:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 18px 45px rgba(0,0,0,.22)}.project-story-badge strong{font-size:2rem}.project-story-badge span{font-size:.8rem}.project-scope{background:#eee3d5}.project-scope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.project-scope-grid article{background:#f9f3eb;padding:36px 28px;min-height:280px;border-top:3px solid transparent;transition:.4s}.project-scope-grid article:hover{background:#201913;color:#fff;border-color:#bd8d4f;transform:translateY(-12px);box-shadow:0 25px 55px rgba(39,27,18,.18)}.project-scope-grid i{font-style:normal;color:#bd8d4f;font-size:1.5rem}.project-scope-grid h3{font-size:1.25rem;margin:28px 0 12px}.project-scope-grid p{line-height:1.9;color:#74685d}.project-scope-grid article:hover p{color:rgba(255,255,255,.68)}.project-challenge{background:#1b1713;color:#fff;padding:0}.project-challenge-grid{display:grid;grid-template-columns:1fr 1fr}.project-challenge-panel,.project-solution-panel{padding:90px 8vw;min-height:520px;display:flex;flex-direction:column;justify-content:center}.project-challenge-panel{background:linear-gradient(145deg,#241d17,#15110e)}.project-solution-panel{background:#bd8d4f}.project-challenge span,.project-solution-panel>span{font-size:.8rem;letter-spacing:2px;font-weight:800}.project-challenge h2{font-size:clamp(2rem,3.6vw,4rem);line-height:1.3;margin:18px 0}.project-challenge p{line-height:2;color:rgba(255,255,255,.76)}.project-result{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.28)}.project-result small,.project-result strong{display:block}.project-result strong{font-size:1.1rem;margin-top:8px}.project-performance{background:#f7f0e6}.project-performance-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ddcdb9}.project-performance-grid article{text-align:center;padding:42px 18px;border-left:1px solid #ddcdb9;transition:.35s}.project-performance-grid article:hover{background:#201913;color:#fff;transform:translateY(-8px)}.project-performance-grid strong{display:block;font-size:2.7rem;color:#bd8d4f}.project-performance-grid span{display:block;margin-top:8px}.project-detail-gallery{background:#1b1713;color:#fff}.project-detail-gallery-grid{display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-template-rows:300px 300px;gap:14px}.project-detail-gallery-grid figure{margin:0;background-size:cover;background-position:center;position:relative;overflow:hidden;cursor:pointer}.project-detail-gallery-grid figure:first-child{grid-row:span 2}.project-detail-gallery-grid figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.58));transition:.35s}.project-detail-gallery-grid figure:hover:after{background:rgba(189,141,79,.18)}.project-detail-gallery-grid figure:hover{background-size:110%}.project-client-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}.project-client-grid h2{font-size:clamp(2.5rem,4vw,4.7rem);line-height:1.25}.project-client-grid p{line-height:2;color:#6f6257}.project-client-card{background:#201913;color:#fff;padding:45px;box-shadow:0 25px 70px rgba(41,29,18,.2)}.project-client-card small{display:block;color:#c9a16f}.project-client-card strong{display:block;font-size:1.35rem;margin-top:8px}.project-client-card hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:25px 0}.related-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.related-project-card{min-height:420px;background-size:cover;background-position:center;position:relative;overflow:hidden;color:#fff}.related-project-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.85));transition:.4s}.related-project-card:hover:before{background:linear-gradient(180deg,rgba(189,141,79,.15),rgba(20,14,9,.9))}.related-project-card:hover{background-size:108%}.related-project-card div{position:absolute;inset:auto 24px 24px;z-index:2}.related-project-card small{color:#d6a35f}.related-project-card h3{font-size:1.35rem}.related-project-card a{color:#fff;font-weight:800}.related-project-card a:hover{color:#d6a35f} @media(max-width:1000px){.project-story-grid,.project-client-grid,.project-challenge-grid{grid-template-columns:1fr}.project-scope-grid{grid-template-columns:repeat(2,1fr)}.project-detail-facts-grid,.project-performance-grid{grid-template-columns:repeat(2,1fr)}.project-story-image{min-height:500px}.project-story-badge{right:25px}.project-detail-gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px 250px}.project-detail-gallery-grid figure:first-child{grid-column:span 2;grid-row:auto}.related-projects-grid{grid-template-columns:1fr 1fr}} @media(max-width:650px){.project-detail-hero{min-height:690px;padding:150px 0 65px;background-position:center}.project-detail-hero h1{font-size:2.8rem}.project-detail-hero-content>p:not(.eyebrow){font-size:1rem}.project-detail-facts-grid,.project-performance-grid{grid-template-columns:1fr 1fr}.project-detail-facts article{padding:24px 14px}.project-story-grid{gap:35px}.project-story-copy h2{font-size:2.35rem}.project-story-image{min-height:390px}.project-story-badge{width:125px;height:125px;right:15px;bottom:20px}.project-scope-grid{grid-template-columns:1fr}.project-challenge-panel,.project-solution-panel{padding:65px 24px;min-height:auto}.project-performance-grid article{padding:28px 10px}.project-performance-grid strong{font-size:2rem}.project-detail-gallery-grid{grid-template-columns:1fr;grid-template-rows:260px}.project-detail-gallery-grid figure:first-child{grid-column:auto}.project-detail-gallery-grid figure{min-height:240px}.related-projects-grid{grid-template-columns:1fr}.project-client-card{padding:30px}} /* Project details refinements v21 */ .project-story-badge{ width:190px; height:190px; padding:24px; overflow:hidden; } .project-story-badge strong{ display:block; max-width:140px; margin:0 auto 8px; font-size:clamp(1.25rem,2.1vw,2rem); line-height:1.35; overflow-wrap:anywhere; } .project-story-badge span{ display:block; font-size:.9rem; line-height:1.35; color:#fff; } .project-performance-grid article{cursor:default;overflow:hidden;position:relative} .project-performance-grid article::before{ content:""; position:absolute; inset:0; background:linear-gradient(145deg,#bd8d4f,#9c6b31); transform:translateY(102%); transition:.4s ease; } .project-performance-grid article>*{position:relative;z-index:1} .project-performance-grid article:hover::before{transform:translateY(0)} .project-performance-grid article:hover strong,.project-performance-grid article:hover span{color:#fff} .project-detail-gallery-grid figure{ transition:transform .45s ease,filter .45s ease,background-size .45s ease; } .project-detail-gallery-grid figure::before{ content:"⌕"; position:absolute; left:50%; top:50%; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; transform:translate(-50%,-50%) scale(.65); background:rgba(189,141,79,.93); border:1px solid rgba(255,255,255,.75); color:#fff; font-size:2.15rem; line-height:1; z-index:3; opacity:0; transition:.35s ease; box-shadow:0 18px 45px rgba(0,0,0,.28); } .project-detail-gallery-grid figure:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)} .project-detail-gallery-grid figure:hover{filter:brightness(.84)} .project-lightbox{ position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:28px 90px; background:rgba(10,8,6,.94); opacity:0; visibility:hidden; transition:.3s ease; } .project-lightbox.is-open{opacity:1;visibility:visible} .project-lightbox img{ max-width:min(1180px,90vw); max-height:86vh; width:auto; height:auto; object-fit:contain; box-shadow:0 30px 100px rgba(0,0,0,.55); transform:scale(.94); transition:.35s ease; } .project-lightbox.is-open img{transform:scale(1)} .project-lightbox-close,.project-lightbox-prev,.project-lightbox-next{ position:fixed; border:1px solid rgba(255,255,255,.55); background:rgba(189,141,79,.94); color:#fff; cursor:pointer; transition:.3s ease; z-index:3001; } .project-lightbox-close{top:24px;left:24px;width:58px;height:58px;border-radius:50%;font-size:2rem} .project-lightbox-prev,.project-lightbox-next{top:50%;width:58px;height:74px;transform:translateY(-50%);font-size:2.5rem} .project-lightbox-prev{left:24px}.project-lightbox-next{right:24px} .project-lightbox-close:hover{background:#fff;color:#241e19;transform:rotate(90deg)} .project-lightbox-prev:hover,.project-lightbox-next:hover{background:#fff;color:#241e19} body.project-lightbox-open{overflow:hidden} @media(max-width:650px){ .project-story-badge{width:138px;height:138px;padding:16px} .project-story-badge strong{font-size:1.18rem;max-width:104px;margin-bottom:4px} .project-story-badge span{font-size:.72rem} .project-detail-gallery-grid figure::before{width:58px;height:58px;font-size:1.75rem;opacity:.88;transform:translate(-50%,-50%) scale(.9)} .project-lightbox{padding:75px 14px 28px} .project-lightbox img{max-width:96vw;max-height:78vh} .project-lightbox-prev,.project-lightbox-next{width:46px;height:58px;font-size:2rem;top:auto;bottom:18px;transform:none} .project-lightbox-prev{left:calc(50% - 58px)}.project-lightbox-next{right:calc(50% - 58px)} .project-lightbox-close{width:48px;height:48px;font-size:1.65rem;top:14px;left:14px} } /* ========================================================= Contact page — v22 ========================================================= */ .contact-hero{position:relative;min-height:650px;display:flex;align-items:center;overflow:hidden;color:#fff;background:#17130f} .contact-hero-media{position:absolute;inset:-4%;background:url('../assets/images/home/project-admin-building.jpg') center 45%/cover no-repeat;animation:contactHeroZoom 12s ease-out both} @keyframes contactHeroZoom{from{transform:scale(1.1)}to{transform:scale(1)}} .contact-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,12,9,.3),rgba(16,12,9,.83) 72%),linear-gradient(to top,rgba(15,11,8,.7),transparent 62%)} .contact-hero-lines{position:absolute;inset:0;pointer-events:none}.contact-hero-lines i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}.contact-hero-lines i:nth-child(1){right:14%}.contact-hero-lines i:nth-child(2){right:50%}.contact-hero-lines i:nth-child(3){right:86%} .contact-hero-content{position:relative;z-index:2;padding-top:120px}.contact-hero h1{font-size:clamp(48px,6.5vw,82px);line-height:1.16;margin:0 0 20px;max-width:780px}.contact-hero h1 span{color:#d7b98e}.contact-hero-content>p:not(.eyebrow){max-width:650px;font-size:18px;color:rgba(255,255,255,.86)} .contact-hero .breadcrumb{margin-top:35px} .contact-quick{position:relative;z-index:5;margin-top:-56px}.contact-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;box-shadow:0 24px 70px rgba(35,26,19,.16)} .contact-quick-card{position:relative;min-height:215px;padding:35px 28px;border-left:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;transition:.4s}.contact-quick-card:last-child{border-left:0}.contact-quick-card::before{content:"";position:absolute;inset:auto 0 0;height:5px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:.4s}.contact-quick-card:hover{background:#211d1a;color:#fff;transform:translateY(-9px);box-shadow:0 20px 50px rgba(31,25,21,.2)}.contact-quick-card:hover::before{transform:scaleX(1)} .contact-quick-card i{font-style:normal;font-size:28px;color:var(--gold);margin-bottom:18px}.contact-quick-card small{color:#8a7c70}.contact-quick-card strong{font-size:15px;margin:6px 0 15px;word-break:break-word}.contact-quick-card b{font-size:12px;color:var(--gold);margin-top:auto}.contact-quick-no{position:absolute;left:18px;top:14px;font-size:44px;font-weight:800;color:rgba(120,96,71,.08);line-height:1} .contact-main{background:linear-gradient(135deg,#f7f2eb 0%,#f1e8dc 100%)}.contact-main-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}.contact-copy h2,.contact-faq h2,.contact-location-copy h2{font-size:clamp(34px,4vw,54px);line-height:1.25;margin:8px 0 20px}.contact-promise{margin-top:34px}.contact-promise>div{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}.contact-promise b{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold-dark);border-radius:50%;flex:0 0 auto}.contact-promise span{display:flex;flex-direction:column}.contact-promise small{color:var(--muted)}.contact-hours{margin-top:30px;padding:22px 26px;background:#211d1a;color:#fff;border-right:4px solid var(--gold);display:grid}.contact-hours span,.contact-hours small{color:#bfb3a7}.contact-hours strong{font-size:20px} .contact-form{background:#fff;padding:42px;box-shadow:0 25px 70px rgba(58,42,29,.12);border-top:4px solid var(--gold)}.contact-form-head small{letter-spacing:2px;color:var(--gold-dark)}.contact-form-head h2{font-size:30px;margin:5px 0}.contact-form-head p{color:var(--muted);font-size:13px}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}.contact-form label{position:relative;display:flex;flex-direction:column;gap:7px}.contact-form label>span{font-weight:700;font-size:13px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #d9cec1;background:#fbf8f4;padding:13px 14px;outline:none;color:var(--ink);transition:.3s;border-radius:2px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(189,152,104,.11)}.contact-form textarea{resize:vertical}.contact-form-wide{grid-column:1/-1}.contact-form label em{position:absolute;bottom:0;right:0;height:2px;width:0;background:var(--gold);transition:.35s}.contact-form label:focus-within em{width:100%}.contact-consent{margin-top:18px!important;display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important}.contact-consent input{width:18px;height:18px;accent-color:var(--gold)}.contact-consent span{font-weight:500!important;color:var(--muted)}.contact-submit-row{display:flex;align-items:center;gap:18px;margin-top:24px}.contact-submit-row button{min-width:190px;gap:20px;border:0;cursor:pointer}.contact-submit-row button:disabled{opacity:.65;cursor:wait}.contact-form-status{font-size:13px;margin:0;color:var(--gold-dark)} .contact-location{display:grid;grid-template-columns:1.25fr .75fr;min-height:590px;background:#211d1a;color:#fff}.contact-location-visual{position:relative;overflow:hidden;background:#d8d0c5}.contact-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(71,62,54,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(71,62,54,.16) 1px,transparent 1px);background-size:55px 55px;transform:rotate(-7deg) scale(1.2)}.contact-map-route{position:absolute;width:120%;height:180px;top:35%;left:-10%;border:28px solid rgba(255,255,255,.7);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-10deg);box-shadow:0 0 0 2px rgba(101,85,70,.14)}.contact-map-pin{position:absolute;top:44%;left:52%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50% 50% 50% 0;background:var(--gold);display:grid;place-items:center;transform-origin:center;rotate:-45deg;box-shadow:0 20px 45px rgba(63,45,29,.28);animation:mapPin 2.4s ease-in-out infinite}.contact-map-pin span{rotate:45deg;font-size:30px}.contact-map-pin i{position:absolute;inset:-18px;border:2px solid rgba(189,152,104,.42);border-radius:50%;animation:mapRipple 2.4s ease-out infinite}.contact-map-label{position:absolute;left:35px;bottom:35px;background:#fff;color:var(--ink);padding:22px 28px;box-shadow:var(--shadow);display:grid}.contact-map-label small{color:var(--gold-dark);letter-spacing:1.5px}.contact-map-label strong{font-size:28px}.contact-map-label span{font-size:13px;color:var(--muted)}@keyframes mapPin{50%{translate:0 -10px}}@keyframes mapRipple{to{transform:scale(1.7);opacity:0}} .contact-location-copy{padding:80px clamp(30px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.contact-location-copy p{color:#c5bbb0}.contact-location-copy ul{list-style:none;padding:0;margin:22px 0 32px}.contact-location-copy li{padding:9px 24px 9px 0;position:relative;color:#eee5db}.contact-location-copy li::before{content:"✓";position:absolute;right:0;color:var(--gold)}.contact-location-copy .btn{align-self:flex-start} .contact-faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.contact-faq-grid>div:first-child p{color:var(--muted)}.contact-accordion details{border-bottom:1px solid var(--line);padding:0}.contact-accordion summary{cursor:pointer;list-style:none;padding:23px 0;font-weight:700;font-size:17px;position:relative;padding-left:45px}.contact-accordion summary::-webkit-details-marker{display:none}.contact-accordion summary::after{content:"+";position:absolute;left:0;top:18px;width:32px;height:32px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-dark);transition:.3s}.contact-accordion details[open] summary::after{content:"−";background:var(--gold);color:#fff;transform:rotate(180deg)}.contact-accordion details p{margin:0 0 22px;color:var(--muted);animation:faqIn .35s ease}@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}} .contact-final{position:relative;padding:85px 0;color:#fff;background:url('../assets/images/home/project-construction.jpg') center/cover no-repeat}.contact-final-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,17,13,.9),rgba(22,17,13,.58))}.contact-final-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-final h2{font-size:clamp(34px,4vw,52px);margin:7px 0}.contact-final p{margin:0;color:#d9d0c6}.contact-final>div span{color:#dbc09b}.contact-wa-btn{background:#21b954;color:#fff}.contact-wa-btn:hover{background:#189a45;transform:translateY(-3px)} @media(max-width:1000px){.contact-quick-grid{grid-template-columns:1fr 1fr}.contact-quick-card:nth-child(2){border-left:0}.contact-main-grid,.contact-faq-grid{grid-template-columns:1fr;gap:45px}.contact-location{grid-template-columns:1fr}.contact-location-visual{min-height:460px}.contact-location-copy{padding:60px 30px}} @media(max-width:700px){.contact-hero{min-height:590px}.contact-hero h1{font-size:43px}.contact-hero-content>p:not(.eyebrow){font-size:15px}.contact-quick{margin-top:-30px}.contact-quick-grid{grid-template-columns:1fr}.contact-quick-card{min-height:165px;border-left:0;border-bottom:1px solid var(--line)}.contact-main-grid{gap:35px}.contact-form{padding:28px 20px}.contact-form-grid{grid-template-columns:1fr}.contact-form-wide{grid-column:auto}.contact-submit-row{align-items:stretch;flex-direction:column}.contact-submit-row button{width:100%}.contact-location-visual{min-height:390px}.contact-final-inner{align-items:flex-start;flex-direction:column}.contact-final .btn{width:100%}} /* ===== v23: restored homepage materials and featured projects strip ===== */ .products-section, .projects-section{padding-block:64px;background:#f5efe7} .projects-section{background:#f8f3ec} .products-section .section-heading, .projects-section .section-heading{margin-bottom:34px} .products-section .product-strip{gap:5px} .products-section .product-card{display:block;min-width:0;isolation:isolate;box-shadow:0 8px 22px rgba(45,34,24,.08)} .products-section .product-card::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.38);z-index:3;pointer-events:none;transition:.35s} .products-section .product-card:hover::before{inset:6px;border-color:rgba(255,255,255,.75)} .products-section .product-card span{transition:transform .35s ease,letter-spacing .35s ease} .products-section .product-card:hover span{transform:translateY(-3px);letter-spacing:.03em} .home-projects-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} .home-project-card{position:relative;display:block;height:190px;overflow:hidden;background-size:cover;background-position:center;isolation:isolate;transition:transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .45s ease,filter .45s ease} .home-project-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,13,9,.82),rgba(18,13,9,.04) 64%);opacity:0;transition:opacity .35s ease;z-index:1} .home-project-card::after{content:"↗";position:absolute;top:14px;left:14px;width:40px;height:40px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(28,21,16,.35);backdrop-filter:blur(7px);opacity:0;transform:translate(-8px,8px) rotate(-20deg);transition:.35s;z-index:2} .home-project-card span{position:absolute;right:16px;left:16px;bottom:14px;color:#fff;font-weight:700;z-index:2;opacity:0;transform:translateY(18px);transition:.35s} .home-project-card:hover,.home-project-card:focus-visible{transform:translateY(-7px) scale(1.025);box-shadow:0 20px 38px rgba(41,29,18,.22);z-index:3;filter:saturate(1.08)} .home-project-card:hover::before,.home-project-card:focus-visible::before, .home-project-card:hover::after,.home-project-card:focus-visible::after, .home-project-card:hover span,.home-project-card:focus-visible span{opacity:1;transform:none} .projects-section .project-1{background-image:url('../assets/images/home/project-admin-building.jpg')!important} .projects-section .project-2{background-image:url('../assets/images/home/project-external-yards.jpg')!important} .projects-section .project-3{background-image:url('../assets/images/home/project-regional-road.jpg')!important} .projects-section .project-4{background-image:url('../assets/images/home/project-stone-supply.jpg')!important} .projects-section .project-5{background-image:url('../assets/images/home/project-construction.jpg')!important} .projects-section .projects-cta{min-width:170px;z-index:0} @media(max-width:1050px){.home-projects-grid{grid-template-columns:repeat(3,1fr)}.home-project-card{height:210px}} @media(max-width:760px){.products-section,.projects-section{padding-block:50px}.home-projects-grid{grid-template-columns:repeat(2,1fr)}.home-project-card{height:190px}} @media(max-width:460px){.home-projects-grid{grid-template-columns:1fr}.home-project-card{height:230px}.products-section .product-strip{scroll-snap-type:x mandatory}.products-section .product-card{scroll-snap-align:start}} /* ===== V24 homepage materials & projects collision fix ===== */ body:not(.projects-page) .products-section, body:not(.projects-page) .projects-section{ padding-block:68px; background:#f7f2eb; } body:not(.projects-page) .products-section{background:#f4eee6} body:not(.projects-page) .products-section > .container, body:not(.projects-page) .projects-section > .container{ width:min(1180px,calc(100% - 36px)); max-width:1180px; } body:not(.projects-page) .products-section .product-strip{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:5px; overflow:visible; } body:not(.projects-page) .products-section .product-card{ display:block; width:auto; min-width:0; min-height:0; height:auto; aspect-ratio:.78; padding:0; margin:0; border-radius:5px; border:1px solid rgba(255,255,255,.62); background-size:cover; background-position:center; box-shadow:0 8px 22px rgba(45,34,24,.08); overflow:hidden; position:relative; isolation:isolate; } body:not(.projects-page) .products-section .product-card::after{ display:block; content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7),transparent 60%); z-index:1; } body:not(.projects-page) .products-section .product-card span{ position:absolute; z-index:2; right:4px; left:4px; bottom:8px; color:#fff; text-align:center; font-size:10px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body:not(.projects-page) .projects-section .home-projects-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; } body:not(.projects-page) .projects-section .home-project-card{ height:190px; min-height:190px; padding:0; margin:0; border:0; border-radius:0; background-size:cover; background-position:center; } .home-all-projects-btn{ position:relative; z-index:0; min-width:170px; min-height:52px; padding:0 28px; background:transparent; color:var(--gold-dark); border:1px solid var(--gold); overflow:hidden; transition:color .35s ease,transform .35s ease,box-shadow .35s ease; } .home-all-projects-btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold); transform:translateY(102%); transition:transform .35s cubic-bezier(.2,.75,.25,1); } .home-all-projects-btn:hover, .home-all-projects-btn:focus-visible{ color:#fff; transform:translateY(-3px); box-shadow:0 12px 28px rgba(189,152,104,.3); } .home-all-projects-btn:hover::before, .home-all-projects-btn:focus-visible::before{transform:translateY(0)} @media(max-width:1050px){ body:not(.projects-page) .products-section .product-strip{ grid-template-columns:repeat(9,130px); overflow-x:auto; padding-bottom:10px; } body:not(.projects-page) .projects-section .home-projects-grid{grid-template-columns:repeat(3,1fr)} body:not(.projects-page) .projects-section .home-project-card{height:210px;min-height:210px} } @media(max-width:760px){ body:not(.projects-page) .projects-section .home-projects-grid{grid-template-columns:repeat(2,1fr)} body:not(.projects-page) .projects-section .home-project-card{height:190px;min-height:190px} } @media(max-width:460px){ body:not(.projects-page) .projects-section .home-projects-grid{grid-template-columns:1fr} body:not(.projects-page) .projects-section .home-project-card{height:230px;min-height:230px} } /* v25 — Unified city dropdowns and project details mobile hero */ .contact-page select[name="city"], .products-page select[name="city"], .careers-page select[name="city"]{ width:100%;min-height:58px;padding:0 18px;border:1px solid #d8c7b4;background:#fff;color:#241e19;font:inherit;cursor:pointer;outline:none;transition:border-color .25s,box-shadow .25s,background-color .25s; } .contact-page select[name="city"]:focus, .products-page select[name="city"]:focus, .careers-page select[name="city"]:focus{border-color:#bd8d4f;box-shadow:0 0 0 3px rgba(189,141,79,.13);background:#fffdf9} @media(max-width:650px){ .project-details-page .project-detail-hero{ min-height:100svh;height:auto;align-items:flex-end;padding:128px 0 54px;background-position:58% center;overflow:hidden; } .project-details-page .project-detail-hero-content{width:100%;padding-inline:18px} .project-details-page .project-detail-hero .eyebrow{font-size:.8rem;letter-spacing:1.5px;margin:0 0 12px} .project-details-page .project-detail-hero h1{font-size:clamp(2.05rem,10vw,3rem);line-height:1.22;max-width:100%;margin:10px 0 16px;overflow-wrap:anywhere} .project-details-page .project-detail-hero-content>p:not(.eyebrow){font-size:.94rem;line-height:1.85;max-width:100%;margin:0;color:rgba(255,255,255,.86)} .project-details-page .project-detail-hero .breadcrumb{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 10px;font-size:.82rem;line-height:1.7} .project-details-page .project-detail-hero .service-scroll-cue{bottom:18px;transform:translateX(-50%) scale(.82)} .project-details-page .project-detail-facts{position:relative;z-index:3} .project-details-page .project-detail-facts-grid{grid-template-columns:1fr 1fr} .project-details-page .project-detail-facts article{min-height:102px;padding:20px 14px;display:flex;flex-direction:column;justify-content:center} .project-details-page .project-detail-facts strong{font-size:1.05rem} } @media(max-width:390px){ .project-details-page .project-detail-hero{padding-top:118px;background-position:60% center} .project-details-page .project-detail-hero h1{font-size:2rem} .project-details-page .project-detail-hero-content>p:not(.eyebrow){font-size:.88rem} } /* v26 — contact select typography, handset icon, and mobile project hero spacing */ .contact-page .contact-form select[name="city"], .contact-page .contact-form select[name="request"], .contact-page .contact-form select[name="service"]{ width:100%; min-height:58px; padding:0 18px; border:1px solid #d8c7b4; background-color:#fff; color:#241e19; font-family:"Cairo",sans-serif; font-size:1rem; font-weight:700; line-height:1.4; cursor:pointer; outline:none; transition:border-color .25s,box-shadow .25s,background-color .25s; } .contact-page .contact-form select[name="city"]:invalid, .contact-page .contact-form select[name="request"]:invalid, .contact-page .contact-form select[name="service"]:has(option[value=""]:checked){color:#6f6a66} .contact-page .contact-form select[name="city"]:focus, .contact-page .contact-form select[name="request"]:focus, .contact-page .contact-form select[name="service"]:focus{ border-color:#bd8d4f; box-shadow:0 0 0 3px rgba(189,141,79,.13); background-color:#fffdf9; } .contact-quick-card .contact-phone-handset{ width:30px; height:30px; display:inline-grid; place-items:center; } .contact-quick-card .contact-phone-handset svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media(max-width:650px){ .project-details-page .project-detail-hero{ min-height:100svh; padding:118px 0 118px; align-items:flex-end; background-position:58% center; } .project-details-page .project-detail-hero-content{padding-inline:22px} .project-details-page .project-detail-hero .eyebrow{margin-bottom:8px} .project-details-page .project-detail-hero h1{ font-size:clamp(2.15rem,9.2vw,2.85rem); line-height:1.18; margin:8px 0 14px; max-width:94%; } .project-details-page .project-detail-hero-content>p:not(.eyebrow){ font-size:.92rem; line-height:1.8; max-width:94%; } .project-details-page .project-detail-hero .breadcrumb{margin-top:20px;gap:7px 9px} .project-details-page .project-detail-hero .service-scroll-cue{bottom:14px} } @media(max-width:390px){ .project-details-page .project-detail-hero{padding:108px 0 105px} .project-details-page .project-detail-hero-content{padding-inline:18px} .project-details-page .project-detail-hero h1{font-size:2.05rem;max-width:100%} .project-details-page .project-detail-hero-content>p:not(.eyebrow){font-size:.86rem;max-width:100%} } /* ===== v27: Correct English/LTR alignment on Products and Careers pages ===== */ html[dir="ltr"] .products-hero-content, html[dir="ltr"] .careers-hero-content { margin-left: 8%; margin-right: auto; text-align: left; } html[dir="ltr"] .products-hero-content > p, html[dir="ltr"] .careers-hero-content > p, html[dir="ltr"] .products-hero h1, html[dir="ltr"] .careers-hero h1 { text-align: left; } html[dir="ltr"] .products-hero .breadcrumb, html[dir="ltr"] .careers-hero .breadcrumb, html[dir="ltr"] .careers-hero-actions { justify-content: flex-start; } html[dir="ltr"] .catalog-title, html[dir="ltr"] .product-intro, html[dir="ltr"] .product-card-body, html[dir="ltr"] .featured-product-copy, html[dir="ltr"] .supply-process, html[dir="ltr"] .product-quote, html[dir="ltr"] .career-intro, html[dir="ltr"] .career-values, html[dir="ltr"] .career-jobs, html[dir="ltr"] .career-process, html[dir="ltr"] .career-application { text-align: left; } html[dir="ltr"] .product-card-body > div, html[dir="ltr"] .product-trust-row, html[dir="ltr"] .career-highlights, html[dir="ltr"] .job-card-meta { direction: ltr; } @media (max-width: 980px) { html[dir="ltr"] .products-hero-content, html[dir="ltr"] .careers-hero-content { margin-left: 0; margin-right: 0; } } @media (max-width: 700px) { html[dir="ltr"] .products-hero-content, html[dir="ltr"] .careers-hero-content { text-align: left; padding-left: 22px; padding-right: 22px; } html[dir="ltr"] .products-hero h1, html[dir="ltr"] .careers-hero h1, html[dir="ltr"] .products-hero-content > p, html[dir="ltr"] .careers-hero-content > p { text-align: left; margin-left: 0; margin-right: auto; } } /* ===== v28: Construction service and improved home mobile layout ===== */ .home-page .services-grid{grid-template-columns:repeat(5,1fr)} .service-construction{ background-image:url('https://images.unsplash.com/photo-1757436382135-5cb8e5cbcda5?auto=format&fit=crop&w=1400&q=88')!important; background-position:center 48%!important; background-size:cover!important; background-repeat:no-repeat!important; } @media(max-width:1050px){ .home-page .services-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .home-page .header-inner{ width:calc(100% - 28px); min-height:72px; display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:0; } .home-page .brand{grid-column:1;grid-row:1;justify-self:start;order:initial;min-width:82px} .home-page .lang-toggle{grid-column:2;grid-row:1;order:initial;margin:0;min-width:92px;height:42px} .home-page .menu-toggle{grid-column:3;grid-row:1;order:initial;justify-self:end;width:46px;height:46px;padding:10px} .home-page .brand-mark{font-size:31px;line-height:1} .home-page .brand-sub{font-size:11px;margin-top:6px} .home-page .main-nav{top:72px;z-index:99;max-height:calc(100svh - 72px);overflow-y:auto} .home-page .hero{height:100svh;min-height:680px;max-height:820px} .home-page .hero-content{ justify-content:flex-start; padding-top:142px; padding-bottom:150px; width:min(100% - 36px,1180px); } .home-page .hero .eyebrow{font-size:11px;letter-spacing:1.7px;margin-bottom:11px} .home-page .hero h1,.home-page .hero .hero-title{font-size:clamp(37px,10.5vw,48px);line-height:1.18;margin-bottom:14px} .home-page .hero-copy{font-size:15px;line-height:1.85;margin-bottom:22px;max-width:100%} .home-page .hero-actions{width:100%;display:grid;grid-template-columns:1fr;gap:10px} .home-page .hero-actions .btn{width:100%;min-height:54px} .home-page .slider-arrow{bottom:84px;width:48px;height:48px} .home-page .slider-prev{left:24px} .home-page .slider-next{right:24px} .home-page .slider-pagination{bottom:102px;left:50%;right:auto;flex-direction:row;gap:7px;transform:translateX(-50%)} .home-page .slider-pagination::before,.home-page .slider-pagination::after{display:none} .home-page .hero-badge{right:24px;bottom:24px;font-size:30px} .home-page .hero-media-one{background-position:56% center} .home-page .hero-media-two{background-position:52% center} .home-page .hero-media-three{background-position:62% center} .home-page .services-grid{grid-template-columns:1fr} } @media(max-width:390px){ .home-page .header-inner{width:calc(100% - 20px);gap:7px} .home-page .lang-toggle{min-width:82px;padding-inline:11px;font-size:12px} .home-page .menu-toggle{width:42px;height:42px;padding:8px} .home-page .brand-mark{font-size:28px} .home-page .hero{min-height:660px} .home-page .hero-content{padding-top:128px;padding-bottom:145px;width:calc(100% - 30px)} .home-page .hero .eyebrow{font-size:9.5px;letter-spacing:1.2px;white-space:nowrap} .home-page .hero h1,.home-page .hero .hero-title{font-size:35px} .home-page .hero-copy{font-size:14px;line-height:1.75} .home-page .slider-prev{left:16px} .home-page .slider-next{right:16px} } /* Construction independent page assets */ .construction-page .service-hero{background-position:center 45%;} @media(max-width:760px){.construction-page .service-hero{background-position:center center}.service-construction{background-position:center 42%!important}} /* ===== v29: Home mobile header and hero final responsive fix ===== */ @media (max-width:760px){ html,body{max-width:100%;overflow-x:hidden} .home-page .site-header{ position:fixed; top:0; right:0; left:0; width:100%; background:rgba(24,21,18,.97); border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 5px 18px rgba(0,0,0,.18); } .home-page .header-inner{ width:100%; max-width:none; min-height:66px; padding:0 14px; margin:0; display:grid; grid-template-columns:84px 1fr 48px; align-items:center; gap:8px; } .home-page .brand{ grid-column:1; grid-row:1; justify-self:start; min-width:0; width:auto; align-items:center; white-space:nowrap; } .home-page .brand-mark{font-size:27px;letter-spacing:2px;line-height:.95} .home-page .brand-sub{font-size:10px;margin-top:6px;line-height:1} .home-page .lang-toggle{ grid-column:2; grid-row:1; justify-self:start; width:88px; min-width:88px; height:38px; margin:0; padding:0 12px; font-size:12px; } .home-page .menu-toggle{ grid-column:3; grid-row:1; justify-self:end; display:block; width:44px; height:44px; padding:9px; margin:0; } .home-page .main-nav{ top:66px; max-height:calc(100svh - 66px); z-index:99; } .home-page .hero{ height:calc(100svh - 66px); min-height:550px; max-height:660px; margin-top:66px; } .home-page .hero-content{ width:calc(100% - 32px); height:100%; justify-content:center; align-items:stretch; padding-top:28px; padding-bottom:112px; } .home-page .hero .eyebrow{ font-size:9px; letter-spacing:1.15px; line-height:1.5; margin:0 0 9px; white-space:normal; } .home-page .hero h1, .home-page .hero .hero-title{ max-width:100%; font-size:clamp(30px,9vw,38px); line-height:1.18; margin:0 0 11px; } .home-page .hero-copy{ max-width:100%; font-size:13.5px; line-height:1.75; margin:0 0 16px; } .home-page .hero-actions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; width:100%; } .home-page .hero-actions .btn{ width:100%; min-height:46px; padding:0 10px; font-size:13px; } .home-page .slider-arrow{ width:42px; height:42px; bottom:54px; } .home-page .slider-prev{left:16px} .home-page .slider-next{right:16px} .home-page .slider-pagination{ bottom:67px; left:50%; right:auto; transform:translateX(-50%); flex-direction:row; gap:5px; } .home-page .slider-pagination::before, .home-page .slider-pagination::after{display:none} .home-page .hero-badge{display:none} .home-page .hero-media{inset:0;transform:scale(1.03)} .home-page .hero-slide.is-active .hero-media{transform:scale(1)} .home-page .hero-media-one{background-position:58% center} .home-page .hero-media-two{background-position:55% center} .home-page .hero-media-three{background-position:62% center} .home-page .hero-shade{ background:linear-gradient(to bottom,rgba(10,8,6,.18),rgba(10,8,6,.55) 40%,rgba(10,8,6,.85) 100%); } .home-page .features-curve{top:-16px;height:24px} } @media (max-width:390px){ .home-page .header-inner{grid-template-columns:76px 1fr 44px;padding-inline:10px;gap:5px} .home-page .brand-mark{font-size:24px} .home-page .brand-sub{font-size:9px} .home-page .lang-toggle{width:80px;min-width:80px;height:36px;padding:0 8px} .home-page .menu-toggle{width:40px;height:40px;padding:7px} .home-page .hero{min-height:530px;max-height:630px} .home-page .hero-content{width:calc(100% - 24px);padding-top:20px;padding-bottom:106px} .home-page .hero h1,.home-page .hero .hero-title{font-size:29px} .home-page .hero-copy{font-size:12.5px;line-height:1.65} .home-page .hero-actions .btn{min-height:44px;font-size:12px} } /* ===== v30: Mobile header language placement + premium construction imagery ===== */ @media (max-width:760px){ .home-page .header-inner{ display:flex; direction:rtl; align-items:center; width:100%; min-height:66px; padding:0 14px; gap:10px; } .home-page .brand{ order:1; margin-left:auto; margin-right:0; flex:0 0 auto; justify-self:auto; } .home-page .lang-toggle{ order:2; flex:0 0 88px; width:88px; min-width:88px; margin:0; justify-self:auto; } .home-page .menu-toggle{ order:3; flex:0 0 44px; width:44px; height:44px; margin:0; justify-self:auto; } .home-page .main-nav{order:4} } @media (max-width:390px){ .home-page .header-inner{padding-inline:10px;gap:7px} .home-page .lang-toggle{flex-basis:80px;width:80px;min-width:80px} .home-page .menu-toggle{flex-basis:40px;width:40px;height:40px} } .construction-page .service-hero{ background-image:url('https://images.unsplash.com/photo-1757436382135-5cb8e5cbcda5?auto=format&fit=crop&w=2400&q=88'); background-position:center 48%; } .construction-page .service-main-image{ background-position:center center!important; } .construction-page .service-thumbnail, .construction-page .service-features-image{ background-position:center center!important; } /* ===== v32: Products page mobile visibility and responsive layout fix ===== */ @media (max-width: 700px) { .products-page .product-catalog.reveal, .products-page .featured-product.reveal, .products-page .supply-process.reveal, .products-page .product-quote.reveal { opacity: 1; transform: none; } .products-page .products-hero { min-height: 620px; background-position: center center; } .products-page .products-hero-content { padding-top: 120px; padding-inline: 20px; margin: 0; width: 100%; } .products-page .products-hero h1 { font-size: clamp(2.35rem, 11vw, 3.25rem); line-height: 1.16; } .products-page .products-hero-content > p:not(.eyebrow) { font-size: .95rem; line-height: 1.8; } .products-page .product-intro, .products-page .product-catalog, .products-page .supply-process { padding-block: 58px; } .products-page .product-intro-grid { gap: 22px; } .products-page .product-trust-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } .products-page .catalog-toolbar { margin-bottom: 26px; padding: 20px 16px; gap: 20px; } .products-page .product-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; } .products-page .product-filters button { width: 100%; padding: 11px 8px; white-space: normal; font-size: .82rem; } .products-page .products-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .products-page .product-card { width: 100%; min-width: 0; } .products-page .product-image { aspect-ratio: 16 / 10; min-height: 0; } .products-page .product-card-body { padding: 21px 18px; } .products-page .product-card-body > div { align-items: flex-start; flex-direction: column; } .products-page .featured-product-media { min-height: 330px; } .products-page .featured-product-copy { padding: 48px 20px; } .products-page .supply-steps { grid-template-columns: 1fr; } .products-page .product-quote { padding: 68px 0; } .products-page .product-quote-grid { gap: 30px; } .products-page .quote-form { width: 100%; padding: 22px 16px; } .products-page .product-modal { padding: 10px; align-items: center; } .products-page .product-modal-card { width: 100%; max-height: 88vh; overflow-y: auto; } } @media (max-width: 390px) { .products-page .product-filters { grid-template-columns: 1fr; } .products-page .products-hero { min-height: 590px; } }