/* Elegant diagonal background gradient */
body {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0b0b0b 100%);
  color: #f1f5f9;
}


/* Base reset for host consistency */ 
*{box-sizing:border-box} html,body{margin:0;padding:0} img{max-width:100%;height:auto;display:block} a{text-decoration:none}


  :root{ --bg:#0b0b0b; --text:#ffffff; --muted:#cbd5e1; --red:#ef4444; --blue:#3b82f6;
         --card:#111318; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35) }
  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0; scroll-behavior:smooth }
  body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        background:var(--bg); color:var(--text); line-height:1.7; font-size:16px }
  a{ color:var(--blue); text-decoration:none }
  a:hover{ text-decoration:underline }
  .container{ width:min(1000px,94vw); margin-inline:auto }
  header.site{ position:sticky; top:0; z-index:20; background:rgba(11,11,11,.95);
               border-bottom:1px solid #1f2937; backdrop-filter:saturate(180%) blur(8px) }
  .brandbar{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 0 }
  .brandbar .title{ font-weight:800; letter-spacing:.2px; font-size:clamp(1.3rem,4.5vw,1.8rem); margin:0 }
  .brandbar .title a{ color:var(--text) }
  .icon{ width:40px; height:40px; opacity:.35 }
  .icon.gear{ animation:spin 8s linear infinite }
  .icon.wrench{ animation:bob 3.2s ease-in-out infinite; transform-origin:20px 32px }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  @keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-8deg)} 50%{ transform:translateY(-6px) rotate(2deg)} }
  .navlinks{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
             padding:8px 10px 10px; border-top:1px solid #1f2937; border-bottom:1px solid #1f2937;
             background:#0e1117; font-weight:700; text-align:center }
  .navlinks a{ display:inline-block; color:#e5e7eb; padding:.45rem .6rem; margin:0 .1rem; border-radius:10px }
  .navlinks a:hover{ background:#13161c }
  section.block{ padding:18px 0 16px; border-bottom:1px solid #1f2937 }
  .card{ background:var(--card); border:1px solid #1f2937; border-radius:var(--radius);
         box-shadow:var(--shadow); padding:16px; margin-bottom:16px }
  .lead{ color:var(--muted) }
  .hero{ text-align:center }
  .hero img{ width:min(680px,94vw); height:auto; border-radius:16px; box-shadow:var(--shadow) }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--blue);
        color:#fff; border:0; padding:0.95rem 1.1rem; border-radius:14px; font-weight:800;
        box-shadow:var(--shadow); cursor:pointer; text-decoration:none }
  .btn.alt{ background:var(--red) }
  footer{ border-top:1px solid #1f2937; padding:20px 0 80px; color:#94a3b8; text-align:center }
  .footer-link{ border-top:1px solid #1f2937; margin-top:24px; padding-top:16px; font-size:1.1rem }
  .footer-link a{ color:var(--blue); font-weight:700 }
  .mobile-cta{ display:none }
  @media(max-width:820px){
    .mobile-cta{ position:fixed; bottom:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:1fr 1fr; gap:8px;
                 background:rgba(11,11,11,.9); backdrop-filter:saturate(180%) blur(8px);
                 border-top:1px solid #1f2937; padding:10px 12px calc(10px + env(safe-area-inset-bottom)) }
    .mobile-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:14px;
                   font-weight:800; text-decoration:none; padding:.9rem 1rem; box-shadow:var(--shadow); color:#fff }
    .mobile-cta a.call{ background:var(--red) } .mobile-cta a.text{ background:var(--blue) }
  }



/* === Approved cosmetic updates === */
header.site{ position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.navlinks{
  background: rgba(40,40,40,0.98);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  padding: .25rem .75rem;
}
.navlinks a{ color:#f1f5f9; text-decoration:none; }
.navlinks a:hover{ color:#ffffff; }
.brandbar .slogan{ font-style: italic; color:#d1d5db; margin-top:4px; text-align:center; font-size:1rem; }
.hero-portrait{ display:block; margin:12px auto 16px; width: 90px; height: 90px; border-radius:50%; object-fit:cover;
                border:2px solid #6b7280; box-shadow:0 6px 20px rgba(0,0,0,.35); }
@media (min-width:768px){ .hero-portrait{ width: 110px; height: 110px; margin-bottom:20px; } }



  :root{ --bg:#0b0b0b; --text:#ffffff; --muted:#cbd5e1; --red:#ef4444; --blue:#3b82f6;
         --card:#111318; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35) }
  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0; scroll-behavior:smooth }
  body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        background:var(--bg); color:var(--text); line-height:1.7; font-size:16px }
  a{ color:var(--blue); text-decoration:none }
  a:hover{ text-decoration:underline }
  .container{ width:min(1000px,94vw); margin-inline:auto }
  header.site{ position:sticky; top:0; z-index:20; background:rgba(11,11,11,.95);
               border-bottom:1px solid #1f2937; backdrop-filter:saturate(180%) blur(8px) }
  .brandbar{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 0 }
  .brandbar .title{ font-weight:800; letter-spacing:.2px; font-size:clamp(1.3rem,4.5vw,1.8rem); margin:0 }
  .brandbar .title a{ color:var(--text) }
  .icon{ width:40px; height:40px; opacity:.35 }
  .icon.gear{ animation:spin 8s linear infinite }
  .icon.wrench{ animation:bob 3.2s ease-in-out infinite; transform-origin:20px 32px }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  @keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-8deg)} 50%{ transform:translateY(-6px) rotate(2deg)} }
  .navlinks{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
             padding:8px 10px 10px; border-top:1px solid #1f2937; border-bottom:1px solid #1f2937;
             background:#0e1117; font-weight:700; text-align:center }
  .navlinks a{ display:inline-block; color:#e5e7eb; padding:.45rem .6rem; margin:0 .1rem; border-radius:10px }
  .navlinks a:hover{ background:#13161c }
  section.block{ padding:18px 0 16px; border-bottom:1px solid #1f2937 }
  .card{ background:var(--card); border:1px solid #1f2937; border-radius:var(--radius);
         box-shadow:var(--shadow); padding:16px; margin-bottom:16px }
  .lead{ color:var(--muted) }
  .hero{ text-align:center }
  .hero img{ width:min(680px,94vw); height:auto; border-radius:16px; box-shadow:var(--shadow) }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--blue);
        color:#fff; border:0; padding:0.95rem 1.1rem; border-radius:14px; font-weight:800;
        box-shadow:var(--shadow); cursor:pointer; text-decoration:none }
  .btn.alt{ background:var(--red) }
  footer{ border-top:1px solid #1f2937; padding:20px 0 80px; color:#94a3b8; text-align:center }
  .footer-link{ border-top:1px solid #1f2937; margin-top:24px; padding-top:16px; font-size:1.1rem }
  .footer-link a{ color:var(--blue); font-weight:700 }
  .mobile-cta{ display:none }
  @media(max-width:820px){
    .mobile-cta{ position:fixed; bottom:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:1fr 1fr; gap:8px;
                 background:rgba(11,11,11,.9); backdrop-filter:saturate(180%) blur(8px);
                 border-top:1px solid #1f2937; padding:10px 12px calc(10px + env(safe-area-inset-bottom)) }
    .mobile-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:14px;
                   font-weight:800; text-decoration:none; padding:.9rem 1rem; box-shadow:var(--shadow); color:#fff }
    .mobile-cta a.call{ background:var(--red) } .mobile-cta a.text{ background:var(--blue) }
  }

    .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 90px}
    .grid img{width:100%;height:auto;border-radius:14px;border:1px solid #1f2937;box-shadow:var(--shadow)}
    @media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
    figure{margin:0} figcaption{font-size:.9rem;color:var(--muted);margin-top:6px;text-align:center}
  


/* === Approved cosmetic updates === */
header.site{ position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.navlinks{
  background: rgba(40,40,40,0.98);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  padding: .25rem .75rem;
}
.navlinks a{ color:#f1f5f9; text-decoration:none; }
.navlinks a:hover{ color:#ffffff; }
.brandbar .slogan{ font-style: italic; color:#d1d5db; margin-top:4px; text-align:center; font-size:1rem; }
.hero-portrait{ display:block; margin:12px auto 16px; width: 90px; height: 90px; border-radius:50%; object-fit:cover;
                border:2px solid #6b7280; box-shadow:0 6px 20px rgba(0,0,0,.35); }
@media (min-width:768px){ .hero-portrait{ width: 110px; height: 110px; margin-bottom:20px; } }



/* Lightbox minimal */
.lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; z-index:2000; padding:4vmin; }
.lightbox-overlay.is-open{ display:flex; }
.lightbox-overlay img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.lightbox-close{ position:fixed; top:14px; right:14px; font-size:28px; color:#fff; background:rgba(255,255,255,.12); border-radius:999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; }



  :root{ --bg:#0b0b0b; --text:#ffffff; --muted:#cbd5e1; --red:#ef4444; --blue:#3b82f6;
         --card:#111318; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35) }
  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0; scroll-behavior:smooth }
  body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        background:var(--bg); color:var(--text); line-height:1.7; font-size:16px }
  a{ color:var(--blue); text-decoration:none }
  a:hover{ text-decoration:underline }
  .container{ width:min(1000px,94vw); margin-inline:auto }
  header.site{ position:sticky; top:0; z-index:20; background:rgba(11,11,11,.95);
               border-bottom:1px solid #1f2937; backdrop-filter:saturate(180%) blur(8px) }
  .brandbar{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 0 }
  .brandbar .title{ font-weight:800; letter-spacing:.2px; font-size:clamp(1.3rem,4.5vw,1.8rem); margin:0 }
  .brandbar .title a{ color:var(--text) }
  .icon{ width:40px; height:40px; opacity:.35 }
  .icon.gear{ animation:spin 8s linear infinite }
  .icon.wrench{ animation:bob 3.2s ease-in-out infinite; transform-origin:20px 32px }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  @keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-8deg)} 50%{ transform:translateY(-6px) rotate(2deg)} }
  .navlinks{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
             padding:8px 10px 10px; border-top:1px solid #1f2937; border-bottom:1px solid #1f2937;
             background:#0e1117; font-weight:700; text-align:center }
  .navlinks a{ display:inline-block; color:#e5e7eb; padding:.45rem .6rem; margin:0 .1rem; border-radius:10px }
  .navlinks a:hover{ background:#13161c }
  section.block{ padding:18px 0 16px; border-bottom:1px solid #1f2937 }
  .card{ background:var(--card); border:1px solid #1f2937; border-radius:var(--radius);
         box-shadow:var(--shadow); padding:16px; margin-bottom:16px }
  .lead{ color:var(--muted) }
  .hero{ text-align:center }
  .hero img{ width:min(680px,94vw); height:auto; border-radius:16px; box-shadow:var(--shadow) }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--blue);
        color:#fff; border:0; padding:0.95rem 1.1rem; border-radius:14px; font-weight:800;
        box-shadow:var(--shadow); cursor:pointer; text-decoration:none }
  .btn.alt{ background:var(--red) }
  footer{ border-top:1px solid #1f2937; padding:20px 0 80px; color:#94a3b8; text-align:center }
  .footer-link{ border-top:1px solid #1f2937; margin-top:24px; padding-top:16px; font-size:1.1rem }
  .footer-link a{ color:var(--blue); font-weight:700 }
  .mobile-cta{ display:none }
  @media(max-width:820px){
    .mobile-cta{ position:fixed; bottom:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:1fr 1fr; gap:8px;
                 background:rgba(11,11,11,.9); backdrop-filter:saturate(180%) blur(8px);
                 border-top:1px solid #1f2937; padding:10px 12px calc(10px + env(safe-area-inset-bottom)) }
    .mobile-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:14px;
                   font-weight:800; text-decoration:none; padding:.9rem 1rem; box-shadow:var(--shadow); color:#fff }
    .mobile-cta a.call{ background:var(--red) } .mobile-cta a.text{ background:var(--blue) }
  }



/* === Approved cosmetic updates === */
header.site{ position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.navlinks{
  background: rgba(40,40,40,0.98);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  padding: .25rem .75rem;
}
.navlinks a{ color:#f1f5f9; text-decoration:none; }
.navlinks a:hover{ color:#ffffff; }
.brandbar .slogan{ font-style: italic; color:#d1d5db; margin-top:4px; text-align:center; font-size:1rem; }
.hero-portrait{ display:block; margin:12px auto 16px; width: 90px; height: 90px; border-radius:50%; object-fit:cover;
                border:2px solid #6b7280; box-shadow:0 6px 20px rgba(0,0,0,.35); }
@media (min-width:768px){ .hero-portrait{ width: 110px; height: 110px; margin-bottom:20px; } }



/* Modern dark contrast sections with soft shadow */
section#services,
section#about,
section#contact {
  background-color: #2b2b2b;
  color: #f1f5f9;
  padding: 3rem 1.5rem;
  border-radius: 16px;
  margin-top: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
section#services:hover,
section#about:hover,
section#contact:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
section#services h2,
section#about h2,
section#contact h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
section#services p,
section#about p,
section#contact p,
section#services li {
  color: #d1d5db;
  line-height: 1.6;
  font-size: 1rem;
}
@media (min-width: 768px) {
  section#services,
  section#about,
  section#contact {
    padding: 4rem 2.5rem;
  }
}



/* Unified card style for Services, About, Contact */
.card-section{
  background-color: #2b2b2b;
  color: #f1f5f9;
  padding: 3rem 1.5rem;
  border-radius: 16px;
  margin-top: 2rem;
  box-shadow: 0 10px 26px rgba(0,0,0,0.40);
}
.card-section h2{ color:#ffffff; text-align:center; margin-bottom:1.2rem; font-weight:600; letter-spacing:.5px; }
.card-section p, .card-section li{ color:#d1d5db; line-height:1.65; }
@media (min-width:768px){ .card-section{ padding: 4rem 2.5rem; } }



/* Remove extra inner card background within Services and Contact to match About */
#services .card,
#contact .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}
#services .card .container,
#contact .card .container { padding: 0; }



/* Polished card appearance for Services, About, and Contact */
.card-section{
  background-color:#2b2b2b;
  color:#f1f5f9;
  padding:3rem 2rem;
  border-radius:18px;
  margin:2.5rem auto;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  max-width:1050px;
  transition:transform .25s ease, box-shadow .3s ease;
}
.card-section:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,0.45);
}
.card-section h2{
  color:#ffffff;
  text-align:center;
  margin-bottom:1.5rem;
  font-weight:600;
  letter-spacing:.5px;
}
.card-section p, .card-section li{
  color:#d1d5db;
  line-height:1.7;
  font-size:1.05rem;
}
@media(min-width:768px){
  .card-section{padding:4rem 3rem;}
}



/* Mobile section width and overflow adjustments */
@media (max-width: 768px) {
  #services.card-section,
  #contact.card-section {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  #services.card-section *,
  #contact.card-section * {
    box-sizing: border-box;
    max-width: 100%;
    word-wrap: break-word;
  }
}



/* Extra breathing room for mobile layout */
@media (max-width: 768px) {
  .card-section {
    padding: 2.5rem 1.25rem;
  }
  .card-section h2 {
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
  }
  .card-section p,
  .card-section li {
    font-size: 1rem;
    line-height: 1.75;
  }
  form input,
  form textarea,
  form button {
    width: 100%;
  }
}