/* Boulder Creek Contracting — brand system */

:root{
  --ink:        #0b0b0b;
  --ink-2:      #141414;
  --bone:       #f5f2ec;
  --bone-2:     #ece7dd;
  --accent:     #ff5b1f;   /* safety orange */
  --accent-2:   #ffb199;
  --line:       rgba(255,255,255,.08);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.font-display { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }
.num { font-variant-numeric: tabular-nums; }

/* Visual fx */
.grain{ position: relative; }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero-bg{
  background:
    radial-gradient(1000px 500px at 90% -10%, rgba(255,91,31,.18), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(255,91,31,.08), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #0b0b0b 100%);
}
.sub-hero-bg{
  background:
    radial-gradient(900px 380px at 80% -20%, rgba(255,91,31,.14), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #0b0b0b 100%);
}

.mark { background-image: linear-gradient(transparent 62%, rgba(255,91,31,.35) 62%); }
.mark-dark { background-image: linear-gradient(transparent 62%, rgba(255,91,31,.25) 62%); }

.hr-line { height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
.hr-line-dark { height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.18), transparent); }

.tile { background: linear-gradient(145deg, #141414, #0e0e0e); }

/* Buttons */
.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#ff5b1f; color:#0b0b0b; font-weight:800;
  padding:.9rem 1.25rem; border-radius:999px;
  box-shadow: 0 8px 30px rgba(255,91,31,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 40px rgba(255,91,31,.45); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:600;
  padding:.9rem 1.25rem; border-radius:999px; backdrop-filter: blur(6px);
}
.btn-ghost:hover{ border-color: rgba(255,255,255,.4); }

.btn-ghost-dark{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(0,0,0,.15); color:#0b0b0b; font-weight:700;
  padding:.9rem 1.25rem; border-radius:999px;
}
.btn-ghost-dark:hover{ border-color: rgba(0,0,0,.3); background: rgba(0,0,0,.03); }

/* Chip + status */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:.8rem; color:#e7e5e4;
}
.chip-dark{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.08);
  font-size:.8rem; color:#0b0b0b;
}
.dot{ width:.45rem; height:.45rem; border-radius:999px; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); }

/* Hover shine on primary buttons */
.shine { position: relative; overflow: hidden; }
.shine::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s ease;
  pointer-events:none;
}
.shine:hover::after{ transform: translateX(120%); }
@media (prefers-reduced-motion: reduce){ .shine::after{ transition: none; } }

/* Links */
.underline-hover{
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s;
}
.underline-hover:hover{ background-size: 100% 1px; }

/* Accordions */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Form */
.field-label{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: rgba(11,11,11,.6); }
.field {
  width:100%; border-radius: .75rem; background:#fff; border:1px solid rgba(0,0,0,.1);
  padding: .75rem 1rem; transition: box-shadow .15s, border-color .15s;
}
.field:focus{ outline:none; border-color:#0b0b0b; box-shadow: 0 0 0 3px rgba(255,91,31,.35); }

/* Utility */
.ring-ink { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 60px rgba(0,0,0,.08); }
.card-dark { background: linear-gradient(145deg, #141414, #0e0e0e); border: 1px solid var(--line); border-radius: 1.5rem; }
.card-light { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 1.5rem; }