:root {
  --j-red: #d31800;
  --j-yellow: #f0ff6a;
  --j-black: #08080e;
  --j-line: rgba(240, 255, 106, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.sp-body {
  margin: 0;
  background: var(--j-black) !important;
  color: var(--j-yellow);
  font-family: "Figtree", sans-serif;
  overflow-x: hidden;
}
#main-content.sp-main { background: transparent !important; }
body.sp-body header {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
}
.sp-page h1, .sp-page h2, .sp-page h3, .sp-page h4 {
  color: inherit !important;
  font-family: "Figtree", sans-serif !important;
  line-height: inherit !important;
  text-shadow: none !important;
}
.sp-page p, .sp-page li, .sp-page span { color: inherit; }
.sp-page .sp-eyebrow, .sp-page .sp-card-num {
  font-family: "IBM Plex Mono", monospace !important;
}
.sp-page .sp-button { color: inherit !important; }

/* Navigation */
#navbar.sp-nav,
#navbar.sp-nav.scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .025)),
    rgba(8, 8, 14, 0) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
  backdrop-filter: blur(26px) saturate(155%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 32px rgba(8, 8, 14, .2) !important;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#navbar.sp-nav .hamburger span { background: var(--j-red) !important; }
#navbar.sp-nav .logo img { filter: none !important; }
#navOverlay.sp-overlay { background: var(--j-red); }
#navOverlay.sp-overlay .nav-overlay-inner { background: var(--j-red) !important; }
#navOverlay .nav-overlay-close { color: var(--j-yellow); border-color: rgba(240,255,106,.5); }
#navOverlay .nav-overlay-links a,
#navOverlay a.nav-overlay-item {
  color: var(--j-yellow) !important;
  font-size: clamp(2.3rem, 7vw, 6.5rem) !important;
  font-weight: 900 !important;
  font-style: italic;
  line-height: .93;
}
#navOverlay .nav-overlay-links a:hover { color: var(--j-black) !important; }
#navOverlay .nav-overlay-email,
#navOverlay .nav-overlay-social { color: var(--j-yellow) !important; }

.sp-page section { position: relative; }
.sp-eyebrow {
  margin: 0 0 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sp-title {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3.3rem, 9vw, 10rem);
  font-weight: 900;
  font-style: italic;
  line-height: .84;
  letter-spacing: -.06em;
}
.sp-copy {
  margin: 0;
  max-width: 53ch;
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  font-weight: 650;
  line-height: 1.58;
}
.sp-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 16px 23px;
  border: 2px solid currentColor;
  border-radius: 9px;
  font-size: .92rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.sp-button:hover { transform: translate(-3px, -3px); }
.sp-button svg { width: 18px; height: 18px; }

/* Shared hero and layouts */
.sp-hero {
  min-height: min(850px, 100svh);
  padding: clamp(124px, 15vw, 190px) clamp(24px, 7vw, 110px) clamp(72px, 8vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.sp-hero-intro {
  display: block !important;
  position: relative !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.sp-hero-copy { margin-top: clamp(28px, 4vw, 50px); }
.sp-hero-copy .sp-copy { margin-bottom: 30px; }
.sp-hero-ghost {
  position: absolute;
  right: -2vw;
  bottom: -5vw;
  margin: 0;
  font-size: clamp(10rem, 29vw, 30rem);
  font-weight: 900;
  font-style: italic;
  line-height: .7;
  letter-spacing: -.1em;
  pointer-events: none;
  user-select: none;
}
.sp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
  gap: clamp(38px, 8vw, 130px);
  align-items: start;
  padding: clamp(75px, 12vw, 160px) clamp(24px, 7vw, 110px);
}
.sp-section-title {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.5rem, 5.5vw, 6.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: .92;
  letter-spacing: -.045em;
}
.sp-detail { display: flex; flex-direction: column; gap: 28px; }
.sp-detail p { margin: 0; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 650; line-height: 1.65; }
.sp-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sp-list li { padding: 17px 0; border-top: 1px solid currentColor; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 800; }
.sp-list li:last-child { border-bottom: 1px solid currentColor; }
.sp-number { color: inherit; opacity: .65; font-family: "IBM Plex Mono", monospace; font-size: .7em; margin-right: 12px; }
.sp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid currentColor;
}
.sp-card {
  min-height: 300px;
  padding: clamp(30px, 4vw, 56px);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.sp-card:nth-child(3n) { border-right: 0; }
.sp-card .sp-card-num { font-family: "IBM Plex Mono", monospace; font-size: .75rem; font-weight: 600; letter-spacing: .1em; }
.sp-card h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.7rem); font-weight: 900; font-style: italic; line-height: .95; letter-spacing: -.035em; }
.sp-card p { margin: 0; font-size: .98rem; font-weight: 650; line-height: 1.6; }
.sp-cta {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}
.sp-cta h2 { margin: 0; max-width: 13ch; font-size: clamp(3rem, 7vw, 8rem); font-weight: 900; font-style: italic; line-height: .86; letter-spacing: -.06em; }

/* Websites */
.web-hero {
  display: grid;
  grid-template-columns: minmax(420px, .95fr) minmax(460px, 1.05fr);
  column-gap: clamp(30px, 5vw, 82px);
  align-items: start;
  background: var(--j-yellow) !important;
  color: var(--j-red);
  min-height: auto;
  padding-top: clamp(82px, 9vw, 124px);
  padding-bottom: clamp(42px, 5vw, 72px);
}
.web-hero .sp-title {
  max-width: none;
  font-family: "Figtree", sans-serif !important;
  font-size: clamp(2.1rem, 4.8vw, 5.2rem);
  font-weight: 650;
  font-style: normal;
  line-height: .78 !important;
  white-space: nowrap;
}
.web-hero .sp-title.font-medium { font-weight: 500 !important; }
.web-hero .sp-hero-intro { color: var(--j-red) !important; }
.web-hero .sp-hero-intro { grid-column: 1; grid-row: 1; max-width: none; }
.web-hero .sp-hero-copy { margin-top: clamp(92px, 9vw, 132px); }
.web-hero .sp-hero-copy .sp-copy { max-width: 40ch; margin-bottom: 22px; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.48; }
.web-hero .sp-button { background: var(--j-red); color: var(--j-yellow) !important; border-color: var(--j-red); }
.web-hero .sp-button:hover { background: transparent; color: var(--j-red) !important; }
.web-artwork {
  position: absolute;
  z-index: 1 !important;
  right: clamp(-155px, -6vw, -55px);
  top: clamp(105px, 8vw, 160px);
  width: clamp(265px, 36vw, 590px);
  max-height: 68%;
  object-fit: contain;
  pointer-events: none;
}
img.web-artwork { position: absolute !important; }
.web-artwork-below {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  min-height: clamp(360px, 40vw, 560px);
  overflow: hidden;
  background: var(--j-yellow);
}
.web-artwork-caption {
  grid-column: 2;
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: clamp(46px, 7vw, 100px) clamp(24px, 7vw, 110px);
  color: var(--j-red);
  font-family: "Figtree", sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.8rem);
  font-weight: 900;
  font-style: normal !important;
  line-height: .88;
  letter-spacing: -.06em;
  text-align: right;
}
.sp-page .web-artwork-caption { color: var(--j-red) !important; }
.web-artwork-below .web-artwork {
  top: auto;
  right: auto;
  left: clamp(-100px, -3vw, -25px);
  bottom: clamp(0px, 2vw, 18px);
  width: clamp(300px, 36vw, 590px);
  max-height: none;
}
.web-hero .sp-hero-intro { max-width: min(790px, 76vw); }
.web-hero .sp-copy { color: var(--j-red) !important; }
.web-tablet-wrap {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: clamp(92px, 9vw, 132px) 0 0;
}
.web-preview-label {
  margin: 0 0 10px;
  color: var(--j-red) !important;
  font-family: "Figtree", sans-serif !important;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
}
.web-tablet {
  padding: clamp(11px, 1.5vw, 17px);
  border: clamp(8px, 1vw, 13px) solid var(--j-black);
  border-radius: clamp(22px, 3vw, 42px);
  background: var(--j-black);
  box-shadow: 13px 16px 0 rgba(211,24,0,.3);
}
.web-tablet-camera { position: absolute; z-index: 3; top: clamp(13px, 2vw, 20px); left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #303038; transform: translateX(-50%); }
.web-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; border-radius: clamp(10px, 1.3vw, 19px); background: #e6e1d8 center/cover; }
.web-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #f6f3ed; }
.web-frame.web-frame-desktop { inset: 0 auto auto 0; width: 1440px; height: 810px; transform-origin: top left; }
.web-frame-preload { visibility: hidden; pointer-events: none; }
.web-tabs { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.web-tab { padding: 9px 14px; border: 1px solid var(--j-red); border-radius: 100px; background: transparent; color: var(--j-red); cursor: pointer; font-family: inherit; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.web-tab.is-active, .web-tab:hover { background: var(--j-red); color: var(--j-yellow); }
.web-note { margin: 14px 0 0; text-align: center; color: rgba(211,24,0,.7); font-size: .82rem; font-weight: 650; }
.web-note strong { font-weight: 900; }
.web-note a { color: inherit; text-underline-offset: 3px; }
.web-niche-switcher {
  position: relative;
  z-index: 2;
  min-height: max(620px, calc(100svh - 72px));
  display: flex;
  align-items: center;
  padding: clamp(64px, 9vw, 130px) clamp(24px, 7vw, 110px);
  background: var(--j-yellow) !important;
  border-top: 1px solid var(--j-red);
  border-bottom: 1px solid var(--j-red);
}
.web-niche-switcher-inner {
  width: min(100%, 1120px);
  margin: 0 auto;
}
.web-niche-switcher-kicker {
  margin: 0 0 clamp(20px, 3vw, 34px);
  color: var(--j-red) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.web-niche-switcher h2 {
  margin: 0;
  color: var(--j-red) !important;
  font-size: clamp(3.8rem, 10vw, 9.5rem);
  font-weight: 900;
  line-height: .82 !important;
  letter-spacing: -.08em;
}
.web-niche-tabs {
  width: 100%;
  max-width: 1040px;
  margin: clamp(42px, 6vw, 74px) 0 0;
  display: grid;
  gap: 0;
}
.sp-page .web-niche-tab {
  width: 100%;
  min-height: clamp(76px, 9vw, 122px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border: 0;
  border-top: 2px solid var(--j-red);
  border-radius: 0;
  background: transparent !important;
  color: var(--j-red) !important;
  cursor: pointer;
  font-family: "Figtree", sans-serif !important;
  font-size: clamp(2rem, 5vw, 5.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.06em;
  line-height: .9;
  text-transform: uppercase;
  text-align: left;
  transition: background-color .2s ease, color .2s ease, padding .2s ease;
}
.sp-page .web-niche-tab > span {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}
.sp-page .web-niche-tab:last-child {
  border-bottom: 2px solid var(--j-red);
}
.sp-page .web-niche-tab:hover,
.sp-page .web-niche-tab:focus-visible,
.sp-page .web-niche-tab[aria-selected="true"] {
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);
  background: var(--j-red) !important;
  color: var(--j-yellow) !important;
}
.web-niche-tab-arrow {
  flex: 0 0 auto;
  font-size: .62em !important;
  line-height: 1;
}
.sp-page .web-niche-tab:focus-visible {
  outline: 3px solid var(--j-black);
  outline-offset: -3px;
}
.web-niche[hidden] { display: none !important; }
.web-niche {
  min-height: clamp(650px, 58vw, 900px);
  padding: clamp(86px, 11vw, 170px) clamp(24px, 7vw, 110px);
  scroll-margin-top: 72px;
}
.web-niche-inner {
  width: min(100%, 1440px);
  min-height: clamp(470px, 42vw, 650px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 8vw, 128px);
  align-items: center;
}
.web-niche-content { max-width: 680px; }
.web-niche-kicker {
  margin: 0 0 24px;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.web-niche h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.1rem, 6vw, 7.2rem);
  font-weight: 900;
  font-style: normal !important;
  line-height: .88 !important;
  letter-spacing: -.06em;
}
.web-niche h2 mark {
  display: inline;
  padding: 0 .1em;
  border-radius: 6px;
  font-style: normal;
}
.web-niche-lead {
  max-width: 54ch;
  margin: clamp(32px, 4vw, 54px) 0 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 650;
  line-height: 1.62;
}
.web-niche-detail {
  max-width: 54ch;
  margin: clamp(20px, 2.8vw, 36px) 0 0;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  font-weight: 650;
  line-height: 1.58;
}
.web-niche-integration {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(30px, 4vw, 48px);
  padding: 20px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.web-integration-name {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -.04em;
}
.web-niche-integration p {
  max-width: 44ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.52;
}
.web-niche-list {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.web-niche-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid currentColor;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.35;
}
.web-niche-list li span {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .72rem;
  opacity: .68;
}
.web-niche-media {
  position: relative;
  min-height: clamp(350px, 38vw, 570px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(20px, 3vw, 40px);
  border: 2px solid currentColor;
  background:
    linear-gradient(135deg, transparent 0 48%, currentColor 48% 49%, transparent 49% 100%),
    linear-gradient(45deg, transparent 0 64%, currentColor 64% 65%, transparent 65%);
}
.web-niche-photo-wrap {
  padding: 0;
  background: var(--j-red);
}
.web-niche-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}
.web-niche-photo-wrap::after { display: none; }
.web-niche-photo-wrap .web-media-label {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  left: clamp(20px, 3vw, 40px);
  padding: 7px 10px;
  background: var(--j-red);
  color: var(--j-yellow) !important;
}
.web-niche-media::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -13%;
  width: 70%;
  aspect-ratio: 1;
  border: clamp(25px, 4vw, 62px) solid currentColor;
  border-radius: 50%;
  opacity: .16;
}
.web-media-label {
  position: relative;
  z-index: 1;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.web-niche-media p {
  position: relative;
  z-index: 1;
  max-width: 8ch;
  margin: 0;
  font-size: clamp(2.3rem, 4.6vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: .87;
  letter-spacing: -.06em;
}
.web-niche-hospitality {
  background: var(--j-yellow) !important;
  color: var(--j-red) !important;
}
.web-niche-hospitality,
.web-niche-hospitality * {
  color: var(--j-red) !important;
}
.web-niche-hospitality h2 mark {
  background: var(--j-red);
  color: var(--j-yellow) !important;
}
.web-niche-services {
  background: var(--j-red) !important;
  color: var(--j-yellow) !important;
}
.web-niche-services .web-niche-inner { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
.web-niche-services .web-niche-content { grid-column: 1; grid-row: 1; }
.web-niche-services .web-niche-media { grid-column: 2; grid-row: 1; }
.web-niche-services h2 mark {
  background: var(--j-yellow);
  color: var(--j-red) !important;
}
.web-niche-products {
  background: #6c0142 !important;
  color: var(--j-yellow) !important;
}
.web-niche-products h2 mark {
  background: var(--j-yellow);
  color: var(--j-black) !important;
}
.web-cta { background: var(--j-yellow) !important; color: var(--j-red); }
.web-cta h2 { color: var(--j-red) !important; }
.web-cta .sp-button { background: var(--j-red); color: var(--j-yellow) !important; }
.web-cta.is-empty {
  min-height: clamp(190px, 26vw, 320px);
  align-items: center;
  justify-content: center;
  gap: 0;
}
.web-cta.is-empty h2 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 6vw, 6.8rem);
  font-style: normal;
  text-align: center;
}
.web-cta.is-empty .sp-eyebrow[hidden],
.web-cta.is-empty .sp-button[hidden],
.sp-footer-wrap[hidden] {
  display: none !important;
}

/* Branding */
.brand-hero { background: var(--j-red) !important; color: var(--j-yellow); }
.brand-hero .sp-hero-ghost { color: rgba(240,255,106,.13); }
.brand-hero .sp-button { color: var(--j-red) !important; background: var(--j-yellow); border-color: var(--j-yellow); }
.brand-hero .sp-button:hover { color: var(--j-yellow) !important; background: transparent; }
.brand-block { background: var(--j-yellow) !important; color: var(--j-red); }
.brand-block .sp-section-title mark { color: var(--j-yellow); background: var(--j-red); border-radius: 5px; padding: 0 .12em; font-style: normal; }
.brand-system { background: var(--j-black) !important; color: var(--j-yellow); }
.brand-system .sp-card { border-color: rgba(240,255,106,.34); }
.brand-system .sp-card p { color: rgba(240,255,106,.72); }
.brand-cta { background: var(--j-red) !important; color: var(--j-yellow); }
.brand-cta .sp-button { background: var(--j-yellow); color: var(--j-red) !important; }

/* SEO */
.seo-hero { background: var(--j-black) !important; color: var(--j-yellow); }
.seo-hero .sp-hero-ghost { color: rgba(240,255,106,.08); }
.seo-hero .sp-title mark { display: inline-block; color: var(--j-black) !important; -webkit-text-fill-color: var(--j-black) !important; background: var(--j-yellow) !important; padding: 0 .12em; border-radius: 5px; font-style: normal; line-height: .92 !important; }
.seo-hero .sp-button { color: var(--j-yellow) !important; background: var(--j-red); border-color: var(--j-red); }
.seo-hero .sp-button:hover { background: transparent; }
.seo-map { background: var(--j-yellow) !important; color: var(--j-red); }
.seo-grid { background: var(--j-red) !important; color: var(--j-yellow); }
.seo-grid .sp-card p { color: rgba(240,255,106,.85); }
.seo-cta { background: var(--j-black) !important; color: var(--j-yellow); }
.seo-cta .sp-button { color: var(--j-black) !important; background: var(--j-yellow); }

/* Social */
.social-hero { background: var(--j-yellow) !important; color: var(--j-red) !important; }
.social-hero .sp-eyebrow,
.social-hero .sp-title,
.social-hero .sp-copy { color: var(--j-red) !important; }
.social-hero .sp-hero-ghost { color: rgba(211,24,0,.12); }
.social-hero .sp-button { background: var(--j-red); color: var(--j-yellow) !important; border-color: var(--j-red); }
.social-hero .sp-button * { color: var(--j-yellow) !important; }
.social-hero .sp-button:hover { background: transparent; color: var(--j-red) !important; }
.social-shapes { position: absolute; right: 6vw; bottom: 7vw; display: flex; gap: 12px; transform: rotate(-8deg); }
.social-shapes span { display: block; width: clamp(52px, 8vw, 110px); aspect-ratio: 1; background: var(--j-red); border-radius: 50%; }
.social-shapes span:nth-child(2) { background: var(--j-black); border-radius: 14px; transform: translateY(40px); }
.social-shapes span:nth-child(3) { background: var(--j-red); border-radius: 0; transform: rotate(25deg); }
.social-story { background: var(--j-red) !important; color: var(--j-yellow); }
.social-story .sp-detail p { color: rgba(240,255,106,.8); }
.social-grid { background: var(--j-black) !important; color: var(--j-yellow); }
.social-grid .sp-card { border-color: rgba(240,255,106,.3); }
.social-grid .sp-card p { color: rgba(240,255,106,.72); }
.social-cta { background: var(--j-yellow) !important; color: var(--j-red); }
.social-cta .sp-button { color: var(--j-yellow) !important; background: var(--j-red); }

/* Paid ads */
.ads-hero { background: var(--j-red) !important; color: var(--j-yellow); }
.ads-hero .sp-hero-ghost { color: rgba(240,255,106,.12); }
.ads-hero .sp-button { background: var(--j-yellow); color: var(--j-red) !important; border-color: var(--j-yellow); }
.ads-hero .sp-button:hover { background: transparent; color: var(--j-yellow) !important; }
.ads-hero .sp-title .highlight { display: inline-block; background: var(--j-yellow) !important; color: var(--j-red) !important; -webkit-text-fill-color: var(--j-red) !important; border-radius: 5px; padding: 0 .12em; font-style: normal; line-height: .92 !important; }
.ads-plan { background: var(--j-black) !important; color: var(--j-yellow); }
.ads-plan .sp-detail p { color: rgba(240,255,106,.78); }
.ads-grid { background: var(--j-yellow) !important; color: var(--j-red); }
.ads-cta { background: var(--j-red) !important; color: var(--j-yellow); }
.ads-cta .sp-button { background: var(--j-yellow); color: var(--j-red) !important; }

/* Service chooser — used by the four enquiry-led service pages */
.service-brief { overflow-x: clip; overflow-y: visible; }
.service-panel,
.seo-guide { scroll-margin-top: 92px; }
.service-brief .sp-hero {
  min-height: min(780px, 100svh);
  padding-top: clamp(108px, 11vw, 150px);
  padding-bottom: clamp(52px, 6vw, 82px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.service-brief .sp-hero-intro { grid-column: 1; }
.service-brief .sp-title {
  max-width: 8ch;
  font-size: clamp(3.4rem, 6.2vw, 7rem);
  line-height: .84 !important;
  letter-spacing: -.06em !important;
}
.service-brief .sp-hero-copy { margin-top: clamp(24px, 3vw, 38px); }
.service-brief .sp-hero-ghost {
  grid-column: 2;
  position: relative;
  right: auto;
  bottom: auto;
  justify-self: end;
  max-width: 4.5ch;
  font-size: clamp(7rem, 15vw, 15rem);
  line-height: .72;
  text-align: right;
}
.service-marquee {
  overflow: hidden; padding: 15px 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
  white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.service-marquee span { display: inline-block; animation: service-ticker 22s linear infinite; }
.sp-page.service-brief .service-proof { padding: clamp(75px, 10vw, 140px) clamp(24px, 7vw, 110px); background: var(--j-black) !important; color: var(--j-yellow) !important; }
.service-proof-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 9vw, 150px); }
.service-proof h2 { max-width: 9ch; margin: 0; font-size: clamp(2.6rem, 5vw, 6rem); font-style: italic; font-weight: 900; line-height: .88 !important; letter-spacing: -.06em !important; }
.service-proof p { max-width: 54ch; margin: 0; font-size: clamp(1.06rem, 1.5vw, 1.3rem); font-weight: 650; line-height: 1.6; }
.sp-page.service-brief .service-chooser { min-height: max(600px, calc(100svh - 72px)); padding: clamp(65px, 10vw, 130px) clamp(24px, 7vw, 110px); background: var(--j-yellow) !important; color: var(--j-red) !important; display: flex; align-items: center; }
.service-chooser-inner { width: min(100%, 1120px); margin: 0 auto; }
.service-chooser h2 { max-width: 10ch; margin: 0; font-size: clamp(3.8rem, 9vw, 9rem); font-weight: 900; line-height: .81 !important; letter-spacing: -.08em !important; }
.service-chooser .sp-eyebrow { margin-bottom: 26px; }
.service-tabs { margin-top: clamp(42px, 6vw, 75px); border-top: 2px solid var(--j-red); }
.sp-page.service-brief .service-tab { width: 100%; min-height: clamp(80px, 9vw, 124px); display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border: 0; border-bottom: 2px solid var(--j-red); background: transparent !important; color: var(--j-red) !important; font-family: "Figtree", sans-serif !important; font-size: clamp(2rem, 5vw, 5.2rem) !important; font-weight: 900 !important; line-height: .88 !important; letter-spacing: -.065em !important; text-align: left; cursor: pointer; transition: color .2s ease, background-color .2s ease, padding .2s ease; }
.sp-page.service-brief .service-tab > span { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; }
.sp-page.service-brief .service-tab:hover, .sp-page.service-brief .service-tab:focus-visible, .sp-page.service-brief .service-tab[aria-selected="true"] { padding-left: 24px; padding-right: 24px; background: var(--j-red) !important; color: var(--j-yellow) !important; outline: none; }
.service-tab:focus-visible { outline: 3px solid var(--j-black); outline-offset: -4px; }
.service-tab-arrow { font-family: "IBM Plex Mono", monospace; font-size: .52em; letter-spacing: 0; }
.service-panel[hidden] { display: none !important; }
.service-panel { scroll-margin-top: 64px; min-height: clamp(620px, 58vw, 860px); padding: clamp(78px, 10vw, 150px) clamp(24px, 7vw, 110px); }
.service-panel-inner { width: min(100%, 1440px); margin: 0 auto; display: grid; grid-template-columns: minmax(240px,.75fr) minmax(0,1.25fr); gap: clamp(45px, 9vw, 160px); align-items: start; }
.service-stamp { position: sticky; top: 100px; width: min(100%, 360px); aspect-ratio: 1; padding: 27px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid currentColor; border-radius: 50%; transform: rotate(-8deg); }
.service-stamp span { font: 600 .7rem "IBM Plex Mono", monospace; letter-spacing: .12em; }
.service-stamp strong { max-width: 6ch; font-size: clamp(2.4rem, 4.5vw, 5rem); font-weight: 900; font-style: italic; line-height: .82 !important; letter-spacing: -.07em !important; }
.service-panel h2 { max-width: 10ch; margin: 0; font-size: clamp(3rem, 6.2vw, 7.5rem); font-weight: 900; font-style: italic; line-height: .84 !important; letter-spacing: -.065em !important; }
.service-panel-lead { max-width: 55ch; margin: 38px 0 0; font-size: clamp(1.08rem, 1.55vw, 1.34rem); font-weight: 650; line-height: 1.6; }
.service-deliverables { margin: 46px 0 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.service-deliverables li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid currentColor; font-size: clamp(1rem, 1.35vw, 1.16rem); font-weight: 800; line-height: 1.35; }
.service-deliverables span { font: 600 .72rem "IBM Plex Mono", monospace; opacity: .7; }
.service-panel-note { margin: 30px 0 0; max-width: 53ch; font-size: .98rem; line-height: 1.57; font-weight: 650; }
.sp-page.service-brief .service-panel-red { background: var(--j-red) !important; color: var(--j-yellow) !important; }
.sp-page.service-brief .service-panel-black { background: var(--j-black) !important; color: var(--j-yellow) !important; }
.sp-page.service-brief .service-panel-yellow { background: var(--j-yellow) !important; color: var(--j-red) !important; }
.sp-page.service-brief .service-endcap { min-height: 330px; justify-content: center; align-items: center; text-align: center; background: var(--j-yellow) !important; color: var(--j-red) !important; }
.service-endcap h2 { max-width: 15ch; font-style: normal; }
.service-endcap.is-empty { gap: 0; }
.service-endcap [hidden] { display: none !important; }
[data-service-footer][hidden] { display: none !important; }
@keyframes service-ticker { to { transform: translateX(-50%); } }

/* Calm service pages: a single, deliberately quiet violet system.  Scoped so
   the Websites experience — including its device preview — remains untouched. */
body.sp-body.service-calm {
  --service-purple: #6c0142;
  --service-plum: #d31800;
  --service-paper: #f0ff6a;
  --service-lilac: #f0ff6a;
  --service-line: rgba(108, 1, 66, .22);
  background: var(--service-purple) !important;
  color: var(--service-paper);
}
body.sp-body.service-calm #navbar.sp-nav,
body.sp-body.service-calm #navbar.sp-nav.scrolled {
  background: rgba(108, 1, 66, .92) !important;
  border-color: rgba(240, 255, 106, .35) !important;
  box-shadow: none !important;
}
body.sp-body.service-calm #navbar.sp-nav .hamburger span { background: var(--service-paper) !important; }
body.sp-body.service-calm #navOverlay.sp-overlay,
body.sp-body.service-calm #navOverlay.sp-overlay .nav-overlay-inner { background: var(--service-purple) !important; }
body.sp-body.service-calm #navOverlay .nav-overlay-close { color: var(--service-paper); border-color: rgba(240,255,106,.5); }
body.sp-body.service-calm #navOverlay .nav-overlay-links a,
body.sp-body.service-calm #navOverlay a.nav-overlay-item,
body.sp-body.service-calm #navOverlay .nav-overlay-email,
body.sp-body.service-calm #navOverlay .nav-overlay-social { color: var(--service-paper) !important; }
body.sp-body.service-calm #navOverlay .nav-overlay-links a:hover { color: var(--service-lilac) !important; }
body.sp-body #navOverlay .nav-services-panel {
  position: absolute;
  top: 50%;
  right: 52px;
  width: 48%;
  transform: translate(24px, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility .3s ease;
}
body.sp-body #navOverlay .nav-services-panel nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
body.sp-body #navOverlay.services-open .nav-overlay-links {
  width: 48%;
  flex: 0 0 48%;
  align-items: flex-start;
}
body.sp-body #navOverlay.services-open .nav-services-panel {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.sp-body #navOverlay .nav-services-panel a {
  width: max-content;
  max-width: 100%;
}

body.sp-body.service-calm .service-brief .sp-hero,
body.sp-body.service-calm .service-marquee { background: var(--service-purple) !important; color: var(--service-paper) !important; }
body.sp-body.service-calm .service-brief .sp-hero {
  min-height: min(690px, 90svh);
  grid-template-columns: minmax(0, 720px) 1fr;
}
body.sp-body.service-calm .service-brief .sp-hero-ghost {
  display: none !important;
}
body.sp-body.service-calm .service-marquee {
  display: none !important;
}
body.sp-body.service-calm .social-hero .sp-eyebrow,
body.sp-body.service-calm .social-hero .sp-title,
body.sp-body.service-calm .social-hero .sp-copy {
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .service-brief .sp-button {
  background: var(--service-paper) !important;
  border-color: var(--service-paper) !important;
  color: var(--service-purple) !important;
  border-radius: 999px;
}
body.sp-body.service-calm .service-brief .sp-button * { color: inherit !important; }
body.sp-body.service-calm .service-brief .sp-button:hover {
  background: transparent !important;
  color: var(--service-paper) !important;
  transform: translateY(-2px);
}
body.sp-body.service-calm .seo-hero .sp-title mark,
body.sp-body.service-calm .ads-hero .sp-title .highlight {
  background: var(--service-lilac) !important;
  color: var(--service-purple) !important;
  -webkit-text-fill-color: var(--service-purple) !important;
  border-radius: 3px;
}
body.sp-body.service-calm .social-shapes { display: none; }

body.sp-body.service-calm .sp-page.service-brief .service-proof {
  padding-block: clamp(68px, 9vw, 116px);
  background: var(--service-paper) !important;
  color: var(--service-purple) !important;
}
body.sp-body.service-calm .service-proof-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 8vw, 112px); }
body.sp-body.service-calm .service-proof h2 { max-width: 10ch; font-style: normal; }

body.sp-body.service-calm .sp-page.service-brief .service-chooser {
  min-height: auto;
  padding-block: clamp(72px, 10vw, 125px);
  background: var(--service-lilac) !important;
  color: var(--service-purple) !important;
}
body.sp-body.service-calm .service-chooser h2 { font-size: clamp(3.3rem, 7.4vw, 7.4rem); letter-spacing: -.07em !important; }
body.sp-body.service-calm .service-tabs { margin-top: clamp(34px, 5vw, 60px); border-color: var(--service-line); }
body.sp-body.service-calm .sp-page.service-brief .service-tab {
  min-height: clamp(70px, 7.5vw, 102px);
  border-color: var(--service-line);
  font-size: clamp(1.7rem, 3.8vw, 4.15rem) !important;
  transition: background-color .2s ease, color .2s ease, padding .2s ease;
}
body.sp-body.service-calm .sp-page.service-brief .service-tab:hover,
body.sp-body.service-calm .sp-page.service-brief .service-tab:focus-visible,
body.sp-body.service-calm .sp-page.service-brief .service-tab[aria-selected="true"] {
  padding-left: 18px; padding-right: 18px;
  background: var(--service-purple) !important;
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .service-tab:focus-visible { outline-color: var(--service-plum); }

body.sp-body.service-calm .sp-page.service-brief .service-panel-red,
body.sp-body.service-calm .sp-page.service-brief .service-panel-black,
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow {
  min-height: auto;
  padding-block: clamp(70px, 9vw, 118px);
  background: var(--service-paper) !important;
  color: var(--service-purple) !important;
}
body.sp-body.service-calm .service-panel-inner { grid-template-columns: minmax(160px,.48fr) minmax(0,1.12fr); gap: clamp(32px, 7vw, 104px); }
body.sp-body.service-calm .service-stamp {
  position: relative; top: auto; width: 100%; max-width: 245px; aspect-ratio: auto;
  min-height: 164px; border-radius: 0; transform: none; padding: 20px;
  border: 1px solid var(--service-line); background: var(--service-lilac);
}
body.sp-body.service-calm .service-stamp strong { font-size: clamp(1.75rem, 3vw, 3.25rem); }
body.sp-body.service-calm .service-panel h2 { max-width: 11ch; font-style: normal; font-size: clamp(2.7rem, 5.3vw, 6.2rem); }
body.sp-body.service-calm .service-panel-lead { margin-top: 28px; }
body.sp-body.service-calm .service-deliverables { margin-top: 34px; border-color: var(--service-line); }
body.sp-body.service-calm .service-deliverables li { padding-block: 15px; border-color: var(--service-line); }

body.sp-body.service-calm .sp-page.service-brief .service-endcap,
body.sp-body.service-calm .sp-footer-wrap,
body.sp-body.service-calm .sp-footer-wrap .footer {
  background: var(--service-purple) !important;
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-endcap { min-height: 300px; }
body.sp-body.service-calm .service-endcap .sp-button { background: var(--service-paper) !important; color: var(--service-purple) !important; }
body.sp-body.service-calm .sp-footer-wrap .jf-tagline,
body.sp-body.service-calm .sp-footer-wrap .jf-link { color: var(--service-paper) !important; }
body.sp-body.service-calm .sp-footer-wrap .jf-link:hover { color: var(--service-lilac) !important; }

@media (max-width: 780px) {
  body.sp-body #navOverlay .nav-services-panel { left: 24px; right: 24px; width: auto; }
  body.sp-body #navOverlay.services-open .nav-overlay-links {
    width: 100%;
    flex: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.sp-body #navOverlay .nav-services-panel a { width: auto; }
  body.sp-body.service-calm .service-brief .sp-hero { min-height: 630px; }
  body.sp-body.service-calm .service-brief .sp-hero-ghost { font-size: clamp(5rem, 22vw, 8rem); }
  body.sp-body.service-calm .service-proof-grid,
  body.sp-body.service-calm .service-panel-inner { grid-template-columns: 1fr; }
  body.sp-body.service-calm .service-stamp { max-width: none; min-height: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  body.sp-body.service-calm .service-marquee span { animation: none; }
}
@media (max-width: 780px) {
  .service-brief .sp-hero { grid-template-columns: 1fr; gap: 32px; }
  .service-brief .sp-hero-ghost { grid-column: 1; justify-self: start; max-width: none; font-size: clamp(5rem, 25vw, 9rem); text-align: left; }
  .service-proof-grid, .service-panel-inner { grid-template-columns: 1fr; }
  .service-proof-grid { gap: 30px; }
  .service-chooser { min-height: 560px; }
  .sp-page.service-brief .service-tab { font-size: clamp(1.7rem, 9vw, 3.4rem) !important; }
  .service-stamp { position: static; width: 215px; padding: 20px; }
  .service-panel { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .service-marquee span { animation: none; } * { transition-duration: .01ms !important; } }

/* Footer */
.sp-footer-wrap .jelli-footer { background: var(--j-yellow) !important; }
body.sp-body.service-calm .sp-footer-wrap .jf-links-wrap {
  background: var(--j-yellow) !important;
}
body.sp-body.service-calm .sp-footer-wrap .jf-link {
  color: var(--j-red) !important;
  -webkit-text-fill-color: var(--j-red) !important;
}
body.sp-body.service-calm .sp-footer-wrap .jf-link:hover,
body.sp-body.service-calm .sp-footer-wrap .jf-link:focus-visible {
  background: var(--j-red) !important;
  color: var(--j-yellow) !important;
  -webkit-text-fill-color: var(--j-yellow) !important;
}
body.sp-body.service-calm .sp-footer-wrap .jf-tagline {
  color: var(--j-yellow) !important;
  -webkit-text-fill-color: var(--j-yellow) !important;
}

@media (max-width: 780px) {
  .sp-hero { min-height: auto; }
  .sp-hero-intro { max-width: 100% !important; }
  .sp-hero-ghost { right: -8vw; bottom: -3vw; }
  .web-artwork-below { display: block; }
  .web-artwork { opacity: .26; right: -100px; width: 350px; top: 150px; }
  .web-artwork-below .web-artwork { top: auto; right: auto; left: -100px; bottom: 0; opacity: .65; }
  .web-artwork-caption { max-width: 100%; padding: 42px 24px; font-size: clamp(2rem, 8vw, 3.5rem); }
  .web-screen { min-height: 0; aspect-ratio: 16 / 9; }
  .web-niche-switcher {
    min-height: max(560px, calc(100svh - 64px));
    padding: 58px 24px 72px;
  }
  .web-niche-switcher-kicker { margin-bottom: 22px; }
  .web-niche-switcher h2 { font-size: clamp(3.6rem, 16vw, 6.8rem); }
  .web-niche-tabs { margin-top: 48px; }
  .sp-page .web-niche-tab {
    min-height: 76px;
    font-size: clamp(1.75rem, 9vw, 3.3rem) !important;
  }
  .sp-page .web-niche-tab:hover,
  .sp-page .web-niche-tab:focus-visible,
  .sp-page .web-niche-tab[aria-selected="true"] {
    padding-left: 12px;
    padding-right: 12px;
  }
  .sp-split { grid-template-columns: 1fr; }
  .sp-card-grid { grid-template-columns: 1fr; }
  .sp-card, .sp-card:nth-child(3n) { border-right: 0; min-height: 0; }
  .sp-project-image { height: 210px; }
  .web-niche { min-height: auto; padding-top: clamp(72px, 14vw, 110px); padding-bottom: clamp(72px, 14vw, 110px); }
  .web-niche-inner,
  .web-niche-services .web-niche-inner { display: flex; flex-direction: column; align-items: stretch; gap: 54px; }
  .web-niche-content,
  .web-niche-services .web-niche-content,
  .web-niche-services .web-niche-media { width: 100%; max-width: none; }
  .web-niche-services .web-niche-content,
  .web-niche-services .web-niche-media { grid-column: auto; grid-row: auto; }
  .web-niche-media { min-height: clamp(280px, 68vw, 420px); }
  .web-niche h2 { max-width: 11ch; font-size: clamp(2.8rem, 12vw, 5.5rem); }
  .web-niche-integration { grid-template-columns: 1fr; gap: 10px; }
  .web-niche-list li { font-size: .93rem; }
  .social-shapes { opacity: .3; }
}

@media (max-width: 1100px) {
  .web-hero {
    display: flex;
    flex-direction: column;
  }
  .web-hero .sp-hero-intro,
  .web-tablet-wrap {
    width: 100%;
  }
  .web-tablet-wrap {
    margin-top: clamp(28px, 5vw, 54px);
  }
  .web-hero .sp-hero-copy { margin-top: clamp(22px, 3vw, 36px); }
}

/* Service page refinement: red, acid yellow and JELLi purple only. */
body.sp-body.service-calm {
  --service-purple: #6c0142;
  --service-paper: #f0ff6a;
  --service-plum: #d31800;
  --service-lilac: #f0ff6a;
  background: var(--service-purple) !important;
}
body.sp-body.service-calm #navbar.sp-nav,
body.sp-body.service-calm #navbar.sp-nav.scrolled {
  background: linear-gradient(180deg, rgba(240,255,106,.16), rgba(108,1,66,.13)) !important;
  border-color: rgba(240,255,106,.48) !important;
  box-shadow: inset 0 1px rgba(240,255,106,.25), 0 10px 28px rgba(108,1,66,.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
  backdrop-filter: blur(22px) saturate(135%) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-proof {
  background: var(--service-purple) !important;
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-black,
body.sp-body.service-calm .sp-page.service-brief .service-panel-purple {
  background: var(--service-purple) !important;
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-red {
  background: var(--j-red) !important;
  color: var(--j-yellow) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow {
  background: var(--j-yellow) !important;
  color: var(--j-red) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-red,
body.sp-body.service-calm .sp-page.service-brief .service-panel-red h2,
body.sp-body.service-calm .sp-page.service-brief .service-panel-red p,
body.sp-body.service-calm .sp-page.service-brief .service-panel-red li,
body.sp-body.service-calm .sp-page.service-brief .service-panel-red span {
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow,
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow h2,
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow p,
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow li,
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow span {
  color: var(--service-plum) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-purple,
body.sp-body.service-calm .sp-page.service-brief .service-panel-purple h2,
body.sp-body.service-calm .sp-page.service-brief .service-panel-purple p,
body.sp-body.service-calm .sp-page.service-brief .service-panel-purple li,
body.sp-body.service-calm .sp-page.service-brief .service-panel-purple span,
body.sp-body.service-calm .sp-page.service-brief .service-panel-black,
body.sp-body.service-calm .sp-page.service-brief .service-panel-black h2,
body.sp-body.service-calm .sp-page.service-brief .service-panel-black p,
body.sp-body.service-calm .sp-page.service-brief .service-panel-black li,
body.sp-body.service-calm .sp-page.service-brief .service-panel-black span {
  color: var(--service-paper) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel .service-stamp {
  border-color: currentColor !important;
  background: transparent !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel-yellow .service-stamp {
  background: var(--service-paper) !important;
}
body.sp-body.service-calm .sp-page.service-brief .service-panel .service-panel-action {
  background: var(--service-paper) !important;
  border-color: var(--service-paper) !important;
  color: var(--service-purple) !important;
}
.service-panel-action { margin-top: 34px; }
body.sp-body.service-calm .sp-page.service-brief .ads-chooser h2 {
  color: var(--service-plum) !important;
  -webkit-text-fill-color: var(--service-plum) !important;
}
body.sp-body.service-calm .sp-page.service-brief .brand-chooser h2 {
  color: var(--service-plum) !important;
  -webkit-text-fill-color: var(--service-plum) !important;
}

/* SEO is a static information guide, not a selection flow. */
body.sp-body.service-calm .seo-hero { background: var(--service-purple) !important; }
body.sp-body.service-calm .seo-hero .sp-title mark { color: var(--j-red) !important; -webkit-text-fill-color: var(--j-red) !important; background: var(--j-yellow) !important; }
body.sp-body.service-calm .seo-guide {
  padding: clamp(72px, 10vw, 130px) clamp(24px, 7vw, 110px);
  background: var(--j-yellow) !important;
  color: var(--service-purple) !important;
}
body.sp-body.service-calm .seo-guide-intro {
  width: min(100%, 1120px);
  margin: 0 auto clamp(58px, 8vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 7vw, 100px);
  align-items: end;
}
body.sp-body.service-calm .seo-guide-intro .sp-eyebrow { grid-column: 1 / -1; margin: 0; }
body.sp-body.service-calm .seo-guide-intro h2 {
  margin: 0;
  max-width: 10ch;
  color: var(--service-purple) !important;
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 900;
  line-height: .86 !important;
  letter-spacing: -.065em !important;
}
body.sp-body.service-calm .seo-guide-intro > p:last-child {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 650;
  line-height: 1.6;
}
body.sp-body.service-calm .seo-guide-grid {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--service-purple);
}
body.sp-body.service-calm .seo-guide-card {
  padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 36px);
  background: var(--service-paper) !important;
  color: var(--service-purple) !important;
  border-right: 1px solid var(--service-purple);
}
body.sp-body.service-calm .seo-guide-card:first-child { padding-left: 0; }
body.sp-body.service-calm .seo-guide-card:last-child { padding-right: 0; border-right: 0; }
body.sp-body.service-calm .seo-guide-number {
  color: var(--j-red) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
}
body.sp-body.service-calm .seo-guide-card h3 {
  margin: 26px 0 18px;
  color: var(--service-purple) !important;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  line-height: .95 !important;
  letter-spacing: -.04em !important;
}
body.sp-body.service-calm .seo-guide-card p,
body.sp-body.service-calm .seo-guide-card li { color: var(--service-purple) !important; }
body.sp-body.service-calm .seo-guide-card p { margin: 0; line-height: 1.55; }
body.sp-body.service-calm .seo-guide-card ul { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--service-purple); }
body.sp-body.service-calm .seo-guide-card li { padding: 12px 0; border-bottom: 1px solid var(--service-purple); font-weight: 700; line-height: 1.35; }
body.sp-body.service-calm .seo-direct-cta { background: var(--j-red) !important; color: var(--j-yellow) !important; }
body.sp-body.service-calm .seo-direct-cta .sp-button { background: var(--j-yellow) !important; border-color: var(--j-yellow) !important; color: var(--j-red) !important; }
body.sp-body.service-calm .seo-direct-cta .sp-button:hover { color: var(--j-yellow) !important; background: transparent !important; }
@media (max-width: 780px) {
  body.sp-body.service-calm .seo-guide-intro,
  body.sp-body.service-calm .seo-guide-grid { grid-template-columns: 1fr; }
  body.sp-body.service-calm .seo-guide-card,
  body.sp-body.service-calm .seo-guide-card:first-child,
  body.sp-body.service-calm .seo-guide-card:last-child {
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid var(--service-purple);
  }
}