*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#10141b;background:#fff}.site-header{height:90px;display:flex;align-items:center;padding:0 4.2%;gap:34px;background:#fff;position:relative;z-index:10}.brand img{width:265px;height:74px;object-fit:contain}.brand{display:flex;align-items:center;margin-right:auto}.nav{display:flex;align-items:center;gap:38px}.nav a{color:#111;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;padding:34px 0 14px;border-bottom:2px solid transparent}.nav a.active,.nav a:hover{color:#a40000;border-bottom-color:#a40000}.phone-btn{background:#b00000;color:white;text-decoration:none;padding:15px 23px;border-radius:9px;font-weight:700;white-space:nowrap;font-size:15px}.hero{height:400px;position:relative;overflow:visible;background:#edf2f6}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#edf2f6}.hero-image{position:absolute;inset:0;background-image:url('assets/hero-cow-barn.jpg');background-size:cover;background-position:center right;z-index:-1}.hero-fade{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(247,249,251,.98) 0%,rgba(247,249,251,.92) 25%,rgba(247,249,251,.38) 48%,rgba(247,249,251,0) 67%)}.hero-content{position:absolute;z-index:2;left:5.3%;top:55px;width:470px}.hero h1{font-size:46px;line-height:1.12;margin:0 0 16px;font-weight:800;letter-spacing:-1.4px}.hero h1 span{color:#a30000}.hero p{font-family:Georgia,serif;font-size:18px;line-height:1.35;margin:0 0 24px;max-width:440px}.hero-actions{display:flex;gap:25px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;text-decoration:none;font-weight:700;border-radius:6px;padding:13px 20px;font-size:16px}.btn-primary{background:#b00000;color:#fff;min-width:180px}.btn-outline{border:1.5px solid #b00000;color:#a00000;background:#fff;min-width:180px}.btn b{font-size:22px;font-weight:400}.quality-bar{position:absolute;z-index:3;right:8.5%;bottom:0;transform:translateY(0);height:74px;width:52%;background:rgba(171,0,0,.95);border-radius:12px 12px 0 0;color:#fff;display:flex;align-items:center;justify-content:space-evenly;padding:0 18px}.quality-bar div{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.15}.quality-bar i{height:42px;width:1px;background:rgba(255,255,255,.75)}.quality-bar .icon{font-size:31px}.section{padding:28px 5.3% 18px}.products{display:grid;grid-template-columns:290px 1fr;gap:38px}.section-intro{padding-top:10px}.eyebrow{color:#a30000;font-size:15px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:14px}.eyebrow span{height:2px;background:#a30000;width:44px}.section-intro h2{font-size:39px;line-height:1.1;margin:13px 0 18px}.section-intro p{font-family:Georgia,serif;font-size:16px;line-height:1.45;margin:0 0 23px}.btn.dark{background:#fff}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.product-card{height:146px;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 1px 7px rgba(0,0,0,.15);background:#fff}.product-card img{width:100%;height:100%;object-fit:cover;display:block}.card-caption{position:absolute;left:0;right:0;bottom:0;min-height:64px;background:rgba(255,255,255,.96);display:flex;align-items:center;padding:7px 13px;gap:12px;font-size:15px;line-height:1.15;clip-path:polygon(0 15%,84% 15%,100% 100%,0 100%)}.round-icon{width:48px;height:48px;min-width:48px;border-radius:50%;background:#a60000;color:#fff;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);display:grid;place-items:center;font-size:24px}.bottom-band{min-height:147px;background:#17232e;color:#fff;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;position:relative;overflow:hidden}.band-image{position:absolute;inset:0;width:28%;background-image:linear-gradient(90deg,rgba(10,25,35,.15),rgba(23,35,46,.95)),url('assets/steel-structure-project.jpg');background-size:cover;background-position:center}.why,.about-copy,.contact-copy{position:relative;padding:23px 28px}.why{margin-left:27%;border-right:1px solid rgba(255,255,255,.65)}.about-copy{border-right:1px solid rgba(255,255,255,.65)}.bottom-band h3{margin:0 0 9px;font-size:18px}.why ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:1.65}.why li:before{content:'✓';margin-right:8px}.about-copy p{margin:0;font-family:Georgia,serif;font-size:15px;line-height:1.45}.contact-copy{font-size:14px}.contact-line{display:flex;gap:13px;margin:0 0 8px;line-height:1.25}.contact-line:first-letter{font-size:19px}.footer-strip{height:54px;background:#a90000;color:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 15%;font-size:14px}.tagline{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:17px;font-weight:700}.socials{display:flex;justify-content:flex-end;gap:20px}.socials span{border:1px solid #fff;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-weight:700}.socials span:nth-child(2){font-size:11px}.socials span:nth-child(3){font-size:13px}@media(max-width:1200px){.site-header{gap:18px;padding:0 3%}.nav{gap:18px}.nav a{font-size:12px}.phone-btn{padding:12px 15px;font-size:13px}.brand img{width:225px}.hero h1{font-size:40px}.quality-bar{right:4%;width:60%}.products{grid-template-columns:250px 1fr}.footer-strip{padding:0 6%}}@media(max-width:900px){.site-header{height:auto;min-height:78px;flex-wrap:wrap;padding:10px 5%}.brand img{width:210px;height:60px}.nav{order:3;width:100%;justify-content:space-between;overflow:auto;gap:18px}.nav a{padding:9px 0}.phone-btn{margin-left:auto}.hero{height:520px}.hero-content{left:6%;top:45px;width:55%}.hero h1{font-size:37px}.quality-bar{left:6%;right:6%;width:auto;bottom:0}.products{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.bottom-band{grid-template-columns:1fr 1fr}.band-image{display:none}.why{margin-left:0}.footer-strip{height:auto;padding:15px 5%;grid-template-columns:1fr;gap:10px;text-align:center}.socials{justify-content:center}}@media(max-width:600px){.nav{display:none}.phone-btn{font-size:12px}.hero{height:570px}.hero-video{object-position:65% center}.hero-image{background-position:65% center}.hero-fade{background:linear-gradient(90deg,rgba(247,249,251,.97),rgba(247,249,251,.75) 60%,rgba(247,249,251,.15))}.hero-content{width:88%;top:35px}.hero h1{font-size:34px}.hero p{font-size:16px}.hero-actions{gap:10px;flex-wrap:wrap}.quality-bar{height:auto;padding:13px 8px;gap:8px;align-items:stretch}.quality-bar div{font-size:11px;gap:4px}.quality-bar .icon{font-size:21px}.quality-bar i{height:36px}.products{padding-left:5%;padding-right:5%}.product-grid{grid-template-columns:1fr}.bottom-band{grid-template-columns:1fr}.why,.about-copy{border-right:0;border-bottom:1px solid rgba(255,255,255,.35)}}
/* =========================================================
CITADEV ABOUT PAGE
========================================================= */
.about-page-hero {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
overflow: hidden;
background: #17232e;
}
.about-page-hero-image {
position: absolute;
inset: 0;
background:
url("assets/steel-structure-project.jpg")
center / cover no-repeat;
}
.about-page-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(11, 23, 32, .96) 0%,
rgba(11, 23, 32, .88) 35%,
rgba(11, 23, 32, .55) 65%,
rgba(11, 23, 32, .15) 100%
);
}
.about-page-hero-content {
position: relative;
z-index: 2;
width: min(700px, 88%);
margin-left: 5.3%;
color: #fff;
}
.about-kicker {
margin-bottom: 15px;
color: #e3a0a0;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
}
.about-page-hero h1 {
margin: 0 0 22px;
font-family: "DM Sans", Arial, sans-serif;
font-size: clamp(42px, 5vw, 68px);
line-height: 1.02;
letter-spacing: -2px;
}
.about-page-hero h1 span {
color: #e2a2a2;
}
.about-page-hero-content > p {
max-width: 610px;
margin: 0;
color: #e5e9ec;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 19px;
line-height: 1.6;
}
.about-hero-tagline {
position: absolute;
right: 5.3%;
bottom: 0;
z-index: 3;
padding: 18px 30px;
color: #fff;
background: #a80000;
border-radius: 10px 10px 0 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 17px;
font-style: italic;
}
.about-hero-tagline strong {
font-weight: 700;
}
/* =========================================================
ABOUT STORY
========================================================= */
.about-story {
padding: 95px 5.3% 90px;
background: #fff;
}
.about-story-heading {
max-width: 850px;
margin-bottom: 55px;
}
.about-eyebrow {
display: flex;
align-items: center;
gap: 13px;
color: #a30000;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.2px;
}
.about-eyebrow span {
width: 42px;
height: 2px;
background: #a30000;
}
.about-eyebrow.light {
color: #e1a1a1;
}
.about-eyebrow.light span {
background: #e1a1a1;
}
.about-eyebrow.center {
justify-content: center;
}
.about-story-heading h2 {
margin: 17px 0 0;
font-size: clamp(38px, 4vw, 54px);
line-height: 1.08;
letter-spacing: -1.5px;
}
.about-story-heading h2 em {
color: #a30000;
font-family:
Georgia,
"Times New Roman",
serif;
font-weight: 500;
}
.about-story-content {
display: grid;
grid-template-columns:
minmax(0, 1.6fr)
minmax(280px, .7fr);
gap: 80px;
max-width: 1180px;
}
.about-story-main {
max-width: 790px;
}
.about-story-main p {
margin: 0 0 22px;
color: #454b51;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 17px;
line-height: 1.75;
}
.about-story-main .lead {
color: #20252a;
font-family:
"DM Sans",
Arial,
sans-serif;
font-size: 22px;
line-height: 1.55;
font-weight: 500;
}
.about-story-note {
align-self: start;
padding: 35px;
border-top: 4px solid #a30000;
background: #f5f6f7;
}
.quote-mark {
display: block;
margin-bottom: -10px;
color: #a30000;
font-family:
Georgia,
serif;
font-size: 65px;
line-height: .7;
}
.about-story-note p {
margin: 20px 0;
color: #353b40;
font-family:
Georgia,
serif;
font-size: 19px;
line-height: 1.55;
font-style: italic;
}
.quote-line {
width: 45px;
height: 2px;
margin: 20px 0 10px;
background: #a30000;
}
.about-story-note > span:last-child {
color: #777;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* =========================================================
THE CITADEV WAY
========================================================= */
.citadev-way {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 570px;
color: #fff;
background: #17232e;
}
.citadev-way-image {
min-height: 570px;
}
.citadev-way-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.citadev-way-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 9%;
}
.citadev-way-content h2 {
margin: 16px 0 25px;
font-size: clamp(35px, 3.5vw, 48px);
line-height: 1.08;
letter-spacing: -1px;
}
.citadev-way-content h2 em {
color: #df9f9f;
font-family:
Georgia,
serif;
font-weight: 500;
}
.citadev-way-content p {
max-width: 570px;
margin: 0 0 16px;
color: #dce2e6;
font-family:
Georgia,
serif;
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
VALUES
========================================================= */
.values-section {
padding: 95px 5.3%;
background: #f5f6f7;
}
.values-heading {
max-width: 720px;
margin-bottom: 55px;
}
.values-heading h2 {
margin: 17px 0;
font-size: clamp(38px, 4vw, 52px);
line-height: 1.08;
letter-spacing: -1.5px;
}
.values-heading p {
max-width: 650px;
margin: 0;
color: #555c62;
font-family:
Georgia,
serif;
font-size: 16px;
line-height: 1.6;
}
.values-list {
max-width: 1180px;
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid #d5d8da;
border-left: 1px solid #d5d8da;
}
.value-item {
display: grid;
grid-template-columns: 55px 1fr;
gap: 20px;
min-height: 210px;
padding: 30px;
background: #fff;
border-right: 1px solid #d5d8da;
border-bottom: 1px solid #d5d8da;
}
.value-number {
color: #a30000;
font-size: 13px;
font-weight: 800;
letter-spacing: 1px;
}
.value-item h3 {
margin: 0 0 12px;
font-size: 20px;
line-height: 1.25;
}
.value-item p {
margin: 0;
color: #555b61;
font-family:
Georgia,
serif;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
PEOPLE
========================================================= */
.people-section {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 570px;
background: #fff;
}
.people-content {
padding: 85px 9%;
display: flex;
flex-direction: column;
justify-content: center;
}
.people-content h2 {
margin: 17px 0 25px;
font-size: clamp(37px, 3.8vw, 51px);
line-height: 1.08;
letter-spacing: -1.3px;
}
.people-content h2 em {
color: #a30000;
font-family:
Georgia,
serif;
font-weight: 500;
}
.people-content p {
max-width: 600px;
margin: 0 0 17px;
color: #4b5258;
font-family:
Georgia,
serif;
font-size: 16px;
line-height: 1.65;
}
.people-image {
position: relative;
min-height: 570px;
overflow: hidden;
}
.people-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.people-image-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
padding: 55px 35px 28px;
color: #fff;
background:
linear-gradient(
transparent,
rgba(0,0,0,.82)
);
}
.people-image-caption strong {
font-size: 19px;
}
.people-image-caption span {
margin-top: 4px;
font-family:
Georgia,
serif;
font-size: 14px;
}
/* =========================================================
ROLE
========================================================= */
.role-section {
padding: 95px 5.3%;
background: #f5f6f7;
}
.role-heading {
max-width: 850px;
margin-bottom: 55px;
}
.role-heading h2 {
margin: 17px 0 0;
font-size: clamp(38px, 4vw, 53px);
line-height: 1.08;
}
.role-heading h2 em {
color: #a30000;
font-family:
Georgia,
serif;
font-weight: 500;
}
.role-content {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 0;
max-width: 1250px;
}
.role-step {
position: relative;
padding: 32px;
min-height: 275px;
background: #fff;
border-right: 1px solid #ddd;
}
.role-step:first-child {
border-left: 4px solid #a30000;
}
.role-step > span {
display: block;
margin-bottom: 30px;
color: #a30000;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
}
.role-step h3 {
margin: 0 0 13px;
font-size: 20px;
}
.role-step p {
margin: 0;
color: #555c62;
font-family:
Georgia,
serif;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
PHILOSOPHY
========================================================= */
.philosophy-section {
padding: 100px 5.3%;
color: #fff;
background: #8f0000;
}
.philosophy-inner {
max-width: 1150px;
margin: 0 auto;
display: grid;
grid-template-columns: 150px 1fr;
gap: 50px;
align-items: start;
}
.philosophy-mark {
width: 120px;
height: 120px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.4);
border-radius: 50%;
font-size: 65px;
font-weight: 700;
font-family:
Georgia,
serif;
}
.philosophy-copy h2 {
margin: 17px 0 25px;
font-size: clamp(38px, 4vw, 55px);
line-height: 1.08;
letter-spacing: -1.3px;
}
.philosophy-copy h2 em {
font-family:
Georgia,
serif;
font-weight: 500;
color: #f0bebe;
}
.philosophy-copy p {
max-width: 800px;
margin: 0 0 17px;
color: #f4e1e1;
font-family:
Georgia,
serif;
font-size: 17px;
line-height: 1.65;
}
.philosophy-copy p strong {
color: #fff;
font-family:
"DM Sans",
Arial,
sans-serif;
}
/* =========================================================
CONTEXT
========================================================= */
.context-section {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 530px;
background: #fff;
}
.context-image {
min-height: 530px;
}
.context-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.context-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 9%;
}
.context-copy h2 {
margin: 17px 0 22px;
font-size: clamp(35px, 3.5vw, 48px);
line-height: 1.1;
}
.context-copy h2 em {
color: #a30000;
font-family:
Georgia,
serif;
font-weight: 500;
}
.context-copy p {
max-width: 580px;
margin: 0 0 16px;
color: #50575d;
font-family:
Georgia,
serif;
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
COMMITMENT
========================================================= */
.commitment {
padding: 100px 5.3%;
text-align: center;
color: #fff;
background:
linear-gradient(
rgba(23,35,46,.94),
rgba(23,35,46,.94)
),
url("assets/steel-structure-project.jpg")
center / cover no-repeat;
}
.commitment-content {
max-width: 850px;
margin: auto;
}
.commitment h2 {
margin: 18px 0 25px;
font-size: clamp(40px, 5vw, 62px);
line-height: 1.05;
letter-spacing: -1.8px;
}
.commitment > .commitment-content > p {
max-width: 720px;
margin: 0 auto 16px;
color: #dfe5e8;
font-family:
Georgia,
serif;
font-size: 17px;
line-height: 1.65;
}
.large-tagline {
margin-top: 35px;
font-family:
Georgia,
serif;
font-size: 27px;
font-style: italic;
font-weight: 600;
}
.large-tagline em {
color: #e2a1a1;
}
/* =========================================================
CONTACT
========================================================= */
.about-contact {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 80px;
padding: 85px 5.3%;
background: #fff;
}
.about-contact-intro h2 {
margin: 17px 0 18px;
font-size: clamp(37px, 4vw, 52px);
line-height: 1.08;
}
.about-contact-intro > p {
max-width: 620px;
margin: 0 0 28px;
color: #50575d;
font-family:
Georgia,
serif;
font-size: 17px;
line-height: 1.65;
}
.about-contact-button {
display: inline-flex;
align-items: center;
gap: 28px;
padding: 14px 21px;
color: #fff;
background: #a80000;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
}
.about-contact-button span {
font-size: 20px;
font-weight: 400;
}
.about-contact-details {
padding-left: 40px;
border-left: 2px solid #a30000;
}
.contact-detail {
margin-bottom: 22px;
}
.contact-detail-label {
display: block;
margin-bottom: 5px;
color: #a30000;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.contact-detail p {
margin: 0;
color: #343a3f;
font-size: 15px;
line-height: 1.55;
}
.contact-detail a {
color: #a00000;
text-decoration: none;
}
.contact-detail a:hover {
text-decoration: underline;
}
/* =========================================================
ABOUT PAGE MOBILE
========================================================= */
@media (max-width: 900px) {
.about-page-hero {
min-height: 540px;
}
.about-page-hero-content {
margin-left: 6%;
}
.about-hero-tagline {
right: 0;
left: 0;
text-align: center;
border-radius: 0;
}
.about-story-content {
grid-template-columns: 1fr;
gap: 35px;
}
.citadev-way,
.people-section,
.context-section {
grid-template-columns: 1fr;
}
.citadev-way-image,
.people-image,
.context-image {
min-height: 350px;
}
.citadev-way-content,
.people-content,
.context-copy {
padding: 60px 7%;
}
.values-list {
grid-template-columns: 1fr;
}
.role-content {
grid-template-columns: 1fr 1fr;
}
.role-step {
border-bottom: 1px solid #ddd;
}
.philosophy-inner {
grid-template-columns: 1fr;
gap: 30px;
}
.about-contact {
grid-template-columns: 1fr;
gap: 40px;
}
.about-contact-details {
padding-left: 25px;
}
}
@media (max-width: 600px) {
.about-page-hero {
min-height: 570px;
}
.about-page-hero-content {
width: 86%;
margin-left: 7%;
}
.about-page-hero h1 {
font-size: 38px;
}
.about-page-hero-content > p {
font-size: 16px;
}
.about-story,
.values-section,
.role-section,
.philosophy-section,
.about-contact {
padding-left: 5%;
padding-right: 5%;
}
.about-story {
padding-top: 60px;
padding-bottom: 60px;
}
.about-story-main .lead {
font-size: 19px;
}
.about-story-main p,
.people-content p,
.context-copy p {
font-size: 15px;
}
.about-story-note {
padding: 25px;
}
.citadev-way-content,
.people-content,
.context-copy {
padding: 50px 7%;
}
.values-section,
.role-section {
padding-top: 60px;
padding-bottom: 60px;
}
.value-item {
grid-template-columns: 40px 1fr;
padding: 24px;
min-height: auto;
}
.role-content {
grid-template-columns: 1fr;
}
.role-step {
min-height: auto;
border-right: 0;
}
.philosophy-section {
padding-top: 65px;
padding-bottom: 65px;
}
.philosophy-mark {
width: 85px;
height: 85px;
font-size: 45px;
}
.philosophy-copy h2 {
font-size: 38px;
}
.large-tagline {
font-size: 21px;
}
.commitment {
padding: 70px 7%;
}
.commitment h2 {
font-size: 40px;
}
.about-contact {
padding-top: 60px;
padding-bottom: 60px;
}
}
/* =========================================================
MOBILE MENU
========================================================= */
.mobile-menu-btn {
display: none;
width: 46px;
height: 46px;
padding: 10px;
border: 0;
border-radius: 7px;
background: #a80000;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.mobile-menu-btn span {
display: block;
width: 24px;
height: 2px;
background: #ffffff;
transition:
transform .25s ease,
opacity .25s ease;
}
/* =========================================================
MOBILE NAVIGATION
========================================================= */
@media (max-width: 600px) {
.site-header {
position: relative;
min-height: 76px;
padding: 8px 5%;
display: flex;
align-items: center;
gap: 10px;
}
.brand {
margin-right: auto;
}
.brand img {
width: 190px;
height: 55px;
}
.mobile-menu-btn {
display: flex;
flex-shrink: 0;
}
.phone-btn {
display: none;
}
.nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
padding: 10px 5% 18px;
flex-direction: column;
align-items: stretch;
gap: 0;
background: #ffffff;
box-shadow:
0 8px 20px rgba(0,0,0,.12);
z-index: 1000;
}
.nav.mobile-open {
display: flex;
}
.nav a {
display: block;
width: 100%;
padding: 15px 5px;
border-bottom: 1px solid #eeeeee;
font-size: 15px;
color: #111111;
}
.nav a:last-child {
border-bottom: 0;
}
.nav a:hover,
.nav a.active {
color: #a30000;
border-bottom-color: #eeeeee;
}
/* Hamburger → X */
.mobile-menu-btn.menu-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.menu-open span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.menu-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
}
/* =========================================================
CITADEV — MOBILE NAVIGATION
Added without changing the original desktop navigation.
========================================================= */
@media (max-width: 768px) {
.site-header {
height: 72px !important;
min-height: 72px !important;
padding: 7px 5% !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 10px !important;
position: relative !important;
z-index: 2000 !important;
}
.brand {
display: flex !important;
align-items: center !important;
margin-right: auto !important;
min-width: 0 !important;
}
.brand img {
width: 175px !important;
height: 52px !important;
object-fit: contain !important;
}
.phone-btn { display: none !important; }
.mobile-menu-btn {
display: flex !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
margin-left: auto !important;
padding: 8px !important;
border: 0 !important;
border-radius: 7px !important;
background: #a80000 !important;
cursor: pointer !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
z-index: 2002 !important;
}
.mobile-menu-btn span {
display: block !important;
width: 24px !important;
height: 2px !important;
background: #fff !important;
border-radius: 2px !important;
transition: transform .25s ease, opacity .25s ease !important;
}
.nav {
position: absolute !important;
top: 72px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
display: none !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
padding: 8px 5% 12px !important;
margin: 0 !important;
overflow: visible !important;
background: #fff !important;
box-shadow: 0 8px 18px rgba(0,0,0,.15) !important;
z-index: 2001 !important;
}
.nav.mobile-open { display: flex !important; }
.nav a,
.nav a.active,
.nav a:hover {
display: block !important;
width: 100% !important;
padding: 14px 4px !important;
margin: 0 !important;
color: #111 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-decoration: none !important;
white-space: normal !important;
border-bottom: 1px solid #eeeeee !important;
}
.nav a.active { color: #a40000 !important; }
.nav a:last-child { border-bottom: none !important; }
.mobile-menu-btn.menu-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
.mobile-menu-btn.menu-open span:nth-child(2) { opacity: 0 !important; }
.mobile-menu-btn.menu-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
}
/* =========================================================
CITADEV — PROJECTS PAGE
Page-specific visual layer.
The existing site/base stylesheet remains the foundation.
========================================================= */
.projects-hero {
position: relative;
min-height: 590px;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background: #17232e;
}
.projects-hero-bg {
position: absolute;
inset: 0;
background: url("assets/kapseret/cowsheds-kapseret1.jpeg") center / cover no-repeat;
transform: scale(1.02);
}
.projects-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10,19,28,.95) 0%, rgba(10,19,28,.82) 38%, rgba(10,19,28,.35) 75%, rgba(10,19,28,.08) 100%);
}
.projects-hero-content {
position: relative;
z-index: 2;
width: min(780px, 88%);
margin-left: 5.3%;
}
.projects-kicker {
margin: 0 0 16px;
color: #e3a0a0;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
}
.projects-hero h1 {
margin: 0 0 25px;
font-size: clamp(50px, 6vw, 82px);
line-height: .99;
letter-spacing: -3px;
}
.projects-hero h1 em {
color: #e0a0a0;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.projects-hero-content > p:last-child {
max-width: 650px;
margin: 0;
color: #e4e8eb;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.65;
}
.projects-hero-stamp {
position: absolute;
right: 5.3%;
bottom: 0;
z-index: 3;
min-width: 230px;
padding: 22px 26px;
background: #a40000;
border-radius: 10px 10px 0 0;
}
.projects-hero-stamp span {
display: block;
margin-bottom: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
opacity: .75;
}
.projects-hero-stamp strong {
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
line-height: 1.15;
}
/* INTRO */
.projects-intro {
display: grid;
grid-template-columns: .5fr 1.5fr;
gap: 65px;
padding: 95px 5.3%;
background: #fff;
}
.projects-intro-label {
padding-top: 8px;
}
.projects-intro-copy {
max-width: 900px;
}
.projects-intro-copy h2 {
margin: 0 0 20px;
font-size: clamp(38px, 4.5vw, 61px);
line-height: 1.04;
letter-spacing: -1.8px;
}
.projects-intro-copy h2 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.projects-intro-copy p {
max-width: 760px;
margin: 0;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.7;
}
/* SECTION HEAD */
.current-projects,
.selected-work {
padding: 90px 5.3%;
background: #f5f6f7;
}
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 45px;
margin-bottom: 45px;
}
.section-head > div {
max-width: 680px;
}
.section-head h2 {
margin: 14px 0 0;
font-size: clamp(39px, 4vw, 55px);
line-height: 1.05;
letter-spacing: -1.4px;
}
.section-head h2 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.section-head > p {
max-width: 440px;
margin: 0;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
line-height: 1.6;
}
/* LIVE PROJECTS */
.live-project {
display: grid;
grid-template-columns: 1.35fr .65fr;
min-height: 610px;
margin-bottom: 30px;
background: #fff;
box-shadow: 0 8px 28px rgba(0,0,0,.10);
}
.live-project-narok {
grid-template-columns: .65fr 1.35fr;
}
.live-project-gallery {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 135px;
min-height: 610px;
}
.live-project-main {
position: relative;
min-height: 0;
overflow: hidden;
}
.live-project-main > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .45s ease;
}
.live-project:hover .live-project-main > img {
transform: scale(1.025);
}
.status-badge {
position: absolute;
left: 25px;
top: 25px;
padding: 9px 13px;
color: #fff;
background: #a40000;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.live-project-thumbs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
overflow: hidden;
}
.live-project-thumbs img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.live-project-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 9%;
}
.project-location {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: #a30000;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.project-location span {
display: inline-flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
color: #fff;
background: #a30000;
border-radius: 50%;
font-size: 9px;
}
.live-project-copy h3 {
margin: 0 0 15px;
font-size: clamp(38px, 4vw, 56px);
line-height: 1.02;
letter-spacing: -1.5px;
}
.live-project-copy h3 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.project-status-line {
margin: 0 0 20px !important;
color: #a30000 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10px !important;
font-weight: 800;
letter-spacing: 1.5px;
}
.live-project-copy > p:not(.project-status-line) {
max-width: 520px;
margin: 0 0 28px;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
line-height: 1.65;
}
.project-facts {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
padding-top: 22px;
border-top: 1px solid #e2e5e7;
}
.project-facts div {
display: flex;
flex-direction: column;
gap: 5px;
}
.project-facts span {
color: #8b9298;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.3px;
}
.project-facts strong {
color: #252b30;
font-size: 12px;
}
/* PROCESS */
.project-process {
padding: 95px 5.3%;
color: #fff;
background: #17232e;
}
.section-head-dark > p {
color: #d5dce1;
}
.section-head-dark h2 {
color: #fff;
}
.section-head-dark h2 em {
color: #dfa0a0;
}
.project-process .eyebrow {
color: #e1a0a0;
}
.project-process .eyebrow span {
background: #e1a0a0;
}
.process-grid {
display: grid;
grid-template-columns: 1.2fr .8fr .8fr;
grid-auto-rows: 280px;
gap: 14px;
}
.process-grid figure {
position: relative;
min-height: 0;
margin: 0;
overflow: hidden;
background: #0d151c;
}
.process-grid .process-large {
grid-row: span 2;
}
.process-grid .process-wide {
grid-column: span 2;
}
.process-grid img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.process-grid figure:hover img {
transform: scale(1.035);
}
.process-grid figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
gap: 13px;
padding: 55px 18px 18px;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.process-grid figcaption > span {
color: #e0a0a0;
font-size: 10px;
font-weight: 800;
}
.process-grid figcaption b {
display: block;
font-size: 14px;
}
.process-grid figcaption small {
display: block;
margin-top: 3px;
color: #d3d9dd;
font-size: 10px;
}
/* SELECTED WORK */
.selected-work {
background: #fff;
}
.selected-work-grid {
display: grid;
grid-template-columns: 1.4fr .8fr .8fr;
gap: 16px;
}
.selected-work-card {
position: relative;
min-height: 390px;
overflow: hidden;
background: #17232e;
}
.selected-work-card-large {
min-height: 500px;
}
.selected-work-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.selected-work-card:hover img {
transform: scale(1.035);
}
.selected-work-card > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 70px 22px 23px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.selected-work-card span {
display: block;
margin-bottom: 8px;
color: #e2a0a0;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.selected-work-card h3 {
margin: 0;
font-size: 23px;
}
/* CTA */
.projects-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 65px 5.3%;
color: #fff;
background: #a00000;
}
.projects-cta-copy p {
margin: 0 0 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
opacity: .75;
}
.projects-cta-copy h2 {
margin: 0;
font-size: clamp(34px, 4vw, 50px);
line-height: 1.02;
}
.projects-cta-copy h2 em {
color: #f1caca;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.projects-cta .btn {
flex-shrink: 0;
color: #a00000;
background: #fff;
border-color: #fff;
}
/* MOBILE */
@media (max-width: 950px) {
.projects-intro {
grid-template-columns: 1fr;
gap: 20px;
}
.section-head {
display: block;
}
.section-head > p {
margin-top: 18px;
}
.live-project,
.live-project-narok {
grid-template-columns: 1fr;
}
.live-project-gallery,
.live-project-narok .live-project-gallery {
min-height: 520px;
}
.live-project-copy,
.live-project-narok .live-project-copy {
order: 2;
}
.live-project-narok .live-project-gallery {
order: 1;
}
.live-project-narok .live-project-copy {
order: 2;
}
.process-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 300px;
}
.process-grid .process-large,
.process-grid .process-wide {
grid-column: span 2;
grid-row: span 1;
}
.selected-work-grid {
grid-template-columns: 1fr 1fr;
}
.selected-work-card-large {
grid-column: span 2;
}
}
@media (max-width: 600px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.projects-hero {
min-height: 570px;
}
.projects-hero-content {
width: 86%;
margin-left: 7%;
}
.projects-hero h1 {
font-size: 43px;
letter-spacing: -1.5px;
}
.projects-hero-content > p:last-child {
font-size: 16px;
}
.projects-hero-stamp {
left: 0;
right: 0;
min-width: 0;
border-radius: 0;
text-align: center;
}
.projects-intro,
.current-projects,
.project-process,
.selected-work {
padding: 60px 7%;
}
.projects-intro-copy h2,
.section-head h2 {
font-size: 37px;
}
.live-project-gallery,
.live-project-narok .live-project-gallery {
min-height: 360px;
grid-template-rows: 260px 100px;
}
.live-project-copy {
padding: 48px 8%;
}
.live-project-copy h3 {
font-size: 40px;
}
.project-facts {
grid-template-columns: 1fr;
gap: 14px;
}
.process-grid {
grid-template-columns: 1fr;
grid-auto-rows: 270px;
}
.process-grid .process-large,
.process-grid .process-wide {
grid-column: auto;
}
.selected-work-grid {
grid-template-columns: 1fr;
}
.selected-work-card-large {
grid-column: auto;
}
.selected-work-card,
.selected-work-card-large {
min-height: 330px;
}
.projects-cta {
display: block;
padding: 50px 7%;
}
.projects-cta .btn {
display: inline-flex;
margin-top: 28px;
width: 100%;
justify-content: center;
}
}
/* =========================================================
CITADEV — OUR PRODUCTS PAGE
Page-specific visual layer.
========================================================= */
.products-hero {
position: relative;
min-height: 590px;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background: #17232e;
}
.products-hero-bg {
position: absolute;
inset: 0;
background: url("assets/cowsheds-barns/image7-cowsheds.jpeg") center / cover no-repeat;
}
.products-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10,19,28,.96) 0%, rgba(10,19,28,.84) 38%, rgba(10,19,28,.36) 76%, rgba(10,19,28,.08) 100%);
}
.products-hero-content {
position: relative;
z-index: 2;
width: min(780px, 88%);
margin-left: 5.3%;
}
.products-kicker {
margin: 0 0 16px;
color: #e3a0a0;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
}
.products-hero h1 {
margin: 0 0 25px;
font-size: clamp(50px, 6vw, 82px);
line-height: .99;
letter-spacing: -3px;
}
.products-hero h1 em {
color: #e0a0a0;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.products-hero-content > p:last-child {
max-width: 650px;
margin: 0;
color: #e4e8eb;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.65;
}
.products-hero-note {
position: absolute;
right: 5.3%;
bottom: 0;
z-index: 3;
min-width: 230px;
padding: 22px 26px;
background: #a40000;
border-radius: 10px 10px 0 0;
}
.products-hero-note span {
display: block;
margin-bottom: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
opacity: .75;
}
.products-hero-note strong {
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
line-height: 1.15;
}
/* INTRO */
.products-intro {
display: grid;
grid-template-columns: .5fr 1.5fr;
gap: 65px;
padding: 95px 5.3%;
background: #fff;
}
.products-intro-label {
padding-top: 8px;
}
.products-intro-copy {
max-width: 900px;
}
.products-intro-copy h2 {
margin: 0 0 20px;
font-size: clamp(38px, 4.5vw, 61px);
line-height: 1.04;
letter-spacing: -1.8px;
}
.products-intro-copy h2 em,
.product-feature-copy h2 em,
.parlour-copy h2 em,
.range-heading h2 em,
.product-dark-copy h2 em,
.warehouse-copy h2 em,
.steel-copy h2 em,
.products-cta h2 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.products-intro-copy p {
max-width: 760px;
margin: 0;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.7;
}
/* PRODUCT FEATURE */
.product-feature {
display: grid;
grid-template-columns: 1.12fr .88fr;
min-height: 650px;
}
.product-feature-image {
position: relative;
min-height: 650px;
overflow: hidden;
}
.product-feature-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .5s ease;
}
.product-feature:hover .product-feature-image img {
transform: scale(1.025);
}
.product-index {
position: absolute;
left: 28px;
top: 28px;
display: flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
color: #fff;
background: #a40000;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
}
.product-feature-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 11%;
}
.product-kicker {
margin: 0 0 15px;
color: #a30000;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.7px;
}
.product-feature-copy h2,
.parlour-copy h2,
.product-dark-copy h2,
.warehouse-copy h2,
.steel-copy h2 {
margin: 0 0 22px;
font-size: clamp(42px, 4.3vw, 61px);
line-height: 1.02;
letter-spacing: -1.6px;
}
.product-feature-copy > p:not(.product-kicker),
.parlour-copy > p:not(.product-kicker),
.product-dark-copy > p:not(.product-kicker),
.warehouse-copy > p:not(.product-kicker),
.steel-copy > p:not(.product-kicker) {
max-width: 570px;
margin: 0 0 27px;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.65;
}
.product-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 25px;
max-width: 570px;
margin-bottom: 30px;
}
.product-points span {
position: relative;
padding-left: 16px;
color: #333a40;
font-size: 13px;
}
.product-points span::before {
content: "";
position: absolute;
left: 0;
top: .65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #a30000;
}
.product-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 17px;
color: #a00000;
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.product-link span {
font-size: 22px;
font-weight: 400;
transition: transform .2s ease;
}
.product-link:hover span {
transform: translateX(5px);
}
/* PARLOUR */
.product-parlour {
display: grid;
grid-template-columns: 1.45fr .55fr;
min-height: 610px;
color: #fff;
background: #17232e;
}
.parlour-image {
position: relative;
min-height: 610px;
overflow: hidden;
}
.parlour-image > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.parlour-label {
position: absolute;
left: 28px;
bottom: 28px;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: rgba(10,18,25,.8);
font-size: 9px;
letter-spacing: 1.4px;
}
.parlour-label span {
color: #e2a0a0;
}
.parlour-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 65px 12%;
}
.parlour-copy h2 {
font-size: clamp(39px, 4vw, 56px);
}
.parlour-copy h2 em {
color: #e0a0a0;
}
.parlour-copy > p:not(.product-kicker) {
color: #dce2e6;
}
.light-product-link {
color: #fff;
}
/* AGRICULTURAL RANGE */
.agri-range {
padding: 95px 5.3%;
background: #f5f6f7;
}
.range-heading {
max-width: 820px;
margin-bottom: 45px;
}
.range-heading h2 {
margin: 16px 0 18px;
font-size: clamp(39px, 4vw, 56px);
line-height: 1.04;
letter-spacing: -1.5px;
}
.range-heading p {
max-width: 670px;
margin: 0;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.6;
}
.range-grid {
display: grid;
grid-template-columns: 1.1fr .9fr .9fr;
gap: 16px;
}
.range-grid article {
position: relative;
min-height: 470px;
overflow: hidden;
background: #17232e;
}
.range-grid article:first-child {
min-height: 530px;
}
.range-grid img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.range-grid article:hover img {
transform: scale(1.035);
}
.range-grid article > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 75px 24px 24px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.range-grid article span {
color: #e0a0a0;
font-size: 10px;
font-weight: 800;
}
.range-grid h3 {
margin: 7px 0 7px;
font-size: 24px;
}
.range-grid p {
margin: 0;
color: #e4e8eb;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
line-height: 1.5;
}
/* DARK STEEL / WATER */
.product-dark-section {
display: grid;
grid-template-columns: .7fr 1.3fr;
min-height: 660px;
color: #fff;
background: #17232e;
}
.product-dark-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 75px 11%;
}
.product-dark-copy .eyebrow {
color: #e1a0a0;
}
.product-dark-copy .eyebrow span {
background: #e1a0a0;
}
.product-dark-copy h2 em {
color: #dfa0a0;
}
.product-dark-copy > p:not(.product-kicker) {
color: #dce2e6;
}
.tank-showcase {
display: grid;
grid-template-columns: 1.55fr .45fr;
min-height: 660px;
}
.tank-main,
.tank-small {
overflow: hidden;
}
.tank-main img,
.tank-small img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.tank-small {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 5px;
}
/* WAREHOUSE */
.warehouse-product {
display: grid;
grid-template-columns: 1.2fr .8fr;
min-height: 650px;
background: #fff;
}
.warehouse-gallery {
display: grid;
grid-template-columns: 1.45fr .55fr;
min-height: 650px;
gap: 5px;
}
.warehouse-gallery img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.warehouse-main {
min-width: 0;
}
.warehouse-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 5px;
}
.warehouse-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 11%;
}
.warehouse-copy ul {
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.warehouse-copy li {
padding: 9px 0 9px 17px;
border-bottom: 1px solid #e5e7e9;
color: #363d43;
font-size: 13px;
}
.warehouse-copy li:first-child {
border-top: 1px solid #e5e7e9;
}
.warehouse-copy li::before {
content: "—";
margin-right: 9px;
color: #a30000;
}
/* STEEL */
.steel-product {
display: grid;
grid-template-columns: .75fr 1.25fr;
min-height: 590px;
color: #fff;
background: #a00000;
}
.steel-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 12%;
}
.steel-copy .eyebrow {
color: #f0c9c9;
}
.steel-copy .eyebrow span {
background: #f0c9c9;
}
.steel-copy h2 em {
color: #f2cccc;
}
.steel-copy > p:not(.product-kicker) {
color: #f5e2e2;
}
.steel-copy .product-kicker {
color: #f3cccc;
}
.steel-copy .product-link {
color: #fff;
}
.steel-image {
position: relative;
min-height: 590px;
overflow: hidden;
}
.steel-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.steel-caption {
position: absolute;
left: 25px;
bottom: 24px;
padding: 10px 13px;
color: #fff;
background: rgba(0,0,0,.72);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
/* CTA */
.products-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 65px 5.3%;
color: #fff;
background: #fff;
}
.products-cta > div {
color: #1c2227;
}
.products-cta p {
margin: 0 0 7px;
color: #a00000;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.products-cta h2 {
margin: 0 0 7px;
font-size: clamp(35px, 4vw, 50px);
line-height: 1.02;
}
.products-cta h2 em {
color: #a00000;
}
.products-cta span {
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
}
.products-cta .btn {
flex-shrink: 0;
}
/* RESPONSIVE */
@media (max-width: 950px) {
.products-intro {
grid-template-columns: 1fr;
gap: 20px;
}
.product-feature,
.product-parlour,
.product-dark-section,
.warehouse-product,
.steel-product {
grid-template-columns: 1fr;
}
.product-feature-image,
.parlour-image,
.tank-showcase,
.warehouse-gallery,
.steel-image {
min-height: 460px;
}
.product-feature-copy,
.parlour-copy,
.product-dark-copy,
.warehouse-copy,
.steel-copy {
padding: 60px 8%;
}
.tank-showcase {
grid-template-columns: 1fr 1fr;
}
.range-grid {
grid-template-columns: 1fr 1fr;
}
.range-grid article:first-child {
grid-column: span 2;
}
.products-cta {
display: block;
}
.products-cta .btn {
margin-top: 25px;
}
}
@media (max-width: 600px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.products-hero {
min-height: 570px;
}
.products-hero-content {
width: 86%;
margin-left: 7%;
}
.products-hero h1 {
font-size: 43px;
letter-spacing: -1.5px;
}
.products-hero-content > p:last-child {
font-size: 16px;
}
.products-hero-note {
left: 0;
right: 0;
min-width: 0;
border-radius: 0;
text-align: center;
}
.products-intro,
.agri-range {
padding: 60px 7%;
}
.products-intro-copy h2,
.range-heading h2 {
font-size: 37px;
}
.product-feature-image,
.parlour-image,
.tank-showcase,
.warehouse-gallery,
.steel-image {
min-height: 330px;
}
.product-feature-copy,
.parlour-copy,
.product-dark-copy,
.warehouse-copy,
.steel-copy {
padding: 50px 8%;
}
.product-feature-copy h2,
.parlour-copy h2,
.product-dark-copy h2,
.warehouse-copy h2,
.steel-copy h2 {
font-size: 40px;
}
.product-points {
grid-template-columns: 1fr;
}
.range-grid {
grid-template-columns: 1fr;
}
.range-grid article:first-child {
grid-column: auto;
}
.range-grid article,
.range-grid article:first-child {
min-height: 330px;
}
.tank-showcase {
grid-template-columns: 1fr;
grid-template-rows: 330px 160px;
}
.tank-small {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.products-cta {
padding: 50px 7%;
}
.products-cta .btn {
width: 100%;
justify-content: center;
}
}
/* =========================================================
CITADEV — SERVICES PAGE UPGRADE
Page-specific styles only.
Existing desktop site/header styles remain untouched.
========================================================= */
.services-hero {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background:
url("assets/cowsheds-barns/image7-cowsheds.jpeg")
center / cover no-repeat;
}
.services-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(13,24,34,.96) 0%,
rgba(13,24,34,.88) 35%,
rgba(13,24,34,.48) 65%,
rgba(13,24,34,.12) 100%
);
}
.services-hero-content {
position: relative;
z-index: 2;
width: min(760px, 88%);
margin-left: 5.3%;
}
.services-kicker {
margin: 0 0 16px;
color: #e3a0a0;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
}
.services-hero h1 {
margin: 0 0 24px;
font-size: clamp(48px, 5.5vw, 76px);
line-height: 1.01;
letter-spacing: -2.5px;
}
.services-hero h1 span {
color: #e2a2a2;
}
.services-hero-content > p:last-child {
max-width: 650px;
margin: 0;
color: #e5e9ec;
font-family: Georgia, "Times New Roman", serif;
font-size: 19px;
line-height: 1.6;
}
.services-hero-note {
position: absolute;
right: 5.3%;
bottom: 0;
z-index: 3;
min-width: 280px;
padding: 20px 28px;
color: #fff;
background: #a80000;
border-radius: 10px 10px 0 0;
}
.services-hero-note span {
display: block;
margin-bottom: 5px;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
opacity: .8;
}
.services-hero-note strong {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
}
/* INTRO */
.services-intro {
display: grid;
grid-template-columns: .55fr 1.45fr;
gap: 60px;
padding: 90px 5.3%;
background: #fff;
}
.services-intro-label {
padding-top: 8px;
}
.services-intro-copy {
max-width: 900px;
}
.services-intro-copy h2 {
margin: 0 0 20px;
font-size: clamp(38px, 4.2vw, 57px);
line-height: 1.06;
letter-spacing: -1.6px;
}
.services-intro-copy h2 em,
.service-story-content h2 em,
.process-heading h2 em,
.infrastructure-heading h2 em,
.renewal-copy h2 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.services-intro-copy p {
max-width: 760px;
margin: 0;
color: #50575d;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.7;
}
/* SERVICE STORIES */
.service-story {
display: grid;
grid-template-columns: 1.08fr .92fr;
min-height: 610px;
}
.service-story-dark {
grid-template-columns: .92fr 1.08fr;
color: #fff;
background: #17232e;
}
.service-story-image {
position: relative;
min-height: 610px;
overflow: hidden;
}
.service-story-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.service-image-wide img {
object-position: center;
}
.image-tag {
position: absolute;
left: 28px;
bottom: 25px;
padding: 9px 13px;
color: #fff;
background: rgba(10,18,25,.78);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.service-story-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 75px 10%;
}
.service-number {
margin: 0 0 18px;
color: #a30000;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.service-story-content h2 {
margin: 0 0 24px;
font-size: clamp(40px, 4vw, 58px);
line-height: 1.04;
letter-spacing: -1.5px;
}
.service-story-content > p:not(.service-number) {
max-width: 560px;
margin: 0 0 24px;
color: #515960;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.65;
}
.service-story-dark .service-story-content > p:not(.service-number) {
color: #dce2e6;
}
.service-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 25px;
max-width: 580px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.service-list li {
position: relative;
padding-left: 17px;
color: #343b41;
font-size: 14px;
}
.service-list li::before {
content: "";
position: absolute;
left: 0;
top: .65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #a30000;
}
.service-story-dark .service-list li {
color: #e6eaed;
}
.service-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 18px;
color: #a00000;
text-decoration: none;
font-size: 14px;
font-weight: 800;
}
.service-link span {
font-size: 22px;
font-weight: 400;
transition: transform .2s ease;
}
.service-link:hover span {
transform: translateX(5px);
}
.light-link {
color: #fff;
}
/* IMAGE STRIP */
.service-image-strip {
display: grid;
grid-template-columns: 1.35fr .65fr;
min-height: 430px;
background: #f5f6f7;
}
.strip-main {
position: relative;
min-height: 430px;
overflow: hidden;
}
.strip-main img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.strip-main > div {
position: absolute;
left: 35px;
right: 35px;
bottom: 30px;
display: flex;
flex-direction: column;
gap: 7px;
color: #fff;
}
.strip-main > div::before {
content: "";
position: absolute;
inset: -80px -35px -30px;
z-index: -1;
background: linear-gradient(transparent, rgba(0,0,0,.8));
}
.strip-main span {
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.strip-main strong {
max-width: 500px;
font-size: 25px;
line-height: 1.15;
}
.strip-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.strip-side img {
width: 100%;
height: 100%;
min-height: 0;
display: block;
object-fit: cover;
}
/* PROCESS */
.process-section {
padding: 95px 5.3%;
background: #f5f6f7;
}
.process-heading {
max-width: 800px;
margin-bottom: 45px;
}
.process-heading h2 {
margin: 16px 0;
font-size: clamp(38px, 4vw, 54px);
line-height: 1.08;
letter-spacing: -1.4px;
}
.process-heading p {
max-width: 680px;
margin: 0;
color: #555c62;
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
line-height: 1.6;
}
.process-gallery {
display: grid;
grid-template-columns: 1.1fr .9fr .9fr 1.1fr;
gap: 14px;
}
.process-gallery figure {
position: relative;
height: 390px;
margin: 0;
overflow: hidden;
background: #17232e;
}
.process-gallery figure:nth-child(2),
.process-gallery figure:nth-child(4) {
margin-top: 45px;
}
.process-gallery img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.process-gallery figure:hover img {
transform: scale(1.04);
}
.process-gallery figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 13px;
padding: 45px 18px 18px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.86));
}
.process-gallery figcaption b {
color: #e2a1a1;
font-size: 11px;
}
.process-gallery figcaption span {
font-size: 13px;
font-weight: 700;
}
/* INFRASTRUCTURE */
.infrastructure-section {
padding: 95px 5.3%;
background: #fff;
}
.infrastructure-heading {
max-width: 800px;
margin-bottom: 45px;
}
.infrastructure-heading h2 {
margin: 16px 0 18px;
font-size: clamp(38px, 4vw, 55px);
line-height: 1.05;
letter-spacing: -1.5px;
}
.infrastructure-heading p {
max-width: 650px;
margin: 0;
color: #555c62;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.6;
}
.infrastructure-grid {
display: grid;
grid-template-columns: 1.4fr .8fr .8fr;
gap: 18px;
}
.infrastructure-card {
position: relative;
min-height: 420px;
overflow: hidden;
background: #17232e;
}
.infrastructure-card.large {
min-height: 520px;
}
.infrastructure-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.infrastructure-card:hover img {
transform: scale(1.03);
}
.infrastructure-card-copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 65px 24px 25px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.infrastructure-card-copy span {
display: block;
margin-bottom: 8px;
color: #e3a1a1;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.infrastructure-card-copy h3 {
margin: 0 0 7px;
font-size: 22px;
}
.infrastructure-card-copy p {
margin: 0;
color: #e5e9ec;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
line-height: 1.5;
}
/* RENEWAL */
.renewal-section {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
color: #fff;
background: #17232e;
}
.renewal-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 11%;
}
.renewal-copy .eyebrow {
color: #e3a1a1;
}
.renewal-copy .eyebrow span {
background: #e3a1a1;
}
.renewal-copy h2 {
margin: 17px 0 22px;
font-size: clamp(38px, 4vw, 55px);
line-height: 1.05;
}
.renewal-copy h2 em {
color: #e0a0a0;
}
.renewal-copy > p {
max-width: 580px;
margin: 0 0 28px;
color: #dce2e6;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.65;
}
.renewal-copy .service-link {
color: #fff;
}
.renewal-image {
min-height: 520px;
overflow: hidden;
}
.renewal-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* CTA */
.services-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 55px 5.3%;
color: #fff;
background: #a00000;
}
.services-cta p {
margin: 0 0 5px;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
opacity: .75;
}
.services-cta h2 {
margin: 0 0 5px;
font-size: 32px;
}
.services-cta span {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
}
.services-cta .btn {
flex-shrink: 0;
color: #a00000;
background: #fff;
border-color: #fff;
}
/* RESPONSIVE */
@media (max-width: 950px) {
.services-intro {
grid-template-columns: 1fr;
gap: 20px;
}
.service-story,
.service-story-dark,
.renewal-section {
grid-template-columns: 1fr;
}
.service-story-content {
order: 2;
}
.service-story-image {
order: 1;
min-height: 430px;
}
.service-story-dark .service-story-content {
order: 2;
}
.service-story-dark .service-story-image {
order: 1;
}
.service-image-strip {
grid-template-columns: 1fr;
}
.strip-main {
min-height: 420px;
}
.strip-side {
grid-template-columns: 1fr 1fr;
grid-template-rows: 280px;
}
.process-gallery {
grid-template-columns: 1fr 1fr;
}
.process-gallery figure:nth-child(2),
.process-gallery figure:nth-child(4) {
margin-top: 0;
}
.infrastructure-grid {
grid-template-columns: 1fr 1fr;
}
.infrastructure-card.large {
grid-column: span 2;
}
.renewal-image {
min-height: 430px;
}
}
@media (max-width: 768px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.services-hero {
min-height: 590px;
}
.services-hero-content {
width: 86%;
margin-left: 7%;
}
.services-hero h1 {
font-size: 42px;
letter-spacing: -1.3px;
}
.services-hero-content > p:last-child {
font-size: 16px;
}
.services-hero-note {
left: 0;
right: 0;
min-width: 0;
border-radius: 0;
text-align: center;
}
.services-intro {
padding: 60px 7%;
}
.services-intro-copy h2 {
font-size: 36px;
}
.service-story-content {
padding: 55px 7%;
}
.service-story-content h2 {
font-size: 39px;
}
.service-list {
grid-template-columns: 1fr;
}
.service-story-image {
min-height: 330px;
}
.strip-main {
min-height: 330px;
}
.strip-side {
grid-template-columns: 1fr 1fr;
grid-template-rows: 210px;
}
.process-section,
.infrastructure-section {
padding: 65px 7%;
}
.process-gallery {
grid-template-columns: 1fr;
gap: 14px;
}
.process-gallery figure {
height: 300px;
}
.infrastructure-grid {
grid-template-columns: 1fr;
}
.infrastructure-card.large {
grid-column: auto;
}
.infrastructure-card,
.infrastructure-card.large {
min-height: 340px;
}
.renewal-copy {
padding: 60px 7%;
}
.renewal-image {
min-height: 330px;
}
.services-cta {
display: block;
padding: 45px 7%;
}
.services-cta .btn {
margin-top: 25px;
width: 100%;
}
}
/* =========================================================
CITADEV — GALLERY PAGE
Page-specific visual layer.
========================================================= */
.gallery-hero {
position: relative;
min-height: 590px;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background: #17232e;
}
.gallery-hero-bg {
position: absolute;
inset: 0;
background: url("assets/cowsheds-barns/milking-parlour.jpeg") center / cover no-repeat;
}
.gallery-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10,19,28,.96) 0%, rgba(10,19,28,.82) 38%, rgba(10,19,28,.36) 76%, rgba(10,19,28,.08) 100%);
}
.gallery-hero-content {
position: relative;
z-index: 2;
width: min(800px, 88%);
margin-left: 5.3%;
}
.gallery-kicker {
margin: 0 0 16px;
color: #e3a0a0;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
}
.gallery-hero h1 {
margin: 0 0 25px;
font-size: clamp(50px, 6vw, 82px);
line-height: .99;
letter-spacing: -3px;
}
.gallery-hero h1 em {
color: #e0a0a0;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.gallery-hero-content > p:last-child {
max-width: 650px;
margin: 0;
color: #e4e8eb;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.65;
}
.gallery-hero-note {
position: absolute;
right: 5.3%;
bottom: 0;
z-index: 3;
min-width: 230px;
padding: 22px 26px;
background: #a40000;
border-radius: 10px 10px 0 0;
}
.gallery-hero-note span {
display: block;
margin-bottom: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
opacity: .75;
}
.gallery-hero-note strong {
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
line-height: 1.15;
}
/* INTRO */
.gallery-intro {
display: grid;
grid-template-columns: .5fr 1.5fr;
gap: 65px;
padding: 95px 5.3%;
background: #fff;
}
.gallery-intro-label {
padding-top: 8px;
}
.gallery-intro-copy {
max-width: 950px;
}
.gallery-intro-copy h2 {
margin: 0 0 20px;
font-size: clamp(40px, 4.5vw, 61px);
line-height: 1.04;
letter-spacing: -1.8px;
}
.gallery-intro-copy h2 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.gallery-intro-copy > p {
max-width: 760px;
margin: 0;
color: #555d64;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.7;
}
.gallery-filters {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 32px;
}
.filter-btn {
padding: 10px 15px;
border: 1px solid #d6dade;
border-radius: 999px;
color: #353c42;
background: #fff;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
transition: all .2s ease;
}
.filter-btn:hover,
.filter-btn.active {
color: #fff;
border-color: #a30000;
background: #a30000;
}
/* SECTION HEAD */
.gallery-work,
.gallery-progress {
padding: 90px 5.3%;
background: #f5f6f7;
}
.gallery-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 40px;
}
.gallery-section-head > div {
max-width: 720px;
}
.gallery-section-head p {
margin: 0 0 12px;
color: #a30000;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.gallery-section-head h2 {
margin: 0;
font-size: clamp(39px, 4vw, 56px);
line-height: 1.03;
letter-spacing: -1.5px;
}
.gallery-section-head h2 em {
color: #a30000;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.gallery-section-head > span {
color: #6b7278;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
}
/* MASONRY */
.masonry-grid {
columns: 3 280px;
column-gap: 14px;
}
.gallery-item {
position: relative;
display: inline-block;
width: 100%;
height: 390px;
margin: 0 0 14px;
overflow: hidden;
break-inside: avoid;
background: #17232e;
cursor: zoom-in;
}
.gallery-item-tall {
height: 560px;
}
.gallery-item-wide {
height: 300px;
}
.gallery-item-feature {
height: 500px;
}
.gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .45s ease;
}
.gallery-item:hover img {
transform: scale(1.035);
}
.gallery-item figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 65px 20px 20px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.gallery-item figcaption span {
display: block;
margin-bottom: 6px;
color: #e1a0a0;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.gallery-item figcaption b {
font-size: 16px;
}
.filter-hidden {
display: none !important;
}
/* ONGOING PROJECTS */
.gallery-projects,
.gallery-water {
padding: 90px 5.3%;
color: #fff;
background: #17232e;
}
.dark-head p {
color: #e1a0a0;
}
.dark-head h2 {
color: #fff;
}
.dark-head h2 em {
color: #dfa0a0;
}
.dark-head > span {
color: #d2d9de;
}
.project-gallery-grid {
display: grid;
grid-template-columns: 1.2fr .8fr .8fr;
grid-auto-rows: 290px;
gap: 14px;
}
.project-gallery-card {
position: relative;
min-height: 0;
overflow: hidden;
background: #0e171f;
}
.project-gallery-card.project-gallery-large {
grid-row: span 2;
}
.project-gallery-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .45s ease;
}
.project-gallery-card:hover img {
transform: scale(1.035);
}
.project-gallery-card > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 75px 22px 22px;
background: linear-gradient(transparent, rgba(0,0,0,.92));
}
.project-gallery-card span {
display: block;
margin-bottom: 7px;
color: #e2a0a0;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.project-gallery-card h3 {
margin: 0;
font-size: 24px;
}
.project-gallery-card p {
margin: 5px 0 0;
color: #d5dce0;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
}
/* PROGRESS */
.gallery-progress {
background: #fff;
}
.progress-grid {
display: grid;
grid-template-columns: 1.2fr .8fr .8fr;
grid-auto-rows: 280px;
gap: 14px;
}
.progress-item {
position: relative;
min-height: 0;
margin: 0;
overflow: hidden;
background: #17232e;
cursor: zoom-in;
}
.progress-item.progress-big {
grid-row: span 2;
}
.progress-item.progress-wide {
grid-column: span 2;
}
.progress-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.progress-item:hover img {
transform: scale(1.035);
}
.progress-item figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 13px;
padding: 55px 18px 18px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.progress-item figcaption span {
color: #e1a0a0;
font-size: 10px;
font-weight: 800;
}
.progress-item figcaption b {
font-size: 14px;
}
/* WATER */
.gallery-water {
background: #17232e;
}
.water-gallery {
display: grid;
grid-template-columns: 1.45fr .55fr;
min-height: 650px;
gap: 5px;
}
.water-gallery figure {
position: relative;
min-height: 0;
margin: 0;
overflow: hidden;
cursor: zoom-in;
}
.water-gallery img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .45s ease;
}
.water-gallery figure:hover img {
transform: scale(1.035);
}
.water-main {
min-height: 650px;
}
.water-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 5px;
}
.water-gallery figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 60px 20px 20px;
color: #fff;
background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.water-gallery figcaption span {
display: block;
margin-bottom: 6px;
color: #e1a0a0;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
.water-gallery figcaption b {
font-size: 17px;
}
/* CTA */
.gallery-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 65px 5.3%;
color: #fff;
background: #a00000;
}
.gallery-cta p {
margin: 0 0 7px;
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
opacity: .75;
}
.gallery-cta h2 {
margin: 0;
font-size: clamp(35px, 4vw, 50px);
line-height: 1.02;
}
.gallery-cta h2 em {
color: #f0c9c9;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.gallery-cta .btn {
flex-shrink: 0;
color: #a00000;
background: #fff;
border-color: #fff;
}
/* LIGHTBOX */
body.lightbox-open {
overflow: hidden;
}
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 5000;
display: none;
align-items: center;
justify-content: center;
padding: 50px 70px;
background: rgba(6,10,14,.96);
}
.gallery-lightbox.open {
display: flex;
}
.lightbox-content {
max-width: min(1100px, 90vw);
max-height: 90vh;
text-align: center;
}
.lightbox-content img {
max-width: 100%;
max-height: 78vh;
display: block;
margin: 0 auto;
object-fit: contain;
}
.lightbox-caption {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 15px;
color: #fff;
text-align: left;
}
.lightbox-caption span {
color: #e0a0a0;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
.lightbox-caption b {
color: #d9dfe3;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
font-weight: 400;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
z-index: 2;
border: 0;
color: #fff;
background: rgba(255,255,255,.12);
cursor: pointer;
}
.lightbox-close {
top: 20px;
right: 25px;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 30px;
line-height: 1;
}
.lightbox-prev,
.lightbox-next {
top: 50%;
width: 48px;
height: 60px;
margin-top: -30px;
font-size: 44px;
line-height: 1;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(255,255,255,.24);
}
/* RESPONSIVE */
@media (max-width: 950px) {
.gallery-intro {
grid-template-columns: 1fr;
gap: 20px;
}
.gallery-section-head {
display: block;
}
.gallery-section-head > span {
display: block;
margin-top: 15px;
}
.masonry-grid {
columns: 2 260px;
}
.project-gallery-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 300px;
}
.project-gallery-card.project-gallery-large {
grid-column: span 2;
grid-row: span 1;
}
.progress-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 300px;
}
.progress-item.progress-big,
.progress-item.progress-wide {
grid-column: span 2;
grid-row: span 1;
}
.water-gallery {
grid-template-columns: 1fr;
}
.water-main {
min-height: 500px;
}
.water-side {
grid-template-columns: 1fr 1fr;
grid-template-rows: 260px;
}
}
@media (max-width: 600px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.gallery-hero {
min-height: 570px;
}
.gallery-hero-content {
width: 86%;
margin-left: 7%;
}
.gallery-hero h1 {
font-size: 43px;
letter-spacing: -1.5px;
}
.gallery-hero-content > p:last-child {
font-size: 16px;
}
.gallery-hero-note {
left: 0;
right: 0;
min-width: 0;
border-radius: 0;
text-align: center;
}
.gallery-intro,
.gallery-work,
.gallery-projects,
.gallery-progress,
.gallery-water {
padding: 60px 7%;
}
.gallery-intro-copy h2,
.gallery-section-head h2 {
font-size: 37px;
}
.gallery-filters {
gap: 7px;
}
.filter-btn {
font-size: 10px;
padding: 9px 12px;
}
.masonry-grid {
columns: 1;
}
.gallery-item,
.gallery-item-tall,
.gallery-item-wide,
.gallery-item-feature {
height: 320px;
}
.project-gallery-grid,
.progress-grid {
grid-template-columns: 1fr;
grid-auto-rows: 290px;
}
.project-gallery-card.project-gallery-large,
.progress-item.progress-big,
.progress-item.progress-wide {
grid-column: auto;
}
.water-main {
min-height: 330px;
}
.water-side {
grid-template-columns: 1fr 1fr;
grid-template-rows: 200px;
}
.gallery-cta {
display: block;
padding: 50px 7%;
}
.gallery-cta .btn {
display: inline-flex;
margin-top: 28px;
width: 100%;
justify-content: center;
}
.gallery-lightbox {
padding: 55px 15px 30px;
}
.lightbox-content {
max-width: 94vw;
}
.lightbox-content img {
max-height: 70vh;
}
.lightbox-caption {
display: block;
}
.lightbox-caption b {
display: block;
margin-top: 6px;
}
.lightbox-prev,
.lightbox-next {
width: 38px;
height: 48px;
font-size: 34px;
}
.lightbox-prev {
left: 7px;
}
.lightbox-next {
right: 7px;
}
}
/* =========================================================
CITADEV FINAL CONSISTENCY LAYER
Preserve the original desktop header/navigation.
========================================================= */
.site-header{
min-height:90px !important;
height:90px !important;
display:flex !important;
align-items:center !important;
gap:30px !important;
padding:0 4.2% !important;
background:#fff !important;
position:relative !important;
z-index:2000 !important;
border-bottom:1px solid #eee !important;
}
.brand{display:flex !important;align-items:center !important;margin-right:auto !important;flex-shrink:0 !important;text-decoration:none !important;}
.brand img{
display:block !important;
width:265px !important;
height:82px !important;
max-height:none !important;
object-fit:contain !important;
object-position:center !important;
}
.nav{display:flex !important;align-items:center !important;gap:38px !important;}
.nav a{
color:#111 !important;
text-decoration:none !important;
font-size:14px !important;
font-weight:600 !important;
white-space:nowrap !important;
padding:34px 0 14px !important;
border-bottom:2px solid transparent !important;
font-family:Arial,Helvetica,sans-serif !important;
}
.nav a:hover,.nav a.active{color:#a40000 !important;border-bottom-color:#a40000 !important;}
.phone-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:#b00000 !important;
color:#fff !important;
text-decoration:none !important;
padding:14px 20px !important;
border-radius:7px !important;
font-size:14px !important;
font-weight:700 !important;
white-space:nowrap !important;
}
/* Home: make the complete lower half visible and styled. */
#home .projects-section{display:block !important;}
#home .bottom-band{
min-height:210px !important;
display:grid !important;
grid-template-columns:1.15fr 1fr 1.15fr !important;
position:relative !important;
overflow:hidden !important;
background:#17232e !important;
color:#fff !important;
}
#home .band-image{display:block !important;position:absolute !important;inset:0 auto 0 0 !important;width:27% !important;}
#home .why,#home .about-copy,#home .contact-copy{position:relative !important;z-index:2 !important;padding:30px !important;color:#fff !important;}
#home .why{margin-left:27% !important;border-right:1px solid rgba(255,255,255,.28) !important;}
#home .about-copy{border-right:1px solid rgba(255,255,255,.28) !important;}
#home .bottom-band h3{color:#fff !important;}
#home .about-copy p{color:#e2e7eb !important;}
#home .contact-line,#home .contact-line a{color:#fff !important;}
#home .footer-strip{display:grid !important;}
/* Current Projects: each location is one clean card with three equal photos. */
.current-projects{padding-left:5.3% !important;padding-right:5.3% !important;}
.live-project,
.live-project.live-project-narok{
display:flex !important;
flex-direction:column !important;
max-width:1200px !important;
margin:0 auto 44px !important;
min-height:0 !important;
background:#fff !important;
box-shadow:0 8px 28px rgba(0,0,0,.10) !important;
}
.live-project-copy{
order:1 !important;
width:100% !important;
padding:42px 5.5% 34px !important;
box-sizing:border-box !important;
}
.live-project-gallery,
.live-project-gallery-balanced{
order:2 !important;
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-template-rows:none !important;
gap:14px !important;
padding:14px !important;
box-sizing:border-box !important;
background:#eef0f1 !important;
min-height:0 !important;
}
.live-project-gallery figure,
.live-project-gallery-balanced figure{
margin:0 !important;
display:flex !important;
flex-direction:column !important;
min-width:0 !important;
background:#fff !important;
overflow:hidden !important;
}
.live-project-gallery img,
.live-project-gallery-balanced img{
display:block !important;
width:100% !important;
height:330px !important;
object-fit:contain !important;
object-position:center !important;
background:#fff !important;
}
.live-project-gallery figcaption,
.live-project-gallery-balanced figcaption{
display:block !important;
padding:12px 13px !important;
min-height:44px !important;
background:#fff !important;
color:#252b30 !important;
font:700 13px/1.3 Arial,Helvetica,sans-serif !important;
}
/* Gallery: make every category actually usable. */
.gallery-filters{display:flex !important;flex-wrap:wrap !important;gap:10px !important;}
.gallery-filters .filter-btn{
font-size:15px !important;
line-height:1.2 !important;
padding:12px 18px !important;
cursor:pointer !important;
}
.gallery-section-head p{font-size:14px !important;}
.gallery-section-head h2{font-size:clamp(39px,4vw,56px) !important;}
.gallery-progress{display:block !important;}
.gallery-progress .progress-grid{display:grid !important;}
.filter-hidden{display:none !important;}
/* Prevent an empty-looking category: hide whole sections when their items are hidden. */
.gallery-work.gallery-section-hidden,
.gallery-projects.gallery-section-hidden,
.gallery-progress.gallery-section-hidden,
.gallery-water.gallery-section-hidden{display:none !important;}
@media(max-width:1100px){
.site-header .nav{gap:22px !important;}
.site-header .brand img{width:235px !important;height:78px !important;}
}
@media(max-width:600px){
.site-header{
height:72px !important;min-height:72px !important;padding:7px 5% !important;gap:10px !important;
}
.site-header .brand{margin-right:auto !important;max-width:calc(100% - 58px) !important;}
.site-header .brand img{width:190px !important;height:58px !important;max-height:none !important;}
.site-header .phone-btn{display:none !important;}
.mobile-menu-btn{display:flex !important;}
.site-header .nav{
position:absolute !important;top:72px !important;left:0 !important;right:0 !important;width:100% !important;
display:none !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;
padding:8px 5% 12px !important;margin:0 !important;overflow:visible !important;background:#fff !important;
box-shadow:0 8px 18px rgba(0,0,0,.15) !important;z-index:2001 !important;
}
.site-header .nav.mobile-open{display:flex !important;}
.site-header .nav a,.site-header .nav a.active,.site-header .nav a:hover{
display:block !important;width:100% !important;padding:14px 4px !important;margin:0 !important;
color:#111 !important;font-family:Arial,Helvetica,sans-serif !important;font-size:14px !important;
font-weight:600 !important;line-height:1.3 !important;text-decoration:none !important;white-space:normal !important;
border-bottom:1px solid #eee !important;
}
.site-header .nav a.active{color:#a40000 !important;}
.site-header .nav a:last-child{border-bottom:none !important;}
#home .bottom-band{display:block !important;min-height:0 !important;}
#home .band-image{display:none !important;}
#home .why,#home .about-copy,#home .contact-copy{width:100% !important;margin:0 !important;padding:28px 7% !important;border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.25) !important;}
#home .contact-copy{border-bottom:0 !important;}
#home .footer-strip{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;text-align:center !important;padding:18px 5% !important;}
.live-project-gallery,.live-project-gallery-balanced{grid-template-columns:1fr !important;gap:10px !important;padding:10px !important;}
.live-project-gallery img,.live-project-gallery-balanced img{height:auto !important;min-height:0 !important;object-fit:contain !important;}
.live-project-copy{padding:32px 7% !important;}
.gallery-filters .filter-btn{font-size:14px !important;padding:11px 14px !important;}
}
/* FINAL HOME PROJECTS LAYOUT — clean, balanced, and self-contained */
#home .projects-section{
display:block;
padding:58px 5.3% 70px;
background:#fff;
}
#home .projects-heading{
max-width:900px;
margin:0 auto 30px;
}
#home .projects-heading .eyebrow{margin-bottom:12px;}
#home .projects-heading h2{margin:0 0 12px;font-size:39px;line-height:1.1;}
#home .projects-heading p{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.55;color:#30373d;}
#home .project-feature{
display:grid;
grid-template-columns:1.15fr .85fr;
min-height:390px;
max-width:1200px;
margin:0 auto 22px;
background:#f5f6f7;
overflow:hidden;
border-radius:8px;
box-shadow:0 5px 18px rgba(0,0,0,.10);
}
#home .project-feature-image{position:relative;min-height:390px;overflow:hidden;}
#home .project-feature-image img{display:block;width:100%;height:100%;object-fit:cover;}
#home .project-status{position:absolute;left:18px;top:18px;background:#a40000;color:#fff;padding:9px 12px;font-size:10px;font-weight:800;letter-spacing:1.3px;}
#home .project-feature-content{display:flex;flex-direction:column;justify-content:center;padding:42px 9%;}
#home .project-category{margin:0 0 14px;color:#a30000;font-size:11px;font-weight:800;letter-spacing:2px;}
#home .project-feature-content h3{margin:0 0 15px;font-size:34px;line-height:1.08;}
#home .project-feature-content>p:not(.project-category){margin:0 0 24px;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.55;color:#3c444a;}
#home .project-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1200px;margin:0 auto;}
#home .project-mini-card{display:grid;grid-template-rows:190px auto;text-decoration:none;color:#111;background:#fff;border:1px solid #e1e4e7;border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08);}
#home .project-mini-card img{width:100%;height:190px;display:block;object-fit:cover;}
#home .project-mini-card>div{padding:16px 17px 18px;display:flex;flex-direction:column;gap:6px;}
#home .project-mini-card span{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#a30000;}
#home .project-mini-card strong{font-size:17px;line-height:1.2;}
#home .project-mini-card small{font-size:12px;color:#5e666c;margin-top:3px;}
#home .project-mini-card:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(0,0,0,.12);}
/* FINAL PROJECTS PAGE: each location gets one connected three-photo strip */
.projects-page .live-project-gallery,
.current-projects .live-project-gallery{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;
padding:0 !important;
background:#fff !important;
border-top:1px solid #e4e7e9 !important;
}
.current-projects .live-project-gallery figure{
border-right:1px solid #fff !important;
border-radius:0 !important;
}
.current-projects .live-project-gallery figure:last-child{border-right:0 !important;}
.current-projects .live-project-gallery img{
width:100% !important;
height:300px !important;
object-fit:cover !important;
object-position:center !important;
background:#f2f3f4 !important;
}
.current-projects .live-project-gallery figcaption{
min-height:46px !important;
padding:11px 13px !important;
box-sizing:border-box !important;
font-size:12px !important;
text-align:left !important;
}
.current-projects .live-project-copy{padding-bottom:28px !important;}
@media(max-width:900px){
#home .project-feature{grid-template-columns:1fr;}
#home .project-feature-image{min-height:300px;}
#home .project-mini-grid{grid-template-columns:1fr 1fr;}
.current-projects .live-project-gallery img{height:250px !important;}
}
@media(max-width:600px){
#home .projects-section{padding:42px 5% 50px;}
#home .projects-heading h2{font-size:32px;}
#home .project-feature-content{padding:30px 7%;}
#home .project-feature-content h3{font-size:29px;}
#home .project-mini-grid{grid-template-columns:1fr;gap:14px;}
#home .project-mini-card{grid-template-rows:210px auto;}
#home .project-mini-card img{height:210px;}
.current-projects .live-project-gallery{grid-template-columns:1fr !important;}
.current-projects .live-project-gallery figure{border-right:0 !important;border-bottom:1px solid #fff !important;}
.current-projects .live-project-gallery figure:last-child{border-bottom:0 !important;}
.current-projects .live-project-gallery img{height:auto !important;max-height:none !important;object-fit:contain !important;}
}
/* FINAL HOME PRODUCT CARD ADJUSTMENT */
#home .product-card {
height:146px !important;
}
#home .product-card:nth-child(4) img {
object-position:center top !important;
}
#home .card-caption {
min-height:50px !important;
height:50px !important;
padding:5px 11px !important;
gap:10px !important;
font-size:13px !important;
line-height:1.08 !important;
clip-path:polygon(0 12%,84% 12%,100% 100%,0 100%) !important;
}
#home .round-icon {
width:40px !important;
height:40px !important;
min-width:40px !important;
font-size:20px !important;
border-width:2px !important;
}
@media(max-width:600px){
#home .product-card {height:150px !important;}
#home .card-caption {
min-height:50px !important;
height:50px !important;
padding:5px 10px !important;
font-size:13px !important;
}
#home .round-icon {
width:40px !important;
height:40px !important;
min-width:40px !important;
}
}
/* =========================================================
SOCIAL MEDIA LINKS — KEEP WHITE
========================================================= */
.socials a,
.socials a:link,
.socials a:visited,
.socials a:active {
color: #ffffff !important;
background: transparent !important;
text-decoration: none !important;
box-shadow: none !important;
}
.socials a:hover,
.socials a:focus {
color: #a90000 !important;
background: #ffffff !important;
border-color: #ffffff !important;
text-decoration: none !important;
}
/* Keep the social symbols/icons white */
.socials a i,
.socials a svg,
.socials a span,
.socials a img {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Keep icons white when hovering, if desired */
.socials a:hover i,
.socials a:hover svg,
.socials a:hover span {
color: #a90000 !important;
fill: #a90000 !important;
}