/* ==================================================================
   SCROLLWORK PROMO (2026-10-22): the slim bar for the web design
   studio site, on the homepage (after Systems) and on /services
   (above the Web Design pricing). Same structure as .cairn-bar in
   css/cairn-promo.css. Navy #14213D, brass #C9A66B, paper #F4EFE6.
   ================================================================== */
.sw-bar-wrap {
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}
.sw-bar-wrap--pricing {
  padding: 0 0 clamp(1.5rem, 3vw, 2.2rem);
}
.sw-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1.1rem, 3vw, 2rem);
  border: 1px solid rgba(201, 166, 107, .34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 50%, rgba(201, 166, 107, .16), transparent 40%),
    linear-gradient(120deg, #0B1426, #14213D);
  color: #F4EFE6;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.sw-bar:hover {
  border-color: rgba(201, 166, 107, .66);
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -24px rgba(154, 115, 57, .55);
}
.sw-bar:focus-visible { outline: 2px solid #C9A66B; outline-offset: 3px; }
/* engraved rings, an echo of the Scrollwork guilloché */
.sw-bar::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -4rem;
  top: 50%;
  width: 16rem;
  height: 16rem;
  border: 1px dashed rgba(201, 166, 107, .2);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2.2rem rgba(201, 166, 107, .03), 0 0 0 4.4rem rgba(201, 166, 107, .02);
  pointer-events: none;
}
.sw-bar__mark { width: 34px; height: auto; flex: 0 0 auto; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.sw-bar:hover .sw-bar__mark { transform: rotate(360deg); }
.sw-bar__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sw-bar__eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9A66B;
}
.sw-bar__title {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.25;
  color: #F4EFE6;
}
.sw-bar__title em { color: #C9A66B; }
.sw-bar__price {
  font-family: var(--f-sans);
  font-size: .85rem;
  color: rgba(244, 239, 230, .64);
}
.sw-bar__cta {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: #C9A66B;
  color: #1A1307;
  font-family: var(--f-sans);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .3s ease;
}
.sw-bar:hover .sw-bar__cta { background: #E2C894; }
@media (max-width: 640px) {
  .sw-bar { flex-wrap: wrap; }
  .sw-bar__mark { width: 28px; }
  .sw-bar__text { flex: 1 1 calc(100% - 60px); }
  .sw-bar__cta { margin-left: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-bar, .sw-bar:hover, .sw-bar__mark, .sw-bar:hover .sw-bar__mark { transition: none; transform: none; }
}

/* ==================================================================
   SCROLLWORK SPOTLIGHT on /services (2026-10-24): the shared
   .snapline-spotlight markup, recoloured navy and brass (same method
   as .cairn-spotlight in css/cairn-promo.css).
   ================================================================== */
.scrollwork-spotlight {
  --sw-brass: #C9A66B;
  --sw-brass-deep: #9A7339;
  --sw-vault: #0B1426;
  --snapline-line: rgba(201, 166, 107, .3);
  --snapline-grad: linear-gradient(135deg, #C9A66B, #9A7339);
  --grad: linear-gradient(135deg, #E2C894, #9A7339);
  --grad-hover: linear-gradient(135deg, #EED8AE, #A9813F);
  background: var(--sw-vault);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.scrollwork-spotlight .scrollwork-spotlight__logo {
  width: 72px;
  height: 72px;
  padding: .75rem .8rem;
  object-fit: contain;
  border: 1px solid rgba(201, 166, 107, .45);
  border-radius: 18px;
  background: #14213D;
  box-shadow: 0 14px 34px rgba(154, 115, 57, .25);
}
/* every place the shared spotlight hardcodes Snapline violet (memory: reference_snapline_violet_leak) */
.scrollwork-spotlight .snapline-spotlight__eyebrow { color: var(--sw-brass); }
.scrollwork-spotlight .snapline-spotlight__panel {
  background:
    radial-gradient(circle at 88% 16%, rgba(201, 166, 107, .16), transparent 34%),
    linear-gradient(125deg, rgba(11, 20, 38, .97), rgba(20, 33, 61, .9));
}
.scrollwork-spotlight .snapline-spotlight__panel::after {
  border-color: rgba(201, 166, 107, .18);
  border-style: dashed;
  box-shadow: 0 0 0 4rem rgba(201, 166, 107, .025), 0 0 0 8rem rgba(154, 115, 57, .02);
}
.scrollwork-spotlight .snapline-spotlight__title em { font-style: italic; color: var(--sw-brass); }
.scrollwork-spotlight .snapline-spotlight__proof { color: rgba(201, 166, 107, .92); }
.scrollwork-spotlight .snapline-spotlight__case-link {
  border-color: rgba(201, 166, 107, .6);
  background: var(--grad);
  color: #1A1307;
  box-shadow: 0 12px 28px rgba(154, 115, 57, .22);
}
.scrollwork-spotlight .snapline-spotlight__case-link:hover { border-color: #E2C894; background: var(--grad-hover); color: #1A1307; }
.scrollwork-spotlight .snapline-spotlight__visual { border-color: rgba(201, 166, 107, .26); background: var(--sw-vault); }
.scrollwork-spotlight .snapline-spotlight__visual:hover { border-color: rgba(201, 166, 107, .55); }
.scrollwork-spotlight .system-read-link { color: var(--sw-brass); }
.scrollwork-spotlight a:focus-visible { outline-color: var(--sw-brass); }