/* JengaCost identity
   Palette: charcoal formwork #23262B, site-helmet amber #F5A623,
   rebar rust #B4552D, survey-paper #F7F5F0, gridline grey #D9D5CC */
:root {
  --jc-charcoal: #23262b;
  --jc-amber: #f5a623;
  --jc-rust: #b4552d;
  --jc-paper: #f7f5f0;
  --jc-grid: #d9d5cc;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--jc-paper);
  color: var(--jc-charcoal);
}

h1, h2, h3, h4, .navbar-brand {
  font-family: "Archivo", sans-serif;
  letter-spacing: -0.01em;
}

.jc-navbar {
  background: var(--jc-charcoal);
}
.jc-navbar .navbar-brand { color: #fff; font-weight: 500; }
.jc-navbar .navbar-brand strong { color: var(--jc-amber); font-weight: 800; }
.jc-navbar .nav-link { color: rgba(255,255,255,.8); }
.jc-navbar .nav-link:hover { color: var(--jc-amber); }
.jc-logo-mark { color: var(--jc-amber); }

.jc-btn-primary {
  background: var(--jc-amber);
  color: var(--jc-charcoal);
  font-weight: 600;
  border: none;
}
.jc-btn-primary:hover { background: #ffb63d; color: var(--jc-charcoal); }

.jc-hero {
  border-left: 6px solid var(--jc-amber);
  padding-left: 1.25rem;
}
.jc-hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem); }

.card {
  border: 1px solid var(--jc-grid);
  border-radius: .5rem;
  background: #fff;
}
.card .card-header {
  background: #fff;
  border-bottom: 2px solid var(--jc-charcoal);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
}

.jc-stat { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.6rem; }
.jc-stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #6b6f76; }

.table thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--jc-charcoal);
}
.jc-amount { font-variant-numeric: tabular-nums; text-align: right; }

.badge.jc-badge-material { background: #3d6b35; }
.badge.jc-badge-labour { background: var(--jc-rust); }
.badge.jc-badge-plant { background: #35506b; }
.badge.jc-badge-composite { background: #6b3560; }

.jc-footer { background: var(--jc-charcoal); color: rgba(255,255,255,.65); }
.jc-footer a { color: var(--jc-amber); text-decoration: none; }
.jc-footer a:hover { text-decoration: underline; }

/* ── Landing page ─────────────────────────────────────────────────── */
.jc-hero-band {
  background:
    linear-gradient(135deg, rgba(35,38,43,.97), rgba(35,38,43,.88)),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(245,166,35,.06) 22px 24px);
  color: #fff;
  border-radius: .75rem;
  padding: clamp(2rem, 6vw, 4rem);
}
.jc-hero-band h1 { color: #fff; font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); }
.jc-hero-band .lead { color: rgba(255,255,255,.82); max-width: 34rem; }
.jc-hero-band .jc-accent { color: var(--jc-amber); }

.jc-mockboq {
  background: #fff; color: var(--jc-charcoal);
  border-radius: .6rem; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  font-size: .82rem; overflow: hidden;
}
.jc-mockboq .head {
  background: var(--jc-charcoal); color: #fff;
  padding: .55rem .9rem; font-family: "Archivo", sans-serif; font-weight: 700;
}
.jc-mockboq table { width: 100%; border-collapse: collapse; }
.jc-mockboq td { padding: .4rem .9rem; border-top: 1px solid var(--jc-grid); }
.jc-mockboq .tot { background: #fff8ea; font-weight: 700; }

.jc-statband { border-block: 2px solid var(--jc-charcoal); }
.jc-statband .jc-stat { font-size: 2rem; }

.jc-step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--jc-charcoal); color: var(--jc-amber);
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Plans / billing ──────────────────────────────────────────────── */
.jc-plan-card { transition: transform .12s ease, box-shadow .12s ease; }
.jc-plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35,38,43,.12); }
.jc-plan-featured { border: 2px solid var(--jc-amber); }
.jc-price {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2.1rem;
}
.jc-price-per { font-size: .95rem; font-weight: 500; color: #6b6f76; margin-left: .25rem; }
.jc-ticks li { padding: .3rem 0 .3rem 1.5rem; position: relative; }
.jc-ticks li::before {
  content: "✓"; position: absolute; left: 0; color: #3d6b35; font-weight: 700;
}

/* ── Professional services (structural drawings referral) ─────────── */
.jc-eng-card {
  border-left: 5px solid var(--jc-amber);
  background: linear-gradient(180deg, #fffdf7, #fff);
}
.jc-eng-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--jc-charcoal); color: var(--jc-amber);
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.jc-eng-kicker {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--jc-rust); font-weight: 700;
}

/* ── Navbar plan pill ─────────────────────────────────────────────── */
.jc-pill-upgrade {
  background: var(--jc-amber); color: var(--jc-charcoal) !important;
  font-weight: 700; border-radius: 999px; padding: .3rem 1rem;
}
.jc-pill-pro {
  border: 1px solid var(--jc-amber); color: var(--jc-amber) !important;
  font-weight: 700; border-radius: 999px; padding: .3rem 1rem;
}

/* ── 3D concept viewer ────────────────────────────────────────────── */
.jc-viewer {
  position: relative;
  /* Tall enough to read as a building, short enough that a phone still
     shows the price and the sliders around it. */
  aspect-ratio: 16 / 10;
  min-height: 240px;
  max-height: 460px;
  background: linear-gradient(180deg, #cfe0ee, #e7e2d4);
  overflow: hidden;
}
.jc-viewer-canvas { position: absolute; inset: 0; }
.jc-viewer-hint, .jc-viewer-note {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .78rem; padding: .3rem .8rem; border-radius: 999px;
  background: rgba(34, 34, 31, .62); color: #fff;
  pointer-events: none; white-space: nowrap;
}
.jc-viewer-hint { bottom: .7rem; }
.jc-viewer-note {
  top: 50%; transform: translate(-50%, -50%);
  white-space: normal; max-width: 80%; text-align: center;
}

@media print {
  .jc-navbar, .jc-footer, .btn, .alert { display: none !important; }
  .jc-viewer { display: none !important; }
  body { background: #fff; }
}