/* Container & spacing */
:root{
--container: 1080px; /* narrow text column seen on /about-us */
--space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px;
--space-5: 32px; --space-6: 48px; --space-7: 72px; --space-8: 96px;
--brand: #0f1420; /* dark band background */
--ink: #0b1220; /* body text on light */
--muted: #5b6475; /* secondary text */
--paper: #ffffff; /* light background */
--paper-2: #f6f8fb; /* subtle alt light */
--ink-on-dark: #d8dee9;/* body text on dark */
}
.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
.section{padding:var(--space-8) 0; background:var(--paper); color:var(--ink);}
.section.alt{background:var(--paper-2);}
.section--dark{background:var(--brand); color:var(--ink-on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}


/* Headings & text */
h1{font-size:clamp(28px, 4.2vw, 44px); line-height:1.2; margin:0 0 var(--space-4)}
h2{font-size:clamp(22px, 3.2vw, 32px); line-height:1.3; margin:0 0 var(--space-3)}
h3{font-size:clamp(18px, 2.2vw, 22px); margin:0 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
.muted{color:var(--muted)}


/* Grid & tiles like /home11 services */
.grid{display:grid; gap:var(--space-5)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
}
.tiles{display:grid; gap:var(--space-6); grid-template-columns:repeat(4,1fr)}
.tiles figure{margin:0; background:#fff; border:1px solid #e7eaf0; border-radius:12px; overflow:hidden}
.tiles img{width:100%; height:220px; object-fit:cover; display:block}
.tiles figcaption{padding:var(--space-4)}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.tiles{grid-template-columns:1fr}}


/* Cards used on the footer/contact blocks */
.card{border:1px solid #e7eaf0; background:#fff; border-radius:12px; padding:var(--space-4)}


/* Buttons (match /about-us links & CTAs) */
.btn, a.btn{display:inline-block; padding:12px 18px; border-radius:8px; text-decoration:none; border:1px solid #0b1220}
.btn.primary{background:#0b1220; color:#fff; border-color:#0b1220}
.btn.ghost{background:transparent; color:#0b1220}
.section--dark .btn{border-color:#fff; color:#fff}
.section--dark .btn.primary{background:#fff; color:#0f1420}


/* Hero spacing to mimic /home11 & /about-us */
.hero{padding:var(--space-8) 0 var(--space-7)}
.hero .eyebrow{font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}