@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

:root { --ink: #102c64; --deep: #06142d; --teal: #0b4aa2; --mint: #d7e7fb; --cream: #f4f7fb; --white: #ffffff; --orange: #f45128; --line: rgba(16,44,100,.18); --sidebar: 246px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'DM Sans', sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: var(--sidebar); padding: 35px 28px 30px; display: flex; flex-direction: column; color: var(--mint); background: var(--deep); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.brand img { width: 33px; height: 33px; object-fit: contain; border-radius: 50%; }
.brand-dot { color: var(--orange); }.sidebar-rule { height: 1px; margin: 37px 0 25px; background: rgba(184,215,201,.24); }.sidebar-caption { margin: 0; color: #75948b; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: .14em; }.nav-links { display: grid; gap: 22px; margin-top: 70px; }.nav-link { display: flex; align-items: center; gap: 17px; color: #83a199; font-size: 13px; transition: color .25s, transform .25s; }.nav-link span { width: 20px; color: #54736c; font-size: 10px; }.nav-link:hover, .nav-link.active { color: var(--white); transform: translateX(5px); }.nav-link.active span { color: var(--orange); }.sidebar-bottom { margin-top: auto; display: grid; gap: 21px; color: #75948b; font-size: 10px; letter-spacing: .1em; }.sidebar-bottom a { color: var(--mint); font-size: 12px; letter-spacing: 0; }.sidebar-bottom a span { color: var(--orange); margin-left: 8px; }.main-content { margin-left: var(--sidebar); overflow: hidden; }.section { padding: 120px 9vw; position: relative; }.hero { min-height: 690px; height: 100vh; max-height: 920px; padding: 0; color: var(--white); display: flex; align-items: flex-end; }.hero-image { position: absolute; inset: 0; background: url('images/pages/construction-tall-concrete-pylon-bridge-using-tower-crane.jpg') center/cover; }.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,31,29,.88) 0%, rgba(10,31,29,.53) 53%, rgba(10,31,29,.08) 100%), linear-gradient(0deg, rgba(10,31,29,.7), transparent 55%); }.hero-content { position: relative; z-index: 1; width: 100%; padding: 0 9vw 75px; }.eyebrow { color: var(--teal); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; margin: 0 0 23px; }.eyebrow.light { color: var(--mint); }.eyebrow-line { display: inline-block; width: 27px; height: 1px; margin: 0 12px 3px 0; background: var(--orange); }.hero h1, h2 { font-family: 'Syne', sans-serif; letter-spacing: -.065em; font-weight: 700; }.hero h1 { max-width: 700px; margin: 0; font-size: clamp(52px, 7.4vw, 105px); line-height: .91; }.hero h1 em, h2 em { color: var(--mint); font-style: normal; }.hero-footer { display: flex; justify-content: space-between; align-items: flex-end; max-width: 680px; margin-top: 50px; color: #c7d9d2; font-size: 13px; line-height: 1.5; }.hero-footer p { margin: 0; }.round-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 22px; transition: background .25s, color .25s; }.round-arrow:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }.hero-tag { position: absolute; z-index: 1; right: 5vw; top: 50%; color: #b8cec5; font-size: 10px; letter-spacing: .15em; writing-mode: vertical-rl; transform: rotate(180deg); }.intro { background: var(--cream); }.section-label { display: flex; align-items: center; gap: 14px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .16em; }.section-label > span:first-child { color: var(--orange); }.label-line { width: 34px; height: 1px; background: var(--orange); }.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; margin: 77px 0 115px; }.intro h2, .projects h2 { margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: .96; }.intro h2 span, .projects h2 span { color: var(--teal); }.intro-copy { max-width: 430px; padding-top: 12px; }.intro-copy p { color: #536663; line-height: 1.75; }.intro-copy .lead { color: var(--ink); font-family: 'Syne', sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: -.04em; }.text-link { display: inline-block; margin-top: 23px; padding-bottom: 9px; border-bottom: 1px solid var(--orange); font-size: 12px; font-weight: 700; }.text-link span { color: var(--orange); margin-left: 15px; font-size: 16px; }.stats { display: flex; gap: 10vw; padding-top: 30px; border-top: 1px solid var(--line); }.stats div { display: flex; align-items: center; gap: 17px; }.stats strong { font-family: 'Syne', sans-serif; color: var(--teal); font-size: 43px; letter-spacing: -.07em; }.stats span { color: #78908a; font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }.services { background: var(--teal); color: var(--white); }.light-label { color: var(--mint); }.services-heading { margin: 72px 0 74px; }.services h2 { font-size: clamp(46px, 5.7vw, 78px); line-height: .94; margin: 0; }.service-list { border-top: 1px solid rgba(184,215,201,.3); }.service-item { display: grid; grid-template-columns: 50px 75px minmax(190px, 1.1fr) minmax(180px, 1fr) 30px; align-items: center; gap: 20px; min-height: 83px; border-bottom: 1px solid rgba(184,215,201,.3); transition: padding .3s, background .3s; }.service-item:hover { padding: 0 18px; background: rgba(15,36,35,.22); }.service-number { color: var(--mint); font-size: 11px; }.service-code { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .1em; }.service-item h3 { margin: 0; font-family: 'Syne', sans-serif; font-size: 18px; letter-spacing: -.035em; }.service-item p { margin: 0; color: #abc6bc; font-size: 12px; line-height: 1.4; }.service-arrow { color: var(--orange); font-size: 20px; text-align: right; }.projects { background: var(--white); }.projects-top { display: flex; justify-content: space-between; align-items: flex-end; margin: 72px 0 66px; }.projects-note { width: 270px; margin: 0 4% 4px 0; color: #667874; line-height: 1.65; font-size: 13px; }.gallery-grid { display: grid; grid-template-columns: 1.05fr 1.25fr .85fr; gap: 18px; align-items: end; }.gallery-card { margin: 0; overflow: hidden; background: var(--ink); }.gallery-card img { display: block; width: 100%; height: 330px; object-fit: cover; opacity: .86; transition: transform .6s, opacity .3s; }.gallery-2 img { height: 430px; }.gallery-3 img { height: 280px; }.gallery-card:hover img { opacity: 1; transform: scale(1.04); }.gallery-card figcaption { display: flex; justify-content: space-between; padding: 17px 16px; color: var(--mint); background: var(--deep); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.gallery-card figcaption span:last-child { color: var(--orange); }.contact { min-height: 620px; color: var(--white); background: var(--deep) url('images/pages/high-angle-shot-beautiful-city-surrounded-by-hills-blue-sky.jpg') center/cover; display: flex; align-items: center; }.contact:before { content: ''; position: absolute; inset: 0; background: rgba(10,35,32,.86); }.contact-inner, .contact-meta { position: relative; z-index: 1; }.contact h2 { font-size: clamp(48px, 6vw, 84px); line-height: .92; margin: 0 0 48px; }.contact-button { display: inline-flex; align-items: center; gap: 35px; padding: 17px 22px; color: var(--deep); background: var(--mint); font-weight: 700; font-size: 13px; transition: background .25s, gap .25s; }.contact-button:hover { gap: 48px; background: var(--orange); color: var(--white); }.contact-button span { font-size: 18px; }.contact-meta { position: absolute; bottom: 27px; left: 9vw; right: 9vw; display: flex; justify-content: space-between; color: #75948b; font-size: 9px; letter-spacing: .12em; }.mobile-header { display: none; }.reveal { opacity: 0; transform: translateY(25px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--delay, 0ms); }.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 850px) { :root { --sidebar: 0px; }.sidebar { display: flex; position: fixed; inset: 72px 0 0; width: 100%; padding: 45px 25px 28px; transform: translateX(-100%); transition: transform .3s ease; }.sidebar.open { transform: translateX(0); }.sidebar-rule, .sidebar-caption { display: none; }.nav-links { margin-top: 35px; gap: 25px; }.nav-link { font-size: 17px; }.sidebar-bottom { margin-top: auto; }.mobile-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 72px; padding: 17px 22px; display: flex; justify-content: space-between; align-items: center; color: var(--white); background: rgba(15,36,35,.94); }.mobile-header .brand img { width: 29px; height: 29px; }.menu-toggle { display: grid; gap: 6px; width: 38px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; }.menu-toggle span { display: block; width: 100%; height: 1px; background: var(--mint); transition: transform .2s; }.mobile-header.open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.mobile-header.open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }.main-content { margin-left: 0; }.section { padding: 85px 23px; }.hero { min-height: 700px; height: 100svh; }.hero-content { padding: 0 23px 55px; }.hero h1 { font-size: clamp(48px, 15vw, 80px); }.hero-footer { margin-top: 36px; }.hero-tag { display: none; }.intro-grid { grid-template-columns: 1fr; gap: 45px; margin: 60px 0 70px; }.intro-copy { padding: 0; }.stats { gap: 25px; justify-content: space-between; }.stats div { gap: 8px; }.stats strong { font-size: 32px; }.stats span { font-size: 9px; }.services-heading, .projects-top { margin: 55px 0 50px; }.service-item { grid-template-columns: 30px 55px 1fr 25px; gap: 8px; padding: 16px 0; min-height: 0; }.service-item p { display: none; }.service-item h3 { font-size: 15px; }.service-item:hover { padding: 16px 8px; }.projects-top { display: block; }.projects-note { width: auto; margin: 35px 0 0; }.gallery-grid { grid-template-columns: 1fr 1.15fr; gap: 10px; }.gallery-1 { grid-row: span 2; }.gallery-card img, .gallery-2 img, .gallery-3 img { height: 250px; }.gallery-1 img { height: 510px; }.gallery-card figcaption { padding: 12px 10px; font-size: 8px; }.contact { min-height: 620px; }.contact-meta { left: 23px; right: 23px; gap: 12px; flex-wrap: wrap; line-height: 1.5; }.contact-meta span:last-child { width: 100%; }.contact h2 { margin-bottom: 40px; } }
@media (max-width: 400px) { .stats { gap: 12px; }.stats strong { font-size: 27px; }.stats span { font-size: 8px; } }

.contact-main { min-height: 100vh; background: var(--cream); }
.contact-hero { min-height: 100vh; display: grid; grid-template-columns: .95fr 1.05fr; gap: 9vw; align-items: center; padding-top: 90px; padding-bottom: 90px; }
.contact-hero-copy h1 { margin: 0; color: var(--deep); font-family: 'Syne', sans-serif; font-size: clamp(53px, 6vw, 88px); line-height: .91; letter-spacing: -.065em; }
.contact-hero-copy h1 em { color: var(--teal); font-style: normal; }
.contact-intro { max-width: 340px; margin: 38px 0 45px; color: #5c6e69; line-height: 1.7; }
.contact-details { display: grid; gap: 9px; color: var(--teal); font-size: 12px; font-weight: 700; }
.contact-details a { width: max-content; border-bottom: 1px solid var(--orange); padding-bottom: 5px; }
.contact-details span { color: #879792; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.contact-form-wrap { padding: 44px 46px; background: var(--white); border-top: 4px solid var(--orange); box-shadow: 0 20px 60px rgba(22,45,44,.08); }
.contact-form { display: grid; gap: 26px; }
.form-row { display: grid; gap: 9px; }
.form-row label { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.form-row label span { color: var(--orange); }
.form-row input, .form-row textarea { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 14px; resize: vertical; transition: border-color .25s; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--orange); }
.form-row input::placeholder, .form-row textarea::placeholder { color: #9aa9a5; }
.form-button { width: max-content; margin-top: 8px; border: 0; cursor: pointer; font-family: inherit; }
.form-success { min-height: 390px; display: flex; flex-direction: column; justify-content: center; }
.success-mark { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 25px; border-radius: 50%; color: var(--white); background: var(--teal); font-size: 22px; }
.form-success h2 { margin: 0 0 15px; color: var(--deep); font-size: 38px; }
.form-success p { max-width: 360px; color: #687a75; line-height: 1.7; }
.contact-page-meta { position: fixed; bottom: 27px; left: calc(var(--sidebar) + 9vw); right: 9vw; color: #83908b; }
@media (max-width: 850px) { .contact-hero { min-height: auto; grid-template-columns: 1fr; gap: 58px; padding-top: 135px; padding-bottom: 70px; }.contact-hero > * { min-width: 0; }.contact-hero-copy h1 { font-size: clamp(52px, 15vw, 78px); }.contact-intro { margin: 30px 0 32px; }.contact-form-wrap { width: 100%; padding: 34px 24px; }.contact-page-meta { position: static; margin: -35px 23px 28px; width: auto; }.contact-page .sidebar { display: flex; } }

.gallery-card { cursor: zoom-in; }
.gallery-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.lightbox { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; padding: 5vw 9vw; background: rgba(3, 12, 28, .96); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-content { width: min(900px, 78vw); }
.lightbox-slide { display: none; margin: 0; }
.lightbox-slide.active { display: block; animation: lightbox-in .3s ease; }
.lightbox-slide img { display: block; width: 100%; max-height: 76vh; object-fit: contain; }
.lightbox-slide figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0 0; color: var(--mint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.lightbox-slide figcaption span:last-child { color: var(--orange); }
.lightbox-control, .lightbox-close { position: absolute; display: grid; place-items: center; border: 1px solid rgba(215, 231, 251, .55); border-radius: 50%; color: var(--white); background: transparent; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.lightbox-control { top: 50%; width: 48px; height: 48px; font-size: 22px; transform: translateY(-50%); }
.lightbox-prev { left: 3vw; }.lightbox-next { right: 3vw; }
.lightbox-close { top: 28px; right: 3vw; width: 42px; height: 42px; font-size: 27px; line-height: 1; }
.lightbox-control:hover, .lightbox-close:hover { border-color: var(--orange); color: var(--white); background: var(--orange); }
.lightbox-open { overflow: hidden; }
@keyframes lightbox-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .lightbox { padding: 22vw 19px; }.lightbox-content { width: 100%; }.lightbox-control { top: auto; bottom: 30px; transform: none; }.lightbox-prev { left: calc(50% - 62px); }.lightbox-next { right: calc(50% - 62px); }.lightbox-close { top: 22px; right: 19px; }.lightbox-slide img { max-height: 65vh; }.lightbox-slide figcaption { font-size: 9px; } }

.language-switcher { display: flex; align-items: center; gap: 7px; color: #75948b; font-size: 10px; letter-spacing: .1em; }
.language-switcher button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; }
.language-switcher button.active, .language-switcher button:hover { color: var(--orange); }
.mobile-language { display: none; }
@media (max-width: 850px) { .mobile-language { display: flex; position: absolute; right: 78px; color: var(--mint); } }