/* ---------- Tokens ---------- */
:root{
  --graphite-1000:#0a0a0a; /* near-black */
  --graphite-900:#1c1c1c;
  --graphite-700:#2e2e2e;
  --paper:#ffffff;
  --brand-gray:#3a3a3a;  /* main logo gray */
  --brand-gray-light:#555;
  --brand-red:#9b1c1c;   /* maroon accent */
  --brand-red-light:#b32424; /* lighter hover tone */
  --accent:#f5f5f5;      /* light background wash */
  --ring:#888;           /* neutral focus ring */
  --muted:#6b7280;       /* subdued text */
}

/* ---------- Resets & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--graphite-1000); background: var(--paper);
  line-height:1.6;
}

/* Subtle blueprint grid background */
.blueprint-bg{
  background-image:
    linear-gradient(to right, rgba(58,58,58,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(58,58,58,0.05) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  background-position: center;
}

/* ---------- Layout helpers ---------- */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.section{padding:4rem 0}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* ---------- Header / Nav (shared) ---------- */
header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(6px)}
.topbar{
  background:#ffffff; position:relative; box-shadow:0 2px 8px rgba(0,0,0,.06);
  border-bottom:1px solid #e5e7eb; transition: box-shadow .25s ease
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--brand-gray), var(--brand-red)); opacity:.35; pointer-events:none
}
.topbar.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}
.brand{display:flex;gap:.75rem;align-items:center}
.brand img{height:44px;width:auto}
.nav a{
  color:var(--graphite-900);text-decoration:none;margin:0 .5rem;transition:color .2s ease; position:relative
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg, var(--brand-gray), var(--brand-red));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease; opacity:.6
}
.nav a:hover{color:var(--brand-red)}
.nav a:hover::after{transform:scaleX(1)}
.cta-btn{background:var(--graphite-700);color:#fff;border:none;border-radius:.6rem;padding:.6rem 1rem;font-weight:600;cursor:pointer}
.cta-btn:hover{background:var(--graphite-900)}
.menu-toggle{display:none;background:none;border:none;color:var(--graphite-900);font-size:1.5rem}
@media (max-width: 1020px){.nav-links{display:none}.menu-toggle{display:block}}

/* Mobile drawer */
.drawer{display:none;position:fixed;inset:0 0 auto auto;background:rgba(0,0,0,.45)}
.drawer.open{display:block}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(80vw,360px);background:#111;color:#fff;padding:1rem 1rem 2rem;box-shadow:-12px 0 30px rgba(0,0,0,.35)}
.drawer a{display:block;color:#e5e7eb;text-decoration:none;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.06)}

/* ---------- Hero ---------- */
.hero{background: radial-gradient(1200px 500px at 50% -300px, #1b1b1b, #0f0f0f); color:#f8fafc; text-align:center; padding:5rem 0 4rem; position:relative; overflow:hidden}
.hero .logo{max-width:260px; height:auto; margin:0 auto 1rem}
.hero h2{font-size:clamp(1.6rem,4vw,2.4rem); margin:.75rem 0 .5rem; color:var(--brand-gray)}
.hero p{color:#d1d5db; max-width:720px; margin:0 auto 1.25rem}
.hero .badges{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.badge{border:1px solid rgba(255,255,255,.15); padding:.4rem .7rem; border-radius:999px; font-size:.85rem; color:#e5e7eb}

/* ---------- Trust bar ---------- */
.trust{background:var(--accent); border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:center}
.trust .item{display:flex;gap:.6rem;align-items:center;justify-content:center;color:var(--brand-gray)}
.trust .item strong{display:block;color:var(--graphite-900)}
@media (max-width:820px){.trust .wrap{grid-template-columns:1fr}}

/* ---------- Services ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.06)}
.card .img{aspect-ratio:16/9;background:#f3f4f6}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:1rem 1rem 1.25rem}
.card h3{margin:.2rem 0 .3rem;font-size:1.15rem;color:var(--graphite-900)}
.card p{color:#475569;margin:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--graphite-700); color:#fff; border-radius:1.25rem; padding:1.25rem; display:flex; gap:1rem; align-items:center; justify-content:space-between}
.cta-band p{margin:0; opacity:.95}
.cta-band .cta-btn{background:var(--graphite-900)}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.gallery img{width:100%;height:170px;object-fit:cover;border-radius:.6rem;display:block}
@media (max-width:980px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)} .gallery img{height:140px}}

/* ---------- Testimonials ---------- */
.quote{background:#0f172a;color:#e5e7eb;border-radius:1rem;padding:1.25rem;box-shadow:0 8px 28px rgba(0,0,0,.2)}
.stars{font-size:1.05rem;color:var(--brand-red)}

/* ---------- Contact ---------- */
form{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
form .full{grid-column:1 / -1}
label{font-size:.9rem;color:var(--brand-gray)}
input,textarea{width:100%;padding:.7rem .8rem;border:1px solid #d1d5db;border-radius:.6rem}
input:focus,textarea:focus{outline:3px solid var(--ring);border-color:var(--ring)}
textarea{min-height:140px}
.notice{font-size:.85rem;color:#475569}

/* ---------- Footer (shared) ---------- */
footer{background:#0f0f0f;color:#cbd5e1;margin-top:3rem;padding:2rem 0 3rem}
footer a{color:#cbd5e1;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr}}
.subfooter{border-top:1px solid #1f2937;margin-top:1rem;padding-top:1rem;color:#94a3b8;font-size:.9rem}