:root{--bg:#0b1020;--bg2:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--brand:#22c55e}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:48px 0}
.muted{color:#9ca3af}
/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gallery-item{background:#111827;border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.gallery-item img{display:block;width:100%;height:auto}
.gallery-item figcaption{padding:10px 12px;color:#cbd5e1;font-size:14px}
/* --- Universal header layout fix --- */
/* Base header layout */
header .wrap{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;             /* allow neat wrap on small screens */
}

/* Make the nav a tidy row */
header nav ul{
  display:flex;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
header nav a{ white-space:nowrap; }

/* MOBILE: stack into two rows */
@media (max-width:768px){
  /* First child in header (logo/title) */
  header .wrap > *:first-child{
    order:1;
    flex:1 1 auto;            /* takes left side */
  }
  /* The button (match common possibilities) */
  header .wrap > a.button,
  header .wrap > .button,
  header .wrap > .cta,
  header .wrap > a[href*="estimate"]{
    order:2;
    margin-left:auto;         /* push to right on row 1 */
  }
  /* Nav goes to row 2, full width */
  header .wrap > nav{
    order:3;
    flex:1 1 100%;
  }
  header nav ul{ justify-content:flex-start; }
}

/* DESKTOP: all in one line, button on far right */
@media (min-width:769px){
  header .wrap{ flex-wrap:nowrap; }
  header .wrap > nav{ flex:0 1 auto; }
  header .wrap > a.button,
  header .wrap > .button,
  header .wrap > .cta,
  header .wrap > a[href*="estimate"]{
    margin-left:auto;
  }
}
/* ===== MOBILE HEADER HOTFIX (place after your current CSS) ===== */

/* Reserve space for sticky header so content doesn't sit under it */
:root { --headerH: 64px; }
body { padding-top: var(--headerH); }
header { min-height: var(--headerH); }

/* If your links aren't inside <nav>, this styles any top links inside header too */
header a { color: var(--text); text-decoration: none; }
header a:hover { text-decoration: underline; }

/* Make sure header children don't collapse or overlap */
header .wrap > * { min-width: 0; }          /* prevents flex overflow weirdness */
header .wrap { row-gap: 10px; }             /* breathing room when wrapping */

/* MOBILE: force 2-row structure */
@media (max-width:768px){
  /* First item (logo/title) takes left of row 1 */
  header .wrap > *:first-child{
    order:1; flex:1 1 auto;
  }

  /* CTA/Button sits on right of row 1 and never stretches */
  header .wrap > a.button,
  header .wrap > .button,
  header .wrap > .cta,
  header .wrap > a[href*="estimate"]{
    order:2; margin-left:auto; flex:0 0 auto;
  }

  /* Nav occupies full row 2 */
  header .wrap > nav{
    order:3; flex:0 0 100%;
  }
  header nav ul{
    display:flex; flex-wrap:wrap; gap:12px;
    margin:0; padding:0; list-style:none;
    justify-content:flex-start;
  }
  header nav a{
    display:inline-block; padding:10px 12px; border-radius:10px;
  }
}

/* DESKTOP: single-line keeps CTA far right */
@media (min-width:769px){
  header .wrap{ flex-wrap:nowrap; }
  header .wrap > nav{ flex:0 1 auto; }
  header .wrap > a.button,
  header .wrap > .button,
  header .wrap > .cta,
  header .wrap > a[href*="estimate"]{ margin-left:auto; }
}