/**
 * CJIP bespoke widgets — shared primitives (C2.4).
 * Reusable button + boxed-wrapper classes for hero / cta / enquiry. Depends on
 * the locked token sheet (var(--color-*), var(--font-*)). R2 wrapper = 1200px.
 */

:root{
  --cjip-wrap:1280px;      /* R2 boxed contract wrapper = React max-w-7xl */
  --cjip-rhythm:80px;      /* R3 primary section rhythm  */
  --cjip-radius:12px;
}

/* Boxed inner wrapper used by every full-bleed band. */
.cjip-hero__inner,
.cjip-pillars__inner,
.cjip-cards__inner,
.cjip-steps__inner,
.cjip-about__inner,
.cjip-enquiry__inner,
.cjip-cta__inner{
  max-width:var(--cjip-wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,5vw,32px);
}

/* Buttons — gold fill (primary CTA) + azure-deep outline (secondary). */
.cjip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:56px;
  padding:16px 32px;
  border-radius:6px;   /* React rounded-md */
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  text-decoration:none;
  border:2px solid transparent;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
  cursor:pointer;
}
.cjip-btn--gold{
  background:var(--color-gold);
  color:var(--color-azure-deep);
  box-shadow:0 4px 12px color-mix(in srgb,var(--color-ink) 12%,transparent);
}
.cjip-btn--gold:hover{
  background:color-mix(in srgb,var(--color-gold) 90%,transparent);
}
.cjip-btn--outline{
  background:transparent;
  color:var(--color-azure-deep);
  border-color:var(--color-azure-deep);
}
.cjip-btn--outline:hover{
  background:var(--color-sky);
}
.cjip-btn:focus-visible{
  outline:3px solid var(--color-azure);
  outline-offset:2px;
}