Our Values
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.header h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(52px, 8vw, 96px);
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
color: #000 !important;
}
:root {
--gold: #C9A96E;
--gold-light: #E8D5A8;
--gold-dark: #8B6914;
--black: #0A0A0A;
--charcoal: #141414;
--stone: #1E1C1A;
--warm-white: #F5F0E8;
--cream: #EDE8DC;
--text-muted: #fff;
}
body {
background-color: var(--black);
color: var(--warm-white);
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
/* Grain overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 100;
opacity: 0.4;
}
/* Header */
.header {
text-align: center;
position: relative;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s ease 0.2s forwards;
}
.header-label {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
display: block;
}
.header h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(52px, 8vw, 96px);
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
color: var(--warm-white);
}
.header h1 em {
font-style: italic;
color: var(--gold);
}
.header-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, var(--gold), transparent);
margin: 32px auto 0;
}
/* Values grid */
.values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: linear-gradient(135deg, #2A2520 0%, #1A1815 100%);
border: 1px solid rgba(201, 169, 110, 0.15);
}
.value-card {
background: var(--charcoal);
padding: 52px 48px;
position: relative;
overflow: hidden;
cursor: default;
opacity: 0;
transform: translateY(20px);
transition: background 0.4s ease;
}
.value-card:nth-child(1) { animation: fadeUp 0.8s ease 0.4s forwards; }
.value-card:nth-child(2) { animation: fadeUp 0.8s ease 0.55s forwards; }
.value-card:nth-child(3) { animation: fadeUp 0.8s ease 0.7s forwards; }
.value-card:nth-child(4) { animation: fadeUp 0.8s ease 0.85s forwards; }
.value-card:nth-child(5) { animation: fadeUp 0.8s ease 1.0s forwards; }
/* Last card spans full width */
.value-card:last-child {
grid-column: 1 / -1;
}
.value-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(201,169,110,0.05) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
}
.value-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(to right, var(--gold), transparent);
transition: width 0.6s ease;
}
.value-card:hover {
background: #1a1815;
}
.value-card:hover::before { opacity: 1; }
.value-card:hover::after { width: 100%; }
.value-number {
font-family: 'Cormorant Garamond', serif;
font-size: 72px;
font-weight: 300;
color: rgba(201, 169, 110, 1);
position: absolute;
top: 20px;
right: 32px;
line-height: 1;
pointer-events: none;
transition: color 0.4s ease;
}
.value-card:hover .value-number {
color: rgba(201, 169, 110, 0.14);
}
.value-icon {
width: 36px;
height: 1px;
background: var(--gold);
margin-bottom: 28px;
position: relative;
transition: width 0.4s ease;
}
.value-icon::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold);
}
.value-card:hover .value-icon { width: 56px; }
.value-title {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
font-weight: 400;
color: var(--warm-white);
margin-bottom: 16px;
line-height: 1.2;
letter-spacing: 0.3px;
}
.value-title span {
color: var(--gold);
font-style: italic;
}
.value-desc {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.85;
color: var(--text-muted);
max-width: 340px;
transition: color 0.4s ease;
}
.value-card:last-child .value-desc {
max-width: 560px;
}
.value-card:hover .value-desc {
color: #9A958E;
}
/* Bottom accent */
.footer-accent {
text-align: center;
margin-top: 80px;
opacity: 0;
animation: fadeUp 1s ease 1.2s forwards;
}
.footer-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.ornament-line {
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold));
}
.ornament-line.right {
background: linear-gradient(to left, transparent, var(--gold));
}
.ornament-diamond {
width: 6px;
height: 6px;
background: var(--gold);
transform: rotate(45deg);
}
.footer-text {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--text-muted);
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.page { padding: 60px 20px 80px; }
.values-grid { grid-template-columns: 1fr; }
.value-card:last-child { grid-column: 1; }
.value-card { padding: 40px 32px; }
.header { margin-bottom: 60px; }
}
01
Integrity & Trust
We uphold the highest standards of honesty and transparency, building lasting relationships with our clients.
02
Excellence in Every Detail
From design to delivery, we pursue perfection to create spaces that reflect luxury and precision.
03
Customer-Centric Approach
Our clients are at the heart of everything we do. Their satisfaction defines our success.
04
Innovation & Vision
We embrace forward-thinking ideas and modern practices to craft future-ready developments.
05
Commitment to Quality
We never compromise on quality, ensuring every project stands strong in both structure and value over time.