*{margin:0;padding:0;box-sizing:border-box} :root{ --navy:#004288; --navy-dark:#004288; --navy-deep:#004288; --blue:#1A5FAD; --blue-light:#2E7DD1; --blue-bright:#35AED5; --accent:#1565C0; --accent-hover:#0D47A1; --nav-bg:#7DB6FD; --logo-dark:#004289; --logo-cyan:#0098D8; --white:#FFFFFF; --off-white:#F5F7FA; --gray-light:#E2E8F0; --gray:#64748B; --text:#1E293B; } html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden} h1,h2,h3,h4,h5{font-family:'Barlow',sans-serif;font-weight:700} a{text-decoration:none} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:#f1f1f1} ::-webkit-scrollbar-thumb{background:#1A5FAD;border-radius:3px} /* NAV — Glassmorphism (frosted blur over hero) */ nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 4% 0 6%;background:transparent;border-bottom:none;box-shadow:none;transition:background 0.3s ease,box-shadow 0.3s ease} nav.solid{background:#FFFFFF;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 20px -8px rgba(0,0,0,0.12)} .nav-logo{display:flex;align-items:center;background:transparent;padding:7px 1px;border-radius:10px;box-shadow:none} .nav-logo svg{height:40px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:1.6rem} .nav-links a{color:#004288;font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:700;text-transform:uppercase;transition:color 0.2s;letter-spacing:0.5px} .nav-links a:hover{color:#35AED5} nav.solid .nav-links a{color:#004288} nav.solid .nav-links a:hover{color:#35AED5} .nav-cta{margin-left:0.85rem;background:transparent!important;color:#004288!important;padding:9px 22px;border-radius:22px;border:1.5px solid #004288;font-weight:700!important;font-size:0.92rem!important;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.2s!important} .nav-cta:hover{background:rgba(255,255,255,0.12)!important;color:white!important} nav.solid .nav-cta{color:#004288!important;border-color:#004288} nav.solid .nav-cta:hover{background:#004288!important;color:white!important} /* HERO */ .hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:0 6%;overflow:hidden;background:var(--navy-deep)} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg-img{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=1920&q=80');background-size:cover;background-position:center;filter:brightness(1) saturate(1.05)} .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05);opacity:0;transition:opacity 1.2s ease-in-out;will-change:opacity} .hero-slide.active{opacity:1} .hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0.86) 0%,rgba(255,255,255,0.62) 38%,rgba(255,255,255,0.30) 66%,rgba(255,255,255,0.08) 100%),linear-gradient(180deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 22%)} .hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,66,136,0.78) 0%,rgba(0,66,136,0.52) 45%,rgba(0,66,136,0.22) 100%)} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:80px 80px;z-index:1} .hero-content{position:relative;z-index:2;max-width:820px;width:100%;transform:translateY(-96px)} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:1.75rem;color:rgba(255,255,255,0.55);font-size:0.78rem;letter-spacing:3px;text-transform:uppercase} .hero-eyebrow::before{content:'';display:inline-block;width:32px;height:1px;background:#35AED5} .hero-eyebrow::after{content:'';display:inline-block;width:6px;height:6px;background:#35AED5;border-radius:50%} /* FADE HEADLINE */ .hero-headline{position:relative;min-height:9rem;margin-bottom:2.5rem;width:100%} /* Anchor each rotating headline at the BOTTOM-LEFT of the reserved box so longer (e.g. translated) headlines expand upward — never downward onto .hero-sub below. `top:auto` lets the slide's height follow its content instead of being pinned to the box top. */ .headline-slide{position:absolute;left:0;right:0;bottom:0;top:auto;opacity:0;transition:opacity 1.2s ease-in-out;pointer-events:none} .headline-slide.active{opacity:1;pointer-events:auto} .headline-slide h1{font-size:clamp(2.6rem,5.2vw,4.2rem);font-weight:800;color:#004288;line-height:1.08;letter-spacing:-1px;margin:0;text-shadow:0 1px 2px rgba(0,66,136,0.4),0 2px 8px rgba(0,66,136,0.2)} .headline-slide h1 em{font-style:normal;color:#35AED5} .hero-sub{color:#000;font-size:1.05rem;line-height:1.78;margin-bottom:2.75rem;max-width:580px;font-weight:300;text-shadow:0 2px 12px rgba(0,66,136,0.4)} .hero-sub strong{color:#35AED5;font-weight:500} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} .btn-primary{display:inline-block;background:var(--accent);color:white;padding:15px 36px;border-radius:22px;font-family:'Inter',sans-serif;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:0.8px;transition:all 0.2s;border:none;cursor:pointer;text-decoration:none} .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)} .btn-ghost{display:inline-block;background:transparent;color:#004288;padding:14px 34px;border-radius:22px;font-family:'Inter',sans-serif;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:0.8px;border:1.5px solid #004288;transition:all 0.2s;cursor:pointer;text-decoration:none} .btn-ghost:hover{border-color:#004288;background:#004288;color:white} .hero-scroll{position:absolute;bottom:40px;left:6%;z-index:2;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.45);font-size:0.72rem;letter-spacing:2.5px;text-transform:uppercase} .hero-scroll-line{display:inline-block;width:50px;height:1px;background:rgba(255,255,255,0.3);position:relative;overflow:hidden} .hero-scroll-line::after{content:'';position:absolute;left:-30%;top:0;height:100%;width:30%;background:#35AED5;animation:scrollLine 2.5s ease-in-out infinite} @keyframes scrollLine{0%{left:-30%}100%{left:100%}} /* COMMON */ section{padding:100px 6%} .section-inner{max-width:1400px;margin:0 auto} .label{display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--blue-light);margin-bottom:0.85rem} .section-h{font-size:clamp(1.85rem,3.3vw,2.6rem);font-weight:700;color:var(--navy-dark);line-height:1.2;margin-bottom:1rem;letter-spacing:-0.3px} .section-h em{font-style:normal;color:var(--blue-light)} .section-p{color:var(--gray);font-size:0.98rem;line-height:1.78;max-width:580px} .section-head{margin-bottom:3.5rem} .section-head.center{text-align:center;margin-left:auto;margin-right:auto} .section-head.center .section-p{margin:0 auto} /* DIVISIONS — Horizontal carousel with manual nav + right gradient */ /* SHARED CANVAS behind Divisions + Industries — one continuous surface so the grid + glow span both without a seam */ .section-canvas{position:relative;overflow:hidden;background-color:#FFFFFF;background-image:linear-gradient(rgba(255,255,255,0.70),rgba(255,255,255,0.70)),url('../images/mining_plant_01.png');background-size:cover;background-position:center;background-repeat:no-repeat} /* Mechanical page — swap the services/projects backdrop image (keeps the white wash for readability) */ .section-canvas--mech{background-image:linear-gradient(rgba(255,255,255,0.70),rgba(255,255,255,0.70)),url('../images/mechanical_services_01.png')} .canvas-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(0,66,136,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,66,136,0.05) 1px,transparent 1px);background-size:80px 80px} .canvas-glow{position:absolute;top:22%;left:28%;transform:translate(-50%,-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(46,125,209,0.10) 0%,transparent 60%);z-index:0;pointer-events:none} .divisions-section{background:transparent;position:relative;overflow:hidden;padding:70px 6%} .divisions-section .section-inner{position:relative;z-index:2;margin-left:0;margin-right:auto} .divisions-section .label{font-family:'Barlow',sans-serif;color:#004288;font-size:3rem;font-weight:800;line-height:1.08;letter-spacing:-1px;text-transform:none;text-shadow:0 1px 2px rgba(0,66,136,0.4),0 2px 8px rgba(0,66,136,0.2);margin-bottom:0.9rem} .divisions-section .section-h{color:#004288;font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:800;line-height:1.08;letter-spacing:-1px;text-shadow:0 1px 2px rgba(0,66,136,0.4),0 2px 8px rgba(0,66,136,0.2)} .divisions-section .section-h em{color:#35AED5} .divisions-section .section-p{color:#000} .divisions-section .section-head{margin-top:-30px;margin-left:-40px} .divisions-carousel-wrap{position:relative;margin-top:2.5rem;width:100vw;margin-left:-6vw} /* Mechanical services carousel — full-bleed inside the narrower detail-section */ #services .divisions-carousel-wrap{width:100vw;margin-left:calc(50% - 50vw)} .divisions-viewport{overflow-x:auto;overflow-y:hidden;position:relative;width:100%;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none} .divisions-nav-group{position:absolute;top:-72px;right:6%;z-index:6;display:flex;gap:10px} .divisions-nav{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,66,136,0.18);background:rgba(255,255,255,0.6);backdrop-filter:blur(6px);color:#004288;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.25s ease,background 0.25s ease,color 0.25s ease,border-color 0.25s ease} .divisions-nav:hover{background:linear-gradient(135deg,#004288 0%,#35AED5 100%);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,66,136,0.3)} .divisions-nav:active{transform:translateY(-1px)} .divisions-viewport::-webkit-scrollbar{display:none} .divisions-viewport.dragging{cursor:grabbing} .divisions-grid{display:flex;gap:1.75rem;width:max-content;padding:20px 0} .div-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;height:400px;width:560px;flex-shrink:0;flex-grow:0;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;border:1px solid rgba(0,66,136,0.10);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),border-color 0.4s ease,box-shadow 0.4s ease} .div-card:hover{transform:translateY(-6px);border-color:rgba(46,125,209,0.4);box-shadow:0 25px 60px rgba(0,66,136,0.18)} .div-card-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#004288 0%,#004288 50%,#004288 100%)} .div-card-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease,filter 0.5s ease;filter:brightness(0.82) saturate(1)} .div-card:hover .div-card-bg img{transform:scale(1.07);filter:brightness(0.9) saturate(1.1)} .div-card-bg.placeholder{background:linear-gradient(135deg,#004288 0%,#004288 50%,#004288 100%)} .div-card-bg.placeholder::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(126,184,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(126,184,255,0.04) 1px,transparent 1px);background-size:40px 40px} .div-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,66,136,0) 45%,rgba(0,66,136,0.5) 80%,rgba(0,66,136,0.88) 100%);z-index:1;transition:all 0.5s ease;border-radius:12px} .div-card-num{position:absolute;top:24px;left:28px;z-index:2;font-family:'Barlow',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,0.5)} .div-card-num::before{content:'';display:inline-block;width:20px;height:1px;background:#35AED5;vertical-align:middle;margin-right:10px} .div-card-status{position:absolute;top:24px;right:24px;z-index:2;font-family:'Barlow',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:3px;background:rgba(46,125,209,0.18);color:#35AED5;border:1px solid rgba(53,174,213,0.3)} .div-card-status.soon{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.18)} .div-card-body{position:relative;z-index:2;padding:0 28px 28px} .div-card-tag{display:none} .div-card-title{font-size:2.4rem;font-weight:800;color:white;line-height:1;margin-bottom:0;letter-spacing:-1.3px;font-family:'Barlow',sans-serif} .div-card-subtitle{font-size:0.95rem;color:rgba(255,255,255,0.55);font-weight:300;margin-bottom:1.25rem;line-height:1.5} .div-card-services{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:0} .div-card-services .chip{font-size:0.7rem;color:rgba(255,255,255,0.65);padding:4px 10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);border-radius:3px;font-weight:500;letter-spacing:0.3px} .div-card-link{display:none} .div-card-link-arrow svg{transition:transform 0.3s ease} .div-card:hover .div-card-link-arrow{background:var(--accent);border-color:var(--accent);transform:scale(1.08)} .div-card:hover .div-card-link-arrow svg{transform:translateX(3px)} .div-card.coming{cursor:default} .div-card.coming .div-card-link{color:rgba(255,255,255,0.6)} .div-card.coming .div-card-link-arrow{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.03)} .div-card.coming:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.15)} .div-card.coming:hover .div-card-link-arrow{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.3);transform:none} .div-card.coming:hover .div-card-link-arrow svg{transform:none} /* INDUSTRIES */ .pillars-section{background:transparent;position:relative;overflow:hidden;padding:30px 6% 120px} .pillars-section .section-inner{position:relative;z-index:2} .pillars-section .section-p{color:#000} .pillars-carousel-wrap{position:relative;margin-top:3rem;width:100vw;margin-left:calc(50% - 50vw)} .pillars-marquee{ position:relative; width:100%; overflow:hidden; }.pillars-marquee::-webkit-scrollbar{display:none} .pillars-marquee.dragging{cursor:grabbing} .pillars-track{display:flex;gap:1.5rem;width:max-content;padding:20px 0} .pillars-nav-group{position:absolute;top:-72px;right:6%;z-index:6;display:flex;gap:10px} .pillars-nav{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,66,136,0.18);background:rgba(255,255,255,0.6);backdrop-filter:blur(6px);color:#004288;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.25s ease,background 0.25s ease,color 0.25s ease,border-color 0.25s ease} .pillars-nav:hover{background:linear-gradient(135deg,#004288 0%,#35AED5 100%);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,66,136,0.3)} .pillars-nav:active{transform:translateY(-1px)} .pillar{position:relative;border-radius:12px;overflow:hidden;height:360px;width:380px;flex-shrink:0;cursor:pointer;transition:all 0.4s ease;border:1px solid rgba(0,66,136,0.06)} .pillar:hover{transform:translateY(-6px);box-shadow:0 25px 50px -12px rgba(0,66,136,0.25)} .pillar-img{position:absolute;inset:0;z-index:0;border-radius:12px;overflow:hidden} .pillar-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease} .pillar:hover .pillar-img img{transform:scale(1.06)} .pillar-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,66,136,0) 25%,rgba(0,66,136,0.55) 65%,rgba(0,66,136,0.9) 100%);z-index:1;transition:background 0.4s ease;border-radius:12px} .pillar:hover .pillar-overlay{background:linear-gradient(180deg,rgba(0,66,136,0.08) 22%,rgba(0,66,136,0.6) 65%,rgba(0,66,136,0.92) 100%)} .pillar-content{position:relative;z-index:2;height:100%;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;color:white} .pillar-content > div{display:flex;flex-direction:column;gap:0.05rem} .pillar-title{font-size:1.8rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:0;font-family:'Barlow',sans-serif;line-height:1.15;min-height:70px;display:flex;align-items:flex-end} .pillar-desc{font-size:0.82rem;color:rgba(255,255,255,0.72);line-height:1.55;font-weight:300;min-height:63px} /* CTA */ .cta-section{position:relative;min-height:90vh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 6% 48px;overflow:hidden;background:var(--navy-deep)} .cta-bg{position:absolute;inset:0;z-index:0} .cta-bg-img{position:absolute;inset:0;background-image:url('../images/edc_partners_01.png');background-size:cover;background-position:center top;filter:brightness(0.92) saturate(1.02)} .cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,66,136,0.14) 0%,rgba(0,66,136,0.10) 40%,rgba(0,66,136,0.50) 70%,rgba(0,66,136,0.85) 88%,rgba(0,66,136,0.94) 100%)} .cta-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:60px 60px} .cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;text-align:center} .cta-inner .label{color:#000;margin-bottom:0.55rem;font-size:0.82rem} .cta-inner h2{font-size:clamp(2.5rem,4.8vw,3.6rem);font-weight:800;color:white;margin-bottom:0.75rem;letter-spacing:-0.5px;line-height:1.05} .cta-inner h2 em{font-style:normal;color:#35AED5} .cta-inner p{color:rgba(255,255,255,0.7);margin-bottom:1.5rem;font-size:1.15rem;line-height:1.45} .btn-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FFFFFF 0%,#7DB6FD 100%);color:#004288;padding:17px 46px;border-radius:40px;font-family:'Barlow',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:1px;text-transform:uppercase;transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:pointer;border:none;box-shadow:0 12px 30px -6px rgba(0,66,136,0.35)} .btn-cta:hover{transform:translateY(-3px);box-shadow:0 18px 42px -6px rgba(0,66,136,0.45)} .btn-cta svg{transition:transform 0.3s ease} .btn-cta:hover svg{transform:translateX(4px)} /* FOOTER — Light, structured, with dotted world-map motif */ footer{background:#FFFFFF;padding:80px 6% 0;color:#334155;position:relative;overflow:hidden;border-top:1px solid #EDF1F6} .footer-inner{max-width:1260px;margin:0 auto 0 0;position:relative;z-index:2} .footer-map{position:absolute;top:28px;right:0;width:62%;max-width:860px;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 27%);mask-image:linear-gradient(to right,transparent 0%,#000 27%)} .footer-map .worldmap{width:100%;height:auto;display:block;overflow:visible} .footer-map .land{fill:rgba(0,66,136,0.22)} .footer-map .route{fill:none;stroke:rgba(0,66,136,0.35);stroke-width:1.4;stroke-dasharray:4 5} .footer-map .mk{fill:#0098D8} .footer-map .mk-ring{fill:none;stroke:#0098D8;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:mkpulse 2.6s ease-out infinite} @keyframes mkpulse{0%{transform:scale(0.4);opacity:0.75}70%,100%{transform:scale(1.9);opacity:0}} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:2.5rem;padding-bottom:3.5rem} .footer-brand{padding-right:1.75rem;border-right:1px solid #EDF1F6} .footer-brand .footer-logo{margin-bottom:0.55rem;display:inline-block} .footer-brand .footer-logo svg{height:46px;display:block} .footer-brand p{font-size:0.92rem;color:#475569;line-height:1.75;max-width:320px;margin-bottom:1.75rem} .footer-socials{display:flex;gap:0.75rem} .footer-socials a{width:40px;height:40px;border-radius:50%;border:1px solid #E2E8F0;color:#004288;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease} .footer-socials a:hover{background:#004288;border-color:#004288;color:#fff;transform:translateY(-2px)} .footer-col h4{font-family:'Barlow',sans-serif;font-size:1.08rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#004288;margin-bottom:0} .footer-col h4::after{content:'';display:block;width:34px;height:3px;border-radius:2px;background:#004288;margin-top:0.7rem;opacity:0.85} .footer-col ul{list-style:none;margin-top:1.5rem} .footer-col li{margin-bottom:0.85rem} .footer-col a{display:inline-flex;align-items:center;gap:8px;color:#475569;font-size:0.92rem;transition:color 0.2s} .footer-col a svg{color:#1A5FAD;flex-shrink:0;transition:transform 0.2s} .footer-col a:hover{color:#004288} .footer-col a:hover svg{transform:translateX(2px)} .footer-contact li{display:flex;align-items:center;gap:12px;color:#475569;font-size:0.92rem;margin-bottom:1.1rem} .footer-contact .ic{width:32px;height:32px;border-radius:8px;background:rgba(0,66,136,0.06);color:#004288;display:flex;align-items:center;justify-content:center;flex-shrink:0} .footer-contact a{color:#475569;transition:color 0.2s} .footer-contact a:hover{color:#004288} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem;padding:1.5rem 0;border-top:1px solid #EDF1F6} .footer-copy{color:#64748B;font-size:0.85rem} .footer-tagline{display:flex;align-items:center;gap:10px;color:#64748B;font-size:0.85rem;flex-wrap:wrap} .footer-tagline .shield{color:#004288;display:flex} .footer-tagline strong{color:#1E293B;font-weight:700} .footer-tagline .sep,.footer-legal .sep{color:#CBD5E1} .footer-legal{display:flex;align-items:center;gap:14px;font-size:0.85rem} .footer-legal a{color:#64748B;transition:color 0.2s} .footer-legal a:hover{color:#004288} /* QUOTE MODAL */ .quote-modal{position:fixed;inset:0;background:rgba(0,66,136,0.85);backdrop-filter:blur(8px);z-index:300;display:none;align-items:center;justify-content:center;padding:2rem} .quote-modal.open{display:flex} .quote-box{background:white;border-radius:12px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;position:relative} .quote-box-head{padding:2.5rem 2.5rem 1.5rem;border-bottom:1px solid var(--gray-light);position:relative} .qclose{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:transparent;border:none;cursor:pointer;font-size:1.2rem;color:var(--gray)} .qclose:hover{background:#F1F5F9} .quote-box-head h2{font-size:1.6rem;color:var(--navy-dark);margin-bottom:0.4rem} .quote-box-head p{color:var(--gray);font-size:0.9rem} .quote-form{padding:1.5rem 2.5rem 2.5rem} .form-row{margin-bottom:1.1rem} .form-row label{display:block;font-family:'Barlow',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy-dark);margin-bottom:0.45rem} .form-row input,.form-row select,.form-row textarea{width:100%;padding:11px 14px;border:1px solid var(--gray-light);border-radius:6px;font-family:'Inter',sans-serif;font-size:0.92rem;color:var(--text);transition:border-color 0.2s;background:white} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--blue-light)} .form-row textarea{min-height:90px;resize:vertical} .phone-split{display:flex;gap:8px} .phone-split input,.phone-split select{width:auto} .phone-split .phone-code{flex:0 0 100px;width:100px;padding-left:10px;padding-right:8px} .phone-split .phone-number{flex:1 1 0;width:auto;min-width:0} .form-status{margin-top:0.9rem;font-size:0.9rem;font-weight:600;text-align:center;min-height:1.1em} .form-status.ok{color:#1a8a4a} .form-status.err{color:#c0392b} /* FADE UP */ .fu{opacity:0;transform:translateY(28px);transition:opacity 0.85s ease,transform 0.85s ease} .fu.vis{opacity:1;transform:translateY(0)} /* RESPONSIVE */ @media(max-width:1100px){ .div-card{width:400px;height:380px} } @media(max-width:860px){ .div-card{width:360px;height:360px} } /* ============================================================ INTERIOR PAGES — shared additions (page-hero, cards, forms) Uses the same tokens/patterns as the homepage. ============================================================ */ /* PAGE HERO — shorter navy hero for interior pages */ .page-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;padding:0 6% 64px;overflow:hidden;background:var(--navy-deep)} .page-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:saturate(1.05)} /* Who We Are hero: nudge photo down & right (scale gives horizontal slack since the wide hero fills width exactly) */ .page-hero--who .page-hero-bg{transform:scale(1.12) translate(2.5%,4%)} .page-hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0.90) 0%,rgba(255,255,255,0.66) 40%,rgba(255,255,255,0.30) 70%,rgba(255,255,255,0.08) 100%),linear-gradient(0deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0) 30%)} .page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:80px 80px;z-index:1} .page-hero-content{position:relative;z-index:2;max-width:760px;padding-top:120px} /* Full-height hero variant (mechanical) — matches the landing hero scale, content vertically centered */ .page-hero--full{min-height:100vh;align-items:center;padding-bottom:0} .page-hero--full .page-hero-content{padding-top:0} .page-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;font-size:0.78rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,66,136,0.55);font-weight:600} .page-breadcrumb a{color:rgba(0,66,136,0.55);transition:color 0.2s} .page-breadcrumb a:hover{color:#004288} .page-hero h1{font-size:clamp(2.3rem,4.4vw,3.4rem);font-weight:800;color:#004288;line-height:1.1;letter-spacing:-1px;margin-bottom:1rem;text-shadow:0 1px 2px rgba(0,66,136,0.4),0 2px 8px rgba(0,66,136,0.2)} .page-hero h1 em{font-style:normal;color:#35AED5} .page-hero p{color:#1E293B;font-size:1.05rem;line-height:1.75;max-width:600px;font-weight:300} /* VALUE / FEATURE CARDS */ .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.5rem} .value-card{ background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 55%,#dcecff 100%); border:1px solid rgba(0,66,136,0.10); border-radius:12px; padding:2.25rem 1.9rem; box-shadow:0 15px 35px rgba(0,66,136,0.08); transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease }.value-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px -12px rgba(0,66,136,0.16);border-color:rgba(46,125,209,0.35)} .value-icon{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#004288 0%,#1A5FAD 100%);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:1.25rem} .value-card h3{font-family:'Barlow',sans-serif;font-size:1.25rem;font-weight:800;color:#004288;margin-bottom:0.6rem;letter-spacing:-0.3px} .value-card p{color:var(--gray);font-size:0.92rem;line-height:1.7} /* STATS ROW */ .stat-row{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.5rem;padding:2.5rem 0;border-top:1px solid #EDF1F6;border-bottom:1px solid #EDF1F6} .stat-item{flex:1;min-width:140px} .stat-num{font-family:'Barlow',sans-serif;font-size:2.6rem;font-weight:800;color:#004288;line-height:1;letter-spacing:-1px} .stat-num em{font-style:normal;color:#35AED5} .stat-label{font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-top:0.5rem;font-weight:600} /* TEAM CARDS */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.5rem} .team-card{position:relative;border-radius:12px;overflow:hidden;height:340px;border:1px solid rgba(0,66,136,0.10)} .team-card img{width:100%;height:100%;object-fit:cover;filter:brightness(0.9)} .team-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,66,136,0) 40%,rgba(0,66,136,0.55) 78%,rgba(0,66,136,0.92) 100%)} .team-card-body{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:#fff} .team-card-body h4{font-family:'Barlow',sans-serif;font-size:1.2rem;font-weight:800;margin-bottom:0.15rem} .team-card-body span{font-size:0.82rem;color:rgba(255,255,255,0.7)} /* PROCESS / APPROACH STEPS */ .steps-list{display:flex;flex-direction:column;gap:0;margin-top:2.5rem;max-width:820px} .step-row{display:flex;gap:1.75rem;padding:1.9rem 0;border-bottom:1px solid #EDF1F6} .step-row:first-child{padding-top:0} .step-num{flex-shrink:0;font-family:'Barlow',sans-serif;font-size:1.8rem;font-weight:800;color:rgba(0,66,136,0.18);width:56px} .step-text h3{font-family:'Barlow',sans-serif;font-size:1.15rem;font-weight:800;color:#004288;margin-bottom:0.4rem} .step-text p{color:var(--gray);font-size:0.92rem;line-height:1.7;max-width:560px} /* TWO-COL CONTENT (image + text) */ .split-block{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-top:1rem} .split-block.reverse .split-img{order:2} .split-img{ border-radius:12px; overflow:hidden; height:420px; position:relative; transform:translate(-30px,-20px); } .split-img img{width:100%;height:100%;object-fit:cover} .split-text .label{margin-bottom:0.85rem} .split-text p{color:var(--gray);font-size:0.98rem;line-height:1.78;margin-bottom:1rem} .check-list{list-style:none;margin-top:1.25rem;display:flex;flex-direction:column;gap:0.7rem} .check-list li{display:flex;align-items:flex-start;gap:10px;color:#334155;font-size:0.92rem;font-weight:500} .check-list li svg{flex-shrink:0;margin-top:2px;color:#0098D8} /* CONTACT PAGE */ .contact-layout{display:grid;grid-template-columns:0.85fr 1.15fr;gap:3rem;margin-top:2.5rem;align-items:start} .contact-info-card{background:#fff;border:1px solid rgba(0,66,136,0.08);border-radius:12px;padding:2.25rem} .contact-info-card h3{font-family:'Barlow',sans-serif;font-size:1.1rem;font-weight:800;color:#004288;margin-bottom:1.5rem} .contact-info-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:1.5rem} .contact-info-row .ic{width:38px;height:38px;border-radius:9px;background:rgba(0,66,136,0.06);color:#004288;display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-info-row div h4{font-size:0.88rem;font-weight:700;color:#1E293B;margin-bottom:0.15rem} .contact-info-row div p,.contact-info-row div a{font-size:0.88rem;color:var(--gray)} .contact-form-card{background:#fff;border:1px solid rgba(0,66,136,0.08);border-radius:12px;padding:2.5rem} .contact-form-card h3{font-family:'Barlow',sans-serif;font-size:1.1rem;font-weight:800;color:#004288;margin-bottom:1.75rem} .contact-grid-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem} /* GENERIC PLACEHOLDER IMAGE (used where a real photo will be swapped in later) */ .ph-fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,0.55);z-index:1} .ph-fill svg{opacity:0.8} .ph-fill span{font-family:'Barlow',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.45)} /* DIVISION / INDUSTRY DETAIL SECTIONS */ .detail-section{background:#fff} .detail-section .section-inner{max-width:1000px} /* WHO WE ARE — align Story / Values / Team to the same content width (the site's standard 1400px) so their left & right edges line up for symmetry */ #story .section-inner,#values .section-inner{max-width:1400px} #story .split-block{grid-template-columns:1fr 1.05fr;gap:4.5rem} /* Drop the decorative -30px horizontal pull so the image's left edge lines up with Our Values / Our Team (keep the subtle vertical lift) */ #story .split-img{transform:translateY(-20px)} /* Match the justified body copy used in the Our Team section below */ #story .split-text p{text-align:justify} /* Our Team only */ #team .section-inner{ max-width:100%; padding:0 6%; } #team .divisions-carousel-wrap{ width:calc(100vw - 6%); margin-left:0; } #team .divisions-nav-group{ right:0; } @media(max-width:900px){ .value-grid,.team-grid{grid-template-columns:1fr 1fr} .split-block,#story .split-block{grid-template-columns:1fr;gap:2rem} .split-block.reverse .split-img{order:0} .contact-layout{grid-template-columns:1fr} } @media(max-width:720px){ .value-grid,.team-grid{grid-template-columns:1fr} .stat-row{gap:1.5rem} .contact-grid-row{grid-template-columns:1fr} .page-hero-content{padding-top:90px} .page-hero{min-height:auto;padding-top:80px} } @media(max-width:720px){ nav{padding:0 5%;height:62px} .nav-links a:not(.nav-cta){display:none} .nav-logo{padding:5px 12px} .nav-logo svg{height:26px} .hero{padding:100px 5% 60px} .headline-slide h1{font-size:2.2rem} section{padding:72px 5%} .divisions-section,.pillars-section,.cta-section{padding:72px 5%} .divisions-carousel-wrap{margin-left:-5vw} .div-card{width:300px;height:360px} .div-card-title{font-size:1.8rem} .pillar{width:260px;height:300px} .footer-top{grid-template-columns:1fr 1fr;gap:2rem 2.5rem;padding-bottom:2.5rem} .footer-brand{grid-column:1 / -1;border-right:none;padding-right:0;margin-bottom:0.5rem} .footer-map{display:none} .footer-bottom{flex-direction:column;text-align:center} } /* ===== WHO WE ARE - OUR TEAM ===== */ #team{ overflow:hidden; } #team .section-inner{ max-width:none; width:100%; padding:0; } #team .section-head{ max-width:1400px; margin:0 auto; padding:0; } #team .divisions-carousel-wrap{ position:relative; width:100vw; margin-top:2.5rem; margin-left:calc(50% - 50vw); } #team .divisions-viewport{ width:100%; overflow-x:auto; overflow-y:hidden; padding-left:6%; padding-right:6%; scrollbar-width:none; } #team .divisions-viewport::-webkit-scrollbar{ display:none; } #team .divisions-grid{ display:flex; gap:1.75rem; width:max-content; } #team .divisions-nav-group{ position:absolute; top:-72px; right:6%; z-index:6; } #team .divisions-nav-group{ position:absolute; top:auto; bottom:-70px; /* Increase/decrease this value as needed */ right:6%; z-index:10; } /* ===== DIVISIONS / INDUSTRIES / WHY EDC — fill the standard 1400px content width (matches Who We Are & What We Do), and justify split-block body copy ===== */ .pg-wide .detail-section .section-inner{max-width:1400px} .pg-wide .split-text .section-p{text-align:justify} /* Empty photo slot for split-blocks (swap the .ph-fill for a real later) */ .split-img.placeholder{position:relative;aspect-ratio:3/2;background:linear-gradient(135deg,#004288 0%,#0098D8 100%)} .split-img.placeholder::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(126,184,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(126,184,255,0.05) 1px,transparent 1px);background-size:34px 34px} /* ===== WHAT WE DO — OUR EXPERIENCE (pure-CSS radio tabs) ===== */ /* Widen to the site's standard content width (matches Who We Are) so the block fills the space instead of sitting in a narrow centred column */ #experience .section-inner{max-width:1400px} #experience .exp-tabs{position:relative;margin-top:2.75rem} /* visually hide the radios but keep them focusable for keyboard use */ #experience .exp-radio{position:absolute;width:1px;height:1px;opacity:0;clip:rect(0 0 0 0);overflow:hidden} #experience .exp-tabbar{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:3rem} #experience .exp-tab{display:inline-block;padding:12px 28px;border-radius:8px;border:1.5px solid rgba(0,66,136,0.20);background:#fff;color:#004288;font-family:'Barlow',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background 0.25s ease,border-color 0.25s ease,color 0.25s ease,box-shadow 0.25s ease;user-select:none} #experience .exp-tab:hover{border-color:#35AED5;color:#35AED5} #experience #exp-industry:checked ~ .exp-tabbar label[for="exp-industry"], #experience #exp-energy:checked ~ .exp-tabbar label[for="exp-energy"], #experience #exp-infra:checked ~ .exp-tabbar label[for="exp-infra"], #experience #exp-realestate:checked ~ .exp-tabbar label[for="exp-realestate"]{background:#004288;border-color:#004288;color:#fff;box-shadow:0 12px 26px -10px rgba(0,66,136,0.55)} #experience #exp-industry:focus-visible ~ .exp-tabbar label[for="exp-industry"], #experience #exp-energy:focus-visible ~ .exp-tabbar label[for="exp-energy"], #experience #exp-infra:focus-visible ~ .exp-tabbar label[for="exp-infra"], #experience #exp-realestate:focus-visible ~ .exp-tabbar label[for="exp-realestate"]{outline:2px solid #35AED5;outline-offset:2px} #experience .exp-panel{display:none} #experience #exp-industry:checked ~ .exp-panels .exp-panel--industry, #experience #exp-energy:checked ~ .exp-panels .exp-panel--energy, #experience #exp-infra:checked ~ .exp-panels .exp-panel--infra, #experience #exp-realestate:checked ~ .exp-panels .exp-panel--realestate{display:block;animation:expFade 0.45s ease} @keyframes expFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} #experience .exp-h{font-family:'Barlow',sans-serif;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;color:var(--navy-dark);letter-spacing:-0.5px;margin-bottom:1.1rem} #experience .exp-panel p{color:var(--gray);font-size:0.98rem;line-height:1.78;margin-bottom:1rem;text-align:justify} #experience .exp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2.5rem 0} #experience .exp-card{border-radius:12px;overflow:hidden;border:1px solid rgba(0,66,136,0.10);box-shadow:0 10px 30px -18px rgba(0,66,136,0.4);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s ease} #experience .exp-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(0,66,136,0.4)} #experience .exp-card-img{position:relative;height:210px;background:linear-gradient(135deg,#004288 0%,#0098D8 100%);overflow:hidden} #experience .exp-card-img::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(126,184,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(126,184,255,0.05) 1px,transparent 1px);background-size:34px 34px} #experience .exp-card-img img{width:100%;height:100%;object-fit:cover} #experience .exp-card-cap{background:#004288;color:#fff;text-align:center;padding:13px 10px;font-family:'Barlow',sans-serif;font-weight:700;font-size:0.82rem;letter-spacing:1px;text-transform:uppercase} #experience .exp-overview-h{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--navy-dark);margin:0.5rem 0 1.15rem} #experience .exp-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.65rem 2.5rem;margin:0 0 1.9rem;max-width:820px} #experience .exp-list li{position:relative;padding-left:1.4rem;color:#334155;font-size:0.94rem;font-weight:500;line-height:1.5} #experience .exp-list li::before{content:'';position:absolute;left:0;top:0.55em;width:7px;height:7px;border-radius:2px;background:#0098D8} #experience .exp-cta-text{margin-bottom:1.6rem} @media(max-width:900px){ #experience .exp-cards{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ #experience .exp-cards{grid-template-columns:1fr} #experience .exp-list{grid-template-columns:1fr} #experience .exp-tab{flex:1 1 auto;text-align:center;padding:11px 16px;font-size:0.8rem;letter-spacing:1px} } /* ============================================================ HEADER LANGUAGE SWITCHER (custom dropdown driving Google Translate) ============================================================ */ /* Keep the Google Translate engine live in the DOM (so its