:root {
  --bg: #1f2329;
  --surface: #2a2e33;
  --ink: #ececec;
  --ink-soft: #b9bec5;
  --accent: #2ea3f2;
  --accent-strong: #1782c8;
  --muted-band: #e7eaf3;
  --radius: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.btn { display: inline-block; background: var(--accent); color: #fff; padding: 0.7rem 1.2rem; border-radius: var(--radius); border: 0; cursor: pointer; font-weight: 600; }
.btn:hover { background: var(--accent-strong); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.6rem; background: var(--surface); border-bottom: 1px solid #181b1f; }
.brand { display: inline-flex; align-items: baseline; gap: 0.35rem; color: var(--ink); }
.brand-mark { font-weight: 600; letter-spacing: 0.02em; }
.brand-strong { color: var(--ink); font-weight: 700; }
.brand-sub { color: var(--ink-soft); }
.brand .drop { color: var(--accent); margin-left: 2px; font-size: 0.85em; }
.topnav a { margin-left: 1.2rem; color: var(--ink-soft); }
.topnav a:hover { color: var(--ink); }
.topnav a.cta { background: var(--accent); color: #fff; padding: 0.4rem 0.9rem; border-radius: var(--radius); }
.topnav a.cta:hover { background: var(--accent-strong); text-decoration: none; }

.page { max-width: 1080px; margin: 0 auto; padding: 2.4rem 1.6rem 4rem; }
h1 { font-size: clamp(1.8rem, 3vw + 1rem, 2.8rem); line-height: 1.15; margin-top: 0; }
h2 { font-size: 1.5rem; }
.lede { font-size: 1.1rem; color: var(--ink-soft); }

/* HERO with bg image */
.hero {
    background-size: cover;
    background-position: center;
    background-color: #14181e;
    padding: 5rem 1.6rem;
    margin: -2.4rem -1.6rem 2rem;
    border-radius: var(--radius);
    color: #fff;
}
.hero h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.hero-text p { font-size: 1.15rem; color: #ececec; max-width: 60ch; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

.services-grid { padding: 2rem 0; }
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--surface); padding: 1.4rem; border-radius: var(--radius); border-left: 4px solid var(--accent); }
.card h3 { margin-top: 0; }

.featured { padding: 2rem 0 1rem; }
.featured-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.featured-grid img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; transition: transform 0.2s; }
.featured-grid a:hover img { transform: scale(1.02); }
.more-link { text-align: right; margin-top: 0.6rem; }

.callout { background: var(--muted-band); color: #1c2630; padding: 2rem; border-radius: var(--radius); margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.callout p { margin: 0; max-width: 60ch; }

.service-block { padding: 1.5rem 0; border-bottom: 1px solid #2c3036; }
.service-block:last-of-type { border-bottom: 0; }

.gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1.4rem;
}
.gallery figure { margin: 0; background: var(--surface); padding: 0.6rem; border-radius: var(--radius); }
.gallery img {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.2s;
}
.gallery a:hover img { opacity: 0.85; }
.gallery figcaption { color: var(--ink-soft); padding: 0.5rem 0.2rem 0.2rem; font-size: 0.95rem; }

.contact-form { display: grid; gap: 0.9rem; max-width: 540px; }
.field { display: grid; gap: 0.3rem; }
.field-label { font-weight: 600; color: var(--ink-soft); }
.field-label em { color: var(--accent); font-style: normal; }
.field input, .field textarea, .field select { width: 100%; padding: 0.7rem; background: var(--surface); border: 1px solid #3a4049; color: var(--ink); border-radius: var(--radius); font: inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.field-error { color: #f88; font-size: 0.9rem; }

.flash { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.flash li { padding: 0.7rem 1rem; border-radius: var(--radius); background: #1f3324; color: #c4f0c8; border-left: 4px solid #4ad06b; }

.sitefoot { background: var(--surface); color: var(--ink-soft); text-align: center; padding: 1.6rem 1rem 2rem; border-top: 1px solid #181b1f; }
.sitefoot p { margin: 0.2rem 0; }
.sitefoot .tagline { font-style: italic; color: var(--ink); }

@media (max-width: 640px) {
    .topbar { flex-direction: column; gap: 0.8rem; }
    .topnav a { margin: 0 0.5rem; }
    .hero { padding: 3rem 1rem; margin: -2.4rem -1.6rem 1.5rem; }
    .callout { flex-direction: column; align-items: flex-start; }
}

.brand-logo { height: 56px; width: auto; display: block; }
@media (max-width: 640px) { .brand-logo { height: 44px; } }