:root {
  --stg-ink: #1E2328;
  --stg-porcelain: #F6F5F3;
  --stg-gold: #D8A24B;
  --stg-sage: #5C7C6D;
  --stg-slate: #4A5562;
  --stg-success: #2F9E44;
  --stg-warn: #E67700;
  --stg-error: #D64545;
  --stg-radius: 16px;
  --stg-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

  /* Map Stagi brand to Bootstrap color variables */
  --bs-primary: var(--stg-ink);
  --bs-secondary: var(--stg-sage);
  --bs-success: var(--stg-success);
  --bs-warning: var(--stg-warn);
  --bs-danger: var(--stg-error);
  --bs-info: var(--stg-slate);
  --bs-light: var(--stg-porcelain);
  --bs-dark: var(--stg-ink);

  /* RGB forms for components that use translucency */
  --bs-primary-rgb: 30, 35, 40;
  --bs-secondary-rgb: 92, 124, 109;
  --bs-success-rgb: 47, 158, 68;
  --bs-warning-rgb: 230, 119, 0;
  --bs-danger-rgb: 214, 69, 69;
  --bs-info-rgb: 74, 85, 98;
  --bs-light-rgb: 246, 245, 243;
  --bs-dark-rgb: 30, 35, 40;
}


html, body {
  height: 100%;
}

body {
    display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color: var(--stg-ink);
  background: var(--stg-porcelain);
}

.stg-container {
    flex: 1 0 auto; /* allow content to grow and push footer down */
  max-width: 1100px;
}
.stg-footer {
  flex-shrink: 0; /* keep footer visible at bottom */
}

.btn-stg,
.btn-primary {
  background: var(--stg-ink);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.65rem 1.1rem;
  box-shadow: var(--stg-shadow);
}

.btn-stg:hover,
.btn-primary:hover {
  background: #111519;
  color: #fff;
}

/* Bootstrap button variable overrides for brand compliance */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--stg-ink);
  --bs-btn-border-color: var(--stg-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #111519;
  --bs-btn-hover-border-color: #111519;
  --bs-btn-focus-shadow-rgb: 30,35,40; /* ink rgb */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #111519;
  --bs-btn-active-border-color: #111519;
  --bs-btn-disabled-bg: var(--stg-ink);
  --bs-btn-disabled-border-color: var(--stg-ink);
}

/* Brand contextual buttons */
.btn-success {
  background: var(--stg-success);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.65rem 1.1rem;
  box-shadow: var(--stg-shadow);
}
.btn-success:hover { background: #27853A; color:#fff; }
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--stg-success);
  --bs-btn-border-color: var(--stg-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #27853A; /* darker success */
  --bs-btn-hover-border-color: #27853A;
  --bs-btn-focus-shadow-rgb: 47,158,68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #27853A;
  --bs-btn-active-border-color: #27853A;
  --bs-btn-disabled-bg: var(--stg-success);
  --bs-btn-disabled-border-color: var(--stg-success);
}

.btn-warning {
  background: var(--stg-warn);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.65rem 1.1rem;
  box-shadow: var(--stg-shadow);
}
.btn-warning:hover { background: #C76600; color:#fff; }
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--stg-warn);
  --bs-btn-border-color: var(--stg-warn);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #C76600;
  --bs-btn-hover-border-color: #C76600;
  --bs-btn-focus-shadow-rgb: 230,119,0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #C76600;
  --bs-btn-active-border-color: #C76600;
  --bs-btn-disabled-bg: var(--stg-warn);
  --bs-btn-disabled-border-color: var(--stg-warn);
}

.btn-danger {
  background: var(--stg-error);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.65rem 1.1rem;
  box-shadow: var(--stg-shadow);
}
.btn-danger:hover { background: #B33B3B; color:#fff; }
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--stg-error);
  --bs-btn-border-color: var(--stg-error);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #B33B3B;
  --bs-btn-hover-border-color: #B33B3B;
  --bs-btn-focus-shadow-rgb: 214,69,69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #B33B3B;
  --bs-btn-active-border-color: #B33B3B;
  --bs-btn-disabled-bg: var(--stg-error);
  --bs-btn-disabled-border-color: var(--stg-error);
}

.btn-outline-danger {
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
}


.btn-outline-stg,
.btn-outline-primary {
  border-color: var(--stg-ink);
  color: var(--stg-ink);
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
}
.btn-outline-stg:hover,
.btn-outline-primary:hover { background: var(--stg-ink); color:#fff; }

/* Outline variant variable overrides */
.btn-outline-primary {
  --bs-btn-color: var(--stg-ink);
  --bs-btn-border-color: var(--stg-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--stg-ink);
  --bs-btn-hover-border-color: var(--stg-ink);
  --bs-btn-active-bg: var(--stg-ink);
  --bs-btn-active-border-color: var(--stg-ink);
  --bs-btn-disabled-color: var(--stg-ink);
  --bs-btn-disabled-border-color: var(--stg-ink);
}

.btn-outline-success { border-color: var(--stg-success); color: var(--stg-success); border-radius:12px; padding:0.6rem 1.1rem; }
.btn-outline-success:hover { background: var(--stg-success); color:#fff; }
.btn-outline-success {
  --bs-btn-color: var(--stg-success);
  --bs-btn-border-color: var(--stg-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--stg-success);
  --bs-btn-hover-border-color: var(--stg-success);
  --bs-btn-active-bg: var(--stg-success);
  --bs-btn-active-border-color: var(--stg-success);
  --bs-btn-disabled-color: var(--stg-success);
  --bs-btn-disabled-border-color: var(--stg-success);
}

.btn-outline-warning { border-color: var(--stg-warn); color: var(--stg-warn); border-radius:12px; padding:0.6rem 1.1rem; }
.btn-outline-warning:hover { background: var(--stg-warn); color:#fff; }
.btn-outline-warning {
  --bs-btn-color: var(--stg-warn);
  --bs-btn-border-color: var(--stg-warn);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--stg-warn);
  --bs-btn-hover-border-color: var(--stg-warn);
  --bs-btn-active-bg: var(--stg-warn);
  --bs-btn-active-border-color: var(--stg-warn);
  --bs-btn-disabled-color: var(--stg-warn);
  --bs-btn-disabled-border-color: var(--stg-warn);
}

.btn-outline-danger { border-color: var(--stg-error); color: var(--stg-error); border-radius:12px; padding:0.6rem 1.1rem; }
.btn-outline-danger:hover { background: var(--stg-error); color:#fff; }
.btn-outline-danger {
  --bs-btn-color: var(--stg-error);
  --bs-btn-border-color: var(--stg-error);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--stg-error);
  --bs-btn-hover-border-color: var(--stg-error);
  --bs-btn-active-bg: var(--stg-error);
  --bs-btn-active-border-color: var(--stg-error);
  --bs-btn-disabled-color: var(--stg-error);
  --bs-btn-disabled-border-color: var(--stg-error);
}

.card,
.stg-card {
border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column;
}
 .stg-card img { width:100%; height:200px; object-fit:cover; }
  .stg-card .p-3 { flex:1; }

.card-header {
  background: transparent;
  border-bottom: 1px solid #eef0f2;
}

.form-control,
.form-select {
  border-radius: 12px;
  border-color: #d7dce0;
  padding: 0.6rem 0.9rem;
}

.navbar {
  background: #fff;
  border-bottom: 1px solid #e7eaee;
  box-shadow: var(--stg-shadow);
}

.navbar .nav-link {
  color: var(--stg-slate);
  font-weight: 500;
  margin-right: 0.5rem;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--stg-ink);
}

.navbar-brand {
  font-family: 'Poppins', Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.badge-style,
.badge {
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
}

.alert {
  border-radius: 12px;
}
/* Brand alerts */
.alert-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: rgba(var(--bs-primary-rgb), 0.08);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.24);
}
.alert-secondary {
  --bs-alert-color: var(--bs-secondary);
  --bs-alert-bg: rgba(var(--bs-secondary-rgb), 0.08);
  --bs-alert-border-color: rgba(var(--bs-secondary-rgb), 0.24);
}
.alert-success {
  --bs-alert-color: var(--bs-success);
  --bs-alert-bg: rgba(var(--bs-success-rgb), 0.08);
  --bs-alert-border-color: rgba(var(--bs-success-rgb), 0.24);
}
.alert-warning {
  --bs-alert-color: var(--bs-warning);
  --bs-alert-bg: rgba(var(--bs-warning-rgb), 0.10);
  --bs-alert-border-color: rgba(var(--bs-warning-rgb), 0.28);
}
.alert-danger {
  --bs-alert-color: var(--bs-danger);
  --bs-alert-bg: rgba(var(--bs-danger-rgb), 0.08);
  --bs-alert-border-color: rgba(var(--bs-danger-rgb), 0.24);
}
.alert-info {
  --bs-alert-color: var(--bs-info);
  --bs-alert-bg: rgba(var(--bs-info-rgb), 0.08);
  --bs-alert-border-color: rgba(var(--bs-info-rgb), 0.24);
}
.alert-dark {
  --bs-alert-color: var(--bs-dark);
  --bs-alert-bg: rgba(var(--bs-dark-rgb), 0.06);
  --bs-alert-border-color: rgba(var(--bs-dark-rgb), 0.20);
}
.alert .alert-link { color: inherit; text-decoration: underline; }

.text-gold {
  color: var(--stg-gold);
}

.bg-ink {
  background: var(--stg-ink);
}

.link-muted {
  color: #6c757d;
}

.link-muted:hover {
  color: var(--stg-ink);
}

.table > :not(caption) > * > * {
  padding: 0.75rem;
}

.tab-content {
  background: transparent;
}

.rounded-2xl {
  border-radius: 20px;
}

.shadow-soft {
  box-shadow: var(--stg-shadow);
}

.muted {
  color: #6c757d;
}
/* Toasts */
.toast { border-radius: 12px; box-shadow: var(--stg-shadow); }
.toast.text-bg-primary { background-color: var(--bs-primary) !important; color: #fff !important; }
.toast.text-bg-secondary { background-color: var(--bs-secondary) !important; color: #fff !important; }
.toast.text-bg-success { background-color: var(--bs-success) !important; color: #fff !important; }
.toast.text-bg-warning { background-color: var(--bs-warning) !important; color: #fff !important; }
.toast.text-bg-danger { background-color: var(--bs-danger) !important; color: #fff !important; }
.toast.text-bg-info { background-color: var(--bs-info) !important; color: #fff !important; }
.toast .btn-close { filter: invert(1) grayscale(100%); opacity: .9; }
:root{
      --stg-ink:#1E2328; --stg-porcelain:#F6F5F3; --stg-gold:#D8A24B; --stg-sage:#5C7C6D; --stg-slate:#4A5562;
      --stg-success:#2F9E44; --stg-warn:#E67700; --stg-error:#D64545; --stg-radius:16px; --stg-shadow:0 12px 28px rgba(0,0,0,.08);
    }
    body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:var(--stg-ink); background:var(--stg-porcelain); }
    .stg-hero{ background: radial-gradient(1200px 700px at 80% -10%, rgba(216,162,75,.15), transparent 60%), var(--stg-porcelain); }
    .stg-title{ font-family:Poppins, Inter, sans-serif; letter-spacing:.2px }
    .btn-stg{ background:var(--stg-ink); color:#fff; border-radius:12px; padding:.8rem 1.1rem; box-shadow:var(--stg-shadow); }
    .btn-stg:hover{ background:#111519; color:#fff; }
    .btn-outline-stg{ border-color:var(--stg-ink); color:var(--stg-ink); border-radius:12px; padding:.8rem 1.1rem; }
    .btn-outline-stg:hover{ background:var(--stg-ink); color:#fff; }
    .stg-chip{ background:#fff; border:1px solid #e9ecef; border-radius:999px; padding:.4rem .8rem; font-size:.9rem; }
    .stg-card{ background:#fff; border:1px solid #e9ecef; border-radius:var(--stg-radius); box-shadow:var(--stg-shadow); }
    .stg-section{ padding:4.5rem 0; background: var(--stg-porcelain); }
    .stg-icon{ width:46px; height:46px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background: #fff; border:1px solid #e9ecef; }
    .price{ font-family:Poppins, Inter, sans-serif; }

    /* Logo wordmark */
    .logo-word{ font-family:Poppins, Inter, sans-serif; font-weight:700; font-size:1.4rem; letter-spacing:.3px; }
    .door-icon{ width:56px; height:56px; border-radius:6px; background:var(--stg-ink); position:relative; display:inline-block; margin-right:.5rem; }
    .door-icon::after{ content:""; position:absolute; width:10px; height:10px; border-radius:50%; right:8px; top:50%; transform:translateY(-50%); background:var(--stg-gold); }
    .stg-badge{ background:rgba(216,162,75,.18); color:#45340f; border:0; }
    .link-muted{ color:#6b7280; text-decoration:none; }
    .link-muted:hover{ color:var(--stg-ink); text-decoration:underline; }
    .shadow-soft{ box-shadow:var(--stg-shadow); }
    .rounded-2xl{ border-radius:20px; }
    .bg-ink{ background:var(--stg-ink); }
    .text-gold{ color:var(--stg-gold); }
    .bg-porcelain{ background:var(--stg-porcelain); }
    .bg-sage{ background:var(--stg-sage); }
    .border-ink{ border-color:var(--stg-ink) !important; }
    .stg-footer a{ color:#d1d5db; text-decoration:none; }
    .stg-footer a:hover{ color:#fff; text-decoration:underline; }

    /* Before/After slider core */
.ba-wrapper{position:relative; width:100%; aspect-ratio:16/10; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.12);}
.ba-after, .ba-before{position:absolute; inset:0; background-size:cover; background-position:center; transition:clip-path .05s linear;}
.ba-before{clip-path:inset(0 50% 0 0);} /* initial */
.ba-slider{position:absolute; inset:auto 0 0 0; width:100%; -webkit-appearance:none; appearance:none; height:0; outline:0; background:transparent;}
.ba-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:46px; height:46px; background:transparent; cursor:ew-resize; }
.ba-slider::-moz-range-thumb{ width:46px; height:46px; background:transparent; border:0; cursor:ew-resize; }
.ba-line{position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.8); pointer-events:none;}
.ba-handle{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.2); pointer-events:none;}
.ba-handle i{font-size:20px; color:#333;}
@media (max-width: 576px){ .ba-wrapper{aspect-ratio:4/3;} }

/* Proof strip logos */
.proof-logo { width:150px; max-width:100%; height:auto; display:inline-block; }

.nav-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.nav-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.account-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  cursor: pointer;
}

.account-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e9ecef;
  color: #4a5562;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.account-avatar-wrap {
  position: relative;
  display: inline-block;
}

.account-avatar-wrap .avatar-edit-btn {
  position: absolute;
  bottom: -6px;
  right: -6px;
  border-radius: 50%;
  background: var(--stg-ink);
  color: #fff;
  border: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}


.form-check-input[type=checkbox] {
    border-radius: .25em;
    font-size: xx-large;
}

.styles {
  background: var(--stg-sage);
}