:root {

--navy:#07111f;
--navy2:#111f31;

--orange:#ff6900;
--orange2:#ff8d3a;

--text:#101a29;
--muted:#637083;

--background:#ffffff;
--soft:#f4f6f8;

--border:#dde2e8;

--radius:18px;

--shadow:
0 25px 60px rgba(7,17,31,.12);

}

* {
box-sizing:border-box;
}

html {
scroll-behavior:smooth;
}

body {

margin:0;

font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

color:var(--text);
background:white;

line-height:1.6;

-webkit-font-smoothing:antialiased;

}

img {
display:block;
max-width:100%;
height:auto;
}

a {
color:inherit;
text-decoration:none;
}

button,
input,
textarea,
select {
font:inherit;
}

.container {

width:min(
1180px,
calc(100% - 44px)
);

margin-left:auto;
margin-right:auto;

}

/* ========================================================
HEADER
======================================================== */

.header {

position:sticky;
top:0;

z-index:1000;

background:
rgba(255,255,255,.94);

backdrop-filter:
blur(18px);

border-bottom:
1px solid rgba(7,17,31,.08);

}

.nav {

min-height:76px;

display:flex;
align-items:center;

gap:24px;

}

.logo {

display:flex;
align-items:center;

gap:10px;

margin-right:auto;

}

.logo-icon {

width:35px;
height:35px;

display:grid;
place-items:center;

border-radius:
9px 9px 3px 9px;

background:var(--orange);

color:white;

font-weight:900;

}

.logo-text {

font-size:17px;
font-weight:900;

letter-spacing:.08em;

}

.logo-text span {
color:var(--orange);
}

.navigation {

display:flex;
align-items:center;

gap:20px;

font-size:13px;
font-weight:700;

}

.navigation a {

transition:
color .2s;

}

.navigation a:hover {
color:var(--orange);
}

.nav-right {

display:flex;
align-items:center;

gap:12px;

}

.language {
position:relative;
}

.language-button {

border:0;
background:none;

padding:10px;

font-size:12px;
font-weight:800;

cursor:pointer;

}

.language-list {

display:none;

position:absolute;

top:42px;
right:0;

min-width:110px;

padding:7px;

background:white;

border:
1px solid var(--border);

border-radius:10px;

box-shadow:var(--shadow);

}

.language.open .language-list {
display:grid;
}

.language-list a {

padding:8px 10px;

border-radius:7px;

font-size:12px;

font-weight:800;

}

.language-list a:hover {
background:var(--soft);
}

.mobile-menu {

display:none;

width:44px;
height:44px;

padding:9px;

border:0;
background:transparent;

cursor:pointer;

}

.mobile-menu span {

display:block;

height:2px;

margin:5px 0;

background:var(--navy);

}

/* ========================================================
BUTTONS
======================================================== */

.btn {

display:inline-flex;

min-height:48px;

align-items:center;
justify-content:center;

padding:
0 23px;

border-radius:10px;

border:
1px solid var(--orange);

background:
var(--orange);

color:white;

font-weight:850;

transition:
transform .2s,
box-shadow .2s;

cursor:pointer;

}

.btn:hover {

transform:
translateY(-2px);

box-shadow:
0 14px 32px
rgba(255,105,0,.24);

}

.btn-small {

min-height:39px;

padding:
0 16px;

font-size:12px;

}

.btn-outline {

background:transparent;

color:var(--navy);

border-color:#aeb8c5;

}

/* ========================================================
HERO
======================================================== */

.hero {

overflow:hidden;

background:

radial-gradient(
circle at 82% 17%,
rgba(255,105,0,.09),
transparent 28%
),

linear-gradient(
180deg,
#fff 0%,
#f6f7f9 100%
);

}

.hero-grid {

min-height:
calc(100vh - 76px);

display:grid;

grid-template-columns:
1.02fr .98fr;

align-items:center;

gap:55px;

padding:
76px 0;

}

.eyebrow {

margin-bottom:14px;

color:var(--orange);

font-size:11px;
font-weight:900;

letter-spacing:.17em;

text-transform:uppercase;

}

.hero h1 {

margin:0;

font-size:
clamp(
55px,
6.3vw,
94px
);

line-height:.92;

letter-spacing:-.065em;

font-weight:950;

}

.hero h1 span {
color:var(--orange);
}

.hero-description {

max-width:680px;

margin:
31px 0;

font-size:19px;

color:#556273;

}

.hero-buttons {

display:flex;
flex-wrap:wrap;

gap:12px;

}

.hero-image {
position:relative;
}

.hero-image img {

width:100%;

filter:
drop-shadow(
0 40px 45px
rgba(7,17,31,.14)
);

}

.floating {

position:absolute;

display:grid;

padding:
13px 16px;

border:
1px solid rgba(255,255,255,.75);

border-radius:12px;

background:
rgba(255,255,255,.94);

box-shadow:
var(--shadow);

backdrop-filter:
blur(12px);

}

.floating strong {

color:var(--orange);

font-size:11px;

letter-spacing:.12em;

}

.floating span {

font-size:12px;
font-weight:750;

}

.f1 {
left:-10px;
bottom:15%;
}

.f2 {
right:0;
top:11%;
}

.f3 {
right:4%;
bottom:8%;
}

/* ========================================================
SECTIONS
======================================================== */

.section {

padding:
100px 0;

}

.section-title {
margin-bottom:42px;
}

.section h2 {

margin:
0 0 20px;

font-size:
clamp(
37px,
4.4vw,
62px
);

line-height:1.02;

letter-spacing:-.045em;

}

.lead {

font-size:20px;

color:#5d697a;

max-width:760px;

}

.dark {

background:
var(--navy);

color:white;

}

.dark .lead {
color:#b7c0cc;
}

.soft {
background:var(--soft);
}

/* ========================================================
CARDS
======================================================== */

.cards {

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:18px;

}

.card {

min-height:278px;

padding:28px;

border:
1px solid var(--border);

border-radius:
var(--radius);

background:white;

transition:
transform .25s,
box-shadow .25s,
border-color .25s;

}

.card:hover {

transform:
translateY(-6px);

box-shadow:
var(--shadow);

border-color:
transparent;

}

.dark .card {

background:
var(--navy2);

border-color:
rgba(255,255,255,.09);

}

.card-number {

display:block;

margin-bottom:60px;

color:var(--orange);

font-size:11px;
font-weight:900;

letter-spacing:.12em;

}

.card h3 {

margin:
0 0 12px;

font-size:22px;

line-height:1.15;

}

.card p {

margin:0;

color:var(--muted);

}

.dark .card p {
color:#aeb8c5;
}

/* ========================================================
SPLIT
======================================================== */

.split {

display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:center;

}

.tags {

display:flex;
flex-wrap:wrap;

gap:10px;

}

.tags span {

padding:
12px 15px;

border:
1px solid var(--border);

border-radius:100px;

background:white;

font-size:13px;
font-weight:750;

}

.text-link {

display:inline-block;

margin-top:16px;

color:var(--orange);

font-weight:850;

}

/* ========================================================
PROCESS
======================================================== */

.process {
background:#f6f7f9;
}

.steps {

display:grid;

grid-template-columns:
repeat(6,1fr);

margin-top:45px;

border-top:
1px solid var(--border);

}

.steps div {

display:grid;

gap:9px;

padding:
27px 15px 5px 0;

}

.steps span {

color:var(--orange);

font-size:10px;
font-weight:900;

}

.steps strong {
font-size:14px;
}

/* ========================================================
ZURICH
======================================================== */

.zurich {

background:
var(--navy);

color:white;

}

.zurich .lead {
color:#b9c2ce;
}

.align-right {

display:flex;

justify-content:flex-end;

}

/* ========================================================
PAGE HERO
======================================================== */

.page-hero {

padding:
140px 0 95px;

background:

radial-gradient(
circle at 82% 14%,
rgba(255,105,0,.1),
transparent 28%
),

var(--soft);

}

.page-hero h1,
.local-hero h1 {

max-width:950px;

margin:0;

font-size:
clamp(
48px,
7vw,
86px
);

line-height:.97;

letter-spacing:-.055em;

}

.page-hero p,
.local-hero p {

max-width:790px;

font-size:20px;

color:#5c697a;

}

/* ========================================================
PROJECTS
======================================================== */

.project-grid {

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:18px;

}

.project {

overflow:hidden;

padding-bottom:24px;

border:
1px solid var(--border);

border-radius:var(--radius);

}

.project > *:not(.project-image) {

margin-left:22px;
margin-right:22px;

}

.project-image {

height:290px;

margin-bottom:22px;

}

.project-image.residential {

background:

linear-gradient(
135deg,
rgba(255,105,0,.18),
transparent
),

linear-gradient(
135deg,
#d8dde3,
#7f8b99
);

}

.project-image.commercial {

background:

linear-gradient(
135deg,
rgba(255,105,0,.30),
transparent
),

linear-gradient(
135deg,
#101e30,
#546679
);

}

.project-image.software {

background:

radial-gradient(
circle at 75% 30%,
var(--orange),
transparent 8%
),

linear-gradient(
135deg,
#091320,
#22405f
);

}

.project > span {

color:var(--orange);

font-size:10px;
font-weight:900;

letter-spacing:.13em;

}

.project h3 {
font-size:23px;
}

/* ========================================================
PRODUCTS
======================================================== */

.product-grid {

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:17px;

}

.product-grid article {

min-height:225px;

display:flex;
flex-direction:column;

justify-content:flex-end;

padding:24px;

border-radius:var(--radius);

background:var(--navy);

color:white;

}

.product-grid article > span {

margin-bottom:auto;

color:var(--orange);

font-size:10px;

font-weight:900;

letter-spacing:.13em;

}

.product-grid article a {

color:var(--orange);

font-size:12px;
font-weight:850;

}

/* ========================================================
STATEMENT
======================================================== */

.statement {

min-height:320px;

display:flex;
flex-direction:column;

justify-content:space-between;

padding:42px;

border-radius:var(--radius);

background:var(--navy);

color:white;

}

.statement span {

color:var(--orange);

font-size:10px;

font-weight:900;

letter-spacing:.16em;

}

.statement strong {

font-size:28px;

line-height:1.4;

}

/* ========================================================
CONTACT
======================================================== */

.contact-grid {

display:grid;

grid-template-columns:
.7fr 1.3fr;

gap:80px;

}

.contact-info {

display:flex;
flex-direction:column;

align-items:flex-start;

gap:10px;

}

.contact-info a {
font-weight:800;
}

.contact-form {

display:grid;

gap:17px;

padding:34px;

border-radius:var(--radius);

background:var(--soft);

}

.form-row {

display:grid;

grid-template-columns:
1fr 1fr;

gap:15px;

}

.contact-form label {

display:grid;

gap:7px;

font-size:12px;
font-weight:800;

}

.contact-form input,
.contact-form textarea,
.contact-form select {

width:100%;

padding:
13px 14px;

border:
1px solid #cbd2da;

border-radius:9px;

background:white;

outline:0;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {

border-color:
var(--orange);

}

.honeypot {

position:absolute !important;

left:-9999px !important;

}

.form-status {

min-height:24px;

font-size:13px;

}

/* ========================================================
LOCAL SEO
======================================================== */

.local-hero {

padding:
130px 0 95px;

background:var(--soft);

}

.local-grid {

display:grid;

grid-template-columns:
1.2fr .8fr;

gap:70px;

align-items:center;

}

.local-box {

min-height:390px;

display:flex;
flex-direction:column;

justify-content:space-between;

padding:42px;

border-radius:26px;

background:

radial-gradient(
circle at 74% 18%,
rgba(255,105,0,.85),
transparent 9%
),

radial-gradient(
circle at 30% 70%,
rgba(255,105,0,.30),
transparent 13%
),

var(--navy);

color:white;

box-shadow:var(--shadow);

}

.local-box > span {

color:var(--orange);

font-size:10px;
font-weight:900;

letter-spacing:.17em;

}

.local-box strong {

font-size:39px;

line-height:1.1;

}

.check-list {

display:grid;

grid-template-columns:
1fr 1fr;

gap:11px;

padding:0;

margin:0;

list-style:none;

}

.check-list li {

padding:15px;

border:
1px solid var(--border);

border-radius:10px;

font-weight:700;

}

.check-list span {
color:var(--orange);
}

.cta {

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

/* ========================================================
FOOTER
======================================================== */

.footer {

padding-top:70px;

background:#050b13;

color:white;

}

.footer-grid {

display:grid;

grid-template-columns:
1.4fr 1fr 1fr .7fr;

gap:45px;

}

.footer-grid > div {

display:flex;
flex-direction:column;

align-items:flex-start;

gap:8px;

}

.footer-logo {

font-size:19px;
font-weight:900;

letter-spacing:.08em;

}

.footer-logo span {
color:var(--orange);
}

.footer-grid a,
.footer-grid p,
.footer-grid span {

font-size:13px;

color:#a5b0bf;

}

.copyright {

display:flex;

justify-content:space-between;

margin-top:55px;

padding:
33px 0;

border-top:
1px solid rgba(255,255,255,.09);

color:#7d8997;

font-size:12px;

}

/* ========================================================
TABLET
======================================================== */

@media (max-width:1100px) {

.navigation {
gap:12px;
}

.navigation a {
font-size:12px;
}

.desktop-quote {
display:none;
}

.cards {
grid-template-columns:1fr 1fr;
}

.product-grid {
grid-template-columns:1fr 1fr;
}

.steps {
grid-template-columns:
repeat(3,1fr);
}

}

/* ========================================================
MOBILE / TABLET
======================================================== */

@media (max-width:850px) {

.container {

width:min(
100% - 30px,
1180px
);

}

.nav {
min-height:68px;
}

.mobile-menu {

display:block;

order:4;

}

.navigation {

display:none;

position:absolute;

top:68px;
left:0;
right:0;

padding:
25px 25px 32px;

background:white;

box-shadow:
0 25px 40px
rgba(7,17,31,.12);

flex-direction:column;

align-items:flex-start;

gap:17px;

}

.header.menu-open
.navigation {

display:flex;

}

.hero-grid {

min-height:auto;

grid-template-columns:1fr;

padding:
70px 0 55px;

}

.hero h1 {

font-size:
clamp(
51px,
14vw,
76px
);

}

.hero-image {

margin-top:20px;

}

.split,
.contact-grid,
.local-grid {

grid-template-columns:1fr;

gap:45px;

}

.cards {
grid-template-columns:1fr 1fr;
}

.project-grid {
grid-template-columns:1fr;
}

.footer-grid {
grid-template-columns:1fr 1fr;
}

.align-right {
justify-content:flex-start;
}

}

/* ========================================================
PHONE
======================================================== */

@media (max-width:580px) {

.logo-text {
font-size:14px;
}

.language-button {
padding:8px;
}

.cards,
.product-grid,
.form-row,
.check-list {

grid-template-columns:1fr;

}

.card {
min-height:230px;
}

.card-number {
margin-bottom:40px;
}

.section {
padding:70px 0;
}

.section h2 {
font-size:38px;
}

.page-hero,
.local-hero {

padding:
95px 0 65px;

}

.page-hero h1,
.local-hero h1 {

font-size:
clamp(
43px,
13vw,
59px
);

}

.steps {
grid-template-columns:1fr 1fr;
}

.contact-form {
padding:21px;
}

.footer-grid {
grid-template-columns:1fr;
}

.copyright {

flex-direction:column;

gap:8px;

}

.floating {
display:none;
}

.local-box {
min-height:300px;
}

.local-box strong {
font-size:31px;
}

.cta {

align-items:flex-start;

flex-direction:column;

}

.hero-description {
font-size:17px;
}

.hero-buttons .btn {

width:100%;

}

}

/* ========================================================
SMALL PHONE
======================================================== */

@media (max-width:390px) {

.container {
width:calc(100% - 24px);
}

.logo-icon {

width:31px;
height:31px;

}

.logo-text {
font-size:12px;
}

.hero h1 {
font-size:46px;
}

}