/* Shared component styles used across every page.
   Extracted from what was previously an identical block duplicated inside
   a <style> tag on every page. Rules here were verified byte-for-byte
   identical across pages before being centralized; anything that differed
   between pages (form field sizing, per-page image heights, body font
   overrides) was intentionally left in each page's own <style> block. */

header { background: rgba(255,255,255,0.96) !important; border-bottom-color: rgba(22,23,26,0.08) !important; }
header .logo-panel { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
#mobile-nav { background: #ffffff !important; border-top-color: rgba(22,23,26,0.08) !important; }

.jc-announce { background: #16171a; border-bottom: 1px solid rgba(255,255,255,0.08); }

.jc-d {
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  line-height: 0.94 !important;
}

.jc-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c25a2a;
}
.jc-lbl::before { content: ''; display: inline-block; width: 24px; height: 1px; background: #c25a2a; }

.jc-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c25a2a;
}

.jc-cut { border-radius: 16px 0 16px 0 !important; }

.jc-stat {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
}

.jc-svc {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(194,90,42,0.18);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(22,23,26,0.05);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  border-radius: 16px 0 16px 0;
}
.jc-svc::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, #c25a2a 0%, #efb37a 100%);
}
.jc-svc:hover { background: #fff6ed; border-color: rgba(194,90,42,0.35); transform: translateY(-2px); }
.jc-svc:hover .jc-arr { color: #16171a; }
.jc-arr { color: #c25a2a; transition: color 0.15s; font-size: 1rem; }

.jc-card {
  background: #ffffff;
  border: 1px solid rgba(194,90,42,0.16);
  border-radius: 16px 0 16px 0;
  box-shadow: 0 18px 42px rgba(22,23,26,0.05);
}

.jc-project {
  overflow: hidden;
  border: 1px solid rgba(22,23,26,0.08);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(22,23,26,0.05);
  border-radius: 16px 0 16px 0;
}

.jc-review {
  border: 1px solid rgba(22,23,26,0.08);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(22,23,26,0.05);
  border-radius: 16px 0 16px 0;
}
.jc-review.is-accent {
  border-color: rgba(194,90,42,0.22);
  background: linear-gradient(180deg, #fff7ef 0%, #ffffff 100%);
}

.jc-stamp {
  border: 2px solid #c25a2a;
  background: rgba(15,16,18,0.92);
  padding: 20px 24px;
  transform: rotate(-1.5deg);
  max-width: 300px;
}

.jc-form-panel {
  background: #ffffff;
  color: #16171a;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(22,23,26,0.12);
  border-radius: 16px 0 16px 0;
}

.jc-footer-link { color: #5f5a52; transition: color 0.15s ease; }
.jc-footer-link:hover { color: #c25a2a; }

@media (max-width: 640px) {
  .jc-hero-actions a { width: 100%; }
}

/* Skip-to-content link (accessibility) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -80px;
  z-index: 100;
  background: #16171a;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}