/* =========================
   THEME A: White/Black/Orange
   Paste at END of styles.css
   ========================= */

:root{
  --bg: #ffffff;
  --text: #0b0b0b;
  --muted: #555;
  --border: #e8e8e8;
  --card: #ffffff;

  --orange: #ff6a00;
  --orange-2: #ff7f24;
  --shadow: 0 14px 40px rgba(0,0,0,.08);
}

body{
  background: var(--bg);
  color: var(--text);
}

/* Topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.topbar .chip{
  background:#fff;
  border:1px solid var(--border);
  color: var(--text);
}
.toplink{ color: var(--text); }
.toplink:hover{ color: var(--orange); }

/* Header */
.header{
  background:#fff;
  border-bottom:1px solid var(--border);
}

/* Hero overlay more “white/clean” */
.hero-overlay{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.95),
    rgba(255,255,255,.10),
    rgba(255,255,255,.99)
  );
}

/* Cards */
.card, .svc-card, .hero-card, .mobile-card, .modal-panel{
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Muted text */
.muted, .small.muted{
  color: var(--muted);
}

/* Buttons */
.btn{
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
}
.btn:hover{
  background: var(--orange-2);
  border-color: var(--orange-2);
}

/* Ghost buttons */
.btn-ghost{
  background:#fff;
  color: var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{
  border-color: var(--orange);
  color: var(--orange);
}

/* Small CTA in nav */
.nav a.btn.btn-small{
  background: var(--orange);
  border-color: var(--orange);
  color:#fff;
}

/* Links */
a{ color: var(--text); }
a:hover{ color: var(--orange); }

/* Badges */
.badge{
  background:#fff;
  border:1px solid var(--border);
  color: var(--text);
}
.badge:nth-child(1),
.badge:nth-child(2),
.badge:nth-child(3){
  border-left: 4px solid var(--orange);
}

/* Service tags */
.svc-tags span{
  background:#fff;
  border:1px solid var(--border);
  color: var(--text);
}

/* Inputs focus */
input, select, textarea{
  background:#fff;
  border:1px solid var(--border);
  color: var(--text);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,106,0,.15);
}

/* Back to top */
.to-top{
  background: var(--orange);
  border:1px solid var(--orange);
  color:#fff;
}
.to-top:hover{
  background: var(--orange-2);
  border-color: var(--orange-2);
}

/* Stronger readability for hero lead text */
.lead{
  color: #2b2b2b;     /* darker = readable */
  opacity: 1;
  font-weight: 500;
  line-height: 1.55;
}

/* Project gallery label: force high contrast on photos */
.g span{
  background: rgba(0,0,0,.62);  /* dark glass */
  color: #fff;                 /* white text */
  border: 1px solid rgba(255,255,255,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Optional: add orange accent without losing contrast */
.g span::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--orange);
  vertical-align: middle;
}

/* Fix ghost button hover contrast (Prefer Email buttons) */
.btn-ghost{
  background:#fff;
  color: var(--text);
  border:1px solid var(--border);
}

.btn-ghost:hover,
.btn-ghost:focus-visible{
  background: #e46e00;          /* strong contrast */
  border-color: #a04d00;
  color: #fff;               /* readable */
}

/* Optional: keep an orange accent ring instead of orange text */
.btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,106,0,.20);
}

.btn:hover,
.btn:focus,
.btn:focus-visible{
  color:#fff !important;
}