/* Northstar overrides: service lanes, trust signals, credentials */

/* ---------- Font fallback ----------
   Mona Sans loads from Google Fonts with display=swap. Until it arrives, text uses local
   Arial scaled to Mona Sans's width at each weight, so headings wrap the same before and
   after the swap instead of shifting the page. (Scale factors measured against Mona Sans.) */
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 449; size-adjust: 103.5%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 450 549; size-adjust: 105.3%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 649; size-adjust: 99.7%; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 650 900; size-adjust: 101.4%; }
:root {
  --tj-ff-body: "Mona Sans", "Mona Sans Fallback", sans-serif;
  --tj-ff-heading: "Mona Sans", "Mona Sans Fallback", sans-serif;
}

/* ---------- Texture: tweed weave + grain ---------- */
/* Light surfaces get a twill weave (two diagonal thread layers), scattered
   tweed slubs, and film grain over the flat theme color. Dark surfaces get
   grain only. Tune strength with the variables below. */
:root {
  --ns-thread-dark: rgba(12, 30, 33, 0.03);
  --ns-thread-light: rgba(255, 255, 255, 0.42);
  --ns-weave:
    url("../images/northstar/grain.svg"),
    url("../images/northstar/tweed-flecks.svg"),
    repeating-linear-gradient(45deg, var(--ns-thread-dark) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--ns-thread-light) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 15% 0%, rgba(var(--tj-accent-rgb), 0.07), transparent 55%);
}
body,
.tj-footer-section,
.tj-testimonial-section,
.tj-about-section-2,
.tj-banner-section-2 {
  background-image: var(--ns-weave);
  background-size: 220px 220px, 260px 260px, auto, auto, 100% 100%;
}
.tj-service-section:not(.service-4),
.tj-contact-section,
.h10-process,
.h9-service,
.h9-project,
.ns-offer-card,
.ns-cred-item,
.ns-call-bar {
  background-image: url("../images/northstar/grain.svg");
  background-size: 220px 220px;
}
/* Cards stay clean so text sits on a calm surface */
.service-item.style-4,
.pricing-box,
.ns-trust-item,
.ns-step,
.contact-item,
.accordion-item {
  background-image: none;
}

/* ---------- Wordmark (Option B, chosen 2026-10-25) ----------
   "Jeremiah Ellington" as the primary name, with the business name Ellington Technologies
   underneath. Text, not an image: sharp at any size and colored by context. The header box
   has a fixed width per breakpoint so the menu doesn't move when the web font arrives. */
.site_logo .logo {
  display: block;
  width: 236px;
  max-width: none;
}
.hamburger_logo .mobile_logo,
.mobile_logo,
.footer-logo {
  display: block;
  width: auto;
  max-width: none;
}
.ns-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--tj-ff-heading);
  line-height: 1;
  white-space: nowrap;
  color: var(--tj-color-heading-primary);
}
.ns-wordmark-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.ns-wordmark-biz {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ns-teal-ink);
}
.hamburger_logo .ns-wordmark {
  color: #fff;
}
.hamburger_logo .ns-wordmark-biz {
  color: var(--ns-teal-on-dark);
}
.footer-logo .ns-wordmark-name {
  font-size: 26px;
}
.footer-logo .ns-wordmark-biz {
  font-size: 11px;
}
/* Interim, people-free photo beside "Meet Jeremiah" until the owner's own photos arrive;
   keeps the previous photo's proportions so the section doesn't change height. */
.about-img img.ns-interim-photo {
  aspect-ratio: 1400 / 788;
}
/* Owner photos: real photos of Jeremiah, labeled with the year they were taken. Same
   proportions as the photos they replace, so no section changes height. */
.about-img img.ns-owner-photo {
  aspect-ratio: 1400 / 788;
}
.ns-owner-photo.ns-focus-person-right {
  object-position: 72% 40%;
}
.ns-owner-photo.ns-focus-person-left {
  object-position: 20% 45%;
}
.about-img,
.ns-owner-photo-frame {
  position: relative;
}
/* Homepage on phones: the "Experiences" box covers the left 60% of the photo, so use a
   taller frame anchored left, which puts Jeremiah in the uncovered right side. */
@media (max-width: 575px) {
  .tj-about-section .about-img img.ns-owner-photo {
    aspect-ratio: 6 / 5;
    object-position: 0% 35%;
  }
}
.ns-photo-year {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(12, 30, 33, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  pointer-events: none;
}
/* Emblem used in place of icon-font glyphs */
.ns-emblem img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.circle-icon.ns-emblem img {
  width: 96px;
  height: 96px;
}
/* The emblem's side rays are wide; zoom into its circle inside the round frame */
.service-item.style-4 .service-icon.ns-emblem {
  overflow: hidden;
}
.service-item.style-4 .service-icon.ns-emblem img {
  width: 100%;
  height: 100%;
  max-width: none;
  transform: scale(1.6);
}
.service-icon.ns-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Homepage hero (text only: no photo, no slider) ---------- */
.banner-area.ns-banner-solo {
  min-height: 0;
}
.ns-banner-solo .banner-left-box {
  width: 100%;
  margin-inline-end: 0;
}
/* the template right-aligns this block for the old two-column layout; center it in the full-width panel */
.ns-banner-solo .banner-content {
  margin-inline: auto;
}
@media (min-width: 992px) {
  .ns-banner-solo .banner-left-box {
    padding-block: 110px;
  }
  .ns-banner-solo .banner-content {
    max-width: 880px;
  }
}
.ns-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.tj-primary-btn.ns-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.tj-primary-btn.ns-btn-ghost:hover {
  border-color: var(--tj-color-theme-primary);
}
/* Ghost button on a light section (About intro): dark text and border instead of white. */
.tj-primary-btn.ns-btn-ghost.ns-on-light,
.tj-primary-btn.ns-btn-ghost.ns-on-light .btn-text,
.tj-primary-btn.ns-btn-ghost.ns-on-light .btn-text span {
  color: var(--tj-color-heading-primary);
}
.tj-primary-btn.ns-btn-ghost.ns-on-light {
  border-color: rgba(12, 30, 33, 0.35);
}
/* Reduced motion: main.js skips the WOW reveal animations, so show that content as-is. */
@media (prefers-reduced-motion: reduce) {
  .wow {
    visibility: visible !important;
    animation: none !important;
  }
}

/* ---------- Service lanes ---------- */
.service-lane + .service-lane {
  margin-top: 70px;
}
.service-lane-head {
  max-width: 720px;
  margin: 0 auto 35px;
  text-align: center;
}
.service-lane-head .lane-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--tj-color-theme-primary);
  border-radius: 50px;
  color: var(--tj-color-theme-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.service-lane-head .lane-title {
  color: var(--tj-color-common-white);
  margin-bottom: 10px;
}
.service-lane-head .lane-desc {
  color: var(--tj-color-text-body-2);
  margin: 0;
}
.service-lane.lane-light .service-lane-head .lane-title {
  color: var(--tj-color-heading-primary);
}
.service-lane.lane-light .service-lane-head .lane-desc {
  color: var(--tj-color-text-body);
}
/* Cards sit in a grid instead of a slider, so keep them a touch shorter */
.service-lane .service-item.style-1 {
  height: 400px;
}
/* Let the real photos show faintly through the card overlay at rest */
.service-lane .service-item.style-1::before {
  opacity: 0.84;
}
/* Touch devices can't hover: always show the description */
@media (hover: none) {
  .service-lane .service-item.style-1 .service-content .desc {
    opacity: 1;
    visibility: visible;
    height: auto;
  }
  .service-lane .service-item.style-1::before {
    background: var(--tj-color-theme-dark);
    opacity: 0.7;
  }
}

/* ---------- Pricing ---------- */
.ns-pricing-note {
  max-width: 640px;
  margin: 15px auto 0;
  color: var(--tj-color-text-body);
}
#pricing .pricing-box {
  height: 100%;
}

/* ---------- $199 Starter Website offer ---------- */
.ns-offer-card {
  background: var(--tj-color-theme-dark);
  border-radius: 16px;
  padding: 40px;
  color: var(--tj-color-common-white);
  height: 100%;
}
@media (max-width: 575px) {
  .ns-offer-card {
    padding: 28px 22px;
  }
}
.ns-offer-card .ns-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ns-offer-card .title {
  color: var(--tj-color-common-white);
  margin-bottom: 12px;
}
.ns-offer-card p {
  color: var(--tj-color-text-body-2);
}
.ns-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 6px;
}
.ns-price .amount {
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  color: var(--tj-color-common-white);
}
.ns-price .amount sup {
  font-size: 28px;
  top: -1.4em;
}
.ns-price .terms {
  color: var(--tj-color-text-body-2);
  font-size: 16px;
}
.ns-check-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 28px;
}
.ns-check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  color: var(--tj-color-common-white);
}
.ns-check-list li i {
  color: var(--tj-color-theme-primary);
  margin-top: 4px;
}
.ns-offer-img {
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 320px;
}
.ns-offer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Four-step "how it works" */
.ns-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: ns-step;
}
@media (max-width: 991px) {
  .ns-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .ns-steps {
    grid-template-columns: 1fr;
  }
}
.ns-step {
  background: var(--tj-color-common-white);
  border-radius: 12px;
  padding: 30px 26px;
  border: 1px solid var(--tj-color-border-1);
}
.ns-step::before {
  counter-increment: ns-step;
  content: "0" counter(ns-step);
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--tj-color-theme-primary);
  margin-bottom: 18px;
}
.ns-step .title {
  margin-bottom: 8px;
}
.ns-step p {
  margin: 0;
}

/* Shop */
.ns-shop-cat {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 26px 28px;
}
.service-item.style-4.ns-shop-cat .service-icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  font-size: 34px;
  margin: 0;
}
.ns-shop-cat .title {
  margin-bottom: 6px;
}
.ns-shop-cat .desc {
  margin: 0;
}
@media (max-width: 575px) {
  .ns-shop-cat {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Headless shop: filters + product grid */
.ns-shop-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.ns-shop-filters button {
  border: 1px solid var(--tj-color-border-1);
  background: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.2s;
}
.ns-shop-filters button.active,
.ns-shop-filters button:hover {
  background: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.ns-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}
@media (max-width: 575px) {
  .ns-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
.ns-product-card[hidden] {
  display: none;
}
.ns-product-card {
  background: var(--tj-color-common-white);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ns-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(12, 30, 33, 0.12);
}
.ns-product-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tj-color-grey-1);
  overflow: hidden;
}
.ns-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.ns-product-card:hover .ns-product-img img {
  transform: scale(1.04);
}
.ns-product-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 64px;
  font-weight: 700;
  color: var(--tj-color-theme-primary);
  background: var(--tj-color-theme-bg);
}
.ns-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 13px;
  font-weight: 700;
}
.ns-product-badge.is-sold {
  background: var(--tj-color-theme-dark);
}
.ns-product-info {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ns-product-type {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tj-color-theme-primary);
}
.ns-product-title {
  font-size: 18px;
  margin: 0;
}
.ns-product-title a {
  color: var(--tj-color-heading-primary);
}
.ns-product-price {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
}
.ns-product-price s,
.ns-pd-price-was {
  color: var(--tj-color-text-body-3);
  font-weight: 400;
}
.ns-product-quick {
  margin-top: auto;
  align-self: flex-start;
  border: 1px solid var(--tj-color-theme-primary);
  background: transparent;
  color: var(--tj-color-theme-primary);
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}
.ns-product-quick:hover {
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
@media (max-width: 575px) {
  .ns-product-info {
    padding: 14px 14px 16px;
  }
  .ns-product-title {
    font-size: 16px;
  }
  .ns-product-quick {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 13px;
  }
}
.ns-product-quick:disabled {
  opacity: 0.6;
}

/* Product page */
.ns-gallery-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  background: var(--tj-color-common-white);
}
.ns-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.ns-gallery-thumbs button {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tj-color-common-white);
}
.ns-gallery-thumbs button.active {
  border-color: var(--tj-color-theme-primary);
}
.ns-gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns-pd-title {
  font-size: 40px;
  margin: 8px 0 12px;
}
@media (max-width: 575px) {
  .ns-pd-title {
    font-size: 30px;
  }
}
.ns-pd-price {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 26px;
  font-weight: 700;
  color: var(--tj-color-heading-primary);
  margin-bottom: 24px;
}
.ns-pd-option {
  margin-bottom: 18px;
}
.ns-pd-option-name {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--tj-color-heading-primary);
}
.ns-pd-option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ns-pd-option-values button {
  min-width: 52px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--tj-color-border-1);
  background: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  font-weight: 600;
}
.ns-pd-option-values button.active {
  border-color: var(--tj-color-theme-primary);
  box-shadow: inset 0 0 0 1px var(--tj-color-theme-primary);
  color: var(--tj-color-theme-primary);
}
.ns-pd-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 26px 0 22px;
}
.ns-pd-add:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ns-pd-trust {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.ns-pd-trust li {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.ns-pd-trust i {
  color: var(--tj-color-theme-primary);
}
.ns-pd-desc {
  border-top: 1px solid var(--tj-color-border-1);
  padding-top: 20px;
}
.ns-product-missing {
  text-align: center;
  padding: 60px 20px;
}
.ns-product-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--tj-color-text-body-3);
}

/* Quantity stepper (cart + product page) */
.ns-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 50px;
  overflow: hidden;
  background: var(--tj-color-common-white);
}
.ns-qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--tj-color-heading-primary);
}
.ns-qty span {
  min-width: 26px;
  text-align: center;
  font-weight: 600;
}
.ns-qty-lg button {
  width: 44px;
  height: 50px;
}

/* Cart button + drawer */
.ns-cart-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--tj-color-grey-1);
  color: var(--tj-color-heading-primary);
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ns-cart-btn-header {
  margin-inline-end: 12px;
}
.ns-cart-btn-float {
  position: fixed;
  left: 16px;
  bottom: 72px;
  z-index: 998;
  background: var(--tj-color-common-white);
  box-shadow: 0 8px 24px rgba(12, 30, 33, 0.2);
}
.ns-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.ns-cart-count.is-empty {
  display: none;
}
.ns-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 30, 33, 0.45);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}
.ns-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.ns-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--tj-color-common-white);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.ns-cart-drawer.is-open {
  transform: none;
}
.ns-cart-drawer.is-busy {
  pointer-events: none;
  opacity: 0.7;
}
.ns-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--tj-color-border-1);
}
.ns-cart-head .title {
  margin: 0;
}
.ns-cart-close {
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: var(--tj-color-heading-primary);
}
.ns-cart-lines {
  flex: 1;
  overflow-y: auto;
  padding: 10px 24px;
}
.ns-cart-empty {
  padding: 40px 0;
  text-align: center;
}
.ns-cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tj-color-border-1);
}
.ns-cart-line-img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tj-color-grey-1);
}
.ns-cart-line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns-cart-line-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.ns-cart-line-title {
  font-weight: 600;
  color: var(--tj-color-heading-primary);
}
.ns-cart-line-variant {
  font-size: 14px;
  color: var(--tj-color-text-body-3);
}
.ns-cart-line-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-weight: 600;
}
.ns-cart-remove {
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--tj-color-text-body-3);
  text-decoration: underline;
}
.ns-cart-foot {
  padding: 20px 24px 26px;
  border-top: 1px solid var(--tj-color-border-1);
}
.ns-cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  color: var(--tj-color-heading-primary);
}
.ns-cart-note {
  font-size: 14px;
  margin: 6px 0 16px;
}
.ns-cart-checkout {
  width: 100%;
  justify-content: center;
}
.ns-cart-checkout.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.ns-demo-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 997;
  max-width: calc(100vw - 32px);
  padding: 8px 18px;
  border-radius: 50px;
  background: #fff3cd;
  color: #664d03;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  text-align: center;
}
@media (max-width: 991px) {
  .ns-demo-banner {
    bottom: 130px;
  }
}

/* Homepage / business-page promo strip */
.ns-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 36px;
  border-radius: 16px;
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.ns-promo .ns-promo-text .title {
  color: var(--tj-color-common-white);
  margin: 0 0 6px;
}
.ns-promo .ns-promo-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.ns-promo .ns-promo-price {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.ns-promo .ns-promo-price small {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
}
.ns-promo .tj-primary-btn {
  background: var(--tj-color-theme-dark);
}

/* ---------- Trust bar ---------- */
.ns-trust-section {
  padding: 50px 0;
}
.ns-trust-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .ns-trust-bar {
    grid-template-columns: 1fr;
  }
}
.ns-trust-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 28px 26px;
  background: var(--tj-color-common-white);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  height: 100%;
}
.ns-trust-item .ns-trust-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 24px;
}
.ns-trust-item .title {
  font-size: 20px;
  margin-bottom: 6px;
}
.ns-trust-item p {
  margin: 0;
  color: var(--tj-color-text-body);
}
.ns-trust-item .ns-trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}
.ns-trust-item .ns-trust-actions a {
  font-weight: 600;
  color: var(--tj-color-theme-primary);
}
.ns-trust-item .ns-trust-actions a:hover {
  color: var(--tj-color-heading-primary);
}

/* ---------- Area list (contact page) ---------- */
.ns-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.ns-area-list li {
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--tj-color-theme-bg);
  color: var(--tj-color-heading-primary);
  font-size: 14px;
}

/* ---------- Mobile call bar ---------- */
.ns-call-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 999;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  background: var(--tj-color-theme-dark);
  border-top: 1px solid var(--tj-color-border-3);
  padding-bottom: env(safe-area-inset-bottom);
}
.ns-call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 6px;
  color: var(--tj-color-common-white);
  font-weight: 600;
  font-size: 15px;
}
.ns-call-bar a + a {
  border-inline-start: 1px solid var(--tj-color-border-3);
}
.ns-call-bar a:last-child {
  background: var(--tj-color-theme-primary);
}
@media (max-width: 991px) {
  /* ScrollSmoother sizes the page from #smooth-content, so pad that, not body */
  #smooth-content {
    padding-bottom: 56px;
  }
  /* keep the template's back-to-top button above the bar */
  #tj-back-to-top.active {
    bottom: 76px;
  }
}

/* ---------- Credentials (replaces template testimonials) ---------- */
/* The countup bar overlaps this section by 122px; the template cleared it with
   padding on .sec-heading-wrap, which this section doesn't use */
.tj-countup-section + .tj-testimonial-section .sec-heading {
  padding-top: 120px;
}
@media (max-width: 991px) {
  .tj-countup-section + .tj-testimonial-section .sec-heading {
    padding-top: 100px;
  }
}
.ns-cred-item {
  height: 100%;
  padding: 35px 30px;
  border-radius: 12px;
  background: var(--tj-color-theme-dark-2);
  border: 1px solid var(--tj-color-border-3);
}
.ns-cred-item .ns-cred-icon {
  font-size: 40px;
  color: var(--tj-color-theme-primary);
  margin-bottom: 18px;
  display: inline-block;
}
.ns-cred-item .title {
  color: var(--tj-color-common-white);
  margin-bottom: 10px;
}
.ns-cred-item p {
  color: var(--tj-color-text-body-2);
  margin: 0;
}

/* ======================================================================
   Phase 1 (2026-10-22): simplified site, request form, business groups
   ====================================================================== */

/* Header: call link + Request Help button */
.ns-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ns-header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
  white-space: nowrap;
}
.ns-header-call i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tj-color-grey-1);
  color: var(--tj-color-theme-primary);
}
.ns-header-call:hover {
  color: var(--tj-color-theme-primary);
}
@media (max-width: 1399px) {
  .ns-header-call span {
    display: none;
  }
}
/* Six nav items (Resources added 2026-10-23): tighten spacing so the header
   stays on one line down to the 992px desktop breakpoint. */
@media (max-width: 1599px) {
  .header-area .mainmenu ul {
    column-gap: 22px;
  }
}
@media (max-width: 1299px) {
  .header-area .mainmenu ul {
    column-gap: 16px;
  }
  .header-area .mainmenu ul > li > a {
    font-size: 15px;
  }
  .header-area .site_logo .logo {
    width: 214px;
  }
  .header-area .ns-wordmark-name {
    font-size: 22px;
  }
  .ns-header-actions {
    gap: 12px;
  }
}
@media (max-width: 1199px) {
  .header-area .mainmenu ul {
    column-gap: 12px;
  }
  .header-area .mainmenu ul > li > a {
    font-size: 14px;
  }
  .header-area .site_logo .logo {
    width: 188px;
  }
  .header-area .ns-wordmark-name {
    font-size: 19px;
  }
  .header-area .ns-wordmark-biz {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .header-area .ns-header-call {
    display: none;
  }
  /* the offcanvas toggle only repeats contact info shown elsewhere */
  .header-area .menu_offcanvas {
    display: none !important;
  }
  .header-area .header-right-item .tj-primary-btn .btn-icon {
    display: none;
  }
}

/* Request form */
.ns-req-card {
  background: var(--tj-color-common-white);
  border-radius: 16px;
  padding: 40px;
}
@media (max-width: 575px) {
  .ns-req-card {
    padding: 26px 18px;
  }
}
.ns-req-card .title {
  margin-bottom: 8px;
}
.ns-req-lead {
  margin-bottom: 28px;
}
.ns-field {
  margin-bottom: 20px;
}
.ns-field > label,
.ns-fieldset > legend {
  display: block;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
  margin-bottom: 8px;
  font-size: 16px;
  float: none;
  width: auto;
}
.ns-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  min-width: 0;
}
.ns-req-form input[type="text"],
.ns-req-form input[type="email"],
.ns-req-form input[type="tel"],
.ns-req-form select,
.ns-req-form textarea {
  width: 100%;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  font-size: 16px;
  line-height: 1.4;
  height: auto;
}
.ns-req-form textarea {
  min-height: 130px;
  resize: vertical;
}
.ns-req-form select {
  appearance: auto;
}
.ns-req-form input:focus-visible,
.ns-req-form select:focus-visible,
.ns-req-form textarea:focus-visible,
.ns-choice input:focus-visible + span {
  outline: 3px solid rgba(var(--tj-accent-rgb), 0.45);
  outline-offset: 2px;
  border-color: var(--tj-color-theme-primary);
}
.ns-req-form [aria-invalid="true"] {
  border-color: #b42318;
}
.ns-field-error {
  display: block;
  color: #b42318;
  font-size: 14px;
  margin-top: 6px;
}
.ns-field-error:empty {
  display: none;
}
.ns-hint {
  display: block;
  font-size: 14px;
  color: var(--tj-color-text-body-3);
  margin-top: 6px;
}
.ns-req-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
@media (max-width: 575px) {
  .ns-req-row {
    grid-template-columns: 1fr;
  }
}
.ns-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ns-choice {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.ns-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ns-choice span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 50px;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
  background: var(--tj-color-common-white);
  transition: all 0.15s;
}
.ns-choice input:checked + span {
  background: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.ns-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ns-req-privacy {
  font-size: 14px;
  color: var(--tj-color-text-body-3);
  margin: 4px 0 20px;
}
.ns-req-submit[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
.ns-alert {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.ns-alert[hidden] {
  display: none;
}
.ns-alert-error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #7a271a;
}
.ns-alert-error a {
  color: #7a271a;
  font-weight: 700;
  text-decoration: underline;
}
.ns-req-success {
  text-align: center;
  padding: 30px 10px;
}
.ns-req-success .ns-ref {
  display: inline-block;
  margin: 10px 0 18px;
  padding: 8px 16px;
  border-radius: 50px;
  background: var(--tj-color-theme-bg);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tj-color-heading-primary);
}
.ns-req-side {
  background: var(--tj-color-theme-dark);
  background-image: url("../images/northstar/grain.svg");
  background-size: 220px 220px;
  color: var(--tj-color-text-body-2);
  border-radius: 16px;
  padding: 36px 32px;
}
.ns-req-side .title,
.ns-req-side h5 {
  color: var(--tj-color-common-white);
}
.ns-req-side h5 {
  margin: 24px 0 8px;
}
.ns-req-side p {
  color: var(--tj-color-text-body-2);
}
.ns-contact-actions {
  display: grid;
  gap: 12px;
  margin: 22px 0 10px;
}
.ns-contact-actions a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--tj-color-border-3);
  color: var(--tj-color-common-white);
  font-weight: 600;
}
.ns-contact-actions a:hover {
  border-color: var(--tj-color-theme-primary);
  background: rgba(var(--tj-accent-rgb), 0.12);
}
.ns-contact-actions i {
  color: var(--tj-color-theme-primary);
  font-size: 20px;
}
.ns-req-side .ns-area-list {
  justify-content: flex-start;
}
.ns-req-side .ns-area-list li {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tj-color-common-white);
}

/* Contact call-to-action block (replaces embedded forms) */
.ns-contact-cta {
  background: var(--tj-color-theme-dark);
  background-image: url("../images/northstar/grain.svg");
  background-size: 220px 220px;
  border-radius: 16px;
  padding: 50px 40px;
  color: var(--tj-color-text-body-2);
}
@media (max-width: 575px) {
  .ns-contact-cta {
    padding: 34px 22px;
  }
}
.ns-contact-cta .sec-title,
.ns-contact-cta .title {
  color: var(--tj-color-common-white);
}
.ns-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* Business IT service groups (expandable details) */
.ns-group {
  height: 100%;
  background: var(--tj-color-common-white);
  border-radius: 16px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 120px;
}
.ns-group .ns-group-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tj-color-theme-bg);
  color: var(--tj-color-theme-primary);
  font-size: 30px;
  margin-bottom: 20px;
}
.ns-group .title {
  margin-bottom: 10px;
}
.ns-group .ns-group-outcome {
  font-weight: 600;
  color: var(--tj-color-heading-primary);
}
.ns-group details {
  margin: 6px 0 22px;
  border-top: 1px solid var(--tj-color-border-1);
  padding-top: 14px;
}
.ns-group summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--tj-color-theme-primary);
  list-style: none;
}
.ns-group summary::-webkit-details-marker {
  display: none;
}
.ns-group summary::after {
  content: " +";
}
.ns-group details[open] summary::after {
  content: " \2212";
}
.ns-group details ul {
  margin: 12px 0 0;
  padding-left: 18px;
}
.ns-group details li {
  margin-bottom: 6px;
  list-style: disc;
}
.ns-group .ns-group-cta {
  margin-top: auto;
}
.ns-group.is-featured {
  background: var(--tj-color-theme-dark);
  background-image: url("../images/northstar/grain.svg");
  background-size: 220px 220px;
  color: var(--tj-color-text-body-2);
}
.ns-group.is-featured .title,
.ns-group.is-featured .ns-group-outcome {
  color: var(--tj-color-common-white);
}
.ns-group.is-featured details {
  border-color: var(--tj-color-border-3);
}
.ns-group.is-featured .ns-group-icon {
  background: rgba(var(--tj-accent-rgb), 0.18);
}
.ns-group.is-featured .ns-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  align-self: flex-start;
}
.ns-group.is-featured .ns-cols {
  columns: 2;
  column-gap: 30px;
}
@media (max-width: 767px) {
  .ns-group.is-featured .ns-cols {
    columns: 1;
  }
}
.ns-anchor {
  scroll-margin-top: 120px;
}

/* ======================================================================
   Shop: merch-store look (inspired by caseywillax.com)
   Clean white, heavy spaced caps, 4-up grid, dark buttons.
   Scoped to body.ns-shop-page so the rest of the site is unchanged.
   ====================================================================== */
.ns-shop-page {
  --ns-ink: #111;
  --ns-merch-bg: #f7f7f7;
  background-color: var(--ns-merch-bg);
  background-image: none;
}
.ns-shop-page .tj-footer-section {
  background-image: none;
}

/* Hero */
.ns-shop-hero {
  padding-top: 10px;
}
.ns-shop-hero-img {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: clamp(260px, 42vw, 520px);
  background: #fff;
}
.ns-shop-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns-shop-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55));
}
.ns-shop-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.ns-shop-hero-text h1 {
  color: #fff;
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 10px;
}
.ns-shop-hero-text p {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0;
}

/* Category tab bar */
.ns-shop-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 38px;
  margin: 34px 36px 10px;
  padding: 18px 10px;
  border-top: 2px solid var(--ns-ink);
  border-bottom: 2px solid var(--ns-ink);
  background: var(--ns-merch-bg);
}
.ns-shop-tabs[hidden] {
  display: none;
}
.ns-shop-tabs a {
  color: var(--ns-ink);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ns-shop-tabs a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
@media (max-width: 767px) {
  .ns-shop-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 24px 0 6px;
    padding: 14px 16px;
    gap: 26px;
  }
  .ns-shop-tabs a {
    white-space: nowrap;
    font-size: 14px;
  }
}

/* Sections and grid */
.ns-merch-section {
  padding-top: 50px;
  scroll-margin-top: 90px;
}
.ns-merch-heading {
  text-align: center;
  color: var(--ns-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 34px;
}
.ns-merch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1199px) {
  .ns-merch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .ns-merch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.ns-merch-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  padding: 16px 16px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, transform 0.2s;
}
.ns-merch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
.ns-merch-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
}
.ns-merch-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ns-merch-badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--ns-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ns-merch-badge.is-sold {
  background: #8a8a8a;
}
.ns-merch-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.ns-merch-title a {
  color: var(--ns-ink);
}
.ns-merch-price {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--ns-ink);
  margin-bottom: 14px;
}
.ns-merch-price s {
  color: #8a8a8a;
}
.ns-merch-btn {
  display: block;
  margin-top: auto;
  padding: 7px 10px;
  border-radius: 3px;
  background: #333;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  transition: background 0.2s;
}
.ns-merch-btn:hover,
.ns-merch-btn:focus-visible {
  background: #000;
  color: #fff;
}
.ns-merch-btn-lg {
  display: inline-block;
  padding: 13px 40px;
  font-size: 14px;
  text-transform: uppercase;
}

/* Coming soon */
.ns-merch-soon {
  max-width: 760px;
  margin: 60px auto 0;
  text-align: center;
}
.ns-merch-soon p {
  color: #444;
}
.ns-merch-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 34px 0;
}
.ns-merch-cats li {
  background: #fff;
  border-radius: 10px;
  padding: 28px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ns-merch-cats i {
  font-size: 44px;
  color: var(--ns-ink);
  line-height: 64px;
}
.ns-merch-cats img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  transform: scale(1.5);
}
.ns-merch-cats span {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ns-ink);
}
.ns-merch-fine {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
@media (max-width: 575px) {
  .ns-merch-cats {
    grid-template-columns: 1fr;
  }
}

/* Announcement bar (desktop: fixed bottom; mobile: top strip, above the call bar area) */
.ns-announce {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 997;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 48px;
  background: #222;
}
.ns-announce[hidden] {
  display: none;
}
.ns-announce a {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ns-announce button {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
@media (max-width: 991px) {
  .ns-announce {
    position: relative;
    bottom: auto;
    z-index: 1001;
  }
}

/* Product page in the same style */
.ns-shop-page .ns-pd-title {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ns-ink);
}
.ns-shop-page .ns-pd-add {
  background: #333;
  border-radius: 4px;
}
.ns-shop-page .ns-pd-add:hover {
  background: #000;
}
.ns-shop-page .ns-pd-option-values button.active {
  border-color: var(--ns-ink);
  box-shadow: inset 0 0 0 1px var(--ns-ink);
  color: var(--ns-ink);
}
.ns-shop-page .ns-gallery-main {
  object-fit: contain;
  background: #fff;
}
.ns-shop-page .ns-product-type {
  color: #666;
}

/* Shop: hero sits right under the header; free header room for the cart button */
.ns-shop-page .space-for-header {
  padding-top: 0;
}
.ns-shop-page .ns-header-call span {
  display: none;
}

.ns-merch-crumb {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
}
.ns-merch-crumb a {
  color: #111;
}
.ns-merch-crumb span[aria-hidden] {
  margin: 0 8px;
}

/* Shop-only header and footer (no IT business branding) */
.ns-shop-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 40px;
  background: var(--ns-merch-bg);
}
.ns-shop-header-links {
  display: flex;
  gap: 22px;
}
.ns-shop-header-links a,
.ns-shop-footer nav a {
  color: #111;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ns-shop-header-links a:hover,
.ns-shop-footer nav a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.ns-shop-wordmark {
  color: #111;
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.ns-shop-wordmark:hover {
  color: #111;
}
.ns-shop-header-cart {
  display: flex;
  justify-content: flex-end;
}
.ns-shop-header-cart .ns-cart-btn {
  background: transparent;
  color: #111;
  margin: 0;
}
@media (max-width: 991px) {
  .ns-shop-header {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 16px;
    gap: 10px;
  }
  .ns-shop-header-cart {
    display: none;
  }
  .ns-shop-header-links {
    order: 2;
  }
  .ns-shop-header-links a {
    font-size: 13px;
  }
}
.ns-shop-page #smooth-content {
  padding-bottom: 0;
}
.ns-shop-page .ns-cart-btn-float {
  bottom: 24px;
}

/* First Dibs form */
.ns-notify-card {
  max-width: 720px;
  margin: 70px auto 0;
  padding: 44px 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  text-align: center;
}
@media (max-width: 575px) {
  .ns-notify-card {
    padding: 30px 18px;
  }
}
.ns-notify-card p {
  color: #444;
}
.ns-notify-form {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  text-align: left;
}
.ns-notify-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 575px) {
  .ns-notify-row {
    grid-template-columns: 1fr;
  }
}
.ns-notify-form input,
.ns-notify-form select,
.ns-notify-form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fff;
  color: #111;
}
.ns-notify-form textarea {
  min-height: 90px;
}
.ns-notify-form input:focus-visible,
.ns-notify-form select:focus-visible,
.ns-notify-form textarea:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.25);
  outline-offset: 1px;
}
.ns-notify-form label.error {
  color: #b42318;
  font-size: 13px;
}
.ns-notify-form .ns-merch-btn {
  justify-self: center;
  border: 0;
}

/* Shop footer */
.ns-shop-footer {
  margin: 0 36px 50px;
  padding: 40px 0 0;
  border-top: 2px solid #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.ns-shop-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.ns-shop-footer p {
  margin: 0;
  color: #666;
  font-size: 13px;
  letter-spacing: 0.06em;
}
@media (max-width: 991px) {
  .ns-shop-footer {
    margin: 0 16px 40px;
  }
}

/* ---- Shop v3: match caseywillax.com shop layout ---- */
.ns-shop-page {
  --ns-merch-w: 1370px;
}
.ns-shop-header {
  max-width: var(--ns-merch-w);
  margin: 0 auto;
  padding: 26px 24px 18px;
  grid-template-columns: 1fr auto 1fr;
}
.ns-shop-header-left {
  display: flex;
  align-items: center;
}
.ns-shop-mono {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #111;
  border: 2.5px solid #111;
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.1;
}
.ns-shop-mono:hover {
  color: #111;
}
.ns-shop-wordmark {
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.1em;
}
.ns-shop-header-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}
.ns-shop-header-links a {
  font-size: 17px;
  letter-spacing: 0.04em;
}
.ns-shop-header-links .ns-cart-btn {
  background: transparent;
  color: #111;
  width: 36px;
  height: 36px;
  margin: 0;
}
@media (max-width: 991px) {
  .ns-shop-header {
    grid-template-columns: auto 1fr;
    justify-items: stretch;
    padding: 16px;
  }
  .ns-shop-header-left {
    display: none;
  }
  .ns-shop-wordmark {
    font-size: 20px;
  }
  .ns-shop-header-links {
    display: flex;
    gap: 14px;
  }
  .ns-shop-header-links a {
    font-size: 13px;
  }
  .ns-shop-header-links .ns-cart-btn {
    display: none;
  }
}
@media (max-width: 420px) {
  .ns-shop-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
  }
}

/* Title + ruled tabs, constrained to the same width as Casey's */
.ns-merch-title-main {
  text-align: center;
  color: #111;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 24px 0 14px;
}
.ns-shop-page .ns-shop-tabs {
  position: static;
  max-width: var(--ns-merch-w);
  margin: 0 auto;
  padding: 18px 10px;
  gap: 6px 42px;
}
.ns-shop-page .ns-shop-tabs a {
  font-size: 18px;
  letter-spacing: 0.12em;
}
@media (max-width: 767px) {
  .ns-shop-page .ns-shop-tabs {
    margin: 0 16px;
  }
  .ns-shop-page .ns-shop-tabs a {
    font-size: 14px;
  }
}
.ns-merch-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 767px) {
  .ns-merch-wrap {
    padding: 0 16px;
  }
}
.ns-merch-section {
  padding-top: 34px;
}
.ns-merch-heading {
  font-size: 21px;
  letter-spacing: 0.12em;
  margin-bottom: 38px;
}
.ns-merch-section + .ns-merch-section {
  padding-top: 70px;
}
.ns-merch-grid {
  gap: 20px;
}
.ns-merch-card {
  padding: 16px 16px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
.ns-merch-title {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  margin-top: 4px;
}
.ns-merch-price {
  font-size: 13px;
}
.ns-merch-btn {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  padding: 6px 10px;
}

/* Placeholder cards until products exist */
.ns-merch-card.is-placeholder .ns-merch-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  border-radius: 4px;
}
.ns-merch-ph {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.ns-merch-card.is-placeholder .ns-merch-title {
  color: #9a9a9a;
}
.ns-merch-card.is-placeholder:hover {
  transform: none;
}

/* Shop has no phone call bar, so keep the announcement at the bottom on every screen */
@media (max-width: 991px) {
  .ns-shop-page .ns-announce {
    position: fixed;
    bottom: 0;
    padding: 6px 40px;
  }
  .ns-shop-page .ns-announce a {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .ns-shop-page #smooth-content {
    padding-bottom: 50px;
  }
  .ns-shop-page .ns-cart-btn-float {
    bottom: 64px;
  }
}

/* ---------- Compact page title strip (inner IT pages) ---------- */
.tj-page-header {
  padding-top: 52px;
  padding-bottom: 52px;
}
.tj-page-header-content.text-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left !important;
}
.tj-page-title {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.01em;
}
/* breadcrumb becomes a small label above the title */
.tj-page-header .tj-page-link {
  order: -1;
  margin: 0 0 14px;
  padding: 0;
  background: none;
  backdrop-filter: none;
  gap: 6px;
}
.tj-page-header .tj-page-link span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tj-page-header .tj-page-link span:first-child {
  display: none;
}
.tj-page-header .tj-page-link span:not(:first-child) i {
  font-size: 13px;
}
/* accent rule under the title */
.tj-page-header .tj-page-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: var(--tj-color-theme-primary);
}
.tj-page-header + .section-gap {
  padding-top: 60px;
}
@media (max-width: 991px) {
  .tj-page-header {
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .tj-page-header + .section-gap {
    padding-top: 40px;
  }
}

/* ======================================================================
   Accessible teal (2026-10-23)
   The brand teal #1e8a8a is 4.15:1 on white and 4.13:1 on the dark panel,
   under the WCAG AA 4.5:1 minimum for normal-size text. It stays for icons,
   borders, rules, and other decoration. Text, links, navigation highlights,
   and buttons that carry text use these tokens instead.
     --ns-teal-ink      #146666  6.73:1 on white, 5.21:1 on #d8e5e5, 6.73:1 under white text
     --ns-teal-on-dark  #3fb5b0  6.91:1 on #0c1e21
   ====================================================================== */
:root {
  --ns-teal-brand: #1e8a8a;
  --ns-teal-ink: #146666;
  --ns-teal-on-dark: #3fb5b0;
}

/* Buttons with white text (hover only slides the label, so one background covers both states) */
.tj-primary-btn:not(.btn-dark):not(.transparent-btn):not(.ns-btn-ghost),
.ns-call-bar a:last-child,
.ns-offer-card .ns-badge,
.ns-group.is-featured .ns-badge {
  background-color: var(--ns-teal-ink);
}

/* Default link color and text links on light surfaces */
a,
button {
  color: var(--ns-teal-ink);
}

/* Desktop navigation: current page and hover (white header) */
.mainmenu ul > li.current-menu-item > a,
.mainmenu ul > li.current-menu-ancestor > a,
.mainmenu ul > li:hover > a,
.mainmenu ul > li > a:focus-visible {
  color: var(--ns-teal-ink);
}

/* Mobile menu and slide-out panel sit on the dark panel */
.hamburger_menu .mean-nav ul li a:hover,
.hamburger_menu .mean-nav ul li a:focus-visible,
.hamburger-area .contact-link:hover,
.tj-offcanvas-area .contact-link:hover {
  color: var(--ns-teal-on-dark);
}

/* Footer links on the light tweed footer */
.widget-nav-menu ul li a:hover,
.widget-nav-menu ul li a:focus-visible,
.copyright-content-area .copyright-text a:hover,
.copyright-content-area .copyright-text a:focus-visible {
  color: var(--ns-teal-ink);
}

/* Visible keyboard focus. The template removes focus outlines on links and buttons. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ns-teal-ink);
  outline-offset: 2px;
}
.ns-call-bar a:focus-visible,
.hamburger-area a:focus-visible,
.hamburger-area button:focus-visible,
.tj-offcanvas-area a:focus-visible,
.tj-offcanvas-area button:focus-visible,
.ns-contact-cta a:focus-visible,
.je-service-cta a:focus-visible {
  outline-color: var(--ns-teal-on-dark);
}

/* meanmenu injects an unlabeled "reveal" toggle inside the mobile panel. The site's own
   hamburger button already opens the panel with the menu expanded, so hide the duplicate. */
.hamburger_menu .mean-container a.meanmenu-reveal {
  display: none !important;
}

/* Closed slide-out panels sit off-screen but were still in the keyboard tab order.
   visibility removes them from tab order and screen readers; the template's
   `transition: all` keeps them visible until the closing slide finishes. */
.hamburger-area:not(.opened),
.tj-offcanvas-area:not(.opened) {
  visibility: hidden;
}
.hamburger-area.opened,
.tj-offcanvas-area.opened {
  visibility: visible;
}

/* Wordmark on phones and tablets: the menu is collapsed, so the name can be a little larger
   than on small laptops. (Placed last so it follows the header breakpoints above.) */
@media (max-width: 991px) {
  .header-area .site_logo .logo {
    width: auto;
  }
  .header-area .ns-wordmark-name {
    font-size: 21px;
  }
  .header-area .ns-wordmark-biz {
    font-size: 9.5px;
    letter-spacing: 0.17em;
  }
}