:root{
  --concrete:#EDEAE3;
  --concrete-dim:#E1DDD3;
  --charcoal:#1C1E1D;
  --charcoal-soft:#2B2E2C;
  --steel:#33495C;
  --safety:#F5B700;
  --white:#FFFFFF;
  --line: rgba(28,30,29,0.14);
  --line-light: rgba(255,255,255,0.14);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --max: 1180px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--body);
  background: var(--concrete);
  color: var(--charcoal);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family: var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--steel);
}
h1,h2,h3{ font-family: var(--display); line-height:1.08; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:0.95rem;
  padding:14px 26px; border-radius:2px; cursor:pointer;
  border:1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--safety); color:var(--charcoal); }
.btn-primary:hover{ background:#ffcb33; }
.btn-outline-dark{ border-color:var(--charcoal); color:var(--charcoal); background:transparent; }
.btn-outline-dark:hover{ background:var(--charcoal); color:var(--white); }
.btn-outline-light{ border-color:rgba(255,255,255,0.5); color:var(--white); background:transparent; }
.btn-outline-light:hover{ background:var(--white); color:var(--charcoal); }
:focus-visible{ outline:2px solid var(--safety); outline-offset:2px; }

/* ---------- Header ---------- */
header{ position:sticky; top:0; z-index:100; background:rgba(237,234,227,0.94); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:-0.01em; }
.logo span{ color:var(--safety); }
nav.links{ display:flex; align-items:center; gap:28px; }
nav.links a{ font-size:0.9rem; font-weight:500; }
nav.links a:hover, nav.links a.active{ color:var(--steel); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--charcoal); display:block; }
.mobile-menu{ display:none; flex-direction:column; padding:8px 24px 24px; gap:4px; border-top:1px solid var(--line); }
.mobile-menu a{ padding:12px 0; font-weight:500; border-bottom:1px solid var(--line); }
.mobile-menu.open{ display:flex; }
@media (max-width: 860px){
  nav.links{ display:none; }
  .nav-cta .btn-outline-dark{ display:none; }
  .burger{ display:flex; }
}

/* ---------- Page header (used on every inner page) ---------- */
.page-hero{
  padding:56px 0 48px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px),
    var(--concrete);
}
.breadcrumb{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:#6B6E68; margin-bottom:14px; }
.breadcrumb a:hover{ color:var(--steel); }
.page-hero h1{ font-size:clamp(2rem, 4.2vw, 3rem); margin-bottom:16px; max-width:760px; }
.page-hero p.lead{ max-width:620px; font-size:1.05rem; color:#40443F; }

/* dimension-line stat callouts — signature element */
.dims{ display:flex; border-top:1px solid var(--charcoal); margin-top:36px; }
.dim{ flex:1; padding:16px 18px 0; position:relative; border-right:1px solid var(--line); }
.dim:last-child{ border-right:none; }
.dim::before{ content:""; position:absolute; top:-1px; left:0; width:1px; height:8px; background:var(--charcoal); }
.dim::after{ content:""; position:absolute; top:-1px; right:0; width:1px; height:8px; background:var(--charcoal); }
.dim .num{ font-family:var(--display); font-weight:700; font-size:1.6rem; }
.dim .lbl{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:#6B6E68; margin-top:4px; }
@media (max-width: 700px){ .dims{ flex-wrap:wrap; } .dim{ flex:1 1 33%; } }

/* ---------- Hero (home page only) ---------- */
.hero{ position:relative; overflow:hidden; padding:88px 0 96px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px),
    var(--concrete);
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(2.4rem, 5vw, 3.85rem); margin:18px 0 22px; }
.hero p.lead{ font-size:1.08rem; max-width:480px; color:#40443F; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero-visual{ position:relative; aspect-ratio: 4/5; background: var(--charcoal); border:1px solid var(--charcoal); overflow:hidden; }
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .tag{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; color:var(--safety); border:1px solid rgba(245,183,0,0.5); padding:5px 10px; background:rgba(28,30,29,0.5); }
@media (max-width: 860px){ .hero-grid{ grid-template-columns:1fr; } .hero{ padding:56px 0 64px; } }

/* ---------- Section shells ---------- */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); margin-top:14px; }
.section-head p{ margin-top:16px; color:#40443F; font-size:1.02rem; }
.dark{ background:var(--charcoal); color:var(--concrete); }
.dark .eyebrow{ color:var(--safety); }
.dark .section-head p{ color:rgba(237,234,227,0.7); }
.dim-bg{ background:var(--concrete-dim); }

/* ---------- Card grids (services / projects / blog index) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card-grid.two{ grid-template-columns:repeat(2,1fr); }
.link-card{ background:var(--concrete); padding:30px 26px; display:flex; flex-direction:column; gap:10px; transition:background 0.15s ease; }
.link-card:hover{ background:var(--white); }
.link-card .num{ font-family:var(--mono); font-size:0.72rem; color:var(--steel); }
.link-card h3{ font-size:1.08rem; }
.link-card p{ font-size:0.88rem; color:#4B4E48; }
.link-card .go{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--charcoal); margin-top:auto; padding-top:8px; }
.link-card:hover .go{ color:var(--steel); }
@media (max-width: 900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .card-grid, .card-grid.two{ grid-template-columns:1fr; } }

/* ---------- Photo grid (projects) ---------- */
.projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.project-card{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:var(--charcoal-soft); border:1px solid var(--line); }
.project-card img{ width:100%; height:100%; object-fit:cover; }
.project-overlay{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); color:var(--white); }
.project-overlay .tag{ font-family:var(--mono); font-size:0.65rem; color:var(--safety); letter-spacing:0.08em; text-transform:uppercase; }
.project-overlay h4{ font-family:var(--display); font-size:1.02rem; margin-top:4px; }
.img-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center; padding:24px; font-family:var(--mono); font-size:0.72rem; color:rgba(255,255,255,0.5); }
@media (max-width: 900px){ .projects-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .projects-grid{ grid-template-columns:1fr; } }

/* ---------- Process (real ordered steps) ---------- */
.process-list{ display:flex; flex-direction:column; }
.process-item{ display:grid; grid-template-columns:110px 1fr; gap:28px; padding:28px 0; border-top:1px solid var(--line-light); }
.process-item:last-child{ border-bottom:1px solid var(--line-light); }
.process-item .step{ font-family:var(--mono); font-size:0.85rem; color:var(--safety); padding-top:4px; }
.process-item h3{ font-size:1.25rem; margin-bottom:8px; }
.process-item p{ color:rgba(237,234,227,0.72); max-width:560px; }
@media (max-width: 620px){ .process-item{ grid-template-columns:1fr; gap:8px; } }

/* ---------- Trust bar ---------- */
.trust-bar{ display:flex; flex-wrap:wrap; border:1px solid var(--line); }
.trust-item{ flex:1; min-width:200px; padding:24px; border-right:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.trust-item:last-child{ border-right:none; }
.trust-item h4{ font-family:var(--display); font-size:1rem; margin-bottom:4px; }
.trust-item p{ font-size:0.85rem; color:#4B4E48; }
.trust-icon{ color:var(--safety); flex-shrink:0; }
@media (max-width: 760px){ .trust-item{ border-right:none; border-bottom:1px solid var(--line); flex:1 1 100%; } }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card{ background:var(--white); border:1px solid var(--line); padding:28px; }
.testi-card p.quote{ font-size:0.98rem; margin-bottom:20px; }
.testi-card .who{ font-family:var(--mono); font-size:0.72rem; color:var(--steel); text-transform:uppercase; letter-spacing:0.06em; }
@media (max-width: 900px){ .testi-grid{ grid-template-columns:1fr; } }

/* ---------- Service / article body ---------- */
.article-grid{ display:grid; grid-template-columns:2fr 1fr; gap:56px; }
.prose h2{ font-size:1.4rem; margin:36px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom:16px; color:#33362F; }
.prose ul{ margin:0 0 20px 20px; }
.prose li{ margin-bottom:8px; color:#33362F; }
.sidebar-card{ background:var(--white); border:1px solid var(--line); padding:26px; margin-bottom:20px; }
.sidebar-card h4{ font-family:var(--display); font-size:1rem; margin-bottom:12px; }
.sidebar-card ul{ list-style:none; }
.sidebar-card li{ padding:8px 0; border-top:1px solid var(--line); font-size:0.9rem; }
.sidebar-card li:first-child{ border-top:none; }
.sidebar-card li a:hover{ color:var(--steel); }
@media (max-width: 900px){ .article-grid{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; color:#4B4E48; }
.field input, .field select, .field textarea{ width:100%; padding:12px 14px; font-family:var(--body); font-size:0.95rem; border:1px solid #C9C5B9; background:var(--white); border-radius:2px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--steel); outline-offset:1px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-info .item{ display:flex; gap:14px; margin-bottom:22px; }
.contact-info h4{ font-family:var(--display); font-size:1rem; margin-bottom:4px; }
.contact-info p{ font-size:0.92rem; color:#4B4E48; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } .row2{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer{ background:var(--charcoal); color:rgba(237,234,227,0.6); padding:48px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:28px; border-bottom:1px solid var(--line-light); }
.footer-grid h5{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--concrete); margin-bottom:14px; }
.footer-grid a{ display:block; font-size:0.85rem; padding:4px 0; }
.footer-grid a:hover{ color:var(--safety); }
.footer-bottom{ padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* reveal on scroll — visible by default; JS only adds the fade-in effect if it loads successfully */
.reveal{ opacity:1; transform:none; }
.js-reveal-active .reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; }
.js-reveal-active .reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .js-reveal-active .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }