@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root {
--bg:#f5f5f2;
--ink:#111313;
--muted:#686e6c;
--line:#dedfda;
--accent:#c9ff33;
--dark:#121616;
--white:#fff
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth
}
body {
margin:0;
background:var(--bg);
color:var(--ink);
font-family:'DM Sans',Arial,sans-serif;
line-height:1.6
}
a {
color:inherit;
text-decoration:none
}
.container {
width:min(1180px,calc(100% - 48px));
margin:auto
}
.site-header {
position:sticky;
top:0;
z-index:20;
background:rgba(245,245,242,.94);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(0,0,0,.07)
}
.nav {
height:82px;
display:flex;
align-items:center;
gap:30px
}
.logo {
display:flex;
flex-direction:column;
line-height:1
}
.logo span {
font-family:Manrope,sans-serif;
font-size:20px;
font-weight:800;
letter-spacing:.08em
}
.logo small {
font-size:8px;
margin-top:6px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted)
}
nav {
display:flex;
gap:28px;
margin-left:auto
}
nav a {
font-size:14px;
font-weight:600;
color:#555;
transition:.2s
}
nav a:hover,nav a.active {
color:#111
}
.nav-cta {
padding:12px 18px;
background:var(--ink);
color:#fff;
border-radius:4px;
font-size:13px;
font-weight:700
}
.menu {
display:none;
border:0;
background:none;
font-size:25px
}
.hero {
min-height:650px;
display:flex;
align-items:center;
background:linear-gradient(105deg,rgba(10,14,14,.97),rgba(10,14,14,.72)),radial-gradient(circle at 80% 30%,#4a5250,#111);
color:#fff
}
.hero-inner {
padding:100px 0
}
.eyebrow {
font-size:11px;
letter-spacing:.2em;
font-weight:700;
color:#7f8884;
margin-bottom:20px
}
.hero .eyebrow {
color:var(--accent)
}
h1,h2,h3 {
font-family:Manrope,sans-serif;
line-height:1.08;
margin:0 0 22px
}
h1 {
font-size:clamp(48px,7vw,92px);
letter-spacing:-.055em;
max-width:850px
}
h1 em,h2 em {
font-style:normal;
color:var(--accent)
}
h2 {
font-size:clamp(34px,4vw,54px);
letter-spacing:-.045em
}
h3 {
font-size:23px
}
.hero p {
font-size:18px;
max-width:650px;
color:#d3d7d5
}
.actions {
display:flex;
gap:12px;
margin-top:35px
}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 24px;
border-radius:4px;
font-weight:700;
font-size:14px;
border:1px solid transparent;
cursor:pointer
}
.btn.primary {
background:var(--accent);
color:#111
}
.btn.ghost {
border-color:#616966;
color:#fff
}
.btn.light {
background:#fff;
color:#111
}
.section {
padding:110px 0
}
.split {
display:grid;
grid-template-columns:1fr 1fr;
gap:90px
}
.intro p,.about p {
font-size:18px;
color:var(--muted);
max-width:590px
}
.text-link {
display:inline-block;
margin-top:20px;
font-weight:700;
border-bottom:1px solid #222;
padding-bottom:5px
}
.cards {
background:#fff
}
.section-head {
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:45px
}
.card-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}
.card {
padding:35px;
background:var(--bg);
border:1px solid var(--line);
min-height:270px
}
.icon {
font-size:12px;
font-weight:800;
color:#8a928e;
margin-bottom:60px
}
.card p {
color:var(--muted);
margin:0
}
.banner {
background:var(--dark);
color:#fff;
padding:80px 0
}
.banner h2 {
max-width:650px
}
.banner p {
color:#b9bfbc
}
.banner-inner {
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}
.page-hero {
background:var(--dark);
color:#fff;
padding:100px 0
}
.page-hero h1 {
font-size:clamp(50px,6vw,78px)
}
.page-hero p {
max-width:650px;
color:#c1c7c4;
font-size:18px
}
.dark-section {
background:var(--dark);
color:#fff;
padding:90px 0
}
.values {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px
}
.values span {
color:var(--accent);
font-weight:800
}
.values h3 {
margin-top:18px
}
.values p {
color:#aeb6b2
}
.service-list article {
display:grid;
grid-template-columns:100px 1fr;
gap:40px;
padding:45px 0;
border-top:1px solid var(--line)
}
.service-list article:last-child {
border-bottom:1px solid var(--line)
}
.service-list article>span {
font-weight:800;
color:#8a928e
}
.service-list h2 {
font-size:32px
}
.service-list p {
color:var(--muted);
max-width:700px
}
.gallery-note {
padding:18px 20px;
background:#e9eae5;
border-left:3px solid var(--accent);
display:flex;
justify-content:space-between;
gap:20px;
margin-bottom:25px
}
.gallery-note span {
color:var(--muted);
font-size:14px
}
.gallery-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px
}
.gallery-item {
height:300px;
background:linear-gradient(145deg,#313837,#737a76);
position:relative;
overflow:hidden
}
.gallery-item:nth-child(even) {
background:linear-gradient(145deg,#202525,#555d59)
}
.gallery-item span {
position:absolute;
bottom:20px;
left:20px;
color:#fff;
font-weight:700
}
.contact-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:100px
}
.contact-info {
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:55px
}
.contact-info strong {
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em
}
.contact-info p {
color:var(--muted)
}
.form {
display:flex;
flex-direction:column;
gap:18px
}
.form label {
font-size:13px;
font-weight:700
}
.form input,.form textarea {
display:block;
width:100%;
margin-top:7px;
border:1px solid var(--line);
background:#fff;
padding:14px;
font:inherit;
border-radius:3px
}
.form small {
color:var(--muted)
}
.narrow {
max-width:800px
}
.legal h2 {
font-size:25px;
margin-top:45px
}
.legal p {
color:var(--muted)
}
.notice {
margin-top:40px;
padding:20px;
background:#e9eae5;
border-left:3px solid var(--accent);
color:#4e5552
}
footer {
background:#0d1010;
color:#c4c9c6;
padding:65px 0 25px
}
.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1.5fr 1fr;
gap:40px
}
.footer-logo {
color:#fff
}
.footer-grid h4 {
color:#fff;
margin:0 0 16px;
font-size:13px;
text-transform:uppercase;
letter-spacing:.12em
}
.footer-grid a:not(.logo) {
display:block;
margin:7px 0;
color:#b5bbb8;
font-size:14px
}
.footer-grid p {
font-size:14px;
color:#8f9894
}
.copyright {
border-top:1px solid #2a302e;
margin-top:50px;
padding-top:20px;
color:#727b77;
font-size:12px
}
.copyright a {
color:#aab1ae
}
@media(max-width:850px) {
.container {
width:min(100% - 32px,700px)
}
.nav {
height:70px
}
.menu {
display:block;
margin-left:auto
}
.nav nav,.nav-cta {
display:none
}
.nav nav.open {
position:absolute;
display:flex;
flex-direction:column;
top:70px;
left:0;
right:0;
padding:25px 20px;
background:var(--bg);
border-bottom:1px solid var(--line)
}
.hero {
min-height:580px
}
.split,.contact-grid {
grid-template-columns:1fr;
gap:35px
}
.section {
padding:75px 0
}
.card-grid,.values,.gallery-grid,.footer-grid {
grid-template-columns:1fr
}
.section-head,.banner-inner {
display:block
}
.section-head .text-link,.banner .btn {
margin-top:20px
}
.service-list article {
grid-template-columns:50px 1fr;
gap:15px
}
.gallery-item {
height:250px
}
.contact-info {
grid-template-columns:1fr
}
.footer-grid {
gap:30px
}
}