*{margin:0;padding:0;box-sizing:border-box} :root{ --navy:#004288; --navy-dark:#004288; --navy-deep:#004288; --blue:#1A5FAD; --blue-light:#2E7DD1; --blue-bright:#2E7DD1; --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; --section-spacing:50px; --section-spacing-mobile:50px; } html{scroll-behavior:smooth;scroll-padding-top:50px;scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar{display:none} body{font-family:'Inter',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none} body::-webkit-scrollbar{display:none} h1,h2,h3,h4,h5{font-family:'Barlow',sans-serif;font-weight:700} a{text-decoration:none} ::-webkit-scrollbar{display:none} ::-webkit-scrollbar-track{display:none} ::-webkit-scrollbar-thumb{display:none} /* 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 5%;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:#2E7DD1} nav.solid .nav-links a{color:#004288} nav.solid .nav-links a:hover{color:#2E7DD1} .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} /* Hamburger is mobile-only; hidden on desktop so the unstyled default button doesn't show */ .nav-hamburger{display:none} /* HERO */ .hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:0 5%;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 -60px;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:#2E7DD1} .hero-eyebrow::after{content:'';display:inline-block;width:6px;height:6px;background:#2E7DD1;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,.headline-slide .hero-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-align:left;text-shadow:0 1px 2px rgba(0,66,136,0.4),0 2px 8px rgba(0,66,136,0.2)} .headline-slide h1 em,.headline-slide .hero-h1 em{font-style:normal;color:#2E7DD1} .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);text-align:left} .hero-sub strong{color:#2E7DD1;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:5%;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:#2E7DD1;animation:scrollLine 2.5s ease-in-out infinite} @keyframes scrollLine{0%{left:-30%}100%{left:100%}} /* COMMON */ p{text-align:justify} section{padding:var(--section-spacing) 5%} .detail-section:first-of-type{padding-top:80px} /* Content scales with the page (proportional): fills the 6% side-gutters at every width, so it keeps the same proportion and never jumps between left and center. Long paragraphs stay capped (see .section-p etc.) so text lines don't stretch on large monitors. */ .section-inner{max-width:100%;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} .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;text-align:center} /* 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-size:cover;background-position:center;background-repeat:no-repeat} /* Mechanical page — no background image for services section */ .section-canvas--mech{background-image:none} .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:var(--section-spacing) 5%} .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.35;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:#2E7DD1} .divisions-section .section-p{color:#000} .divisions-section .section-head{margin-top:-15px;margin-left:-40px} .divisions-section .section-head.center{margin-top:0;margin-left:auto} .divisions-carousel-wrap{position:relative;margin-top:2.5rem;width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2)} /* Mechanical services carousel — full-bleed inside the narrower detail-section */ #services .divisions-carousel-wrap{width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2)} .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, .pillars-nav-group{display:none} .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%,#2E7DD1 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)} /* ===== CAROUSEL NAVIGATION — paired scroll buttons, bottom-right of every carousel. js/script.js builds .carousel-progress-nav as [prev][dots][next] and fills each button with the text glyph ‹ or ›. Three things are undone here: 1. Layout — the dots are hidden and flex `order` regroups the two arrows into a pair flush right. The dots stay in the DOM (updateIndicators() still writes to them on every scroll), just unpainted. 2. Icon — the glyph is hidden and a chevron mask painted instead. A punctuation glyph draws small inside its em box and is placed by font baseline metrics, so flex centring lines up the text box while the visible mark sits off-centre. 3. Fill — the two buttons share one gradient rather than each repeating it. Applies to every carousel on the site: index.html (divisions + industries), the seven division pages (#services) and wwa.html (#team). All carousel wraps are full-bleed (width:100vw) and every section carries 5% side padding, so padding-right:5% lines the pair up with the content edge above it on all of them. ===== */ .carousel-progress-nav{display:flex;align-items:center;justify-content:flex-end;gap:0;margin-top:24px;width:100%;padding-right:5%} /* Only the pair's outer corners round off, so the two read as one rounded unit: .prev rounds its left side, .next its right, and the two inner edges stay square so they meet flush with nothing drawn between them. */ .carousel-nav-arrow.prev{order:2;border-radius:14px 0 0 14px;background-position:0 0} .carousel-nav-arrow.next{order:3;border-radius:0 14px 14px 0;background-position:-42px 0} /* Filled light-blue gradient, not an outline. Two stacked layers: a soft white radial highlight off the top-left corner over a 135deg linear sweep. The highlight is what stops a small button reading as flat — a plain linear over 42px barely shifts, so the sheen supplies the depth instead. The gradient is sized to the FULL 84px pair, not to one button (see the offsets on .prev / .next above). Without that each button would restart the sweep, so its dark end would butt against the next one's light end and draw a visible step down the middle of the unit. */ .carousel-nav-arrow{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border:none;padding:0;cursor:pointer;transition:all 0.25s ease;background-color:transparent;background-image:radial-gradient(125% 115% at 18% 2%,rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.22) 38%,rgba(255,255,255,0) 70%),linear-gradient(135deg,#9AD6F7 0%,#57ACE6 50%,#2E90D4 100%);background-repeat:no-repeat;background-size:84px 42px;color:#111;box-shadow:0 4px 14px rgba(0,66,136,0.22);font-size:0;line-height:0} /* Hover — same construction, deeper blues, and the chevron flips to white to stay legible. Only the images change; size and position carry over, so the pair still shares one sweep. */ .carousel-nav-arrow:hover{background-image:radial-gradient(125% 115% at 18% 2%,rgba(255,255,255,0.34) 0%,rgba(255,255,255,0.10) 38%,rgba(255,255,255,0) 70%),linear-gradient(135deg,#3E8FD9 0%,#1A5FAD 50%,#004288 100%);color:#fff;box-shadow:0 8px 20px rgba(0,66,136,0.34)} .carousel-nav-arrow:active{transform:scale(0.95)} .carousel-nav-arrow:focus{outline:2px solid var(--accent);outline-offset:2px} /* The chevron is centred by construction: in the 24x24 viewBox the stroked ink spans x 7.8-16.2 and y 4.8-19.2 (round caps and joins add half a stroke past each vertex), so its midpoint is exactly 12,12. Each one then gets a 0.6px nudge toward its point, because a chevron's visual weight sits in its two arms rather than at the single tip. background:currentColor keeps it following the button's text colour through hover. */ .carousel-nav-arrow::before{content:'';display:block;width:20px;height:20px;background:currentColor;-webkit-mask-image:var(--chev);mask-image:var(--chev);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain} .carousel-nav-arrow.next::before{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");transform:translateX(0.6px)} .carousel-nav-arrow.prev::before{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");transform:translateX(-0.6px)} /* Position dots are hidden site-wide — the arrow pair is the only visible control. The layout properties are kept so switching display back to flex restores them intact. */ .carousel-indicators-container{display:none;align-items:center;justify-content:center;gap:12px;flex:0 0 auto} .carousel-indicator-dot{width:6px;height:6px;background:#D1D5DB;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:none;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0} .carousel-indicator-dot:hover{background:#9CA3AF} .carousel-indicator-dot:focus{outline:2px solid var(--accent);outline-offset:3px} .carousel-indicator-dot.active{background:var(--blue);transform:scale(1.2)} @media(max-width:720px){ .carousel-progress-nav{display:none} } .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:clamp(360px,320px + 5.6vw,400px);width:clamp(300px,40px + 36vw,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)} /* Team cards are non-interactive (no destination page) — default cursor so they don't visually imply clickability */ #team .div-card{cursor:default} .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{filter:brightness(0.9) saturate(1.1)} /* Multiple photos of the same person cross-fading in one card slot (see js/script.js photo rotator) */ .div-card-bg.photo-rotator img,.split-img.photo-rotator img{position:absolute;inset:0;opacity:0;transition:opacity 1s ease,transform 1.2s ease,filter 0.5s ease} .div-card-bg.photo-rotator img.active,.split-img.photo-rotator img.active{opacity: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:#2E7DD1;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:#2E7DD1;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:#004288;padding:4px 10px;border:1px solid rgba(0,66,136,0.3);background:rgba(0,66,136,0.08);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:var(--section-spacing) 5%} .pillars-section .section-inner{position:relative;z-index:2} .pillars-section .section-p{color:#000} .pillars-carousel-wrap{position:relative;margin-top:3rem;width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2)} .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{display:none!important} .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%,#2E7DD1 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:clamp(300px,240px + 8.3vw,360px);width:clamp(260px,140px + 16.7vw,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;height:52px;overflow:hidden} /* CTA */ .cta-section{position:relative;min-height:90vh;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--section-spacing) 5%;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/index_46.webp');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:#2E7DD1} .cta-inner h2 .cta-q{color:#FFFFFF} .cta-inner p{color:rgba(255,255,255,0.7);margin-bottom:1.5rem;font-size:1.15rem;line-height:1.45;text-align:center} .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:var(--section-spacing) 5% 0;color:#334155;position:relative;overflow:hidden;border-top:1px solid #EDF1F6} /* Footer content scales as a proportion of the page (never a tiny cluster on huge/zoomed-out screens, never cramped on laptops); the world map fills the right behind it. */ .footer-inner{width:min(100%,max(1200px,72%));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 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} /* Inert placeholder for footer links with no live page yet (News & Insights, Privacy Policy, Terms) — muted, non-interactive, no href promising navigation that goes nowhere */ .footer-link-disabled{color:#64748B;opacity:0.55;cursor:default;pointer-events:none} .footer-col .footer-link-disabled{display:inline-flex;align-items:center;gap:8px;font-size:0.92rem} .footer-col .footer-link-disabled svg{color:#94A3B8;flex-shrink:0} /* REQUEST FORM (used inline on the Contact page — the popup modal that used to wrap this was removed) */ .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 */ /* .div-card sizing is fluid (clamp()) now, so no breakpoint override is needed here — see line 120 */ /* ============================================================ 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 5% 64px;overflow:hidden;background:var(--navy-deep);margin-top:-60px} .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:#2E7DD1} .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} /* CAREERS — OPEN POSITIONS */ .job-list{display:flex;flex-direction:column;gap:1.25rem;margin-top:2.5rem} .job-card{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 55%,#dcecff 100%);border:1px solid rgba(0,66,136,0.10);border-radius:12px;padding:1.85rem 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} .job-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px -12px rgba(0,66,136,0.16);border-color:rgba(46,125,209,0.35)} .job-info{flex:1 1 340px;min-width:0} .job-info h3{font-family:'Barlow',sans-serif;font-size:1.25rem;font-weight:800;color:#004288;margin-bottom:0.65rem;letter-spacing:-0.3px} .job-info p{color:var(--gray);font-size:0.92rem;line-height:1.7;margin-top:0.7rem;text-align:left} .job-meta{display:flex;flex-wrap:wrap;gap:8px} .job-tag{display:inline-flex;align-items:center;font-size:0.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#1A5FAD;background:rgba(0,66,136,0.07);border-radius:20px;padding:5px 13px} .job-card .btn-primary,.job-card .btn-ghost{flex:0 0 auto;white-space:nowrap} .job-card--open{background:linear-gradient(135deg,#eef5ff 0%,#dcecff 100%);border-style:dashed;border-color:rgba(0,66,136,0.25);box-shadow:none} .job-card--open:hover{box-shadow:0 20px 45px -12px rgba(0,66,136,0.12)} .job-empty{display:flex;align-items:flex-start;gap:1.1rem;background:#F7FAFF;border:1px solid rgba(0,66,136,0.10);border-radius:12px;padding:1.85rem 1.9rem} .job-empty .ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(0,66,136,0.07);color:#1A5FAD} .job-empty-text{color:var(--gray);font-size:0.92rem;line-height:1.7} .job-empty-text strong{display:block;font-family:'Barlow',sans-serif;font-size:1.15rem;font-weight:800;color:#004288;letter-spacing:-0.3px;margin-bottom:0.4rem} @media(max-width:600px){.job-empty{flex-direction:column;gap:0.9rem}} /* 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:#2E7DD1} .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%)} /* Empty photo slot for team/project cards (same treatment as .div-card-bg.placeholder) */ .team-card.placeholder{background:linear-gradient(135deg,#004288 0%,#0098D8 100%)} .team-card.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} .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 .team-card-stat{display:block;font-size:0.78rem;font-weight:700;color:#7EB8FF;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:0.4rem} .team-card-body .team-card-desc{display:block;height:60px;overflow:hidden;line-height:1.5} .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:3rem} .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} /* Divisions listing page — the whole photo is a clickable link into the division page. Scoped to .split-img-link so plain .split-img photos on other pages are unaffected. */ a.split-img-link{display:block;cursor:pointer;text-decoration:none} a.split-img-link img{transition:transform .5s ease,filter .4s ease} a.split-img-link:hover img{transform:scale(1.05);filter:brightness(0.9)} a.split-img-link:focus-visible{outline:3px solid #0098D8;outline-offset:3px} .photo-grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem} .photo-grid-2x2 .split-img{height:auto;aspect-ratio:3/2;transform:none} .photo-grid-2x2 .split-img .tile-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%)} .photo-grid-2x2 .split-img .tile-caption{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;color:#fff;font-family:'Barlow',sans-serif;font-weight:800;font-size:2.6rem;line-height:1.1;z-index:2} .photo-grid-2x2 .split-img.gallery-trigger{cursor:pointer} .gallery-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:2rem} .gallery-modal.active{display:flex} .gallery-modal-overlay{position:absolute;inset:0;background:rgba(0,20,40,0.85)} .gallery-modal-panel{position:relative;background:#fff;border-radius:16px;max-width:1000px;width:100%;max-height:85vh;overflow-y:auto;padding:2rem} .gallery-modal-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;background:rgba(0,66,136,0.08);border:none;display:flex;align-items:center;justify-content:center;color:#004288;cursor:pointer;z-index:2} .gallery-modal-close:hover{background:rgba(0,66,136,0.16)} .gallery-modal-title{font-family:'Barlow',sans-serif;font-weight:800;font-size:1.6rem;color:var(--navy-dark);margin-bottom:1.5rem;padding-right:2.5rem} .gallery-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .gallery-modal-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px} .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.5rem;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} /* Divisions listing page — "Explore Division" pill on each discipline row */ .explore-link{display:inline-flex;align-items:center;gap:10px;margin-top:1.6rem;padding:13px 30px;border:1.5px solid rgba(0,66,136,0.30);border-radius:30px;background:#fff;color:#004288;font-family:'Barlow',sans-serif;font-weight:900;font-size:1rem;letter-spacing:0.8px;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 18px rgba(0,66,136,0.06);transition:gap .2s ease,color .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease} .explore-link svg{transition:transform 0.25s ease} /* Hover — a soft white highlight off the top-left over a blue sweep, so the pill fills with a gradient rather than a flat navy. Angled at 120deg because this button is much wider than it is tall, and 135deg would run the sweep off the top corner before it reads. Both layers are deliberately TWO-stop. Every intermediate stop is a kink in the interpolation curve, and the eye picks those out as contour lines — on a pill this wide the old sheen's 42% stop drew a visible diagonal edge across the top-left, and the linear's 48% stop sat off the straight line between its endpoints, creasing the sweep a second time. With only endpoints there is nothing to crease. The sheen's radius is also pushed well past the box (130%/260%) so only its gentlest falloff lands inside the button. The top layer is a dither. #3E8FD9 to #004288 is 81 steps of blue spread over a 240px gradient line, i.e. one flat band every ~3px — comfortably wide enough to see, and not fixable by moving stops around, because 8-bit colour simply has no values left in between. A tiled feTurbulence dither breaks each band's hard edge into scattered pixels, which the eye integrates back into a smooth ramp. numOctaves MUST stay at 1. fractalNoise sums each octave at half the frequency of the last, so 2+ octaves add large-scale structure — that is cloud texture, not dither, and it reads as the fill being blotchy rather than solid. One octave at baseFrequency 0.95 gives a period of about one pixel: invisible on its own, but enough to scatter a band boundary. Raise the rect's opacity to dither harder, lower it if grain shows. */ .explore-link:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),radial-gradient(130% 260% at 12% 0%,rgba(255,255,255,0.24) 0%,rgba(255,255,255,0) 100%),linear-gradient(120deg,#3E8FD9 0%,#004288 100%);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(0,66,136,0.32)} .explore-link:hover svg{transform:translateX(4px)} .explore-link:focus-visible{outline:3px solid #0098D8;outline-offset:3px} /* 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)} /* SOFTWARE/TOOL CHIP LIST — used on division pages */ .sw-grid{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2.25rem} .sw-chip{display:inline-block;padding:11px 24px;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.88rem;letter-spacing:1px;text-transform:uppercase;transition:border-color 0.25s ease,color 0.25s ease,box-shadow 0.25s ease} .sw-chip:hover{border-color:#35AED5;color:#35AED5;box-shadow:0 10px 22px -12px rgba(0,66,136,0.35)} /* DIVISION / INDUSTRY DETAIL SECTIONS */ .detail-section{background:#fff} .detail-section .section-inner{max-width:100%} /* 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:100%} @media(max-width:900px){ .value-grid,.team-grid{grid-template-columns:1fr 1fr} .split-block{grid-template-columns:1fr;gap:2rem} .split-block.reverse .split-img{order:0} .photo-grid-2x2{grid-template-columns:1fr;gap:1rem} .photo-grid-2x2 .split-img{height:auto;aspect-ratio:3/2} .photo-grid-2x2 .split-img .tile-caption{font-size:1.8rem;padding:18px 20px} .gallery-modal-grid{grid-template-columns:1fr} .gallery-modal-panel{padding:1.25rem} .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:80px} .page-hero{min-height:auto;padding:60px 5% 40px;padding-top:80px} .page-hero h1{font-size:1.8rem} .page-hero p{font-size:0.95rem} } @media(max-width:720px){ nav{padding:0 5%;height:60px;display:flex;align-items:center;justify-content:space-between} .nav-hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;align-items:center;justify-content:center} .nav-hamburger span{width:24px;height:2px;background:#004288;transition:all 0.3s ease;display:block} .nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(8px, 8px)} .nav-hamburger.open span:nth-child(2){opacity:0} .nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)} .nav-links{position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;display:none;padding:0.75rem 1rem;border-bottom:1px solid #EDF1F6;z-index:100;max-height:calc(100vh - 60px);overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .nav-links::-webkit-scrollbar{display:none} .nav-links.open{display:flex} .nav-links a{font-size:0.75rem;letter-spacing:0.4px;padding:8px 0;color:#004288;border-bottom:1px solid #EDF1F6} .nav-links a:last-child{border-bottom:none} .nav-cta{border:1.5px solid #004288!important;padding:10px 16px!important;border-radius:22px!important;font-size:0.75rem!important;margin:8px 0 0 0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:38px!important;line-height:1!important} .lang-toggle{display:inline-flex!important;align-items:center!important;padding:10px 16px!important;height:38px!important;border-radius:22px!important;border:1.5px solid #004288!important;line-height:1!important} .nav-logo{padding:4px} .nav-logo svg{height:28px} .btn-primary,.btn-ghost{width:100%;text-align:center;padding:12px 20px;font-size:0.9rem} .hero-scroll{display:none} section{padding:50px 5%} .divisions-section,.pillars-section,.cta-section{padding:50px 5%} .divisions-nav-group{display:none!important} .divisions-nav{background:transparent!important;border:none!important;color:#004288;width:auto;height:auto;padding:4px 8px;box-shadow:none!important;font-size:1.2rem;opacity:0.6;transition:opacity 0.2s} .divisions-nav:hover{opacity:1;background:transparent!important;transform:none!important} .pillars-section .section-head{margin-bottom:1.5rem} .pillars-nav-group{display:none!important} .pillars-nav{background:transparent!important;border:none!important;color:#004288;width:auto;height:auto;padding:4px 8px;box-shadow:none!important;font-size:1.2rem;opacity:0.6;transition:opacity 0.2s} .pillars-nav:hover{opacity:1;background:transparent!important;transform:none!important} .div-card{height:clamp(280px,260px + 5vw,340px);width:clamp(280px,60vw,360px);box-shadow:0 2px 8px rgba(0,66,136,0.15)!important} .div-card:hover{border-color:#1565C0!important} .div-card-title{font-size:1.25rem;margin-bottom:0.25rem;line-height:1.2} .div-card-subtitle{font-size:0.85rem;margin-bottom:0;line-height:1.4;display:inline;color:rgba(255,255,255,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .div-card-body{padding:0 18px 18px;display:flex;flex-direction:column;justify-content:flex-end} .div-card .div-card-services{display:none} .split-text .div-card-services{display:flex!important;flex-wrap:wrap!important;gap:0.4rem!important;margin-top:1rem!important} .split-text .chip{display:none} .split-block:last-child{border-bottom:none} .explore-link{margin-top:0.9rem;padding:10px 22px;font-size:0.82rem;gap:8px} .split-block{margin-bottom:3.5rem;padding-bottom:3.5rem;border-bottom:2px solid #94A3B8;gap:1rem;margin-top:0} .split-img{transform:translateY(0);height:200px} .split-block.reverse .split-img{order:0} .split-text p{font-size:0.8rem;line-height:1.5} .section-h{font-size:1.3rem;margin-bottom:0.6rem} .label{font-size:0.6rem;margin-bottom:0.5rem} .section-p{font-size:0.8rem;max-width:100%} .divisions-section{padding:50px 5%!important} .divisions-section .section-head{margin-bottom:1.5rem;margin-left:0;margin-top:0} .divisions-carousel-wrap{margin-left:calc(var(--vw,100vw) * -0.05);width:var(--vw,100vw);margin-top:1.2rem} .pillars-section{padding:50px 5%!important} .pillars-marquee{margin-top:1rem;overflow-x:auto} .pillar{width:clamp(280px,60vw,360px);height:clamp(280px,260px + 5vw,340px)} .pillar:hover{border-color:rgba(255,255,255,0.8)!important} .pillar-title{font-size:1.25rem;min-height:auto;line-height:1.2;margin-bottom:0.25rem} .pillar-desc{font-size:0.75rem;min-height:auto;line-height:1.4;display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,0.65)} .value-card{padding:1.25rem 1rem} .value-card h3{font-size:0.95rem} .value-card p{font-size:0.75rem} .stat-num{font-size:1.8rem} .stat-label{font-size:0.65rem} .team-card{height:260px} .team-card-body{padding:14px 16px} .team-card-body h4{font-size:0.95rem} .team-card-body span{font-size:0.7rem} .step-row{padding:1rem 0;gap:0.8rem} .step-num{font-size:1.2rem;width:35px} .step-text h3{font-size:0.9rem} .step-text p{font-size:0.75rem} .contact-info-card{padding:1.25rem} .contact-form-card{padding:1.5rem} .footer-top{grid-template-columns:1fr;gap:1.2rem;padding-bottom:1.5rem} .footer-brand{grid-column:1 / -1;border-right:none;padding-right:0;margin-bottom:0.4rem} .footer-brand p{font-size:0.8rem;max-width:100%;margin-bottom:1rem} .footer-col h4{font-size:0.9rem;margin-bottom:0} .footer-col ul{margin-top:1rem} .footer-col li{margin-bottom:0.6rem} .footer-col a{font-size:0.8rem} .footer-map{display:none} .footer-bottom{flex-direction:column;text-align:center;gap:0.8rem} .footer-copy{font-size:0.75rem} .cta-section{min-height:auto!important;padding:40px 5% 30px!important;justify-content:flex-end!important;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.1) 20%,#FFFFFF 50%,#1565C0 100%)!important} .cta-bg-img{background-size:contain!important;background-repeat:no-repeat!important;background-position:top center!important} .cta-overlay{background:linear-gradient(180deg,rgba(0,66,136,0) 0%,rgba(21,101,192,0.3) 40%,rgba(21,101,192,0.8) 80%,rgba(21,101,192,1) 100%)!important} .cta-inner{max-width:100%;padding:330px 0.75rem 100px;z-index:2;position:relative} .cta-inner h2{font-size:2.2rem;margin-bottom:0.8rem;color:white;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.3);line-height:1.2} .cta-inner p{font-size:1.1rem;margin-bottom:2rem;color:rgba(255,255,255,0.95);text-shadow:0 1px 4px rgba(0,0,0,0.3);line-height:1.6;text-align:center} .hero-slide{background-size:cover!important;background-repeat:no-repeat!important;background-position:center -120px!important} .hero{padding:20px 5% 30px!important;min-height:100vh!important;align-items:center!important;padding-top:60px!important} .hero-content{transform:none!important;max-width:100%} .hero-headline{min-height:auto;margin-bottom:0.5rem} .headline-slide h1,.headline-slide .hero-h1{font-size:1.5rem;line-height:1.1;margin-bottom:0} .hero-sub{font-size:0.85rem;margin-bottom:1.25rem;max-width:100%;line-height:1.5} .hero-cta{flex-direction:column;gap:0.75rem;display:none!important} } /* ===== WHO WE ARE - OUR TEAM ===== */ #team{ overflow:hidden; } #team .section-inner{ max-width:none; width:100%; padding:0; } #team .section-head{ max-width:100%; margin:0 auto; padding:0; } #team .divisions-carousel-wrap{ position:relative; width:var(--vw,100vw); margin-top:2.5rem; margin-left:calc(50% - var(--vw,100vw) / 2); } #team .divisions-viewport{ width:100%; overflow-x:auto; overflow-y:hidden; 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:auto; bottom:-70px; right:6%; z-index:10; } /* ===== DIVISIONS / INDUSTRIES / WHY EDC — fill the standard 1400px content width (matches Who We Are & What We Do) ===== */ .pg-wide .detail-section .section-inner{max-width:100%} /* Empty photo slot for split-blocks (swap the .ph-fill for a real later) */ .split-img.placeholder{position:relative;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} /* Empty photo slot for page-hero banners (same treatment as .split-img.placeholder; the hero's own inline gradient is kept, this just adds the grid texture + .ph-fill icon) */ .page-hero-bg.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:100%} #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:#2E7DD1;color:#2E7DD1} #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 #2E7DD1;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} #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-h{font-size:1.2rem;margin-bottom:0.8rem} #experience .exp-tabbar{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1.5rem} #experience .exp-tab{text-align:center;padding:8px 12px;font-size:0.7rem;letter-spacing:1px} #experience .exp-panel p{font-size:0.8rem;margin-bottom:0.75rem} #experience .exp-card-img{height:150px} #experience .exp-card-cap{padding:10px 8px;font-size:0.75rem} #experience .exp-list{grid-template-columns:1fr;gap:0.5rem 1.5rem;margin:1.5rem 0;max-width:100%} #experience .exp-list li{font-size:0.8rem;padding-left:1rem} } /* ============================================================ HEADER LANGUAGE SWITCHER (custom dropdown driving Google Translate) ============================================================ */ /* Keep the Google Translate engine live in the DOM (so its