:root{
  /* MK logo palette */
  --blue:#2985C4;
  --navy:#1E2A50;
  --navy2:#0F1733;
  --gold:#C3892B;
  --steel:#2569A1;
  --white:#ffffff;

  --muted:#4B5563;
  --bg:#ffffff;

  --border:3px;
  --radius:18px;
  --shadow:10px 10px 0 var(--navy2);

  --max:1160px;
  --pad:22px;

  --fontD:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fontM:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:var(--fontM);
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{width:min(var(--max), calc(100% - (var(--pad)*2))); margin:0 auto;}
.section{padding:78px 0;}

/* Type */
.nb-h1{
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.04em;
  line-height:0.95;
  margin:14px 0 10px;
  font-size:clamp(2.4rem, 5vw, 4.5rem);
}
.nb-h2{
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.03em;
  margin:0 0 8px;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
}
.nb-h3{
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  margin:10px 0 6px;
}
.nb-lead{color:var(--muted); max-width:62ch; font-size:1.05rem; margin:0 0 12px;}
.nb-muted{color:var(--muted);}

/* Buttons (clean brutal) */
.nb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  border-radius:16px;
  border:var(--border) solid var(--navy);
  box-shadow:6px 6px 0 var(--navy2);
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.nb-btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--gold);}
.nb-btn:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--navy2);}

.nb-btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff;}
.nb-btn-gold{background:linear-gradient(135deg,var(--gold),#E0B15A); color:var(--navy2);}
.nb-btn-ghost{background:#fff; color:var(--navy);}
.nb-btn-sm{padding:10px 12px; border-radius:14px; font-size:0.85rem}

/* Hero */
.nb-hero{
  border-bottom: var(--border) solid var(--navy);
  background:
    linear-gradient(90deg, rgba(41,133,196,0.16) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fff 0%, #fff 55%, #f4f7ff 100%);
  position:relative;
}
.nb-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(195,137,43,0.18) 0%, transparent 45%),
    radial-gradient(circle at 75% 55%, rgba(37,105,161,0.18) 0%, transparent 50%);
}

.nb-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:22px;
  padding:58px 0 44px;
  position:relative;
}

.nb-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  font-size:0.82rem;
}
.nb-tag{
  padding:6px 10px;
  border:2px solid rgba(15,23,51,0.18);
  border-radius:999px;
  background:rgba(41,133,196,0.10);
}
.nb-dot{width:6px; height:6px; border-radius:999px; background:var(--gold); display:inline-block;}

.nb-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px;}
.nb-actions-tight{margin-top:12px;}
.nb-subline{margin-top:14px; color:rgba(15,23,51,0.55); font-size:0.92rem;}

/* Cards */
.nb-card{
  background:#fff;
  border:var(--border) solid var(--navy);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.nb-feature{padding:18px; position:relative;}
.nb-card-head{padding:0 0 10px;}
.nb-eyebrow{
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  font-size:0.8rem;
  color:var(--gold);
}
.nb-title{
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-size:1.55rem;
  margin-top:6px;
}
.nb-card-body p{margin:0; color:var(--muted);}

.nb-mini{
  margin-top:14px;
  border:2px solid rgba(15,23,51,0.14);
  border-radius:16px;
  background:rgba(41,133,196,0.08);
  padding:10px 12px;
}
.nb-mini-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px dashed rgba(15,23,51,0.20);
}
.nb-mini-row:last-child{border-bottom:none;}
.nb-mini-label{font-family:var(--fontD); font-weight:900; text-transform:uppercase; font-size:0.86rem;}
.nb-mini-val{color:var(--muted);}

.nb-stamp{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:14px;
  border:2px solid rgba(15,23,51,0.14);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
}
.nb-stamp img{width:36px; height:36px;}
.nb-stamp strong{
  display:block;
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.1;
}
.nb-stamp span{color:var(--muted); font-size:0.92rem;}

.nb-quick{margin-top:14px; padding:16px;}
.nb-quick-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
.nb-quick-item{
  border:2px solid rgba(15,23,51,0.14);
  border-radius:16px;
  background:rgba(195,137,43,0.12);
  padding:12px;
}
.nb-quick-top{font-family:var(--fontD); font-weight:900; text-transform:uppercase;}
.nb-quick-sub{color:var(--muted); font-size:0.92rem;}

/* Services */
.nb-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px;}
.nb-grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.nb-service{padding:18px;}
.nb-icon{
  width:46px; height:46px;
  border-radius:14px;
  border:var(--border) solid var(--navy);
  box-shadow:4px 4px 0 var(--navy2);
}
.nb-i-blue{background:rgba(41,133,196,0.20);}
.nb-i-gold{background:rgba(195,137,43,0.22);}
.nb-i-navy{background:rgba(30,42,80,0.14);}

.nb-list{margin:10px 0 0; padding-left:18px; color:var(--muted);}
.nb-list li{margin:6px 0;}
.nb-link{
  display:inline-flex;
  margin-top:12px;
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
}
.nb-link:hover{color:var(--gold);}
.nb-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nb-icon img{
  width: 22px;
  height: 22px;
  display:block;
}

/* If your SVGs are black and you want them brand-colored without editing SVG files */
.nb-i-blue img{
  filter: brightness(0) saturate(100%)
          invert(16%) sepia(14%) saturate(2600%)
          hue-rotate(195deg) brightness(95%) contrast(95%);
}
.nb-i-gold img{
  filter: brightness(0) saturate(100%)
          invert(63%) sepia(43%) saturate(640%)
          hue-rotate(6deg) brightness(95%) contrast(92%);
}
.nb-i-navy img{
  filter: brightness(0) saturate(100%)
          invert(9%) sepia(24%) saturate(2200%)
          hue-rotate(204deg) brightness(95%) contrast(100%);
}

/* Band */
.nb-band{
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  border-top: var(--border) solid var(--navy);
  border-bottom: var(--border) solid var(--navy);
}
.nb-band-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:center;
}
.nb-h2-invert{color:#fff;}
.nb-muted-invert{color:rgba(255,255,255,0.80);}
.nb-steps{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.nb-step{
  border:2px solid rgba(255,255,255,0.18);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,0.06);
  font-family:var(--fontD);
  font-weight:900;
  text-transform:uppercase;
}
.nb-step span{color:var(--gold); margin-right:8px;}

/* =========================
   Header (Neo-brutal)
   ========================= */
.nb-site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--border) solid var(--navy);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:10px;
  background:#fff;
  color:var(--navy);
  border:2px solid var(--navy);
  border-radius:12px;
  padding:10px 14px;
  z-index:9999;
}
.skip-link:focus{ left:10px; }

.nb-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:78px;
}

.nb-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.nb-brand:hover .nb-mark{
  background: rgba(41,133,196,0.06);
  transform: translate(-1px,-1px);
}

/* =========================
   Process (cards, no band)
   ========================= */
.nb-process .nb-head{ margin-bottom: 14px; }

.nb-process-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.nb-process-card{
  border: var(--border) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--navy2);
  background:#fff;
  padding: 16px;
}

.nb-process-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.nb-process-num{
  font-family: var(--fontD);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 1.35rem;
  color: rgba(15,23,51,0.30);
}

.nb-process-tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,51,0.16);
  background: rgba(41,133,196,0.10);
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.nb-process-text{ color: var(--muted); }

.nb-process-cta{
  margin-top: 16px;
  border: 2px dashed rgba(15,23,51,0.22);
  border-radius: 18px;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  background: rgba(195,137,43,0.10);
}

.nb-process-cta-title{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
}
.nb-process-cta-sub{ color: var(--muted); }

@media (max-width: 980px){
  .nb-process-grid{ grid-template-columns: 1fr; }
}

/* Header logo box (for real image logo) */
.nb-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  width: 250px;         /* <-- adjust if needed */
  height: auto;

  border: var(--border) solid var(--navy);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--navy2);
  background: #fff;

  padding: 8px 12px;
  overflow: hidden;
}

.nb-mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}



.nb-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nb-brand-text strong{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.nb-brand-text span{
  font-size: 0.78rem;
  color: var(--muted);
}

.nb-links{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.nb-links a{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 0.88rem;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--navy);
}

.nb-links a:hover{
  background: rgba(37,105,161,0.10);
  box-shadow: inset 0 0 0 2px rgba(15,23,51,0.14);
}

.nb-links a[aria-current="page"]{
  background: rgba(195,137,43,0.14);
  box-shadow: inset 0 0 0 2px rgba(195,137,43,0.28);
}

.nb-nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Burger */
.nb-burger{
  display:none;
  width:52px;
  height:46px;
  border: var(--border) solid var(--navy);
  border-radius: 14px;
  background:#fff;
  box-shadow: 4px 4px 0 var(--navy2);
  cursor:pointer;
}
.nb-burger:active{ transform: translate(2px,2px); box-shadow: 0 0 0 var(--navy2); }
.nb-burger span{
  display:block;
  width:22px;
  height:2px;
  background: var(--navy);
  margin: 5px auto;
}
/* =========================
   Footer (Neo-brutal)
   ========================= */
.nb-footer{
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff;
  border-top: var(--border) solid var(--navy);
  padding: 52px 0 22px;
}

.nb-footer-top{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items:start;
}

.nb-footer-card{
  background: #fff;
  color: var(--navy);
  border: var(--border) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.nb-footer-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.nb-footer-mark{
  width:44px;
  height:44px;
  border: var(--border) solid var(--navy);
  border-radius:14px;
  box-shadow: 4px 4px 0 var(--navy2);
  background:
    radial-gradient(circle at 30% 20%, rgba(37,105,161,0.25) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(195,137,43,0.22) 0%, transparent 60%),
    #fff;
}

.nb-footer-brandtext{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nb-footer-brandtext strong{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.nb-footer-brandtext span{
  font-size: 0.78rem;
  color: var(--muted);
}

.nb-footer-blurb{
  margin: 12px 0 14px;
  color: var(--muted);
  max-width: 62ch;
}

.nb-footer-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.nb-footer-stamp{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:14px;
  border:2px solid rgba(15,23,51,0.14);
  border-radius:16px;
  padding:10px 12px;
  background: rgba(41,133,196,0.08);
}

.nb-footer-stamp img{ width:36px; height:36px; }
.nb-footer-stamp strong{
  display:block;
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  line-height:1.1;
}
.nb-footer-stamp span{ color: var(--muted); font-size: 0.92rem; }

.nb-footer-cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.nb-footer-col{
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.06);
}

.nb-footer-head{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.92);
}

.nb-footer-col a{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,0.86);
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:-0.01em;
  font-size: 0.84rem;
}

.nb-footer-col a:hover{
  background: rgba(195,137,43,0.16);
  color: #fff;
}

.nb-footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px dashed rgba(255,255,255,0.20);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  color: rgba(255,255,255,0.74);
  font-size: 0.9rem;
}

.nb-footer-bottom a{
  color: rgba(255,255,255,0.74);
}
.nb-footer-bottom a:hover{
  color: rgba(195,137,43,0.95);
}

.nb-footer-sep{ opacity: 0.65; padding: 0 8px; }
/* =========================
   Footer v2 (Slim Bracket)
   ========================= */
.nb-footer2{
  background: #fff;
  border-top: var(--border) solid var(--navy);
  padding: 34px 0 18px;
}

.nb-footer2-wrap{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:flex-start;
}

.nb-footer2-left{
  flex: 1.1;
  min-width: 260px;
}

.nb-footer2-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Footer logo (horizontal) */
.nb-footer2-mark{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  width: 180px;          /* adjust if needed */
  height: 42px;

  border: var(--border) solid var(--navy);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--navy2);
  background:#fff;

  padding: 6px 10px;
}

.nb-footer2-mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}
.nb-footer2-mark:hover{
  background: rgba(41,133,196,0.06);
  transform: translate(-1px,-1px);
}


.nb-footer2-brandtext{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nb-footer2-brandtext strong{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.nb-footer2-brandtext span{
  font-size: 0.78rem;
  color: var(--muted);
}

.nb-footer2-blurb{
  margin: 10px 0 12px;
  color: var(--muted);
  max-width: 62ch;
}

.nb-footer2-ctas{ display:flex; gap:10px; flex-wrap:wrap; }

.nb-footer2-right{
  flex: 0.9;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 300px;
}

.nb-footer2-col{
  border: 2px solid rgba(15,23,51,0.14);
  border-radius: 16px;
  padding: 12px;
  background: rgba(41,133,196,0.06);
}

.nb-footer2-head{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:-0.01em;
  font-size: 0.86rem;
  color: var(--navy);
  margin-bottom: 8px;
}

.nb-footer2-col a{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:-0.01em;
  font-size: 0.82rem;
  color: rgba(15,23,51,0.80);
}

.nb-footer2-col a:hover{
  background: rgba(195,137,43,0.16);
  color: var(--navy);
}

.nb-footer2-bottom{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed rgba(15,23,51,0.18);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  color: rgba(15,23,51,0.62);
  font-size: 0.92rem;
}

.nb-footer2-dot{ opacity:0.6; }
/* =========================
   Services page
   ========================= */
.nb-services-hero{
  border-bottom: var(--border) solid var(--navy);
  background:
    linear-gradient(90deg, rgba(41,133,196,0.14) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fff 0%, #fff 55%, #f4f7ff 100%);
}

.nb-services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nb-svc{
  padding: 18px;
}

.nb-svc-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.nb-svc-title h3{ margin: 0 0 6px; }

.nb-svc-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.nb-pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,51,0.14);
  background: rgba(41,133,196,0.08);
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.74rem;
  color: rgba(15,23,51,0.78);
}

.nb-fit-card{
  border: var(--border) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background:#fff;
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:center;
}

.nb-fit-right{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:flex-end;
}

.nb-fit-chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: var(--border) solid var(--navy);
  box-shadow: 4px 4px 0 var(--navy2);
  background: #fff;
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:-0.01em;
  font-size: 0.82rem;
}
/* TUO store images */
.nb-store-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: 2px solid #0f172a;
  margin-bottom: 12px;
}

/* =========================
   FAQ page
   ========================= */
.nb-faq-hero{
  border-bottom: var(--border) solid var(--navy);
  background:
    linear-gradient(90deg, rgba(41,133,196,0.14) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fff 0%, #fff 55%, #f4f7ff 100%);
}

.nb-faq-jumplinks{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nb-faq-jumplinks a{
  display:inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,51,0.14);
  background: rgba(195,137,43,0.12);
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(15,23,51,0.78);
}

.nb-faq-jumplinks a:hover{
  background: rgba(41,133,196,0.10);
}

.nb-faq-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items:start;
}

.nb-faq-item{
  border: var(--border) solid var(--navy);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: 8px 8px 0 var(--navy2);
  padding: 0;
  margin: 12px 0;
  overflow:hidden;
}

.nb-faq-item summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 16px;
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:-0.01em;
  position:relative;
}

.nb-faq-item summary::-webkit-details-marker{ display:none; }

.nb-faq-item summary:after{
  content:"+";
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 2px solid rgba(15,23,51,0.16);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(41,133,196,0.08);
}

.nb-faq-item[open] summary:after{
  content:"–";
  background: rgba(195,137,43,0.14);
}

.nb-faq-body{
  padding: 0 16px 16px;
  color: var(--muted);
}

.nb-faq-help{
  padding: 18px;
  position: sticky;
  top: 96px;
}
/* =========================
   Catalogs
   ========================= */
.nb-catalog-tools{
  display:grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 12px;
  margin: 14px 0 18px;
}

.nb-input, .nb-select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: var(--border) solid var(--navy);
  background:#fff;
  box-shadow: 4px 4px 0 var(--navy2);
  outline: none;
  font: inherit;
}

.nb-catalog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nb-catalog-card{ padding: 18px; }

.nb-catalog-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.nb-badge{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,51,0.14);
  background: rgba(195,137,43,0.16);
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  white-space:nowrap;
}

.nb-tagrow{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Catalog tools already exist from earlier; keep or add these extra blocks */
.nb-product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nb-prod{ padding: 14px; display:grid; grid-template-columns: 110px 1fr; gap: 12px; }
.nb-prod-img{
  width:110px; height:110px;
  border: 2px solid rgba(15,23,51,0.14);
  border-radius: 16px;
  background:#fff;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.nb-prod-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.nb-prod-ph{ font-family: var(--fontD); font-weight:900; font-size:.75rem; color: rgba(15,23,51,0.45); }

.nb-prod-title{
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.nb-prod-row{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nb-price{ font-family: var(--fontD); font-weight:900; }

.nb-pager{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.nb-stepper{ margin: 10px 0 18px; }
.nb-stepper-bar{ height: 10px; border:2px solid #0f172a; background:#fff; }
.nb-stepper-bar span{ display:block; height:100%; background: rgba(41,133,196,0.35); }
.nb-stepper-labels{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.nb-stepper-labels span{ border:2px solid #0f172a; padding:4px 8px; background:#fff; font-weight:700; font-size:12px; }
.nb-stepper-labels span.on{ background: rgba(195,137,43,0.22); }

.nb-lbl{ display:block; font-weight:800; margin-bottom:6px; }
.nb-textarea{ width:100%; border:2px solid #0f172a; padding:10px; background:#fff; }
.nb-invalid{ outline: 3px solid rgba(195,137,43,0.55); }



/* =========================
   Quote Thanks Page Layout
   ========================= */

.nb-thanks{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.nb-thanks-title{
  margin-top: 10px;
}

.nb-thanks-lead{
  max-width: 52ch;
}

.nb-thanks-actions{
  margin-top: 14px;
  flex-wrap: wrap;
}

.nb-thanks-muted{
  margin-top: 12px;
}

/* Threadrick: compact, can't wreck layout */
.nb-thanks-threadrick{
  display: flex;
  gap: 12px;
  align-items: center;
  border: 2px solid #0f172a;
  background: #fff;
  padding: 12px;
  margin-top: 14px;
  max-width: 520px;
}

.nb-trk-img{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 2px solid #0f172a;
  background: rgba(41,133,196,0.12);
  display: grid;
  place-items: center;
}

.nb-trk-img img{
  width: 58px;
  height: auto;
  display: block;
}

.nb-trk-head{
  font-weight: 900;
  letter-spacing: 0.02em;
}

.nb-trk-quote{
  font-size: 0.95rem;
}

/* Right card: normal proportions */
.nb-thanks-card{
  padding: 18px;
}

.nb-thanks-cardhead{
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.nb-thanks-cardtitle{
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.nb-thanks-mini{
  font-size: 0.9rem;
}

.nb-thanks-list{
  margin: 0;
}

.nb-thanks-divider{
  height: 2px;
  background: #0f172a;
  margin: 14px 0 12px;
}

.nb-thanks-foot{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.nb-thanks-footlabel{
  font-weight: 800;
}

.nb-thanks-footvalue{
  font-weight: 900;
}

/* Responsive */
@media (max-width: 860px){
  .nb-thanks{
    grid-template-columns: 1fr;
  }
  .nb-thanks-threadrick{
    max-width: 100%;
  }
}
/* Stores page: Threadrick peek */
.nb-stores-hero{ position: relative; overflow: visible; padding-bottom: 72px; }
.nb-stores-peek{ position: absolute; right: 60px; bottom: -18px; z-index: 50; pointer-events: none; }
.nb-stores-peek img{ width: 190px; height: auto; display: block; }
@media (max-width: 720px){
  .nb-stores-peek{ right: 50%; transform: translateX(50%); bottom: -22px; }
  .nb-stores-peek img{ width: 150px; }
}
/* Hide Threadrick peek on mobile */
@media (max-width: 640px){
  .nb-stores-peek{
    display: none !important;
  }
}

/* =========================
   Catalogs: results grid + product card layout
   (forces image frame to 191 x 254.667)
   ========================= */

.nb-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px){
  .nb-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px){
  .nb-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px){
  .nb-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Product card shell */
.nb-prod-card{
  display:flex;
  flex-direction: column;
  overflow:hidden;
}

/* Media area */
.nb-prod-media{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 14px 0 14px;
}

/* GOOD: only hits the product image */
.nb-prod-imgbox img{
  width:191px;
  height:254.667px;
  border-radius:12px;
  display:block;
  object-fit: contain;
  background:#fff;
  border:1px solid rgba(15,23,42,0.12);
}

/* Make the brand logo behave like a logo (not a poster) */
.nb-brand-badge img{
  width:auto;
  height:18px;           /* tweak as you want */
  object-fit:contain;
  display:block;
}


/* If you prefer to fill the frame (cropping allowed), swap to:
.nb-prod-media img{ object-fit: cover; }
*/

.nb-prod-noimg{
  width:191px;
  height:254.667px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,23,42,0.12);
  background:#fff;
  color: rgba(15,23,42,0.55);
  font-weight:700;
  letter-spacing: .08em;
  font-size: 11px;
}

/* Brand logo chip (top-left over the image) */
.nb-prod-media > div{
  /* your chip wrapper is already inline style in PHP;
     this just ensures it stays on top of the image */
  z-index: 2;
}

/* Meta/text area */
.nb-prod-meta{
  padding:12px 14px 14px 14px;
  display:flex;
  flex-direction: column;
  gap:6px;
  min-height: 150px;
}

.nb-prod-style{
  font-weight:900;
  font-size: 16px;
  letter-spacing: .02em;
  color: #0f172a;
  line-height:1.1;
}

.nb-prod-sub{
  color: rgba(15,23,42,0.7);
  font-size: 13px;
  line-height:1.25;
}

/* footer row (pill + price) */
.nb-prod-foot{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  margin-top: 6px;
}

.nb-prod-price{
  font-weight:900;
  color:#0f172a;
}

/* buttons area */
.nb-prod-meta .nb-actions{
  margin-top: 10px;
}
.nb-prod-meta .nb-actions a{
  white-space:nowrap;
}



/* =========================
   Thank You – Checklist Row
   ========================= */

.nb-thanks-checklist{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}

.nb-thanks-check{
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #0f172a;
  padding: 8px 10px;
  font-weight: 700;
  background: #fff;
}

.nb-check-icon{
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #0f172a;
  font-size: 14px;
  line-height: 1;
  background: rgba(195,137,43,0.18); /* MK gold hint */
}

/* Stack nicely on mobile */
@media (max-width: 640px){
  .nb-thanks-checklist{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Stores page
   ========================= */
.nb-store-tools{
  display:grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
  gap: 12px;
  margin: 14px 0 18px;
}

.nb-store-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nb-store-card{ padding: 18px; }

.nb-store-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.nb-badge-open{ background: rgba(41,133,196,0.18); border: 2px solid rgba(41,133,196,0.35); }
.nb-badge-closed{ background: rgba(15,23,51,0.08); border: 2px solid rgba(15,23,51,0.18); opacity: 0.85; }
.nb-badge-soon{ background: rgba(195,137,43,0.18); border: 2px solid rgba(195,137,43,0.35); }

@media (max-width: 980px){
  .nb-store-tools{ grid-template-columns: 1fr; }
  .nb-store-grid{ grid-template-columns: 1fr; }
}


@media (max-width: 980px){
  .nb-product-grid{ grid-template-columns: 1fr; }
  .nb-prod{ grid-template-columns: 1fr; }
  .nb-prod-img{ width:100%; height:180px; }
}


@media (max-width: 980px){
  .nb-catalog-tools{ grid-template-columns: 1fr; }
  .nb-catalog-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .nb-faq-grid{ grid-template-columns: 1fr; }
  .nb-faq-help{ position: static; }
}


@media (max-width: 980px){
  .nb-services-grid{ grid-template-columns: 1fr; }
  .nb-fit-card{ grid-template-columns: 1fr; }
  .nb-fit-right{ justify-content:flex-start; }
}


/* Responsive */
@media (max-width: 980px){
  .nb-footer2-wrap{ flex-direction:column; }
  .nb-footer2-right{ grid-template-columns:1fr; min-width: unset; width: 100%; }
}

/* Responsive */
@media (max-width: 980px){
  .nb-footer-top{ grid-template-columns: 1fr; }
  .nb-footer-cols{ grid-template-columns: 1fr; }
}

/* Mobile menu */
.nb-mobile{
  border-bottom: var(--border) solid var(--navy);
  background:#fff;
}
.nb-mobile-inner{ padding: 14px 0 18px; }
.nb-mobile-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nb-mobile-links a{
  border:2px solid rgba(15,23,51,0.14);
  border-radius: 14px;
  padding: 12px 12px;
  font-family: var(--fontD);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(37,105,161,0.06);
}
.nb-mobile-links a:hover{
  background: rgba(195,137,43,0.14);
}

/* Responsive */
@media (max-width: 980px){
  .nb-links{ display:none; }
  .nb-nav-cta .nb-btn{ display:none; }
  .nb-burger{ display:inline-flex; align-items:center; justify-content:center; }
}


/* Responsive */
@media (max-width: 980px){
  .nb-hero-grid{grid-template-columns:1fr;}
  .nb-quick-grid{grid-template-columns:1fr;}
  .nb-grid-3{grid-template-columns:1fr;}
  .nb-band-grid{grid-template-columns:1fr;}
  .nb-steps{grid-template-columns:1fr;}
  .nb-head{flex-direction:column; align-items:flex-start;}
}
/* =========================
   Thank You – Checklist + Stitch Icon + Animation
   ========================= */

/* Checklist row layout */
.nb-thanks-checklist{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}

/* Each checklist pill */
.nb-thanks-check{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #0f172a;
  padding: 9px 10px;
  font-weight: 800;
  background: #fff;

  /* animation baseline */
  opacity: 0;
  transform: translateY(6px);
  animation: nbCheckIn 420ms ease-out forwards;
}

/* Stitched square icon (CSS-only) */
.nb-check-icon{
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid #0f172a;
  background: rgba(195,137,43,0.18); /* MK gold hint */
  flex: 0 0 auto;
}

/* inner “stitch” */
.nb-check-icon::before{
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px dashed #0f172a;
  opacity: 0.85;
}

/* tiny “thread knot” corner detail */
.nb-check-icon::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #0f172a;
  background: #fff;
}
.nb-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:800;
}
.nb-check input{
  margin-top:4px;
}
.nb-grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 860px){
  .nb-grid-3{ grid-template-columns: 1fr; }
}

/* sequence delays */
.nb-thanks-checklist .nb-thanks-check:nth-child(1){ animation-delay: 60ms; }
.nb-thanks-checklist .nb-thanks-check:nth-child(2){ animation-delay: 180ms; }
.nb-thanks-checklist .nb-thanks-check:nth-child(3){ animation-delay: 300ms; }

@keyframes nbCheckIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Submitted column spacing on the right footer */
.nb-thanks-submitted{
  text-align: right;
}
/* =========================
   Quotes Standalone Page
   ========================= */

.quotes-standalone .qs-head{
  max-width: 900px;
  margin: 0 auto 18px;
}

.quotes-standalone .qs-kicker{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom: 10px;
}

.quotes-standalone .qs-pill{
  display:inline-flex;
  align-items:center;
  border:2px solid #0f172a;
  padding:6px 10px;
  font-weight:1000;
  letter-spacing:0.08em;
  background:#fff;
  font-size:12px;
}

.quotes-standalone .qs-pill-outline{
  background:transparent;
}

.quotes-standalone .qs-h1{
  margin:0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.quotes-standalone .qs-sub{
  margin:10px 0 0;
  font-size: 15px;
  color:#334155;
  max-width: 70ch;
}

.quotes-standalone .qs-grid{
  max-width: 900px;
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quotes-standalone .qs-block{
  text-decoration:none;
  color: inherit;
  border: 2px solid #0f172a;
  background: #fff;
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  box-shadow: 6px 6px 0 rgba(15,23,42,0.18);
  transition: transform .08s ease, box-shadow .08s ease;
}

.quotes-standalone .qs-block:hover{
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 rgba(15,23,42,0.20);
}

.quotes-standalone .qs-block-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.quotes-standalone .qs-title{
  font-weight:1000;
  letter-spacing:0.06em;
  font-size: 16px;
}

.quotes-standalone .qs-tag{
  border:2px solid #0f172a;
  padding:4px 8px;
  font-weight:1000;
  letter-spacing:0.08em;
  font-size:11px;
  white-space:nowrap;
}

.quotes-standalone .qs-tag-blue{ background: rgba(41,133,196,0.20); }
.quotes-standalone .qs-tag-gold{ background: rgba(195,137,43,0.22); }

.quotes-standalone .qs-lines{
  font-size: 14px;
  line-height: 1.6;
  color:#0f172a;
}

.quotes-standalone .qs-cta{
  margin-top:auto;
  font-weight:1000;
  letter-spacing:0.06em;
  border-top:2px solid #0f172a;
  padding-top: 12px;
}

.quotes-standalone .qs-foot{
  max-width: 900px;
  margin: 14px auto 0;
  border:2px solid #0f172a;
  background: #f8fafc;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.quotes-standalone .qs-foot-head{
  font-weight:1000;
  letter-spacing:0.06em;
}

.quotes-standalone .qs-foot-sub{
  margin-top: 6px;
  color:#334155;
  font-size: 13px;
}

.quotes-standalone .qs-foot-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.quotes-standalone .qs-threadrick{
  width: 44px;
  height:auto;
  filter: drop-shadow(6px 6px 0 rgba(15,23,42,0.20));
}

.quotes-standalone .qs-mail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border:2px solid #0f172a;
  background:#fff;
  font-weight:1000;
  letter-spacing:0.06em;
  text-decoration:none;
  color:#0f172a;
}

.quotes-standalone .qs-mail:hover{
  background:#0f172a;
  color:#fff;
}

@media (max-width: 900px){
  .quotes-standalone .qs-grid{
    grid-template-columns: 1fr;
  }
}
.nb-brand-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5; /* higher than image */
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* prevents blocking clicks */
}

.nb-brand-badge{
  box-shadow: 0 4px 12px rgba(15,23,42,.18);
  backdrop-filter: blur(4px);
}


/* =========================
   Services hero: Threadrick (desktop / large screens only)
   ========================= */

.nb-services-hero{
  position: relative;
  overflow: hidden;
}

/* Default: hidden everywhere */
.nb-services-threadrick{
  display: none;
}

/* Show only on desktop / large tablets */
@media (min-width: 981px){
  .nb-services-threadrick{
    display: block;
    position: absolute;
    right: 220px;          /* aligned visually with hero card */
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
  }

  .nb-services-threadrick img{
    width: 300px;          /* slightly smaller than homepage */
    height: auto;
    display: block;
    filter: drop-shadow(8px 10px 0 rgba(15,23,42,0.18));
  }
}


/* =========================
   Stoughton Trailers Thanks
   ========================= */

.stot-thanks .stot-thanks-wrap{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.stot-thanks-card{
  padding: 22px;
}

.stot-tags{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stot-dot{
  width: 8px;
  height: 8px;
  border: 2px solid #0f172a;
  background: rgba(195,137,43,0.22);
  display: inline-block;
}

.stot-thanks-h1{
  margin: 12px 0 6px;
  letter-spacing: 0.02em;
}

.stot-thanks-lead{
  max-width: 60ch;
}

.stot-ref{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 2px solid #0f172a;
  background: #fff;
}

.stot-ref-label{
  font-weight: 900;
  letter-spacing: 0.04em;
}

.stot-ref-code{
  font-weight: 1000;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
}

.stot-thanks-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 16px;
  align-items: start;
}

.stot-next{
  border: 2px solid #0f172a;
  background: #fff;
  padding: 14px;
}

.stot-next-head{
  font-weight: 1000;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.stot-next-list{
  margin: 0;
}

.stot-next-muted{
  margin-top: 10px;
}

.stot-actions{
  display: grid;
  gap: 10px;
}

.stot-actions .nb-btn{
  width: 100%;
  justify-content: center;
}

.stot-mascot{
  display: grid;
  place-items: center;
}

.stot-mascot img{
  width: 92px;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(6px 6px 0 rgba(15,23,42,0.25));
}


@media (max-width: 900px){
  .stot-thanks .stot-thanks-wrap{
    max-width: 720px;
  }
  .stot-thanks-grid{
    grid-template-columns: 1fr;
  }
  .stot-actions{
    grid-template-columns: 1fr;
  }
}
/* =========================
   404 – Threadrick
   ========================= */
.mk404 .mk404-wrap{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: center;
}

.mk404 .mk404-card{
  padding: 18px;
}

.mk404 .mk404-top{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mk404 .mk404-dot{
  width: 8px;
  height: 8px;
  border: 2px solid #0f172a;
  background: rgba(195,137,43,0.22);
  display: inline-block;
}

.mk404 .mk404-h1{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 0.98;
  letter-spacing: 0.02em;
}

.mk404 .mk404-sub{
  margin: 10px 0 0;
  color: #334155;
  font-size: 15px;
  max-width: 60ch;
}

.mk404 .mk404-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mk404 .mk404-help{
  margin-top: 14px;
  border-top: 2px solid #0f172a;
  padding-top: 12px;
}

.mk404 .mk404-help-h{
  font-weight: 1000;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.mk404 .mk404-list{
  margin: 0;
}

.mk404 .mk404-art{
  border: 2px solid #0f172a;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 14px;
  box-shadow: 10px 10px 0 rgba(15,23,42,0.18);
}

.mk404 .mk404-art img{
  width: min(360px, 100%);
  height: auto;
  display: block;
}
/* =========================
   404: animate Threadrick question mark
   (SVG element id="questionmark")
   ========================= */

.nb-404-art svg #questionmark{
  transform-box: fill-box;
  transform-origin: center;
  animation: nb-qm-bob 1.15s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes nb-qm-bob{
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  35%      { transform: translateY(-6px) rotate(-3deg) scale(1.02); opacity: 0.92; }
  70%      { transform: translateY(-2px) rotate(2deg)  scale(1.01); opacity: 1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nb-404-art svg #questionmark{ animation: none !important; }
}
/* Allow animated question mark to extend outside container */
.mk404-art,
.nb-404-art{
  overflow: visible;
}
/* Ensure SVG itself doesn't clip animated parts */
.mk404-art svg,
.nb-404-art svg{
  overflow: visible;
}


/* =========================
   Home hero: Threadrick peek (anchored to FEATURE card)
   ========================= */

/* Default hidden everywhere */
.nb-home-threadrick{ display:none; }

/* Only on desktop / large tablets */
@media (min-width: 981px){

  /* Make the feature card a positioning anchor */
  .nb-feature-peek{
    position: relative;
    overflow: visible; /* allow Threadrick to hang outside */
  }

  .nb-home-threadrick{
    display: block;
    position: absolute;

    /* ✅ THESE TWO CONTROL THE PEEK */
    right: -263px;          /* negative = hangs off the card edge */
    top: 40px;              /* moves up/down relative to the card */

    z-index: 5;
    pointer-events: none;
  }

@media (min-width: 981px){
  .nb-home-threadrick svg{
    width: 300px;      /* make smaller/bigger here */
    height: auto;
    display: block;
    filter: drop-shadow(1px 8px 0 rgba(15,23,42,0.18));
  }
}

/* Create an isolated stacking context for just the media area */
.nb-prod-media{
  position: relative;
  isolation: isolate;
}

/* Ensure the image area sits below the badge */
.nb-prod-imgbox{
  position: relative;
  z-index: 1;
}

/* Badge sits above everything in .nb-prod-media */
.nb-brand-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,.12);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}
.nb-error {
  margin: 6px 0 4px;
  font-size: 0.85rem;
  color: #dc2626; /* red-600 */
  font-weight: 600;
}

.nb-input-error,
.nb-select.nb-input-error,
.nb-textarea.nb-input-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px rgba(220,38,38,.35);
}

/* =========================
   Threadrick eye blink
   ========================= */

#Eyes {
  transform-origin: center;
  transform-box: fill-box;
  animation: threadrick-blink 6.5s infinite steps(1);

}

@keyframes threadrick-blink {
  0%, 96%, 100% {
    transform: scaleY(1);
  }

  97% {
    transform: scaleY(0.1);
  }

  98% {
    transform: scaleY(1);
  }
}


/* (your existing styles.css content stays the same ABOVE this point) */

/* =========================
   SanMar catalog swatches (fix)
   Ensures square swatches render crisply inside the chips
   ========================= */
.nb-chip img{
  width:18px;
  height:18px;
  object-fit:cover;
  border-radius:4px;
  display:block;
}


/* Mobile layout */
@media (max-width: 900px){
  .mk404 .mk404-wrap{
    grid-template-columns: 1fr;
  }
  .mk404 .mk404-art{
    order: -1;
  }
}

/* Mobile stacking */
@media (max-width: 640px){
  .nb-thanks-checklist{
    grid-template-columns: 1fr;
  }
  .nb-thanks-submitted{
    text-align: left;
    margin-top: 10px;
  }
  .nb-thanks-foot{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .nb-thanks-check{
    animation: none;
    opacity: 1;
    transform: none;
  }
}